Merge pull request #859 from gympass/feat/improves-checkbox-accessibi…

…lity Feat/improves checkbox accessibility
gympass · Jan 9, 2025 · 81a2db3 · 81a2db3
2 parents 19f2cf4 + c5818b6
commit 81a2db3
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 2 deletions.
diff --git a/packages/yoga/src/Checkbox/web/Checkbox.jsx b/packages/yoga/src/Checkbox/web/Checkbox.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useId } from 'react';
 import { bool, string, shape, oneOfType, node } from 'prop-types';
 import styled, { withTheme } from 'styled-components';
 import { hexToRgb } from '@gympass/yoga-common';
@@ -241,6 +241,7 @@ const Checkbox = ({
   className,
   inverted,
   indeterminate,
+  ariaLabel,
   theme: {
     yoga: {
       components: { checkbox },
@@ -249,6 +250,8 @@ const Checkbox = ({
   ...rest
 }) => {
   const inputRef = useRef(null);
+  const id = useId();
+  const checkboxLabelId = `checkbox-label-${id}`;
 
   const { onChange, onClick, ...restWithoutEvents } = rest;
 
@@ -271,7 +274,7 @@ const Checkbox = ({
         inverted={inverted}
         disabled={disabled}
       >
-        <Label>
+        <Label id={checkboxLabelId}>
           <Shadow />
           <CheckMark
             {...{
@@ -298,6 +301,8 @@ const Checkbox = ({
             {...restWithoutEvents}
             onChange={onChange}
             onClick={onClick}
+            aria-labelledby={ariaLabel ? undefined : checkboxLabelId}
+            aria-label={ariaLabel}
           />
           {label}
         </Label>
@@ -325,6 +330,7 @@ Checkbox.propTypes = {
   /** set a style to the checkbox container */
   style: shape({}),
   className: string,
+  ariaLabel: string,
 };
 
 Checkbox.defaultProps = {
@@ -338,6 +344,7 @@ Checkbox.defaultProps = {
   error: undefined,
   style: undefined,
   className: undefined,
+  ariaLabel: undefined,
 };
 
 Checkbox.displayName = 'Checkbox';

diff --git a/packages/yoga/src/Checkbox/web/__snapshots__/Checkbox.test.jsx.snap b/packages/yoga/src/Checkbox/web/__snapshots__/Checkbox.test.jsx.snap
@@ -227,6 +227,7 @@ exports[`<Checkbox /> Snapshots should match snapshot with a given value 1`] = `
     >
       <label
         class="c2 c3"
+        id="checkbox-label-:re:"
       >
         <span
           class="c4 c5"
@@ -235,6 +236,7 @@ exports[`<Checkbox /> Snapshots should match snapshot with a given value 1`] = `
           class="c6"
         />
         <input
+          aria-labelledby="checkbox-label-:re:"
           class="c7"
           type="checkbox"
           value="test_value"
@@ -419,6 +421,7 @@ exports[`<Checkbox /> Snapshots should match snapshot with checked checkbox 1`]
     >
       <label
         class="c2 c3"
+        id="checkbox-label-:r3:"
       >
         <span
           class="c4 c5"
@@ -432,6 +435,7 @@ exports[`<Checkbox /> Snapshots should match snapshot with checked checkbox 1`]
           />
         </div>
         <input
+          aria-labelledby="checkbox-label-:r3:"
           checked=""
           class="c7"
           type="checkbox"
@@ -574,6 +578,7 @@ exports[`<Checkbox /> Snapshots should match snapshot with default checkbox 1`]
     >
       <label
         class="c2 c3"
+        id="checkbox-label-:r1:"
       >
         <span
           class="c4 c5"
@@ -582,6 +587,7 @@ exports[`<Checkbox /> Snapshots should match snapshot with default checkbox 1`]
           class="c6"
         />
         <input
+          aria-labelledby="checkbox-label-:r1:"
           class="c7"
           type="checkbox"
         />
@@ -790,6 +796,7 @@ exports[`<Checkbox /> Snapshots should match snapshot with disabled and checked
     >
       <label
         class="c2 c3"
+        id="checkbox-label-:r4:"
       >
         <span
           class="c4 c5"
@@ -804,6 +811,7 @@ exports[`<Checkbox /> Snapshots should match snapshot with disabled and checked
           />
         </div>
         <input
+          aria-labelledby="checkbox-label-:r4:"
           checked=""
           class="c7"
           disabled=""
@@ -972,6 +980,7 @@ exports[`<Checkbox /> Snapshots should match snapshot with disabled checkbox 1`]
     >
       <label
         class="c2 c3"
+        id="checkbox-label-:r2:"
       >
         <span
           class="c4 c5"
@@ -981,6 +990,7 @@ exports[`<Checkbox /> Snapshots should match snapshot with disabled checkbox 1`]
           disabled=""
         />
         <input
+          aria-labelledby="checkbox-label-:r2:"
           class="c7"
           disabled=""
           type="checkbox"
@@ -1186,6 +1196,7 @@ exports[`<Checkbox /> Snapshots should match snapshot with error and checked che
     >
       <label
         class="c2 c3"
+        id="checkbox-label-:r6:"
       >
         <span
           class="c4 c5"
@@ -1199,6 +1210,7 @@ exports[`<Checkbox /> Snapshots should match snapshot with error and checked che
           />
         </div>
         <input
+          aria-labelledby="checkbox-label-:r6:"
           checked=""
           class="c7"
           type="checkbox"
@@ -1446,6 +1458,7 @@ exports[`<Checkbox /> Snapshots should match snapshot with error and indetermina
     >
       <label
         class="c2 c3"
+        id="checkbox-label-:rc:"
       >
         <span
           class="c4 c5"
@@ -1459,6 +1472,7 @@ exports[`<Checkbox /> Snapshots should match snapshot with error and indetermina
           />
         </div>
         <input
+          aria-labelledby="checkbox-label-:rc:"
           class="c7"
           type="checkbox"
         />
@@ -1663,6 +1677,7 @@ exports[`<Checkbox /> Snapshots should match snapshot with error checkbox 1`] =
     >
       <label
         class="c2 c3"
+        id="checkbox-label-:r5:"
       >
         <span
           class="c4 c5"
@@ -1671,6 +1686,7 @@ exports[`<Checkbox /> Snapshots should match snapshot with error checkbox 1`] =
           class="c6"
         />
         <input
+          aria-labelledby="checkbox-label-:r5:"
           class="c7"
           type="checkbox"
         />
@@ -1907,6 +1923,7 @@ exports[`<Checkbox /> Snapshots should match snapshot with indeterminate 1`] = `
     >
       <label
         class="c2 c3"
+        id="checkbox-label-:ra:"
       >
         <span
           class="c4 c5"
@@ -1920,6 +1937,7 @@ exports[`<Checkbox /> Snapshots should match snapshot with indeterminate 1`] = `
           />
         </div>
         <input
+          aria-labelledby="checkbox-label-:ra:"
           class="c7"
           type="checkbox"
         />
@@ -2150,6 +2168,7 @@ exports[`<Checkbox /> Snapshots should match snapshot with indeterminate and dis
     >
       <label
         class="c2 c3"
+        id="checkbox-label-:rb:"
       >
         <span
           class="c4 c5"
@@ -2164,6 +2183,7 @@ exports[`<Checkbox /> Snapshots should match snapshot with indeterminate and dis
           />
         </div>
         <input
+          aria-labelledby="checkbox-label-:rb:"
           class="c7"
           disabled=""
           type="checkbox"
@@ -2380,6 +2400,7 @@ exports[`<Checkbox /> Snapshots should match snapshot with inverted 1`] = `
     >
       <label
         class="c2 c3"
+        id="checkbox-label-:r7:"
       >
         <span
           class="c4 c5"
@@ -2388,6 +2409,7 @@ exports[`<Checkbox /> Snapshots should match snapshot with inverted 1`] = `
           class="c6"
         />
         <input
+          aria-labelledby="checkbox-label-:r7:"
           class="c7"
           type="checkbox"
         />
@@ -2613,6 +2635,7 @@ exports[`<Checkbox /> Snapshots should match snapshot with inverted and checked
     >
       <label
         class="c2 c3"
+        id="checkbox-label-:r8:"
       >
         <span
           class="c4 c5"
@@ -2626,6 +2649,7 @@ exports[`<Checkbox /> Snapshots should match snapshot with inverted and checked
           />
         </div>
         <input
+          aria-labelledby="checkbox-label-:r8:"
           checked=""
           class="c7"
           type="checkbox"
@@ -2877,6 +2901,7 @@ exports[`<Checkbox /> Snapshots should match snapshot with inverted and checked
     >
       <label
         class="c2 c3"
+        id="checkbox-label-:r9:"
       >
         <span
           class="c4 c5"
@@ -2891,6 +2916,7 @@ exports[`<Checkbox /> Snapshots should match snapshot with inverted and checked
           />
         </div>
         <input
+          aria-labelledby="checkbox-label-:r9:"
           checked=""
           class="c7"
           disabled=""
@@ -3139,6 +3165,7 @@ exports[`<Checkbox /> Snapshots should match snapshot with inverted and indeterm
     >
       <label
         class="c2 c3"
+        id="checkbox-label-:rd:"
       >
         <span
           class="c4 c5"
@@ -3152,6 +3179,7 @@ exports[`<Checkbox /> Snapshots should match snapshot with inverted and indeterm
           />
         </div>
         <input
+          aria-labelledby="checkbox-label-:rd:"
           class="c7"
           type="checkbox"
         />
@@ -3283,6 +3311,7 @@ exports[`<Checkbox /> Snapshots should match snapshot without props 1`] = `
     >
       <label
         class="c2 c3"
+        id="checkbox-label-:r0:"
       >
         <span
           class="c4 c5"
@@ -3291,6 +3320,7 @@ exports[`<Checkbox /> Snapshots should match snapshot without props 1`] = `
           class="c6"
         />
         <input
+          aria-labelledby="checkbox-label-:r0:"
           class="c7"
           type="checkbox"
         />