[meta] Make project browser work with windows high contrast mode

Created on 21 June 2023, over 1 year ago
Updated 4 September 2024, 4 months ago

Problem/Motivation

When using dark mode, high contrast mode and force-colors, the borders and spinner appear in grayscale/reduced opacity. They should remain solid white to improve visibility and respect the high contrast setting.

Steps to reproduce

1. Use a chromium based browser (we tested on Microsoft Edge on Mac, also Chrome)
2. Open the "Rendering" panel in the dev tools
3. Check "Enable automatic dark mode"
4. Set forced-colors: active
5. Set prefers-contrast: more
6. Observe the Project Browser main page at /admin/modules/browse
7. Borders, and spinner appear in grayscale/reduced opacity

Screenshot: https://www.drupal.org/files/issues/2023-06-21/Screenshot%202023-06-21%2... โ†’
Spinner video: https://www.drupal.org/files/issues/2023-06-07/highcontrast.mp4 โ†’

Proposed resolution

Popular sites don't seem to have this issue. Update the CSS to make sure the high contrast settings are respected.

Remaining tasks

  • โœ… File an issue about this project
  • โ˜ Manual Testing
  • โ˜ Code Review
  • โ˜ Accessibility Review
  • โ˜ Automated tests needed/written?
๐Ÿ“Œ Task
Status

Needs work

Version

1.0

Component

Code

Created by

๐Ÿ‡บ๐Ÿ‡ธUnited States earthday47 New York

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @earthday47
  • ๐Ÿ‡บ๐Ÿ‡ธUnited States chrisfromredfin Portland, Maine
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia snehal-chibde

    hello @chrisfromredfin this looks fine. The borders are visible in solid white colour and the spinner too looks fine in dark mode. Checked this on version 2.0.x.
    Added screenshots for reference.

  • Status changed to Needs review 5 months ago
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia snehal-chibde

    Changing it to review state

  • Assigned to dishakatariya
  • Issue was unassigned.
  • Assigned to rkoller
  • Status changed to Needs work 4 months ago
  • ๐Ÿ‡ฉ๐Ÿ‡ชGermany rkoller Nรผrnberg, Germany

    I've checked the two pages in question as well. In regards of the settings in chrome and edge. i have ticked the "enable automatic dark mode" checkbox and the "Prefers contrast more" in addition to just "forced colors: active" which mimics the windows high contrast mode. In the following a list of issues on the browse and details page.

    Browse Page

    • Underline for the active browse tab has a too low color contrast (but that looks like a problem for claro in general?
    • Underline for the active source type has a grey underline instead of darkish yellow, which is slightly higher contrast but still under 3:1
    • strictly speaking the border of the search field and the select fields in the filter field set, with 2.9:1 with rgba(87, 87, 87, 1) against the black background is a slightly too small color contrast.
    • the icons in the list and grid button are invisible
    • the categories have a border that is none existent in the none high contrast mode
    • the border of the add and install button has the same border color problem like the search field and select fields and a color contrast of 2.9:1
    • the outline circle for the active page in the pager has a too low color contrast
    • in the page first, previous, next and last icon is close to invisible
    • the spinner when installing a module is also greyish with a probably too low color contrast. in regular mode the spinner is blue maybe in high contrast mode make it simply white?

    *i will continue the list for the detail page. but while installing a second module i broke my install again. got the installer page issue another time. i will assign the issue to me for now until the write up is done.

    We've agreed on slack to make this issue a meta issue and chop this issue up into smaller child issues.

  • Issue was unassigned.
  • ๐Ÿ‡ฉ๐Ÿ‡ชGermany rkoller Nรผrnberg, Germany
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia amin.ankit Gujarat (Vadodara)
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia amin.ankit Gujarat (Vadodara)
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia amin.ankit Gujarat (Vadodara)
Production build 0.71.5 2024