Skip to content

Audit usage of explicit aria-label on Button component implementations #66271

Open

Description

Description

It appears that in some cases some Button components use an explicit aria-label prop to render an aria-label HTML attribute, which in turn determines the icon button tooltip (if it's an icon button). Example:

<Tooltip text={ label }>
<Button
{ ...props }
className="component-border-radius-control__linked-button"
size="small"
icon={ isLinked ? link : linkOff }
iconSize={ 24 }
aria-label={ label }
/>
</Tooltip>

This pattern should be audited across the entire codebase as it's not a best practice.

Setting an explicit aria-label signals two possible cases, both less than ideal:

  • The aria-label is used in a way that the accessible name mismatches the Button text or tooltip. This is not OK for accessibility.
  • The aria-label is just unnecessary, like in the example above. In that case, the wrapping Tooltip component uses the same label variable used for aria-label. In this case, the Tooltip component can be removed and the variable passed to the label prop of the Butotn.

Step-by-step reproduction instructions

N/A

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

  • Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

  • Yes
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Labels

    [Focus] Accessibility (a11y)Changes that impact accessibility and need corresponding review (e.g. markup changes).[Package] Components/packages/components[Type] Code QualityIssues or PRs that relate to code quality

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions