Problem/Motivation

The auxiliary "summary" line within summary elements are intermittently flagged for low contrast in Axe.

Summary summary on URL alias field in light mode.

The WebAIM contrast checker also reports a failure (ratio: 4.44:1).

This does not occur on the analogous summary within vertical tabs menu items (the UI control that shows a given tab panel), which uses the same color (var(--admin-color-text-soft)).

The problem seems to be that the details version has opacity: 0.8.

Selector:

summary[aria-controls="edit-path-0"] > .details__summary-summary

Snippet:

<span class="details__summary-summary">No alias</span>

WCAG: SC 1.4.3 Contrast (Minimum) (Level AA)

Steps to reproduce

  1. Install with the standard profile.
  2. Apply the test Article recipe (drush recipe core/tests/fixtures/recipes/article_content_type).
  3. Log in as admin.
  4. Go to node/add/article.
  5. Expand the advanced form sidebar on the right.
  6. Run a scan with the Axe DevTools browser extension until the error occurs. It seems to be intermittent.

Proposed resolution

Remove the opacity property.

Also check dark mode.

Remaining tasks

User interface changes

Introduced terminology

API changes

Data model changes

Release notes snippet

CommentFileSizeAuthor
details-summary-summary-contrast-error.png30.37 KBkentr

Issue fork drupal-3623388

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

kentr created an issue. See original summary.

kentr’s picture

kentr commented
Issue summary: View changes
kentr’s picture

kentr commented
Issue summary: View changes
kentr’s picture

kentr commented
Issue summary: View changes

On a positive note, I was alerted to this by the Default Admin test in #3338664: Migrate Nightwatch Axe tests to PHPUnit.

smustgrave’s picture

smustgrave commented
Issue tags: +Novice

Should be a pretty easy fix for someone.

kentr’s picture

kentr commented
Issue summary: View changes
kentr’s picture

kentr commented
Issue summary: View changes
mherchel’s picture

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

Yeah, lets just remove the opacity ruleset.

gábor hojtsy made their first commit to this issue’s fork.

gábor hojtsy opened merge request !17150

gábor hojtsy’s picture

gábor hojtsy
he/him
Primary language Hungarian
Location Hungary
commented
Status: Active » Needs review

Check this :) Sorry for not leaving to novices, time is VERY TIGHT now.

bernardm28’s picture

bernardm28 commented
Status: Needs review » Reviewed & tested by the community

Looks good.

catch’s picture

catch
he/him
Primary language English
commented
Version: main » 11.4.x-dev
Status: Reviewed & tested by the community » Fixed

Committed/pushed to main and cherry-picked to 11.x and 11.4.x, thanks!

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

  • catch committed 67a1bbf5 on 11.4.x 
    fix: #3623388 Details summary summary has low contrast

By: kentr
By:...

  • catch committed c49769d1 on 11.x 
    fix: #3623388 Details summary summary has low contrast

By: kentr
By:...

  • catch committed 1b8c7c58 on main 
    fix: #3623388 Details summary summary has low contrast

By: kentr
By:...

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.