fix(a11y): apply aria-hidden to checkbox asterisk (#121)

jwplayer · Mar 15, 2024 · bd2ed00 · bd2ed00
1 parent 9ee491f
commit bd2ed00
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 3 deletions.
diff --git a/packages/ui-react/src/components/Account/__snapshots__/Account.test.tsx.snap b/packages/ui-react/src/components/Account/__snapshots__/Account.test.tsx.snap
@@ -199,6 +199,9 @@ exports[`<Account> > renders and matches snapshot 1`] = `
             for="check-box_1235_consentsvalues_marketing"
             lang="en"
           >
+            <span
+              aria-hidden="true"
+            />
             Receive Marketing Emails
           </label>
         </div>

diff --git a/packages/ui-react/src/components/Checkbox/Checkbox.tsx b/packages/ui-react/src/components/Checkbox/Checkbox.tsx
@@ -47,7 +47,7 @@ const Checkbox: React.FC<Props> = ({ label, name, onChange, header, checked, val
           aria-describedby={helperTextId}
         />
         <label htmlFor={id} lang={lang}>
-          {required ? '* ' : ''}
+          <span aria-hidden="true">{required ? '* ' : ''}</span>
           {label}
         </label>
       </div>

diff --git a/packages/ui-react/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap b/packages/ui-react/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
@@ -18,6 +18,9 @@ exports[`<Checkbox> > renders and matches snapshot 1`] = `
       <label
         for="check-box_1235_name"
       >
+        <span
+          aria-hidden="true"
+        />
         label
       </label>
     </div>

diff --git a/...-react/src/components/CustomRegisterField/__snapshots__/CustomRegisterField.test.tsx.snap b/...-react/src/components/CustomRegisterField/__snapshots__/CustomRegisterField.test.tsx.snap
@@ -19,6 +19,9 @@ exports[`<CustomRegisterField> > renders and matches snapshot <Checkbox> 1`] = `
       <label
         for="check-box_1235_name"
       >
+        <span
+          aria-hidden="true"
+        />
         label
       </label>
     </div>
@@ -156,6 +159,9 @@ exports[`<CustomRegisterField> > renders and matches snapshot <Dropdown type="ra
       <label
         for="check-box_1235_name"
       >
+        <span
+          aria-hidden="true"
+        />
         label
       </label>
     </div>

diff --git a/...-react/src/components/PersonalDetailsForm/__snapshots__/PersonalDetailsForm.test.tsx.snap b/...-react/src/components/PersonalDetailsForm/__snapshots__/PersonalDetailsForm.test.tsx.snap
@@ -498,7 +498,11 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
         <label
           for="check-box_1235_ccc"
         >
-          * 
+          <span
+            aria-hidden="true"
+          >
+            * 
+          </span>
           CheckMe
         </label>
       </div>
@@ -942,7 +946,11 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
         <label
           for="check-box_1235_ccc"
         >
-          * 
+          <span
+            aria-hidden="true"
+          >
+            * 
+          </span>
           CheckMe
         </label>
       </div>