zendeskgarden/react-components

Icon Button component does not get labelled by Tooltip programmatically

Closed this issue · 4 comments

jgorfine-zendesk commented

Expectations

Icon Button must have an accessible name. This is different from an accessible description, which defined in the latest WAI-ARIA spec as:

...additional information, related to an interface element, that complements the accessible name.

Reality

axe-core flags the Icon Button component with a critical button-name issue.

Zendesk A11y Tools flags the out-of-the-box Icon Button component for having a button-name issue

Selector: button[aria-describedby="1val-tooltip_1.0.4"]

Rule ID: button-name

Issue: Buttons must have discernible text

Description: Ensures buttons have discernible text

Recommendation: Fix any of the following: Element does not have inner text that is visible to screen readers aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute Element's default semantics were not overridden with role="none" or role="presentation"

Impact: critical

Tags: cat.name-role-value,wcag2a,wcag412,section508,section508.22.a,ACT

HTML: <button tabindex="0" aria-describedby="1val-tooltip_1.0.4" data-garden-container-id="containers.tooltip" data-garden-container-version="1.0.4" data-garden-id="buttons.icon_button" data-garden-version="8.64.0" type="button" class="StyledButton-sc-qe3ace-0 StyledIconButton-sc-1t0ughp-0 eAxVVY hMXJNg">

and screen readers, like VoiceOver, don't always know what the name of the Icon Button is:

Screenshot of VoiceOver Form Controls menu listing one unlabelled button and two labelled buttons

Steps to Reproduce

Icon Button, out of the box

Computed name for the out-of-the-box Icon Button is blank

Icon Button, with aria-label declared again

Computed name and description for the Icon Button is "Leaf," when aria-label is provided

Icon Button, with aria-label declared again & aria-describedby unset

Computed name for the Icon Button is "Leaf," when aria-describedby is undefined

Demo

CodeSandbox

Fine Print

  • Component: Icon Button
  • Version: 8.64.0 (latest at this time)
  • Browsers: all
jzempel commented

Repeating text with an aria-label is Garden's default recommended usage (see code for that example). The IconButton itself could probably be enhanced with useText so that the developer is prompted to provide this important piece of information.

/cc @smritimadan

  • 👀1
jgorfine-zendesk commented

That example happens to demonstrate the risk in asking consumers to repeat text: they don't match. In the example, the Tooltip reads Leaf while the ARIA label reads leaf:

The code snippet used in the Default Icon Button example on the Garden website

While it may not seem like a huge deal in this particular example, this mismatch could be confusing for screen reader users who're seeing one label and hearing another, depending on what values get passed in. After all, not all screen reader users have low/no vision.

There's an opportunity here to make the component more robust by having the button be labelled by the Tooltip via aria-labelledby, under the hood.

geotrev commented

Worth calling out: as consumers build experiences with shadow roots, using aria-labelledby becomes broken/inaccessible. This is primarily an issue if the Tooltip is impelmented with a portal (via Garden's appendToNode prop).

Until the current AOM proposal moves into phase 2 and browsers implement a node ref alternative to id ref attributes, it's unfortunately a non-starter. :(

jzempel commented

Closing for now as there's no plan to address the issue at this time. We'll revisit if it becomes a more prominent audit topic.