Skip to content

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

Open
@dbjorge

Description

@dbjorge

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    commonsIssues in the common code (lib/commons)fixBug fixes

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions