Problem/Motivation

On the regional settings page (/admin/config/regional/settings) in the Default time zone select list the optgroup labels styling isn't applied in all browsers leading to a too low color contrast. Tested on MacOS 10.13.6 (High Sierra) with

Firefox 98.0.2
time zone select list with optgroup labels with correct styling and contrast

Chrome 99.0.4844.83 (Fails SC 1.4.3)
time zone select list with optgroup labels without styling and too low contrast

Safari 13.1.2 (Fails SC 1.4.3)
time zone select list with optgroup labels without styling and too low contrast

I was unable to find the CSS color for the optgroup label and only used the color picker to check the color contrast for the label so it is not the exact ratio but the label color for chrome and and safari is around `#C6C5CB` which leads to a contrast of ~ `1,7:1` but the goal is `4,5:1`. In Firefox with bold italic optgroups it meets the success criterion with ease.

Steps to reproduce

1. go to /admin/config/regional/settings
2. click Default time zone
3. scroll to labels

CommentFileSizeAuthor
optgroup_safari.png34.46 KBrkoller
optgroup_chrome.png33.87 KBrkoller
optgroup_firefox.png39 KBrkoller

Comments

rkoller created an issue. See original summary.

rkoller’s picture

rkoller
he/him
Primary language German
Location Nürnberg, Germany
commented
Issue summary: View changes
rkoller’s picture

rkoller
he/him
Primary language German
Location Nürnberg, Germany
commented
Parent issue: » #3088562: [META] Assess Claro for WCAG colour contrast AA conformance
mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented

I don't think it's possible to style the <optgroup> labels (at least within Chromium). <select> elements have always been notoriously difficult to style, and the styling that happens either involves replacing the element with something custom (a route that we will not go down), or just styling the "closed" state. It looks like <optgroup> is the same.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.5.x-dev » 10.1.x-dev

Drupal 9.5.0-beta2 and Drupal 10.0.0-beta2 were released on September 29, 2022, which means new developments and disruptive changes should now be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

mgifford’s picture

mgifford
he/him
Primary language English
commented
Status: Active » Postponed
Issue tags: +WCAG 143

This sounds like an upstream browser support issue. Is there an upstream issue for optgroup lists in Chrome or Safari? Great that Firefox supports it.

Tagging for https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.