Page MenuHomePhabricator

[Screenreader UX] Conditionally show an anchor or button for the search toggle depending on JS support
Open, LowPublic

Description

Background

The search toggle on narrow screens is currently rendered an anchor element, even though it behaves as button most of the time. The anchor is used as a no-JS fallback.

Some browsers (macOS) don't focus <a> elements by default (only actual buttons are), and screenreaders read out the element as a link, which doesn't match the expected behavior. Originally reported in T311294

Instead we should render both <a> and <button>, and hide the appropriate element based off JS support

AC

  • The search toggle is a button when JS is enabled
  • The search toggle should have a descriptive label when it is a button
  • The search toggle is a link when JS is disabled

Event Timeline

bwang renamed this task from Conditionally show an anchor or button for the search toggle depending on JS support to [Screenreader UX] Conditionally show an anchor or button for the search toggle depending on JS support.Sep 16 2022, 5:46 PM