From 1fe3b0f08ecec651634840d3bd4a8aafa1b900e6 Mon Sep 17 00:00:00 2001
From: Andrew Holloway <booc0mtaco@users.noreply.github.com>
Date: Tue, 11 Jun 2024 17:23:06 -0500
Subject: [PATCH] fix: use aria-disabled when disabled prop is applied (#1987)

- updated the snapshots
- update treatments of disabled across components
- update aria-disabled in snapshots
---
 src/components/Checkbox/Checkbox-v2.module.css   |  4 ++--
 src/components/Checkbox/Checkbox-v2.stories.tsx  | 11 -----------
 .../__snapshots__/Checkbox-v2.test.tsx.snap      |  4 ++++
 src/components/FieldLabel/FieldLabel.tsx         | 15 ++++++++++-----
 src/components/FieldNote/FieldNote-v2.tsx        |  7 ++++++-
 .../InputField/InputField-v2.stories.tsx         |  6 ------
 src/components/InputField/InputField-v2.tsx      |  6 +++++-
 .../__snapshots__/InputField-v2.test.tsx.snap    |  4 +++-
 src/components/Radio/Radio-v2.stories.tsx        | 16 ----------------
 .../Radio/__snapshots__/Radio-v2.test.tsx.snap   |  2 ++
 src/components/Select/Select-v2.stories.tsx      |  6 ------
 src/components/Select/Select-v2.tsx              |  1 +
 .../__snapshots__/TextareaField-v2.test.tsx.snap |  1 +
 13 files changed, 34 insertions(+), 49 deletions(-)

diff --git a/src/components/Checkbox/Checkbox-v2.module.css b/src/components/Checkbox/Checkbox-v2.module.css
index ffc1704e6..6aef72f0a 100644
--- 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
index e55e1459e..a223e304f 100644
--- 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
index 6bc10871d..a2f69fb6c 100644
--- 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
index c18c83d07..95edaa7f6 100644
--- 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
index 17f1e5e82..8ed9c5eda 100644
--- 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
index b95bd6318..8628cac1b 100644
--- 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
index 9eb6e9a97..2d8672ae9 100644
--- 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
index c72e2a241..b7ce0461f 100644
--- 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
index da3a4df05..e7116f266 100644
--- 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
index 0ee4cc0f0..093acb75a 100644
--- 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
index 55be8f1b0..97e5e13e1 100644
--- 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
index 8459713a3..6a3927811 100644
--- 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
index f7377f6cb..b235c3051 100644
--- 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:"
       >