Make the active menu item visually stand out more

Thanks @rkoller. Thanks for documenting this all. It would be great to help make it easier to identify what elements are active. We can make this easier for everyone to identify.

Hi @rkoller. First of all thank you for taking the time to work on this! We're working on a new design system that will change colors and, more important, states. More info in #3426606: [META] Implement the final design system.
So I am postponing this until that one is ready. Sorry for not communicating this work in progress properly sooner! It's been complicated to coordinate all the moving parts to have them ready on time.

We'd like to review this against the new designs that are currently implemented as part of the Drawer system.

Designs have been updated to comply with the accessibility requirements. Updating the issue summary accordingly.

Currently #00389a is used as (-admin-toolbar-color-blue-650) and #002566 is used as ( --admin-toolbar-color-blue-700). Hence introduced a new variable (--admin-toolbar-color-blue-670) for #002e9a and used the variables on css files. Please suggest if the variable name is good. If any changes that would be required, am happy to update the same.
Thank you!

The hover styles on submenu child items are not as per the design shared above. Attaching sccreencapture

I've added couple of feedbacks

This is a visual change, please add before and after screenshots so we can compare and see the results.

per #20.

before/after should go into the user interface section of the summary.

I just checked the latest changes in the MR8446. Changes are applied cleanly but I think there are more updates required. For eg., the Content menu font color in active state is still not updated. I think the current font color changes are not getting applied to menus such as Blocks, Content, Files and Help. Also, on hovering the menu the outline color is changing but font color remains the same. I'm attaching few screenshots which shows the color code also in the styles for reference. As I'm unable to access the Figma design dev mode, I couldn't verify the exact color codes.

This is listed on #3391723: [PLAN] Accessibility review for new Navigation bar but there hasn't been an update here for 18 months. Often the answer to 'is this still relevant' on core issues is 'unfortunately yes' but given there's been a lot of change in Navigation in the past 18 months, it feels worth checking whether this was affected by other changes in the meantime?

The colors and menu layout have changed, but it looks like the underlying issue is still relevant.

Here are some screenshots of the three cases on 11.x.

I think the titles for case b) and c) in the IS are swapped, so I ordered these based on the case descriptions.

1. Top-level menu item in active state:
   
   
2. Sub-menu menu item in active state that is also added to the shortcuts:
   

   

3. Top-level menu item in active state that is also added to the shortcuts (special third case):
   

   

I'll give the MR a go.

Working on rebasing & incorporating changes into current styles.

On second thought, I think it would be better to create a new MR. There are rebase conflicts, and I'm not sure that the current MR is the right approach.

To me it looks like the design specifies dark gray dots to the left of the active item. Here's a screenshot of the Toolbar Menu Items slide on the Figma page linked from the IS, with the dots highlighted by the arrows.

The dot is currently present for active "grandchild" items, but not for items at higher levels. Example grandchild: Structure > Display modes > View modes

So I'd say that to match the design, the change for this needs to include the dot and the color of the active menu item text and icon. Looks like color change would be --toolbar-button-current-color: var(--admin-toolbar-color-gray-990);.

It looks like the active item background color matches the design. With a color picker on the design file, I get #f3f5f9, same as what I see in devtools (for -admin-toolbar-color-gray-050).

The hover colors don't currently match the design, but I question whether they need to change in order to make the active item stand out more. I defer to the accessibility gurus on this.

In a meeting on accessibility and Navigation with Mike Herchel, Ralf Koller & Kat Shaw we discussed this issue and decided that this was a best practice that we should implement, but not currently breaking a WCAG 2.2 AA SC. We do hope that more can be done to address this. There was support for the ideas that @kentr is highlighting here.