Contrib.social

Focus indication clashes with active tab indication

Open on Drupal.org →
Created on 23 April 2024, about 1 year ago

Problem/Motivation

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.

Steps to reproduce

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.

Proposed resolution

  • Use a different method than underline, such as a border, to indicate either current focus or currently active item.
  • Increase contrast between active main menu items and inactive main menu items.

Remaining tasks

User interface changes

API changes

Data model changes

🐛 Bug report
Status

Active

Version

3.4

Component

User interface

Created by

🇺🇸United States charles belov San Francisco, CA, US

Live updates comments and jobs are added and updated live.
  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

Sign in to follow issues

Comments & Activities

  • Issue created by @charles belov
  • Comment 7 days ago →
    🇫🇷France dydave

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

    Thanks in advance!

  • Comment 4 days ago →
    🇺🇸United States charles belov San Francisco, CA, US

    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.

  • Comment 4 days ago →
    🇫🇷France dydave

    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!

  • Comment 3 days ago →
    🇺🇸United States charles belov San Francisco, CA, US

    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.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024