search

carbon-design-system / carbon

A design system built by IBM
https://www.carbondesignsystem.com
Apache License 2.0
7.84k stars 1.81k forks source link

[a11y]: Selectable Tile with AI label causes invalid markup #17237

Open janhassel opened 2 months ago

janhassel commented 2 months ago

Package

@carbon/react

Browser

No response

Operating System

No response

Package version

1.61.0

React version

No response

Automated testing tool and ruleset

Manual testing

Assistive technology

No response

Description

When adding an AI label to a SelectableTile, the AI label and therefore a popover triggered by a button are descendants of a role="checkbox":

<div
  class="cds--tile cds--tile--selectable cds--tile--slug slug-selectable-tile"
  role="checkbox"
  …
>
  <span><svg>…</svg></span>

  <label>…</label>

  <div class="cds--slug">
    <span class="cds--popover-container">
      <button>…</button>
      <span class="cds--popover">…</span>
     </span>
  </div>
</div>

According to WAI-ARIA 1.2, all descendants of a role="checkbox" are presentational, meaning the button loses its semantics.

ARIA in HTML also specifically states the allowed descendants elements with a checkbox role:

Phrasing content, but with no interactive content descendants, and no descendants with a tabindex attribute specified.

WCAG 2.1 Violation

No response

Reproduction/example

https://react.carbondesignsystem.com/?path=/story/components-tile--with-ai-label

Steps to reproduce

See markup pasted above

Suggested Severity

Severity 2 = User cannot complete task, and/or no workaround within the user experience of a given component.

Code of Conduct

tay1orjones commented 1 week ago

Thanks for reporting this one, it's the same thing we're running into with the table header cells https://github.com/carbon-design-system/carbon/issues/16031

Might be that the only way to avoid this is to move the AILabel outside the tile dom and then visually reposition it atop the tile.