fix: use aria-disabled when disabled prop is applied

- updated the snapshots
chanzuckerberg · Jun 11, 2024 · d1c0ca2 · d1c0ca2
1 parent 03edc20
commit d1c0ca2
Show file tree

Hide file tree

Showing 12 changed files with 40 additions and 41 deletions.
diff --git a/src/components/Checkbox/Checkbox-v2.stories.tsx b/src/components/Checkbox/Checkbox-v2.stories.tsx
@@ -59,11 +59,6 @@ export const Disabled: Story = {
       <Checkbox {...args} disabled indeterminate label="Disabled" />
     </div>
   ),
-  parameters: {
-    axe: {
-      disabledRules: ['color-contrast'],
-    },
-  },
 };
 
 /**
@@ -84,9 +79,4 @@ export const LongLabels: Story = {
   args: {
     label: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
   },
-  parameters: {
-    axe: {
-      disabledRules: ['color-contrast'],
-    },
-  },
 };
diff --git a/src/components/Checkbox/__snapshots__/Checkbox-v2.test.tsx.snap b/src/components/Checkbox/__snapshots__/Checkbox-v2.test.tsx.snap
@@ -17,6 +17,7 @@ exports[`<Checkbox /> Checked story renders snapshot 1`] = `
       class="checkbox__labels"
     >
       <label
+        aria-disabled="false"
         class="label label--lg"
         for=":r3:"
       >
@@ -43,6 +44,7 @@ exports[`<Checkbox /> Default story renders snapshot 1`] = `
       class="checkbox__labels"
     >
       <label
+        aria-disabled="false"
         class="label label--lg"
         for=":r0:"
       >
@@ -73,6 +75,7 @@ exports[`<Checkbox /> Disabled story renders snapshot 1`] = `
         class="checkbox__labels"
       >
         <label
+          aria-disabled="true"
           class="label label--lg label--disabled"
           for=":r5:"
         >
@@ -94,6 +97,7 @@ exports[`<Checkbox /> Disabled story renders snapshot 1`] = `
         class="checkbox__labels"
       >
         <label
+          aria-disabled="true"
           class="label label--lg label--disabled"
           for=":r6:"
         >
@@ -114,6 +118,7 @@ exports[`<Checkbox /> Disabled story renders snapshot 1`] = `
         class="checkbox__labels"
       >
         <label
+          aria-disabled="true"
           class="label label--lg label--disabled"
           for=":r7:"
         >
@@ -139,6 +144,7 @@ exports[`<Checkbox /> Disabled story renders snapshot 2`] = `
     class="checkbox__labels"
   >
     <label
+      aria-disabled="true"
       class="label label--lg label--disabled"
       for=":ra:"
     >
@@ -164,6 +170,7 @@ exports[`<Checkbox /> Error story renders snapshot 1`] = `
       class="checkbox__labels"
     >
       <label
+        aria-disabled="false"
         class="label label--lg"
         for=":r2:"
       >
@@ -190,6 +197,7 @@ exports[`<Checkbox /> Indeterminate story renders snapshot 1`] = `
       class="checkbox__labels"
     >
       <label
+        aria-disabled="false"
         class="label label--lg"
         for=":r4:"
       >
@@ -216,6 +224,7 @@ exports[`<Checkbox /> LongLabels story renders snapshot 1`] = `
       class="checkbox__labels"
     >
       <label
+        aria-disabled="false"
         class="label label--lg"
         for=":r9:"
       >
@@ -242,6 +251,7 @@ exports[`<Checkbox /> WithSublabel story renders snapshot 1`] = `
       class="checkbox__labels"
     >
       <label
+        aria-disabled="false"
         class="label label--lg"
         for=":r1:"
       >

diff --git a/src/components/FieldLabel/FieldLabel.tsx b/src/components/FieldLabel/FieldLabel.tsx
@@ -45,7 +45,12 @@ export const FieldLabel = React.forwardRef<HTMLLabelElement, FieldLabelProps>(
       className,
     );
     return (
-      <label className={componentClassName} htmlFor={htmlFor} ref={ref}>
+      <label
+        aria-disabled={disabled ?? undefined}
+        className={componentClassName}
+        htmlFor={htmlFor}
+        ref={ref}
+      >
         {children}
       </label>
     );

diff --git a/src/components/FieldNote/FieldNote-v2.tsx b/src/components/FieldNote/FieldNote-v2.tsx
@@ -71,7 +71,12 @@ export const FieldNote = ({
   }
 
   return (
-    <div className={componentClassName} id={id} {...other}>
+    <div
+      aria-disabled={disabled ?? undefined}
+      className={componentClassName}
+      id={id}
+      {...other}
+    >
       {(status === 'critical' || status === 'warning' || iconToUse) && (
         <Icon
           className={styles['field-note__icon']}

diff --git a/src/components/InputField/InputField-v2.stories.tsx b/src/components/InputField/InputField-v2.stories.tsx
@@ -97,12 +97,6 @@ export const Disabled: Story = {
     fieldNote: 'This InputField is disabled',
     defaultValue: 'Text in disabled field',
   },
-  parameters: {
-    axe: {
-      // Disabled input does not need to meet color contrast
-      disabledRules: ['color-contrast'],
-    },
-  },
 };
 
 /**

diff --git a/src/components/InputField/InputField-v2.tsx b/src/components/InputField/InputField-v2.tsx
@@ -239,7 +239,11 @@ export const InputField: InputFieldType = forwardRef(
         {shouldRenderOverline && (
           <div className={overlineClassName}>
             {label && (
-              <FieldLabel className={labelClassName} htmlFor={idVar}>
+              <FieldLabel
+                className={labelClassName}
+                disabled={disabled}
+                htmlFor={idVar}
+              >
                 {label}
               </FieldLabel>
             )}

diff --git a/src/components/InputField/__snapshots__/InputField-v2.test.tsx.snap b/src/components/InputField/__snapshots__/InputField-v2.test.tsx.snap
@@ -49,7 +49,8 @@ exports[`<InputField /> Disabled story renders snapshot 1`] = `
       class="input-field__overline"
     >
       <label
-        class="label label--lg input-field__label input-field__label--disabled"
+        aria-disabled="true"
+        class="label label--lg label--disabled input-field__label input-field__label--disabled"
         for=":rc:"
       >
         Disabled input field
@@ -69,6 +70,7 @@ exports[`<InputField /> Disabled story renders snapshot 1`] = `
       />
     </div>
     <div
+      aria-disabled="true"
       class="field-note field-note--disabled"
       id=":rd:"
     >

diff --git a/src/components/Radio/Radio-v2.stories.tsx b/src/components/Radio/Radio-v2.stories.tsx
@@ -41,11 +41,6 @@ export const Disabled: Story = {
     name: 'option-disabled',
     disabled: true,
   },
-  parameters: {
-    axe: {
-      disabledRules: ['color-contrast'],
-    },
-  },
 };
 
 export const DisabledAndChecked: Story = {
@@ -86,11 +81,6 @@ export const WithoutVisibleLabel: Story = {
     label: undefined,
     'aria-label': 'unchecked radio button',
   },
-  parameters: {
-    axe: {
-      disabledRules: ['color-contrast'],
-    },
-  },
 };
 
 export const LongLabels = {
@@ -110,9 +100,4 @@ export const LongLabels = {
       </div>
     );
   },
-  parameters: {
-    axe: {
-      disabledRules: ['color-contrast'],
-    },
-  },
 };
diff --git a/src/components/Radio/__snapshots__/Radio-v2.test.tsx.snap b/src/components/Radio/__snapshots__/Radio-v2.test.tsx.snap
@@ -29,6 +29,7 @@ exports[`<Radio /> (v2) Checked story renders snapshot 1`] = `
       class="radio__labels"
     >
       <label
+        aria-disabled="false"
         class="label label--lg"
         for=":r1:"
       >
@@ -67,6 +68,7 @@ exports[`<Radio /> (v2) Default story renders snapshot 1`] = `
       class="radio__labels"
     >
       <label
+        aria-disabled="false"
         class="label label--lg"
         for=":r0:"
       >
@@ -106,6 +108,7 @@ exports[`<Radio /> (v2) Disabled story renders snapshot 1`] = `
       class="radio__labels"
     >
       <label
+        aria-disabled="true"
         class="label label--lg label--disabled"
         for=":r2:"
       >
@@ -146,6 +149,7 @@ exports[`<Radio /> (v2) DisabledAndChecked story renders snapshot 1`] = `
       class="radio__labels"
     >
       <label
+        aria-disabled="true"
         class="label label--lg label--disabled"
         for=":r3:"
       >
@@ -184,6 +188,7 @@ exports[`<Radio /> (v2) Error story renders snapshot 1`] = `
       class="radio__labels"
     >
       <label
+        aria-disabled="false"
         class="label label--lg"
         for=":r4:"
       >
@@ -223,6 +228,7 @@ exports[`<Radio /> (v2) ErrorAndChecked story renders snapshot 1`] = `
       class="radio__labels"
     >
       <label
+        aria-disabled="false"
         class="label label--lg"
         for=":r5:"
       >
@@ -304,6 +310,7 @@ exports[`<Radio /> (v2) WithSublabel story renders snapshot 1`] = `
       class="radio__labels"
     >
       <label
+        aria-disabled="false"
         class="label label--lg"
         for=":r6:"
       >
@@ -348,6 +355,7 @@ exports[`<Radio /> (v2) WithoutVisibleLabel story renders snapshot 1`] = `
       class="radio__labels"
     >
       <label
+        aria-disabled="false"
         class="label label--lg"
         for=":r7:"
       />

diff --git a/src/components/Select/Select-v2.stories.tsx b/src/components/Select/Select-v2.stories.tsx
@@ -751,9 +751,6 @@ export const Disabled: StoryObj = {
     disabled: true,
   },
   parameters: {
-    axe: {
-      disabledRules: ['color-contrast'],
-    },
     docs: {
       ...Default.parameters?.docs,
     },
@@ -860,9 +857,6 @@ export const DisabledRequired: StoryObj = {
     className: 'w-96',
   },
   parameters: {
-    axe: {
-      disabledRules: ['color-contrast'],
-    },
     docs: {
       ...Default.parameters?.docs,
     },

diff --git a/src/components/Select/Select-v2.tsx b/src/components/Select/Select-v2.tsx
@@ -342,6 +342,7 @@ const SelectLabel = ({
       <Listbox.Label
         as={FieldLabel}
         className={componentClassName}
+        disabled={disabled}
         htmlFor={htmlFor}
       >
         {label}

diff --git a/src/components/TextareaField/__snapshots__/TextareaField-v2.test.tsx.snap b/src/components/TextareaField/__snapshots__/TextareaField-v2.test.tsx.snap
@@ -122,6 +122,7 @@ praesentium, commodi eligendi asperiores quis dolorum porro.
       class="textarea-field__footer"
     >
       <div
+        aria-disabled="true"
         class="field-note field-note--disabled textarea-field__field-note"
         id=":r7:"
       >