Contrib.social

Increase the visibility of the active primary tab

Open on Drupal.org →
Created on 13 February 2025, 2 months ago

Problem/Motivation

At the moment the active primary tab is hard to recognize by just a glimpse of an eye, like it is possible Claro, in Gin you have to actively focus to recognize the active tab. In Claro, the active tab has a button label in the blue accent color and a solid blue bottom border with a width of three pixels. That way it is possible to clearly distinguish the current active tab from the other available tabs.

In Gin the active tab uses a "chip" design instead of employing a bottom border. The color contrast of the tab label in the current accent color against the chip color is high enough to be compliant with SC1.4.3 - the label is clearly readable, but the active state is not clearly recognizable.

State is currently communicated in two ways, first the background color of the chip underlying the active primary tab against the background color or the page, second the color of the label of the active primary tab against the color of none active primary tabs, both are not meeting SC1.4.11. So even if someone would not be able to notice the "chip", the difference in color contrast between the regular and active primary tab label would also be too insignificant, plus in the latter case the state change would only be based on color which would be against SC1.4.1. (See the table in https://docs.google.com/spreadsheets/d/1won35PxhRFexJYE8FmZ4DCNTo7xEAxC8... or primary_tabs.xlsx.zip → for more details)

In Forced Colors Mode the situation worsens , neither the chip labelling of the active primary tab is visible nor the color of the active primary tab is being changed.

Discussed and iterated on the issue with @mgifford, @the_g_bomb, @katannshaw, and @drupa11y

Steps to reproduce

  • Check the header section on for example admin/structure/types/manage/blog/form-display. For testing the issue in Forced Colors mode make sure that you’ve switched to dark mode before.

Proposed resolution

  • Increase the color contrast for the chip to at least 3:1 against --gin-bg-app-rgb, so that SC1.4.11 is met for every accent color in light and dark mode.
  • Make sure the active state is communicated and visible in Forced Colors mode

Remaining tasks

User interface changes

API changes

Data model changes

🐛 Bug report
Status

Active

Version

4.0

Component

User interface

Created by

🇩🇪Germany rkoller Nürnberg, Germany

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

Merge Requests

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024