Problem/Motivation

Grandchild menu items don't have a focus indicator.

I believe this is a regression.

WCAG success criteria

SC 2.4.7 Focus Visible (Level AA)

Steps to reproduce

  1. Install the Navigation module.
  2. Log in as admin.
  3. In the Navigation sidebar, open the Configuration menu.
  4. Open the System sub-menu.
  5. Press TAB one time to move focus into the sub-menu.
Expected behavior

The "Basic site settings" item has a clearly visible green outline focus indicator with square corners.

Here's a screenshot of the Figma design for child and grandchild items.

Actual behavior

There is no outline focus indicator.

The text does change color, but the change is hard to discern.

Code snippet

Proposed resolution

Ensure that the grandchild menu items have the green outline focus indicator per the design.

Remaining tasks

User interface changes

Introduced terminology

API changes

Data model changes

Release notes snippet

CommentFileSizeAuthor
figma-design-showing-focus-indicators-for-grandchild-menu-items.png68.59 KBkentr

Comments

kentr created an issue.

rkoller’s picture

rkoller
he/him
Primary language German
Location Nürnberg, Germany
commented

as we've discussed on slack i ran into that as well. but i guess i know what the problem is. the focus is there i "think" (currently unable to test 100% cuz the admin theme appearance settings are broken on a fresh install). the only problem is the color of the focus outline for grandchild focus indicators. if you are looking in claro it is there but dark not green. same in the light mode in the admin theme, and in the dark theme the dark focus outline probably becomes invisible against the same dark background. have to revalidate as soon as the settings page is working again

my bad apologies. after setting up a fresh install of the main branch again i forgot to set the admin theme to admin again. that way i was still seeing the black focus outline for the grandchild menu items from claro. in the admin theme it is clearly missing. the only indication of a state change is the change of text color. but the focus it completely missing. and thank you for opening the issue!

kentr’s picture

kentr commented

For me, it's fully missing in Claro (not just dark). I hadn't even looked with the Admin theme yet.

I wonder if the problem intermittent like the focus indicator on the logo. I'll try to get more info.

rkoller’s picture

rkoller
he/him
Primary language German
Location Nürnberg, Germany
commented

ok retested on a clean install on the main branch with olivero in the front and admin theme in the dark theme in the backend.

on an admin page i have no visible grand child menu item outline. turns out it has a outline:0 that comes from elements.css. when i disable the property in devtools the outline become visible and green. the outline property comes now from admin-reset-style.css

on the front page in olivero i have a black/dark grand child menu item outline. turns out the outline for the black outline comes from base.css. disabling the propery in devtool again the outline becomes green. the outline property now comes from admin-reset-style.css as well.