Button to admin menu highlighted in yellow

Since the recent update to 2.8.0.beta2, the button to the admin menu is highlighted in yellow.

grafik

I thought that Discourse wanted to tell me something, but even after searching the web and this forum, I have no clue what that could be.

Can someone please enlighten me?

2 Likes

I think it’s telling you that the keyboard focus is on that item. This was a recent #accessibility change:

After you’ve displayed the menu, try pressing Tab to move through the menu.

4 Likes

Yes, correct, as @simonk noted one way we were messing up is by not changing focus to overlays. The focus has to be in a sensible place as you navigate around the application.

4 Likes

So it is considered to be “working as intended” when I see this (mouse hovering over “Badges”)?

grafik

3 Likes

Hmm, not sure; do we need a hover state there @awesomerobot ?

1 Like

I think we might want to switch from :focus to :focus-visible in our CSS. It’s not supported on Safari yet, but it’s easy to fallback on :focus in that case.

From the spec:

If the active element matches :focus-visible, and a script causes focus to move elsewhere, the newly focused element should match :focus-visible.

So that means if you open the hamburger menu by tabbing to it (which enables the :focus-visible style), when the menu is opened, the :focus-visible style appears. If you open the menu with a pointer, then the :focus-visible style does not appear:

There is one downside, in a mixed input scenario where you open the hamburger with a pointer and then attempt to tab nav… the :focus-visible style isn’t visible on the first link (even though it’s technically focused), so it looks like it gets skipped. Not sure if there’s a workaround for this…

3 Likes

Since I’m (mostly) a mouse-user, that’s exactly what I would expect it to behave.

On the other hand, sometimes I’m using my smartphone with touchscreen: Same problem there, Admin is highlighted, indicating that there might be something important in the admin section that needs attention.

From the related screenreader topic I see that there seems to be a need for setting the focus somehow.
I would already be happy with the behaviour mentioned above for pointers.

1 Like

I have the same issue.