Skip to content

Form's submit button ignores submitBtnLabel for its accessible name (hardcoded aria-label="Submit") #108

Description

@joshunrau

Summary

Form's submit button hardcodes aria-label="Submit" regardless of submitBtnLabel, so its accessible name never matches its visible label.

Where

src/components/Form/Form.tsx — the submit button's aria-label is a literal, not derived from submitBtnLabel.

Effect

The visible text and the accessible name disagree whenever a caller passes a custom label. Confirmed in Open Data Capture on two forms:

Visible label Accessible name
"Login" "Submit"
"Save" "Submit"

This is a WCAG 2.5.3 Label in Name failure: a speech-input user saying "click Save" cannot activate the button. It also means every test that targets the button by its visible label has to use getByRole('button', { name: 'Submit' }) instead — which is how the whole Open Data Capture Playwright suite currently does it.

Suggested fix

Derive the aria-label from submitBtnLabel when one is provided, falling back to "Submit" only when it is not. If the label is already rendered as the button's visible text content, the aria-label may be unnecessary altogether — an accessible name computed from content would track the visible label automatically.

Notes

Found while writing end-to-end coverage for Open Data Capture, which consumes this package.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions