fix: use aria-disabled when disabled prop is applied (#1987)

- updated the snapshots - update treatments of disabled across components - update aria-disabled in snapshots
chanzuckerberg · Jun 11, 2024 · 1fe3b0f · 1fe3b0f
1 parent 03edc20
commit 1fe3b0f
Show file tree

Hide file tree

Showing 13 changed files with 34 additions and 49 deletions.
diff --git a/src/components/Checkbox/Checkbox-v2.module.css b/src/components/Checkbox/Checkbox-v2.module.css
@@ -73,12 +73,12 @@
 .checkbox__input:not(:checked):not(:indeterminate) {
   color: var(--eds-theme-color-border-utility-default-medium-emphasis);
 
-  &:hover {
+  &:not(:disabled):hover {
     color: var(--eds-theme-color-border-utility-default-medium-emphasis-hover);
     background-color: var(--eds-theme-color-background-utility-default-no-emphasis-hover);
   }
 
-  &:active {
+  &:not(:disabled):active {
     color: var(--eds-theme-color-border-utility-default-medium-emphasis-active);
     background-color: var(--eds-theme-color-background-utility-default-no-emphasis-active);
   }

diff --git a/src/components/Checkbox/Checkbox-v2.stories.tsx b/src/components/Checkbox/Checkbox-v2.stories.tsx
@@ -7,7 +7,6 @@ const meta: Meta<typeof Checkbox> = {
   title: 'Components/V2/Checkbox',
   component: Checkbox,
   args: {
-    disabled: false,
     label: 'Checkbox',
   },
   parameters: {
@@ -59,11 +58,6 @@ export const Disabled: Story = {
       <Checkbox {...args} disabled indeterminate label="Disabled" />
     </div>
   ),
-  parameters: {
-    axe: {
-      disabledRules: ['color-contrast'],
-    },
-  },
 };
 
 /**
@@ -84,9 +78,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
@@ -73,6 +73,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 +95,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 +116,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 +142,7 @@ exports[`<Checkbox /> Disabled story renders snapshot 2`] = `
     class="checkbox__labels"
   >
     <label
+      aria-disabled="true"
       class="label label--lg label--disabled"
       for=":ra:"
     >

diff --git a/src/components/FieldLabel/FieldLabel.tsx b/src/components/FieldLabel/FieldLabel.tsx
@@ -18,16 +18,16 @@ export type FieldLabelProps = {
    */
   htmlFor: string;
   // Design API
+  /**
+   * Indicates disabled state of the input.
+   */
+  disabled?: boolean;
   /**
    * Size of the label.
    *
    * **Default is `"lg"`**.
    */
   size?: Extract<Size, 'md' | 'lg'>;
-  /**
-   * Indicates disabled state of the input.
-   */
-  disabled?: boolean;
 };
 
 /**
@@ -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
@@ -20,7 +20,6 @@ export const Default: Story = {
   args: {
     name: 'option-1',
     label: 'Option 1',
-    disabled: false,
     checked: false,
     readOnly: true,
   },
@@ -41,11 +40,6 @@ export const Disabled: Story = {
     name: 'option-disabled',
     disabled: true,
   },
-  parameters: {
-    axe: {
-      disabledRules: ['color-contrast'],
-    },
-  },
 };
 
 export const DisabledAndChecked: Story = {
@@ -86,11 +80,6 @@ export const WithoutVisibleLabel: Story = {
     label: undefined,
     'aria-label': 'unchecked radio button',
   },
-  parameters: {
-    axe: {
-      disabledRules: ['color-contrast'],
-    },
-  },
 };
 
 export const LongLabels = {
@@ -110,9 +99,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
@@ -106,6 +106,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 +147,7 @@ exports[`<Radio /> (v2) DisabledAndChecked story renders snapshot 1`] = `
       class="radio__labels"
     >
       <label
+        aria-disabled="true"
         class="label label--lg label--disabled"
         for=":r3:"
       >

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:"
       >