Skip to content

Decimal component – Prefix not correctly announced by screen readers #7843

@hagad

Description

@hagad

Description

There is an accessibility issue with the Decimal component when using the prefix prop.

Issue:
When navigating a Decimal input using a screen reader (VoiceOver) in Safari, the prefix (e.g., £ or $) is announced as a separate element instead of being included as part of the input’s accessible name.

Expected behavior:
Screen readers should announce adornments as part of the field label, not as independent text, i.e. "Balancing charge, £" instead of just "£"

Reproduction

https://carbon.sage.com/?path=/docs/decimal-input--docs

Steps to reproduce

Screen.Recording.2026-03-17.at.17.07.06.mov

JIRA ticket numbers (Sage only)

No response

Suggested solution

No response

Carbon version

158.36.0

React version

v17

Design tokens version

No response

Relevant browsers

Safari

Relevant OSs

MacOS

Assistive technologies

No response

Additional context

No response

Confidentiality

  • I confirm there is no confidential or commercially sensitive information included.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions