Header accessibility for search and hamburger

Contribute Bug

AI-generated summary

A discussion on header accessibility for search and hamburger menus was started by Karl_Romanowski, who pointed out that pressing TAB on a Discourse site does not visually highlight the search bar and skips the hamburger menu. codinghorror agreed that this is a valid point and questioned the intentional design choice of not showing tab-select selection outlines on search or hamburger. joffreyjaffeux found that the CSS property outline: 0; was applied to the btn-flat class, which was likely a design choice for other elements.

@awesomerobot acknowledged the issue and started working on a fix. They later announced that a fix had been pushed to GitHub (commit), which added an empty href to make the hamburger menu tabbable and changed the :focus styles to match :hover for menu items. codinghorror confirmed that the fix works, and Karl_Romanowski thanked @awesomerobot for the quick turnaround, noting that the only remaining issue is that theme options don’t get focus on this particular site.

1

  1. Visit a Discourse site, like meta.discourse.org

  2. Press TAB, Discourse logo is highlighted.

  3. Press TAB, search gets focus but no visual cue.

  4. Press TAB, hamburger menu is skipped and avatar gets focus. Expected hamburger button to have focus.

5 Likes
2

This is a valid point, we indeed don’t show tab-select selection outlines on search or hamburger @awesomerobot – but we do show it on the user avatar at upper right, immediately adjacent to the other two! I wonder if that’s intentional?

3

From the code it looks intentional. It’s btn-flat which has the css property outline: 0;. btn-flat was probably thought for other places (not sure what are the valid use of hiding outline if you are not having another visual feedback for focus?) and used here without thinking about this?

3 Likes
4

Yeah, looks like there was a general change to btn-flat for something else, and the header wasn’t updated.

Also, not sure why the hamburger isn’t selectable at all… seems like a different regression there. I’m looking at it now and will have fixes shortly.

3 Likes
5

Just pushed a fix

https://github.com/discourse/discourse/commit/a4b8813a02fe2e915df4c1ac407b6997d688367e

The hamburger menu wasn’t tabbable because it doesn’t have an href (I just added an empty one, which works fine).

For the other menu items, I set the :focus to be the same as :hover

There were a few items within the menus that weren’t tabbable, so I fixed those too.

13 Likes
6

Confirmed looks good now to me, what do you think @Karl_Romanowski?

7

Tabbing through the header works great now, turn around time on that was incredibly quick too!

The theme options don’t get focus on this site but that shouldn’t effect most installs.

7 Likes