Skip to content

fix(Form): use the visible label as the accessible name of the submit and reset buttons - #133

Open
gdevenyi wants to merge 1 commit into
mainfrom
fix/form-button-accessible-name
Open

gdevenyi wants to merge 1 commit into
mainfrom
fix/form-button-accessible-name

Conversation

@gdevenyi

Copy link
Copy Markdown
Contributor

Summary

 <Form>
   <Button type="submit"
-    aria-label="Submit"
   >{submitBtnLabel ?? t('form.submit')}</Button>
   <Button type="button"
-    aria-label="Reset"
   >{t('form.reset')}</Button>

The visible text now gives the accessible name. This fixes a custom submitBtnLabel and the translated default labels (WCAG 2.5.3).

Evidence

  • Before: new tests in Form.test.tsx fail on main:
    × button accessible names > should name the submit button after a custom submitBtnLabel
    × button accessible names > should not override the visible text of either button with an aria-label
    Tests  2 failed | 25 passed (27)
    
    After: pnpm test: 42 files, 249 tests pass. pnpm lint passes.

Merge Danger

Door: two-way

Blast Radius: selectors

Downstream tests that find a button with a custom or translated label by the name "Submit" or "Reset" will fail. They must use the visible label. The Open Data Capture Playwright suite does this. English forms with the default labels do not change.

Closes #108

🤖 Generated with Claude Code

https://claude.ai/code/session_01W53iUP9ECVtoteopM7QtC7

… and reset buttons

The buttons had hard-coded aria-label values ("Submit", "Reset"). These
overrode a custom submitBtnLabel and the translated default labels.

Closes #108

Co-Authored-By: Claude Fable 5.2 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01W53iUP9ECVtoteopM7QtC7
@gdevenyi
gdevenyi requested a review from joshunrau as a code owner November 10, 2026 04:17
Copilot AI balanced review requested due to automatic review settings November 10, 2026 04:17

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot was unable to review this pull request because the user who requested the review has insufficient remaining quota. Try requesting a review at a lower effort level.

An organization owner can choose the repository organization as the billing source for reviews requested by members with a paid Copilot license. Learn about Copilot code review billing.

This branch has not been deployed

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

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

2 participants