[#48709] - [6.2] Cassiopeia: improve contrast of current-menu underline and subm…
- Pending
- Medium
- Build: 6.2-dev
- # 48709
- Diff
- Nikhil-sinhaa:fix/48408
User tests: Successful: Unsuccessful:
Pull Request resolves #48408.
- I read the Generative AI policy and my contribution is either not created with the help of AI or is compatible with the policy and GNU/GPL 2 or later.
Summary of Changes
Improves Cassiopeia navigation accessibility by making current-menu and hover underlines solid white and replacing the submenu keyboard-focus outline with a clearly visible solid outline, improving non-text contrast under WCAG 2.2 SC 1.4.11.
- Current-menu and hover underline: the white underline was drawn at
opacity: .2, giving about 1.82:1 against the dark header. It now usesopacity: 1(blocks/_header.scss). - Submenu keyboard focus outline:
1px dotted $gray-400is replaced with2px solid $gray-900(vendor/metismenu/_metismenu.scss).
Testing Instructions
- Apply the pull request changes and rebuild the Cassiopeia assets using the appropriate build command for your Joomla checkout, such as
npm run build:dev -- -n templates/site/cassiopeiaornpm run buildif applicable. - Open the Joomla frontend using the Cassiopeia template with a main navigation menu containing at least two submenu levels, such as the Sample Layouts menu.
- Navigate to a page where a top-level menu item is active, then move the pointer away. Verify that the current-menu underline is solid white against the dark header.
- Hover over top-level menu items and verify that the hover underline is solid white.
- Use the keyboard to navigate to a top-level menu item and open its submenu. Press
Tabto focus a first-level submenu link, then a second-level submenu link. - Verify that the keyboard-focus outline is solid, clearly visible against the white submenu background, and not clipped.
- Confirm that the changes do not affect menu navigation or keyboard accessibility.
Actual result BEFORE applying this Pull Request
- The current-menu underline is faint and difficult to distinguish against the dark header.
- The submenu focus outline is a thin, dotted light-grey line that is difficult to see against the white submenu background.
Expected result AFTER applying this Pull Request
- The current-menu and hover underlines are solid white against the dark header.
- The submenu keyboard-focus outline is a solid, 2px dark outline, clearly visible at both submenu levels.
Link to documentations
Please select:
-
Documentation link for guide.joomla.org:
-
No documentation changes for guide.joomla.org needed
-
Pull Request link for manual.joomla.org
-
No documentation changes for manual.joomla.org needed
| Status | New | ⇒ | Pending |
joomla-cms-bot
- | Category | ⇒ | NPM Change |
| Labels |
Added:
NPM Resource Changed
PR-6.2-dev
|
||
If that's the position used in the sample data then it should be fixed here as well
Well this is what the sample data captured, which seems to be addressed by the new indicator:
I'd vote to merge it and then assign a design system review to create a better focus indicator when "topbar" is chosen as the menu placement.
Good job we don't vote to decide anything then
@mbeganyi-a11y I'll look into fixing the topbar contrast issue and update the PR if I find a suitable solution. Thanks for pointing it out!
| Labels |
Added:
a11y
|
||
-Before
-After
Top-level items in the header and its topbar and below-top positions, and all footer menu levels, now get a white outline. Submenus on white keep the dark outline. The change is in _metismenu.scss and _footer.scss, on top of your original underline and outline fix.
@Nikhil-sinhaa Nice work to isolate the focus indicators; we're close. The only issues remain in the footer position where the drop-down arrows and their focus indicators are now a very low contrast against the background. But we're making progress.
The screenshots below show the two focus indicators in the footer. The first depicts the troublesome focus and default state of the drop-down arrows. The second depicts the top-level focus which looks good.
Change (_footer.scss only)
- Menu toggle buttons in the footer now use the footer text colour (white), so their focus outline is white too.
- Footer submenu links in the metismenu layout are now white
I have tested this item ✅ successfully on 6c3a142
The latest changes fix the footer focus, although the arrows I get are solid triangles and not just chevrons, as your most recent screenshot shows. Great work here, @Nikhil-sinhaa; thanks so much for your contribution to accessibility.
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/48709.
I have tested this item ✅ successfully on 6c3a142
The latest changes fix the footer focus, although the arrows I get are solid triangles and not just chevrons, as your most recent screenshot shows. Great work here, @Nikhil-sinhaa; thanks so much for your contribution to accessibility.
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/48709.
Thanks for testing and for all the feedback, @mbeganyi-a11y! Glad the footer focus is working now.
This is a really good effort, @Nikhil-sinhaa and it solves for most use cases, however, unfortunately, not all. (But this isn't a fault of yours, necessarily!)
If the menu is placed in the "topbar" region, the darker focus indicator becomes nearly invisible. See the screenshot below showing the indicator in that place:
If there is some way to ensure that the focus indicator is visible in all circumstances, it would solve this problem. However, I'm of the belief that this is a design system requirement and will hopefully be addressed in the coming months. Unless there's some way to make a custom focus indicator for the "topbar" nav placement.
Irrespective of this, I think this PR does a good job of improving the focus indicator in many circumstances, so I'd say it's better than the current implementation and should be merged as an intermediary solution between the current implementation and an updated design system. What do others think?