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.

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

accessibleText incorrectly handles aria-labelledby pointing towards <style> elements #4704

Open
1 task done
dbjorge opened this issue Feb 8, 2025 · 0 comments
Open
1 task done
Labels
commons Issues in the common code (lib/commons) fix Bug fixes

Comments

@dbjorge
Copy link
Contributor

dbjorge commented Feb 8, 2025

Product

axe-core

Product Version

4.10.2

Latest Version

  • I have tested the issue with the latest version of the product

Issue Description

The accessibleText utility doesn't correctly handle cases where the target element is aria-labelledby an aria-hidden element that contains a <style> element. We noticed this in practice against some of the icon buttons at the top-right of https://github.com, which use a pattern along these lines:

<a href="..." aria-labelledby="tooltip-1"><img ...></a>
<tool-tip id="tooltip-1" aria-hidden="true">
  #shadow-root (open)
    <style>.stuff {}</style>
    <slot></slot>
  Tooltip content
</tool-tip>

...and the accessible text comes back like ".stuff {} Tooltip content" instead of the expected "Tooltip content".

Expectation

The 2 new test cases below should pass

Actual

They fail

How to Reproduce

  // /test/commons/text/accessible-text.js

  it('should not use <style> contents as a label, even if explicitly referenced with labelledby', () => {
    fixture.innerHTML = html`
      <div id="t1" aria-labelledby="style-id"></div>
      <style id="style-id">.shouldnt-be-part-of-accessible-text {}</style>
    `

    axe.testUtils.flatTreeSetup(fixture);
    const target = axe.utils.querySelectorAll(axe._tree, '#t1')[0];
    assert.equal(axe.commons.text.accessibleTextVirtual(target), '');
  });

  it('should not use <style> contents as a label, even if labelledby explicitly references a hidden container', () => {
    fixture.innerHTML = html`
      <div id="t1" aria-labelledby="hidden-container"></div>
      <div id="hidden-container" aria-hidden="true">
        <style>.shouldnt-be-part-of-accessible-text {}</style>
        Expected label
      </div>
    `

    axe.testUtils.flatTreeSetup(fixture);
    const target = axe.utils.querySelectorAll(axe._tree, '#t1')[0];
    assert.equal(axe.commons.text.accessibleTextVirtual(target), 'Expected label');
  });

Additional context

I already double checked in Chrome/Firefox/Safari that the browsers don't include the <style> contents in their calculations here.

@dbjorge dbjorge added ungroomed Ticket needs a maintainer to prioritize and label fix Bug fixes commons Issues in the common code (lib/commons) and removed ungroomed Ticket needs a maintainer to prioritize and label labels Feb 8, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
commons Issues in the common code (lib/commons) fix Bug fixes
Projects
None yet
Development

No branches or pull requests

1 participant