Focus indication clashes with active tab indication

Could we please check whether this issue is still occurring on the latest versions?

Thanks in advance!

Testing with Drupal Version 11.1.7-dev on simplytest.me.

Yes, the issue still exists.

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 and have 1.09:1 contrast with other tabs.

Super 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 focus state, would be slightly different: I'm seeing a different background color for the focus state 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.

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)

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!

I'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.

Thanks a lot Charles (@Charles Belov), once again for taking the time to provide more details on the suggested changes.

I'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.

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: ✨ Tabbing order does not satisfy 508 accessibility requirements Active .
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!

Testing 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.

Actually, 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.

Thank 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:

• Focus background color: #33a39d
• Focus and non-focus text color: #2d2d2d

Could you please try testing these changes and let us know if we missed or misunderstood anything in your last reply?

- 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.

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!

@charles belov: Was your comment at #9 meant for this issue or rather ✨ Tabbing order does not satisfy 508 accessibility requirements Active ?

It's a bit confusing...

Thank 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.

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

Yes 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.

[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.

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 option overall?

Once again, all your suggestions and advice are more than appreciated! 🙏
Thanks in advance!