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!

Yes, 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?

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

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

Not to override the browser's focus indicator

I made a few changes to the patch/merge request to:

• Revert the changes to the color or any focus styles on the links.
• Revert links styles to use User Agent's (UA) default indicator.

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:
✨ Use the Accessible Menu library to manage the menu structure Active
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 ✨ Tabbing order does not satisfy 508 accessibility requirements Active 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!

I'll review this.

Hi @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:

1. Vertical Toolbar: The focus indication is not working when the toolbar is set to vertical alignment.
2. Local Tasks Menu: The focus is also not functioning correctly for the Local Tasks menu item, regardless of whether the menu is in horizontal or vertical layout.

Do you think we should still keep some styles with the colors? (background/foreground)
Or just the outline styles could be enough?

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!

Nice 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!