fix(a11y): fix a11y tests errors

chanzuckerberg · Feb 24, 2024 · 5d0fd60 · 5d0fd60
1 parent 6eb6418
commit 5d0fd60
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 8 deletions.
diff --git a/packages/components/src/core/CellComponent/index.stories.tsx b/packages/components/src/core/CellComponent/index.stories.tsx
@@ -53,6 +53,7 @@ export default {
   parameters: {
     axe: {
       disabledRules: [
+        "color-contrast",
         // Unfortunately the MUI Switch component renders an input field without a label, which
         // fails an axe check.
         "label",

diff --git a/packages/components/src/core/Foundations/index.stories.tsx b/packages/components/src/core/Foundations/index.stories.tsx
@@ -20,6 +20,9 @@ export default {
   },
   component: DesignTokens,
   parameters: {
+    axe: {
+      disabledRules: ["color-contrast"],
+    },
     badges: [BADGE.WIP],
   },
   title: "Foundations/Colors [wip]",

diff --git a/packages/components/src/core/NavigationJumpTo/index.stories.tsx b/packages/components/src/core/NavigationJumpTo/index.stories.tsx
@@ -17,6 +17,8 @@ const NavigationJumpTo = (props: Args): JSX.Element => {
   return <RawNavigationJumpTo items={items} {...rest} />;
 };
 
+const ARIA_VALID_ATTR_VALUE = "aria-valid-attr-value";
+
 const availableColorOptions = [
   "accent",
   "beta",
@@ -73,6 +75,9 @@ export const Default = {
     offsetTop: 0,
   },
   parameters: {
+    axe: {
+      disabledRules: [ARIA_VALID_ATTR_VALUE],
+    },
     controls: { expanded: true },
   },
   render: (args: Args) => <NavigationJumpTo {...args} />,
@@ -228,6 +233,9 @@ export const JumpToNavDemo = {
     offsetTop: 0,
   },
   parameters: {
+    axe: {
+      disabledRules: [ARIA_VALID_ATTR_VALUE],
+    },
     controls: {
       exclude: ["items", "offsetTop"],
       expanded: true,
@@ -250,7 +258,7 @@ export const LivePreview = {
   },
   parameters: {
     axe: {
-      disabledRules: ["aria-valid-attr-value"],
+      disabledRules: [ARIA_VALID_ATTR_VALUE],
     },
     controls: {
       exclude: ["items", "offsetTop", "indicatorColor"],
@@ -288,7 +296,7 @@ export const Test = {
   },
   parameters: {
     axe: {
-      disabledRules: ["aria-valid-attr-value"],
+      disabledRules: [ARIA_VALID_ATTR_VALUE],
     },
     controls: {
       exclude: ["items", "offsetTop", "indicatorColor"],

diff --git a/packages/components/src/core/Table/__snapshots__/index.test.tsx.snap b/packages/components/src/core/Table/__snapshots__/index.test.tsx.snap
@@ -452,6 +452,7 @@ exports[`<Table /> Default story renders snapshot 1`] = `
                 <span
                   class="MuiButtonBase-root MuiRadio-root MuiRadio-colorDefault PrivateSwitchBase-root MuiRadio-root MuiRadio-colorDefault MuiRadio-root MuiRadio-colorDefault css-1btqzpq-MuiButtonBase-root-MuiRadio-root"
                   intent="default"
+                  label="Option-1-radio"
                   stage="unchecked"
                 >
                   <input
@@ -473,6 +474,11 @@ exports[`<Table /> Default story renders snapshot 1`] = `
                     class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
                   />
                 </span>
+                <span
+                  class="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label css-ahj2mt-MuiTypography-root"
+                >
+                  Option-1-radio
+                </span>
               </label>
               <span
                 class="css-1g1knab"
@@ -481,7 +487,7 @@ exports[`<Table /> Default story renders snapshot 1`] = `
             <span
               class="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label css-ahj2mt-MuiTypography-root"
             >
-              Option 1
+              Option-1
             </span>
           </label>
           <label
@@ -496,6 +502,7 @@ exports[`<Table /> Default story renders snapshot 1`] = `
                 <span
                   class="MuiButtonBase-root MuiRadio-root MuiRadio-colorPrimary PrivateSwitchBase-root MuiRadio-root MuiRadio-colorPrimary Mui-checked MuiRadio-root MuiRadio-colorPrimary css-1f6sxpj-MuiButtonBase-root-MuiRadio-root"
                   intent="default"
+                  label="Option-2-radio"
                   stage="checked"
                 >
                   <input
@@ -518,6 +525,11 @@ exports[`<Table /> Default story renders snapshot 1`] = `
                     class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
                   />
                 </span>
+                <span
+                  class="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label css-ahj2mt-MuiTypography-root"
+                >
+                  Option-2-radio
+                </span>
               </label>
               <span
                 class="css-1g1knab"
@@ -526,7 +538,7 @@ exports[`<Table /> Default story renders snapshot 1`] = `
             <span
               class="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label css-ahj2mt-MuiTypography-root"
             >
-              Option 2
+              Option-2
             </span>
           </label>
         </div>

diff --git a/packages/components/src/core/Table/index.stories.tsx b/packages/components/src/core/Table/index.stories.tsx
@@ -125,12 +125,14 @@ const Table = (props: Args): JSX.Element => {
               name="radio-buttons-group"
             >
               <FormControlLabel
-                control={<InputRadio stage="unchecked" />}
-                label="Option 1"
+                control={
+                  <InputRadio label="Option-1-radio" stage="unchecked" />
+                }
+                label="Option-1"
               />
               <FormControlLabel
-                control={<InputRadio stage="checked" />}
-                label="Option 2"
+                control={<InputRadio label="Option-2-radio" stage="checked" />}
+                label="Option-2"
               />
             </RadioGroup>
           </CellComponent>