Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

color-contrast incorrectly calculating background color of an element in closed <details> #3532

Closed
wojtekmaj opened this issue Jul 4, 2022 · 6 comments
Closed

color-contrast incorrectly calculating background color of an element in closed <details> #3532

wojtekmaj opened this issue Jul 4, 2022 · 6 comments
Labels
color contrast Color contrast issues fix Bug fixes pr A pr has been created for the issue
Milestone
Axe-core 4.5

Comments

@wojtekmaj
Copy link

Product: axe-core

Expectation: When calculating contrast ratio for an element in closed <details>, either:

  • take background color of open <details> element (might not be possible without page interaction, which could be a roadblock),
  • or don't take any background color at all, effectively skipping the color-contrast test for this element.
  • or if we really really would like to take background color of where the element would have been if the <details> element was open, ignore <details>'s siblings when calculating background colors, because they will be pushed down when <details> is eventually opened.

Actual: background color is taken from the place where the element would have been if the <details> element was open. Unfortunately, in our example, in this place we have a dark blue button which, when combined with black text, fails the test.

Motivation: Current behavior is obviously faulty.


axe-core version: checked on: 4.0.0, …, 4.1.0, …, 4.2.0, …, 4.3.0, …, 4.4.0, …, 4.4.2

Browser and Assistive Technology versions
Chrome 103.0.5060.53

Repro:

<html lang="en-US">
  <head>
    <style>
      span {
        position: relative;
      }

      button {
        background-color: darkblue;
        color: #fff;
      }
    </style>
    <title>color-contrast bug</title>
  </head>

  <body>
    <header>
      <h1>color-contrast bug</h1>
    </header>
    <main>
      <details>
        <summary>Summary</summary>
        <span>Some text</span>
      </details>
      <button>A blue button</button>
    </main>
  </body>
</html>
@wojtekmaj
Copy link
Author

It appears that the problem is in filteredRectStack function, which in this case, returns [span, button, main, body, html].

@WilcoFiers
Copy link
Contributor

Thanks for reporting. We'll take a closer look ASAP.

@straker
Copy link
Contributor

straker commented Jul 13, 2022

Looking at the issue, it appears we don't treat elements inside the <details> as hidden when the element is collapsed. As is, we think the <span> element is currently visible and positioned right above the button, so that's why we reporting the overlapping element.

I believe <details> elements have the open attribute when expanded, so we should be able to use that to determine visibility.

@straker straker added fix Bug fixes color contrast Color contrast issues labels Jul 13, 2022
@straker straker added this to the Axe-core 4.6 milestone Jul 21, 2022
@straker straker mentioned this issue Jul 25, 2022
Closed
@straker straker added pr A pr has been created for the issue needs discussion More discussion is needed to continue labels Jul 25, 2022
@straker
Copy link
Contributor

straker commented Jul 28, 2022

Need to discuss with Wilco the ramifications of saying elements inside closed detail elements are hidden as we may not run axe-core rules against them.

@straker straker removed the needs discussion More discussion is needed to continue label Aug 5, 2022
@straker
Copy link
Contributor

straker commented Aug 5, 2022 •
edited
Loading

We discussed this and the resolution is we'll update the is-hidden function to account for this. This means rules will not run against elements inside of a closed <details> elements and users will need to expand the details in order to get accessibility checks.

@straker straker mentioned this issue Aug 31, 2022
Merged
@WilcoFiers WilcoFiers modified the milestones: Axe-core 4.6, Axe-core 4.5 Sep 12, 2022
@WilcoFiers WilcoFiers removed the pr A pr has been created for the issue label Oct 12, 2022
@WilcoFiers WilcoFiers modified the milestones: Axe-core 4.5, Axe-core 4.6 Oct 17, 2022
@straker straker mentioned this issue Oct 17, 2022
Merged
@straker straker added the pr A pr has been created for the issue label Oct 17, 2022
@straker straker modified the milestones: Axe-core 4.6, Axe-core 4.5 Oct 17, 2022
@padmavemulapati
Copy link

Validated with the latest develop branch code base, and here for the test script, inside <details> closed tag

and are passing the color-contrast rule as it is counting the elements inside closed details as hidden

<main>
      <details>
        <summary>Summary</summary>
        <span>Some text</span>
      </details>
      <button>A blue button</button>
    </main>
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
color contrast Color contrast issues fix Bug fixes pr A pr has been created for the issue
Projects
None yet
Milestone
Axe-core 4.5
Development

No branches or pull requests
4 participants
@WilcoFiers @straker @wojtekmaj @padmavemulapati