Skip to content

feat(a11y): input and form-control accessibility - #1646

Open
AbhishekChorotiya wants to merge 1 commit into
mainfrom
feat/a11y-form-controls
Open

feat(a11y): input and form-control accessibility#1646
AbhishekChorotiya wants to merge 1 commit into
mainfrom
feat/a11y-form-controls

Conversation

@AbhishekChorotiya

@AbhishekChorotiya AbhishekChorotiya commented Jun 29, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Type of Change

  • Bugfix
  • New feature
  • Enhancement
  • Refactoring
  • Dependency updates
  • Documentation
  • CI/CD

Description

This PR improves the accessibility contract for payment form controls. It makes control names concise, ensures required and invalid states match the visible validation state, and keeps error messages programmatically associated with the control that needs attention.

It also introduces reusable accessibility helpers for repeated label fallback, optional error detection, visually hidden text, and invalid-state mapping, so later PRs can use the same behavior consistently instead of repeating local logic.

This is the first PR in the split accessibility stack and should be reviewed first. Later PRs build on these shared form-control semantics.

Closes #1645

How did you test it?

Validated as part of the completed accessibility stack. The checks cover the combined flow after all stacked PRs are applied, and the form-control behavior was also checked through the local payment-element accessibility smoke flow.

  • Ran npm run re:build on the completed accessibility stack.
  • Ran npm run test:hooks on the completed accessibility stack.
  • Ran npm run build on the completed accessibility stack.
  • Ran committed-range whitespace validation on the completed accessibility stack.

Checklist

  • I ran npm run re:build
  • I reviewed submitted code
  • I added unit tests for my changes where possible

@semanticdiff-com

semanticdiff-com Bot commented Jun 29, 2026

Copy link
Copy Markdown

Review changes with  SemanticDiff

@AbhishekChorotiya AbhishekChorotiya mentioned this pull request Jun 29, 2026
Open
@AbhishekChorotiya
AbhishekChorotiya force-pushed the feat/a11y-form-controls branch from 0451104 to 2d38c44 Compare June 29, 2026 08:37
@AbhishekChorotiya
AbhishekChorotiya force-pushed the feat/a11y-form-controls branch from 2d38c44 to 4d6fabc Compare June 29, 2026 09:36
@XyneSpaces

XyneSpaces commented Jun 29, 2026

Copy link
Copy Markdown

Review Summary

PR: #1646 - feat(a11y): input and form-control accessibility

Findings

  1. Good: New accessibility hooks in UtilityHooks.res provide reusable patterns for accessible form controls (useAccessibleLabels, useOptionalError, useAriaInvalid).

  2. Good: All payment input fields now include proper aria-required, aria-invalid, and aria-describedby attributes linking to error messages.

  3. Good: Locale strings added for field labels (card number, expiry, CVC, etc.) support internationalization.

  4. Issue: The ariaDescribedBy linkage pattern requires error message elements to have matching IDs. Verify that all error message components consistently set their IDs based on the field name pattern.

  5. Suggestion: Consider adding autoComplete attributes to relevant fields (cc-number, cc-exp, cc-csc) for better browser integration and password manager support.

No blocking issues. The form accessibility improvements follow ARIA best practices for input labeling and error association.

aritro2002
aritro2002 reviewed Jun 30, 2026
View reviewed changes
Comment thread src/Components/ClickToPayNotYou.res Outdated
<div className="relative w-1/3">
<select
id="ctp-identifier-type"
ariaLabel="Identifier type"

@aritro2002 aritro2002 Jun 30, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

some ariaLabels have locale supports, some don't have.
It's better to add for all.

aritro2002
aritro2002 reviewed Jun 30, 2026
View reviewed changes
Comment thread src/Utilities/AccessibilityUtils.res Outdated
@@ -0,0 +1,21 @@
let visuallyHiddenClass = "!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]"

@aritro2002 aritro2002 Jun 30, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

clip is deprecated
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/clip

aritro2002
aritro2002 reviewed Jun 30, 2026
View reviewed changes
Comment thread src/Payments/CardPayment.res Outdated
expiryError->String.length > 0)}>
<div
<LiveError
text="Invalid input"

@aritro2002 aritro2002 Jun 30, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

add locale support for it

@AbhishekChorotiya
AbhishekChorotiya force-pushed the feat/a11y-form-controls branch from 6eded61 to 91345ec Compare July 21, 2026 10:36
@AbhishekChorotiya
AbhishekChorotiya force-pushed the feat/a11y-form-controls branch from 91345ec to ab7307b Compare July 21, 2026 10:57
@AbhishekChorotiya
feat(a11y): input and form-control accessibility
cc05cab 
Add ARIA semantics across all text inputs and selects; required state wired from
fieldConfig.isRequired; ARIA on bypassing selects/inputs. Localization: accessibility
locale dictionary scaffold + the keys used here (cardNetworkLabel, morePaymentMethodsLabel,
yearLabel, monthLabel, optionTabLabel). Reuse: shared LiveError component for announced errors.
@AbhishekChorotiya
AbhishekChorotiya force-pushed the feat/a11y-form-controls branch from ab7307b to cc05cab Compare July 21, 2026 11:03
@sakksham7

sakksham7 commented Jul 31, 2026

Copy link
Copy Markdown
Contributor

Please check card form in compressed layout as well once

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

Reviewers

@aritro2002 aritro2002 aritro2002 approved these changes
@seekshiva seekshiva Awaiting requested review from seekshiva seekshiva is a code owner
@ArushKapoorJuspay ArushKapoorJuspay Awaiting requested review from ArushKapoorJuspay ArushKapoorJuspay is a code owner
@sakksham7 sakksham7 Awaiting requested review from sakksham7 sakksham7 is a code owner

Assignees

@AbhishekChorotiya AbhishekChorotiya

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Track payment form-control accessibility improvements

4 participants

@AbhishekChorotiya @XyneSpaces @sakksham7 @aritro2002