Header accessibility for search and hamburger

Bug
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