The current major section of the toolbar is indicated via a difference in contrast. However, Focus is also indicated by the same difference and contrast. Further, the contrast between the inactive unfocused sections and the active and inactive focused sections is insufficient.
For instance, while on /admin/modules, with Local tasks active, I tabbed to Manage.
- Manage and local tasks have the same appearance.
- The contrast between the backgrounds of the inactive unfocused sections (#3E6E9A) and the active and inactive focused sections (#175186) is only 1.52 to 1 where I would expect 3.1.
1. Log in as admin
2. Go to /admin/modules
Expected result: It is clear which submenus are active, whether or not I have low vision.
Actual result: The Local task menus has a lighter background, and there is insufficient contrast to distinguish them from the other menus
3. Tab to Manage
Expected result: The currently active menu item is distinguishable from the focused menu item.
Actual result: Both Manage and List are underlined. It is also not clear that List belongs to the Local task menu and not to the Manage menu.
4. Refresh the page (Command-R on Mac Safari)
Expected result: It is clear which submenu is active, whether or not I have low vision.
Actual result: Both the Manage and Local tasks menus are highlighted, and there is insufficient contrast to distinguish them from the other menus.
| Comment | File | Size | Author |
|---|---|---|---|
| #20 | Issue 3442725 Screen Recording 2025-06-10 at 11.28.19 AM.mov | 14.72 MB | charles belov |
| #18 | admin-toolbar_after-verticle.png | 130.5 KB | tirupati_singh |
| #18 | admin-toolbar_after_local-task.png | 103.77 KB | tirupati_singh |
| #18 | admin-toolbar_local-task-no-focus.png | 116.53 KB | tirupati_singh |
| #18 | admin-toolbar_after-focus-moz.png | 101.68 KB | tirupati_singh |
Show commandsStart within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
changes
Comments
Comment #2
dydave commentedCould we please check whether this issue is still occurring on the latest versions?
Thanks in advance!
Comment #3
charles belovTesting with Drupal Version 11.1.7-dev on simplytest.me.
Yes, the issue still exists with regard to contrast. It can be debated whether bolding is sufficient to indicate the active tab; however, it may still present a cognitive challenge for some. I personally find their similar styling challenging, as I did not even notice the bolding until I was logging this information into this comment and previewed it.
Steps:
1. Go to Simplytest.me
2. Create a website using 11.1-dev
3. Login as admin
4. Go to manage, reports
5. Press the tab key until the focus is on Structure
Expected result: the focus is clearly indicated and is well distinguished from the active tab, and both are well distinguished from other tabs (3:1 contrast)
Actual result: the focus and active tabs are styled identically except for the active tab being in bold text, and have 1.09:1 contrast with other tabs.
Comment #4
dydave commentedSuper nice Charles (@Charles Belov)! That's very helpful, thanks a lot!
OK, no problem, it seems you have well identified the issue 👍
Sorry, but I'm still trying to understand the problem here 😅
I have tried reproducing the steps you detailed above at #3 and here is a screenshot of the result :
Browse to the reports page and use the tab key until the focus is on "Structure"
It would seem the styles for identifying an active link and the ones for the
focusstate, would be slightly different: I'm seeing a different background color for thefocusstate and the active one is bold and underlined, as you can see on the screenshot above (the "Structure"/focused and "Reports"/active menu links) .Could you please let me know what the problem could be exactly with the different styles: active and focused?
It would help greatly speeding up the resolution process if we could have a very clear understanding of the styles or elements to be fixed.
Would you know how that would translate in terms of CSS?
Would you have any suggestions in terms of the changes for the color contrast?
Or any of the other styles really, whether bold or underlined...
Any suggestions, advice or recommendations would be greatly appreciated.
Thanks in advance!
Comment #5
charles belovI'm not seeing a color background to the focused item, I'm seeing the same gray background on both the Report and Structure, as shown in my screen print.
But since you asked... And thank you for asking:
I suggest, just as Drupal inverts the colors on the active tab in the first row (Active Manage is black on white, other tabs are white on black), that you invert the colors on the active tab in the second row (Active Reports would be white on black, other tabs would remain black on white).
I also suggest that you not override the browser's default focus indicator with site-specific styling, but let the browser show its default focus outline, which varies by browser, just as the Drupal website does as of April 23, 2025. This would reduce cognitive load on the part of the user, as they would not have to figure out what the focus indicator was and could instead rely on the normal appearance of the focus indicator in their browser.
Comment #6
dydave commentedThanks a lot Charles (@Charles Belov), once again for taking the time to provide more details on the suggested changes.
I've been testing with the DEV version of the module, could that explain the difference with the screenshot I attached above at #4, where you could see the background of the Focused item is different from the Active one?
Could you perhaps try testing with the latest 3.x DEV version of the module?
If there still is an issue with the latest version, we would certainly be glad to look further into your recommendations and try translating these into CSS/JS code changes.
Otherwise, I also wanted to point out some major work is currently being done to greatly improve accessibility for the module in issue: #3286466: Tabbing order does not satisfy 508 accessibility requirements.
If you are interested in improved accessibility for the Admin Toolbar module, I strongly recommend you try testing the patch: I was very impressed 👍
Thanks again for your help on this issue!
Comment #7
charles belovTesting only admin_toolbar 3.x-dev version and Drupal 11.2 (without the other patch, which is a separate issue):
- Focus is shown differently from Active.
- Active is bold and underlined. I do find it odd that it's shown as a link (underlined), since it's active and I can't tab to it. That might be a separate issue.
- Focus is shown as a light green background. Styled as #abe4e0, it has only a 1.4:1 contrast with the white background, so is insufficient to use as an indicator to distinguish from unfocused. Using #33a39d for the focus background would provide 3.05:1 contrast with the unfocused background, which slightly exceeds the 3:1 contrast requirement for non-text contrast.
- But if we change the focus background to #33a39d, then the text color of #3d3d3d fails with text contrast of 3.55:1. We need to darken the text to #2d2d2d to get a contrast ratio of the required 4.5:1.
tl;dr: Use the following styling:
Focus background color: #33a39d
Focus text color: #2d2d2d
Non-focus background color: #ffffff
Non-focus text color: Can remain at #3d3d3d or be changed to #2d2d2d to be consistent with the text color for focus.
Comment #9
charles belovActually, I'm seeing inconsistent behavior as I navigate through the admin toolbar menu.
Focus on specific menu and submenu items are indicated with the green highlight.
Focus on Manage, Shortcuts, the user name, and Announcements are indicated by a thin underline.
Focus on Edit appears to use the browser default.
It would be good to unify the focus indicator so users don't have to hunt it out and perceive changes to it as they navigate through the menus. I would expect the focus indicator to be consistent through the entire menu navigation.
It took me a while to figure out the following: Light gray in a menu item indicates that there a menu subordinate to it. That is, Content, Structure, Configuration, and Reports are gray while Appearance, Extend, People, and Help are not. Additionally, in the Content and other such menus, if an item in that menu has a submenu, there is a chevron indicating the presence of more items, so the light gray there is cosmetic and does not require contrast remediation.
However, the menus for Content, Structure, Configuration, and Reports do not have a chevron, so the light gray currently cannot be considered cosmetic. Either the contrast between gray and white needs to be improved to 3:1 (while retaining a 4.5:1 contrast between text and background) or a down chevron needs to be added to Content, Structure, Configuration, and Reports to indicate the presence of an additional menu.
Comment #10
dydave commentedThank you so much Charles (@Charles Belov) for taking the time to test again this issue and for all the advice and suggested changes.
Thanks a lot for translating this issue into actionable technical changes.
Based on your suggestions above at #7, I created the initial merge request MR !149 above at #8 with the following changes:
Could you please try testing these changes and let us know if we missed or misunderstood anything in your last reply?
OK, no problem 🙂
Let's try to maybe focus on this color contrast change first, then we could always take a closer look at the active menu items styles.
Moving issue to Needs review for now, as an attempt to collect more comments, reviews and feedback on MR !149.
Feel free to let us know if you encounter any issues while testing the patch or have more suggested changes, we would surely be glad to help.
Thanks in advance!
Comment #11
dydave commented@charles belov: Was your comment at #9 meant for this issue or rather #3286466: Tabbing order does not satisfy 508 accessibility requirements?It's a bit confusing...Thanks a lot Charles! I didn't understand at first, but it seems indeed you have identified a different way to approach the issue.
From what I can see:
I "think" the styles of these items and components are provided by the Drupal Core Toolbar module.
In other words, if the
admin_toolbarmodule was disabled, these issues would still be occurring with the Core Toolbar module installed.This is probably why these items were considered out-of-scope in the
admin_toolbarmodule for which a specific method and styles were implemented.We "could" however try to think of a method to align closer with the styles defined by the Drupal Core Toolbar module and components so the navigation experience stays a bit more consistent.
Would you have any suggestions on how the module could perhaps better standardize its focus indicator?
Thanks in advance!
Comment #12
charles belovThank you for the clarification. I might have to file an issue against core then.
Anyway, yes, it passes. I must say a 4.5:1 contrast of background to text, while compliant, is a bit hard for me to read. If you could also darken the text on focus to #000000, that might help. That said, it's compliant. Unfortunately, there's no way to lighten the green background without breaking 3:1 contrast with the white.
[added] Actually, thinking about it, that's one more reason to use the browser's default focus indicator rather than coming up with your own.
There does seem to be a conflict with patch 138. For the following steps:
Steps:
1. Go to https://simplytest.me
2. Enter admin_toolbar for the project
3. Select 3.x-dev
4. Open the advanced options
5. Keep Drupal core 11.2-dev as the core version
6. Paste patch https://git.drupalcode.org/project/admin_toolbar/-/merge_requests/149.patch
7. Click add additional patch
8. Paste patch https://git.drupalcode.org/project/admin_toolbar/-/merge_requests/138.patch
Expected result: I get both the improvements in tabbing sequence provided by patch 138 and the contrast improvements provided by patch 149
Actual result: There is no evidence that admin toolbar is active. However, if I go to Extend, it shows that the admin toolbar module is in fact active.
And for the following steps:
Steps:
1. Go to https://simplytest.me
2. Enter admin_toolbar for the project
3. Select 3.x-dev
4. Open the advanced options
5. Keep Drupal core 11.2-dev as the core version
6. Paste patch https://git.drupalcode.org/project/admin_toolbar/-/merge_requests/138.patch
7. Click add additional patch
8. Paste patch https://git.drupalcode.org/project/admin_toolbar/-/merge_requests/149.patch
Expected result: I get both the improvements in tabbing sequence provided by patch 138 and the contrast improvements provided by patch 149
Actual result: I get the improvements in tabbing sequence provided by patch 138 but not the contrast improvements provided by patch 149
Comment #13
dydave commentedYes indeed Charles (@charles belov):
Both patches should not be applied at the same time, see my comment at:
#3286466-64: Tabbing order does not satisfy 508 accessibility requirements
Otherwise, your feedback on this particular patch is very helpful and constructive as usual, thanks a lot!
No problem: We could consider changing the font color to a darker #000000.
So essentially, we would be reverting or resetting all styles for the focus of the menu items?
Do you think that could be a better approach overall?
Once again, all your suggestions and advice are more than appreciated! 🙏
Thanks in advance!
Comment #14
charles belovYes, I do think that a best practice would be not to override the browser's focus indicator ever, as it increases cognitive load for the website visitor. The next best practice would be to be consistent, not to have every contrib module come up with its own focus indicator. I recognize that the admin site is distinguished from the visitor site.
@mgifford, would you want to weigh in on this?
Comment #15
mgiffordThanks for raising this @charles belov and engaging with this issue @dydave.
I will have to take a look. I'm on vacation this week but will try to circle back and explore this more.
@dydave thanks for the screenshot.
Comment #16
dydave commentedThanks a lot Charles (@Charles Belov) and Mike (@mgifford) and sorry for the late reply, but I have been quite busy lately with the 3.6.0 release and mostly fixing/answering more urgent requests.
Based on your suggestions at #14:
I made a few changes to the patch/merge request to:
I have tested this locally, moving the focus with my keyboard tab key and the indicator would seem to display as an outline box around the links, in my Chrome desktop browser.
Once again, we would greatly appreciate if you could please help us take a look at the updated patch and give us your reviews and feedback.
Do you think we should still keep some styles with the colors? (background/foreground)
Or just the outline styles could be enough?
Lastly, I would like to attract your attention on another related issue that was recently created:
#3526087: Use the Accessible Menu library to manage the menu structure
which gave me a lot to think about on the direction the module should be following in terms of accessibility support in general.
In short, the issue suggests switching module over to using the Accessible Menu CSS/JS library:
https://accessible-menu.dev/
which would be a major improvement in terms of accessibility, mostly covering #3286466: Tabbing order does not satisfy 508 accessibility requirements and probably other issues.
We have only just started investigating that issue as well, but we would be very happy to hear what you think about this library and idea.
Any additional suggestions, comments or feedback would be greatly appreciated.
Thanks in advance!
Comment #17
tirupati_singh commentedI'll review this.
Comment #18
tirupati_singh commentedHi @Charles and @dydave,
I followed the steps to reproduce the issue and was able to replicate it. When a toolbar menu item is focused, the background color of the focused item changes as expected. After applying the provided MR as a patch, everything applied cleanly with no errors. Now, the focused menu item gets an outline based on the browser's default settings, and the background color has been unset as discussed earlier.
However, I encountered a couple of issues:
Additionally, while the current focus style is functional, I believe it could be improved by reintroducing a background color to the focused item, similar to how it was previously. This would make the focus more visually distinct and improve accessibility.
I've addressed the focus-related issues in the cases mentioned above. Please review the MR and let me know if any additional changes or adjustments are needed. I’ve also attached screenshots showing the behavior before and after the fix for reference.
Thanks!
Comment #19
dydave commentedNice work Tirupati (@tirupati_singh)! 👍
Thanks a lot for taking the time to understand the issue, test it, fix it and make some suggestions on potential improvements, it's super appreciated! 🙏
I definitely appreciate knowing I'm not the only one in the project following the different on-going issues.
Overall, I think you broadened a bit the scope of the issue, where we had probably not taken into account testing the vertical toolbar. 😅
I agree as well on restoring some background color contrast, but in this initial version of the merge request, I thought we could test resetting the focus styles first, see if it works: I would like to confirm this is what Charles actually meant by resetting the focus styles.
Then, discuss again with @Charles Belov and @mgifford so they could give us more recommendations on the changes, in particular, for the colors (back/fore-ground).
I would "guess" it would be a combination of the first commit (with the changes to the colors) and the following ones with the reset of the focus styles, but at least everything is in separate commits in the MR 👌
But at this point, we are mostly waiting on @Charles Belov feedback since he has the ability to test precisely the focus styles, the display in general and has been giving us great advice on this issue.
Any additional feedback, comments or suggestions on the merge request or this ticket in general would be greatly appreciated.
Thanks in advance!
Comment #20
charles belovThank you for that update. Here are my findings, tested in Firefox with factory settings:
1. The focus indicators for the most part are much better.
2. For some strange reason, only part of the focus indicator is showing up on some items. The worst of this is for Content, which only has a focus indicator on one side, making it ambiguous as to whether it applies to Content or to Structure. For the others, it shows up on three sides, which, while aesthetically unpleasant, is at least unambiguous.
Please see the screen recording that I took for the current state of patch 149. (Note: Sorry about needing to download the video. drupal.org doesn't let me embed it, and it is longer than 5 seconds so I can't convert to an animated GIF without violating WCAG 2.1 for Pause, Stop, Hide.)