feat(a11y): input and form-control accessibility

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.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_019vLeCgNLD7yJrWuKwFh5Vu

Author: AbhishekChorotiya

src/CardCVCElement.res

@@ -249,5 +249,6 @@ let make = (
     height={isVaultCvcFlow ? "1.8rem" : ""}
     name=TestUtils.cardCVVInputTestId
     autocomplete="cc-csc"
+    ariaRequired=true
   />
 }

src/CardSchemeComponent.res

@@ -2,8 +2,10 @@ module CoBadgeCardSchemeDropDown = {
   @react.component
   let make = (~eligibleCardSchemes, ~setCardBrand) => {
     let loggerState = Recoil.useRecoilValueFromAtom(RecoilAtoms.loggerAtom)
+    let {localeString} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom)
     <select
       className="w-4"
+      ariaLabel={localeString.cardNetworkLabel}
       onClick={_ =>
         loggerState.setLogInfo(~value="CardSchemeMenu expanded", ~eventName=CARD_SCHEME_SELECTION)}
       onChange={ev => {

src/Components/ClickToPayNotYou.res

@@ -189,6 +189,8 @@ let make = (~setIsShowClickToPayNotYou, ~isCTPAuthenticateNotYouClicked, ~getVis
         <div className="w-full flex space-x-2">
           <div className="relative w-1/3">
             <select
+              id="ctp-identifier-type"
+              ariaLabel="Identifier type"
               value={identifierType->getIdentityType}
               onChange={handleTypeChange}
               className="w-full p-3 pr-10 border border-gray-300 rounded-md appearance-none">
@@ -207,6 +209,9 @@ let make = (~setIsShowClickToPayNotYou, ~isCTPAuthenticateNotYouClicked, ~getVis
           {identifierType === EMAIL_ADDRESS
             ? <input
                 type_="text"
+                id="ctp-email"
+                ariaLabel="Email"
+                ariaRequired=true
                 value={identifier}
                 onChange={handleInputChange}
                 placeholder="Enter email"
@@ -216,6 +221,8 @@ let make = (~setIsShowClickToPayNotYou, ~isCTPAuthenticateNotYouClicked, ~getVis
             : <div className="w-2/3 flex border border-gray-300 rounded-md overflow-hidden">
                 <div className="relative">
                   <select
+                    id="ctp-country-code"
+                    ariaLabel="Country code"
                     value={countryCode}
                     onChange={handleCountryCodeChange}
                     className="h-full p-3 appearance-none focus:outline-none">
@@ -239,6 +246,9 @@ let make = (~setIsShowClickToPayNotYou, ~isCTPAuthenticateNotYouClicked, ~getVis
                 </div>
                 <input
                   type_="tel"
+                  id="ctp-phone"
+                  ariaLabel="Mobile number"
+                  ariaRequired=true
                   value={identifier}
                   onChange={handlePhoneInputChange}
                   placeholder="Mobile number"

src/Components/DynamicFields/CardHolderNameField.res

@@ -78,6 +78,7 @@ module FullNameFieldInput = {
       placeholder
       inputRef
       ?autocomplete
+      ariaRequired={firstNameFieldConfig.isRequired}
     />
   }
 }

src/Components/DynamicFields/EmailField.res

@@ -42,6 +42,7 @@ module EmailInput = {
       placeholder
       inputRef={fieldRef}
       autocomplete
+      ariaRequired={primaryFieldConfig.isRequired}
     />
   }
 }

src/Components/DynamicFields/GenericInputField.res

@@ -32,5 +32,6 @@ let make = (~fieldConfig: fieldConfig) => {
     inputRef={fieldRef}
     ?autocomplete
     maxLength=?{fieldConfig.maxInputLength}
+    ariaRequired={fieldConfig.isRequired}
   />
 }

src/Components/DynamicFields/PhoneField.res

@@ -41,5 +41,6 @@ let make = (~fieldConfig: fieldConfig) => {
     inputRef={fieldRef}
     autocomplete
     ?maxLength
+    ariaRequired={fieldConfig.isRequired}
   />
 }

src/Components/Input.res

@@ -18,6 +18,8 @@ let make = (
   ~placeholder="",
   ~className="",
   ~inputRef,
+  ~ariaRequired=false,
+  ~fieldId=?,
 ) => {
   let options = Recoil.useRecoilValueFromAtom(elementOptions)
   let {themeObj} = Recoil.useRecoilValueFromAtom(configAtom)
@@ -59,13 +61,23 @@ let make = (
     ""
   }
 
+  let inputId = fieldId->Option.getOr(id->String.length > 0 ? id : fieldName)
+  let accessibleLabel = AccessibilityUtils.getAccessibleLabel(
+    ~fieldName,
+    ~placeholder,
+    ~fallback=inputId,
+  )
+  let hasError = errorString->AccessibilityUtils.hasOptionalText
+  let describedById = hasError ? Some(inputId ++ "-error") : None
+  let ariaInvalid = AccessibilityUtils.ariaInvalid(~hasError, ~isValid)
+
   <div className={` flex flex-col w-full`} style={color: themeObj.colorText}>
     <RenderIf condition={fieldName->String.length > 0}>
-      <div> {React.string(fieldName)} </div>
+      <label htmlFor={inputId}> {React.string(fieldName)} </label>
     </RenderIf>
     <div className="flex flex-row " style={direction: direction}>
       <input
-        id
+        id={inputId}
         style={
           background: themeObj.colorBackground,
           padding: themeObj.spacingUnit,
@@ -83,17 +95,21 @@ let make = (
         onChange
         onBlur=handleBlur
         onFocus=handleFocus
-        ariaLabel={`Type to fill ${fieldName} input`}
+        ariaLabel={accessibleLabel}
+        ariaInvalid
+        ariaRequired
+        ariaDescribedby=?describedById
       />
       <div className={`flex -ml-10  items-center`}> {rightIcon} </div>
     </div>
     {switch errorString {
     | Some(val) =>
       <RenderIf condition={val->String.length > 0}>
-        <div
-          className="py-1 text-xs text-red-600 transition-colors transition-border ease-out duration-200">
-          {React.string(val)}
-        </div>
+        <LiveError
+          text={val}
+          className="py-1 text-xs text-red-600 transition-colors transition-border ease-out duration-200"
+          id={inputId ++ "-error"}
+        />
       </RenderIf>
     | None => React.null
     }}

src/Components/InputField.res

@@ -25,6 +25,8 @@ let make = (
   ~labelClassName="",
   ~paymentType: option<CardThemeType.mode>=?,
   ~autocomplete="on",
+  ~ariaRequired=false,
+  ~fieldId=?,
 ) => {
   open ElementType
   let (eleClassName, setEleClassName) = React.useState(_ => "input-base")
@@ -96,6 +98,16 @@ let make = (
     ""
   }
 
+  let inputId = fieldId->Option.getOr(id->String.length > 0 ? id : fieldName)
+  let accessibleLabel = AccessibilityUtils.getAccessibleLabel(
+    ~fieldName,
+    ~placeholder,
+    ~fallback=inputId,
+  )
+  let hasError = errorString->AccessibilityUtils.hasOptionalText
+  let describedById = hasError ? Some(inputId ++ "-error") : None
+  let ariaInvalid = AccessibilityUtils.ariaInvalid(~hasError, ~isValid)
+
   let isValidValue = CardUtils.getBoolOptionVal(isValid)
 
   let (cardEmpty, cardComplete, cardInvalid, cardFocused) = React.useMemo(() => {
@@ -125,11 +137,11 @@ let make = (
 
   <div className={` flex flex-col w-full`}>
     <RenderIf condition={fieldName->String.length > 0}>
-      <div className={`${labelClassName}`}> {React.string(fieldName)} </div>
+      <label htmlFor={inputId} className={`${labelClassName}`}> {React.string(fieldName)} </label>
     </RenderIf>
     <div className="flex flex-row " style={direction: direction}>
       <input
-        id
+        id={inputId}
         style={
           background: "transparent",
           width: "-webkit-fill-available",
@@ -148,7 +160,10 @@ let make = (
         onBlur=handleBlur
         onFocus=handleFocus
         autoComplete={autocomplete}
-        ariaLabel={`Type to fill ${fieldName} input`}
+        ariaLabel={accessibleLabel}
+        ariaInvalid
+        ariaRequired
+        ariaDescribedby=?describedById
       />
       <div className={`flex -ml-10  items-center`}> {rightIcon} </div>
     </div>
@@ -157,7 +172,7 @@ let make = (
       switch errorString {
       | Some(val) =>
         <RenderIf condition={val->String.length > 0}>
-          <div className={`py-1 ${errorClases}`}> {React.string(val)} </div>
+          <LiveError text={val} className={`py-1 ${errorClases}`} id={inputId ++ "-error"} />
         </RenderIf>
       | None => React.null
       }

src/Components/LiveError.res

@@ -0,0 +1,15 @@
+// A field/validation error that is both visually rendered and announced to
+// screen readers (role="alert" + assertive, atomic live region).
+//
+// Renders only the inner alert <div>: callers keep their own conditional-render
+// wrapper (the render condition is not always text-based), and pass the matching
+// `id` (for aria-describedby linkage from the input), `className`, and `style`.
+// `id` defaults to "" → the id attribute is omitted (byte-identical to a div with
+// no id); `style` is optional and omitted when not provided.
+@react.component
+let make = (~text: string, ~className: string, ~style: option<JsxDOM.style>=?, ~id: string="") => {
+  let elementId = id == "" ? None : Some(id)
+  <div id=?elementId role="alert" ariaLive={#assertive} ariaAtomic=true className ?style>
+    {React.string(text)}
+  </div>
+}