Skip to content

fix(FieldLabel): set the label of the labelTooltip info icon - #6414

Open
GuillaumeMMM wants to merge 1 commit into
facebook:mainfrom
GuillaumeMMM:fix-field-labeltooltip-sr
Open

GuillaumeMMM wants to merge 1 commit into
facebook:mainfrom
GuillaumeMMM:fix-field-labeltooltip-sr

Conversation

@GuillaumeMMM

@GuillaumeMMM GuillaumeMMM commented Sep 21, 2026

Copy link
Copy Markdown

User impact

Users of assistive technologies such as screen readers cannot get the information of the FieldLabel's labelTooltip. This PR adds the labelTooltip to the accessible name of the field's label.

Problem and solution fit

<Tooltip content={labelTooltip} placement="above">
          <Icon icon="info" size="sm" color="inherit" />
</Tooltip>

In this code from FieldLabel.tsx, the info icon component is called without a label prop. Therefore the icon's span container and its svg bear the attribute aria-hidden="true".
The Tooltip components links the content prop to its child with the aria-describedby attribute.

Since the icon has no accessible name, the aria-describedby is never appended to the accessible name, and thus never read.

The solution I suggest in this PR is to simply add the labelTooltip as the label of the icon, thus automatically removing the aria-hidden="true" of the icon's container, and adding to it an aria-label with the value of the tooltip's content.

On a side note, with this solution the aria-describedby still has no effect because the svg is still missing an accessible name. Another solution could be to add the reference of the tooltip's content to the aria-describedby attribute of the input itself.

Evidence

  • Reproduction before the change:
    Turn on screen reader, focus an input that has an icon tooltip, the tooltip's content is not announced
  • Result after the change:
    The tooltip's content is announced right after the input's label

Fixes #6413

@meta-cla meta-cla Bot added the CLA Signed This label is managed by the Meta Open Source bot. label Sep 21, 2026
@vercel

vercel Bot commented Sep 21, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
astryx Ready Ready Preview Sep 21, 2026 8:09am UTC

Request Review

@astracat-bot

astracat-bot Bot commented Sep 21, 2026

Copy link
Copy Markdown

AI review status for this pull request.

Review status Updated
Waiting for review (for maintainers only) Sep 21, 2026, 5:34 PM UTC

@github-actions github-actions Bot added community Authored by a community contributor (not on the eng/design team) needs:code-review High-risk change (new package/component/API) — needs human code review before merge labels Sep 21, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed This label is managed by the Meta Open Source bot. community Authored by a community contributor (not on the eng/design team) needs:code-review High-risk change (new package/component/API) — needs human code review before merge

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug] Field's labelTooltip not announced by screen readers

1 participant