Resolve remaining Storybook Axe violations (#3615)

* Resolve remaining Storybook Axe violations * test(vrt): update snapshots * Update snapshot * Adjust MarkdownViewer story --------- Co-authored-by: TylerJDev <[email protected]>
primer · Aug 11, 2023 · 65b888c · 65b888c
1 parent f487a8d
commit 65b888c
Show file tree

Hide file tree

Showing 16 changed files with 30 additions and 11 deletions.
diff --git a/...nents/drafts/Button2.test.ts-snapshots/Button-sx-prop-dark-colorblind-linux.png b/...nents/drafts/Button2.test.ts-snapshots/Button-sx-prop-dark-colorblind-linux.png
diff --git a/...omponents/drafts/Button2.test.ts-snapshots/Button-sx-prop-dark-dimmed-linux.png b/...omponents/drafts/Button2.test.ts-snapshots/Button-sx-prop-dark-dimmed-linux.png
diff --git a/...ts/drafts/Button2.test.ts-snapshots/Button-sx-prop-dark-high-contrast-linux.png b/...ts/drafts/Button2.test.ts-snapshots/Button-sx-prop-dark-high-contrast-linux.png
diff --git a/...shots/components/drafts/Button2.test.ts-snapshots/Button-sx-prop-dark-linux.png b/...shots/components/drafts/Button2.test.ts-snapshots/Button-sx-prop-dark-linux.png
diff --git a/...nents/drafts/Button2.test.ts-snapshots/Button-sx-prop-dark-tritanopia-linux.png b/...nents/drafts/Button2.test.ts-snapshots/Button-sx-prop-dark-tritanopia-linux.png
diff --git a/...ents/drafts/Button2.test.ts-snapshots/Button-sx-prop-light-colorblind-linux.png b/...ents/drafts/Button2.test.ts-snapshots/Button-sx-prop-light-colorblind-linux.png
diff --git a/...s/drafts/Button2.test.ts-snapshots/Button-sx-prop-light-high-contrast-linux.png b/...s/drafts/Button2.test.ts-snapshots/Button-sx-prop-light-high-contrast-linux.png
diff --git a/...hots/components/drafts/Button2.test.ts-snapshots/Button-sx-prop-light-linux.png b/...hots/components/drafts/Button2.test.ts-snapshots/Button-sx-prop-light-linux.png
diff --git a/...ents/drafts/Button2.test.ts-snapshots/Button-sx-prop-light-tritanopia-linux.png b/...ents/drafts/Button2.test.ts-snapshots/Button-sx-prop-light-tritanopia-linux.png
diff --git a/src/Button/Button.dev.stories.tsx b/src/Button/Button.dev.stories.tsx
@@ -53,7 +53,7 @@ export const TestSxProp = () => {
             color: 'deepskyblue',
           },
           [`@media screen and (max-width: 768px)`]: {
-            color: 'salmon',
+            color: 'maroon',
           },
           '@media screen and (min-width: 768px)': {
             ':focus': {

diff --git a/src/PageHeader/PageHeader.examples.stories.tsx b/src/PageHeader/PageHeader.examples.stories.tsx
@@ -235,6 +235,7 @@ export const WithPageLayout = () => {
             p: 3,
             borderRadius: 2,
           }}
+          tabIndex={0}
         >
           This box has really long content. If it is too long, it will cause x overflow and should show a scrollbar.
           When this overflows, it should not break to overall page layout!

diff --git a/src/__tests__/deprecated/__snapshots__/ChoiceFieldset.test.tsx.snap b/src/__tests__/deprecated/__snapshots__/ChoiceFieldset.test.tsx.snap
@@ -2102,6 +2102,13 @@ exports[`ChoiceFieldset renders with a success validation message 1`] = `
   margin-top: 8px;
 }
 
+@media (prefers-reduced-motion) {
+  .c11 {
+    -webkit-animation: none;
+    animation: none;
+  }
+}
+
 @media (forced-colors:active) {
   .c6 {
     background-color: canvastext;
@@ -2408,6 +2415,13 @@ exports[`ChoiceFieldset renders with an error validation message 1`] = `
   margin-top: 8px;
 }
 
+@media (prefers-reduced-motion) {
+  .c11 {
+    -webkit-animation: none;
+    animation: none;
+  }
+}
+
 @media (forced-colors:active) {
   .c6 {
     background-color: canvastext;

diff --git a/src/drafts/Button2/Button.dev.stories.tsx b/src/drafts/Button2/Button.dev.stories.tsx
@@ -41,10 +41,10 @@ export const TestSxProp = () => {
       <Button
         size="medium"
         sx={{
-          color: 'deeppink',
+          color: 'firebrick',
         }}
       >
-        Medium Pink
+        Medium Red
       </Button>
       <Button
         size="small"
@@ -53,22 +53,22 @@ export const TestSxProp = () => {
             color: 'deepskyblue',
           },
           [`@media screen and (max-width: 768px)`]: {
-            color: 'salmon',
+            color: 'maroon',
           },
           '@media screen and (min-width: 768px)': {
             ':focus': {
               color: 'green',
             },
           },
           '@media (min-width: 1440)': {
-            color: 'deeppink',
+            color: 'firebrick',
           },
         }}
       >
-        Pink
+        Red
       </Button>
-      <Button leadingIcon={SearchIcon} variant="invisible" sx={{color: 'deeppink'}}>
-        Pink
+      <Button leadingIcon={SearchIcon} variant="invisible" sx={{color: 'firebrick'}}>
+        Red
       </Button>
       <Button
         size="small"

diff --git a/src/drafts/MarkdownViewer/MarkdownViewer.stories.tsx b/src/drafts/MarkdownViewer/MarkdownViewer.stories.tsx
@@ -75,9 +75,9 @@ const sampleHtml = `
 </ul>
 <h4>Tasks</h4>
 <ul class="contains-task-list">
-<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Task 1</li>
-<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Task 2</li>
-<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Task 3</li>
+<li class="task-list-item"><label><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Task 1</label></li>
+<li class="task-list-item"><label><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Task 2</label></li>
+<li class="task-list-item"><label><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Task 3</label></li>
 </ul>`
 
 const htmlObject = {__html: sampleHtml}

diff --git a/src/internal/components/ValidationAnimationContainer.tsx b/src/internal/components/ValidationAnimationContainer.tsx
@@ -19,6 +19,9 @@ const fadeIn = keyframes`
 // using easeOutQuint easing fn https://easings.net/#easeOutQuint
 const AnimatedElement = styled.div<Props>`
   animation: ${props => props.show && css`170ms ${fadeIn} cubic-bezier(0.44, 0.74, 0.36, 1);`};
+  @media (prefers-reduced-motion) {
+    animation: none;
+  }
 `
 const ValidationAnimationContainer: React.FC<React.PropsWithChildren<Props>> = ({show, children}) => {
   const [shouldRender, setRender] = useState(show)

diff --git a/src/stories/useAnchoredPosition.stories.tsx b/src/stories/useAnchoredPosition.stories.tsx
@@ -195,6 +195,7 @@ export const ComplexAncestry = () => {
           overflow: 'auto',
           position: 'relative',
         }}
+        tabIndex={0}
       >
         Clipping container - this element has <code>overflow</code> set to something other than <code>visible</code>
         <Box m={space} p={space} sx={{border: '1px solid #000', backgroundColor: 'blue.2', position: 'relative'}}>