chore(PPDSC-2079): update axe-core and fix any errors (#167)

* chore(PPDSC-2079): update axe-core and fix any errors * chore(PPDSC-2079): removed unnecessary aria values from thumb * chore(PPDSC-2079): updated snapshots
newscorp-ghfb · Apr 21, 2022 · 1bdea12 · 1bdea12
1 parent d46b1df
commit 1bdea12
Show file tree

Hide file tree

Showing 14 changed files with 49 additions and 147 deletions.
diff --git a/package.json b/package.json
@@ -122,14 +122,14 @@
     "@types/webpack": "^4.4.34",
     "@typescript-eslint/eslint-plugin": "^5.4.0",
     "@typescript-eslint/parser": "^5.4.0",
-    "axe-core": "^4.3.5",
+    "axe-core": "^4.4.1",
     "babel-loader": "^8.0.6",
     "chalk": "2.4.1",
     "concurrently": "^4.1.1",
     "copy-webpack-plugin": "^5.1.1",
     "csstype": "2",
     "cypress": "^9.1.0",
-    "cypress-axe": "0.13.0",
+    "cypress-axe": "^0.14.0",
     "eslint": "^8.3.0",
     "eslint-config-airbnb-typescript": "^12.3.1",
     "eslint-config-prettier": "8.3.0",

diff --git a/site/components/__tests__/__snapshots__/site-header.test.tsx.snap b/site/components/__tests__/__snapshots__/site-header.test.tsx.snap
@@ -1151,7 +1151,6 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi
               class="emotion-56"
             >
               <div
-                aria-orientation="horizontal"
                 class="emotion-57"
                 data-testid="scroll-container"
                 tabindex="0"
@@ -2448,7 +2447,6 @@ exports[`SiteHeader has first item highlighted (About) if we are on the /about s
               class="emotion-56"
             >
               <div
-                aria-orientation="horizontal"
                 class="emotion-57"
                 data-testid="scroll-container"
                 tabindex="0"
@@ -3721,7 +3719,6 @@ exports[`SiteHeader has no highlighted items if we are on the homepage 1`] = `
               class="emotion-56"
             >
               <div
-                aria-orientation="horizontal"
                 class="emotion-57"
                 data-testid="scroll-container"
                 tabindex="0"

diff --git a/site/components/component-api/__tests__/__snapshots__/component-api.test.tsx.snap b/site/components/component-api/__tests__/__snapshots__/component-api.test.tsx.snap
@@ -1401,7 +1401,6 @@ exports[`ComponentAPI renders with props for multiple components 1`] = `
             class="emotion-35"
           >
             <div
-              aria-orientation="horizontal"
               class="emotion-36"
               data-testid="scroll-container"
             >

diff --git a/site/components/tabs-with-table/__tests__/__snapshots__/tabs-with-table.test.tsx.snap b/site/components/tabs-with-table/__tests__/__snapshots__/tabs-with-table.test.tsx.snap
@@ -533,7 +533,6 @@ exports[`TabsWithTable renders with default data 1`] = `
           class="emotion-7"
         >
           <div
-            aria-orientation="horizontal"
             class="emotion-8"
             data-testid="scroll-container"
           >

diff --git a/src/audio-player-composable/__tests__/__snapshots__/audio-player-composable.test.tsx.snap b/src/audio-player-composable/__tests__/__snapshots__/audio-player-composable.test.tsx.snap
@@ -622,6 +622,7 @@ exports[`Audio Player Composable seekBar should renders and behaves as expected
         <div
           aria-describedby="mock-nk-1"
           aria-label="seek bar"
+          aria-orientation="horizontal"
           aria-valuemax="6610"
           aria-valuemin="0"
           aria-valuenow="10"
@@ -864,6 +865,7 @@ exports[`Audio Player Composable seekBar should renders and behaves as expected
 <div
   aria-describedby="mock-nk-1"
   aria-label="seek bar"
+  aria-orientation="horizontal"
   aria-valuemax="6610"
   aria-valuemin="0"
   aria-valuenow="35"
@@ -1091,6 +1093,7 @@ exports[`Audio Player Composable seekBar should renders with overrides 1`] = `
         <div
           aria-describedby="mock-nk-1"
           aria-label="seek bar"
+          aria-orientation="horizontal"
           aria-valuemax="1"
           aria-valuemin="0"
           aria-valuenow="0"
@@ -1829,6 +1832,7 @@ exports[`Audio Player Composable should render correctly when in autoplay 1`] =
         <div
           aria-describedby="mock-nk-1"
           aria-label="seek bar"
+          aria-orientation="horizontal"
           aria-valuemax="1"
           aria-valuemin="0"
           aria-valuenow="0"
@@ -2338,6 +2342,7 @@ exports[`Audio Player Composable should render with no errors 1`] = `
         <div
           aria-describedby="mock-nk-1"
           aria-label="seek bar"
+          aria-orientation="horizontal"
           aria-valuemax="1"
           aria-valuemin="0"
           aria-valuenow="0"

diff --git a/src/audio-player/__tests__/__snapshots__/audio-player.test.tsx.snap b/src/audio-player/__tests__/__snapshots__/audio-player.test.tsx.snap
@@ -1179,9 +1179,6 @@ exports[`Audio Player hides previousTrack as expected 1`] = `
                     </button>
                   </div>
                   <div
-                    aria-orientation="horizontal"
-                    aria-valuemax="1"
-                    aria-valuemin="0"
                     class="emotion-45"
                     data-testid="volume-control-track"
                     style="background: rgb(255, 255, 0);"
@@ -1190,6 +1187,7 @@ exports[`Audio Player hides previousTrack as expected 1`] = `
                     <div
                       aria-describedby="mock-nk-1"
                       aria-label="Volume Control"
+                      aria-orientation="horizontal"
                       aria-valuemax="1"
                       aria-valuemin="0"
                       aria-valuenow="0.1"
@@ -1279,6 +1277,7 @@ exports[`Audio Player hides previousTrack as expected 1`] = `
               <div
                 aria-describedby="mock-nk-1"
                 aria-label="seek bar"
+                aria-orientation="horizontal"
                 aria-valuemax="1"
                 aria-valuemin="0"
                 aria-valuenow="0"
@@ -2402,9 +2401,6 @@ exports[`Audio Player hides seek buttons as expected 1`] = `
                     </button>
                   </div>
                   <div
-                    aria-orientation="horizontal"
-                    aria-valuemax="1"
-                    aria-valuemin="0"
                     class="emotion-37"
                     data-testid="volume-control-track"
                     style="background: rgb(255, 255, 0);"
@@ -2413,6 +2409,7 @@ exports[`Audio Player hides seek buttons as expected 1`] = `
                     <div
                       aria-describedby="mock-nk-1"
                       aria-label="Volume Control"
+                      aria-orientation="horizontal"
                       aria-valuemax="1"
                       aria-valuemin="0"
                       aria-valuenow="0.1"
@@ -2502,6 +2499,7 @@ exports[`Audio Player hides seek buttons as expected 1`] = `
               <div
                 aria-describedby="mock-nk-1"
                 aria-label="seek bar"
+                aria-orientation="horizontal"
                 aria-valuemax="1"
                 aria-valuemin="0"
                 aria-valuenow="0"
@@ -3607,6 +3605,7 @@ exports[`Audio Player hides volume control as expected 1`] = `
               <div
                 aria-describedby="mock-nk-1"
                 aria-label="seek bar"
+                aria-orientation="horizontal"
                 aria-valuemax="1"
                 aria-valuemin="0"
                 aria-valuenow="0"
@@ -4537,9 +4536,6 @@ exports[`Audio Player live player renders as expected 1`] = `
                     </button>
                   </div>
                   <div
-                    aria-orientation="horizontal"
-                    aria-valuemax="1"
-                    aria-valuemin="0"
                     class="emotion-27"
                     data-testid="volume-control-track"
                     style="background: rgb(255, 255, 0);"
@@ -4548,6 +4544,7 @@ exports[`Audio Player live player renders as expected 1`] = `
                     <div
                       aria-describedby="mock-nk-1"
                       aria-label="Volume Control"
+                      aria-orientation="horizontal"
                       aria-valuemax="1"
                       aria-valuemin="0"
                       aria-valuenow="0.7"
@@ -6305,9 +6302,6 @@ exports[`Audio Player recorded player renders and behaves as expected 1`] = `
                     </button>
                   </div>
                   <div
-                    aria-orientation="horizontal"
-                    aria-valuemax="1"
-                    aria-valuemin="0"
                     class="emotion-46"
                     data-testid="volume-control-track"
                     style="background: rgb(255, 255, 0);"
@@ -6316,6 +6310,7 @@ exports[`Audio Player recorded player renders and behaves as expected 1`] = `
                     <div
                       aria-describedby="mock-nk-1"
                       aria-label="Volume Control"
+                      aria-orientation="horizontal"
                       aria-valuemax="1"
                       aria-valuemin="0"
                       aria-valuenow="0.1"
@@ -6405,6 +6400,7 @@ exports[`Audio Player recorded player renders and behaves as expected 1`] = `
               <div
                 aria-describedby="mock-nk-1"
                 aria-label="seek bar"
+                aria-orientation="horizontal"
                 aria-valuemax="6610"
                 aria-valuemin="0"
                 aria-valuenow="10"
@@ -6495,6 +6491,7 @@ exports[`Audio Player recorded player renders and behaves as expected 2`] = `
 <div
   aria-describedby="mock-nk-1"
   aria-label="seek bar"
+  aria-orientation="horizontal"
   aria-valuemax="6610"
   aria-valuemin="0"
   aria-valuenow="35"
@@ -7745,9 +7742,6 @@ exports[`Audio Player recorded player renders as expected 1`] = `
                     </button>
                   </div>
                   <div
-                    aria-orientation="horizontal"
-                    aria-valuemax="1"
-                    aria-valuemin="0"
                     class="emotion-45"
                     data-testid="volume-control-track"
                     style="background: rgb(255, 255, 0);"
@@ -7756,6 +7750,7 @@ exports[`Audio Player recorded player renders as expected 1`] = `
                     <div
                       aria-describedby="mock-nk-1"
                       aria-label="Volume Control"
+                      aria-orientation="horizontal"
                       aria-valuemax="1"
                       aria-valuemin="0"
                       aria-valuenow="0.7"
@@ -7845,6 +7840,7 @@ exports[`Audio Player recorded player renders as expected 1`] = `
               <div
                 aria-describedby="mock-nk-1"
                 aria-label="seek bar"
+                aria-orientation="horizontal"
                 aria-valuemax="1"
                 aria-valuemin="0"
                 aria-valuenow="0"
@@ -9123,9 +9119,6 @@ exports[`Audio Player recorded player renders with custom ariaLandmark 1`] = `
                     </button>
                   </div>
                   <div
-                    aria-orientation="horizontal"
-                    aria-valuemax="1"
-                    aria-valuemin="0"
                     class="emotion-45"
                     data-testid="volume-control-track"
                     style="background: rgb(255, 255, 0);"
@@ -9134,6 +9127,7 @@ exports[`Audio Player recorded player renders with custom ariaLandmark 1`] = `
                     <div
                       aria-describedby="mock-nk-1"
                       aria-label="Volume Control"
+                      aria-orientation="horizontal"
                       aria-valuemax="1"
                       aria-valuemin="0"
                       aria-valuenow="0.7"
@@ -9223,6 +9217,7 @@ exports[`Audio Player recorded player renders with custom ariaLandmark 1`] = `
               <div
                 aria-describedby="mock-nk-1"
                 aria-label="seek bar"
+                aria-orientation="horizontal"
                 aria-valuemax="1"
                 aria-valuemin="0"
                 aria-valuenow="0"
@@ -10472,9 +10467,6 @@ exports[`Audio Player recorded player renders with overrides 1`] = `
                     </button>
                   </div>
                   <div
-                    aria-orientation="horizontal"
-                    aria-valuemax="1"
-                    aria-valuemin="0"
                     class="emotion-45"
                     data-testid="volume-control-track"
                     style="background: rgb(255, 255, 0);"
@@ -10483,6 +10475,7 @@ exports[`Audio Player recorded player renders with overrides 1`] = `
                     <div
                       aria-describedby="mock-nk-1"
                       aria-label="Volume Control"
+                      aria-orientation="horizontal"
                       aria-valuemax="1"
                       aria-valuemin="0"
                       aria-valuenow="0.1"
@@ -10572,6 +10565,7 @@ exports[`Audio Player recorded player renders with overrides 1`] = `
               <div
                 aria-describedby="mock-nk-1"
                 aria-label="seek bar"
+                aria-orientation="horizontal"
                 aria-valuemax="1"
                 aria-valuemin="0"
                 aria-valuenow="0"

diff --git a/src/scroll/__tests__/__snapshots__/scroll.test.tsx.snap b/src/scroll/__tests__/__snapshots__/scroll.test.tsx.snap
@@ -30,7 +30,6 @@ exports[`Scroll renders horizontal scroll when no properties are set 1`] = `
     class="emotion-0"
   >
     <div
-      aria-orientation="horizontal"
       class="emotion-1"
       data-testid="scroll-container"
       tabindex="0"
@@ -93,7 +92,6 @@ exports[`Scroll renders horizontal scroll with hidden controls 1`] = `
     class="emotion-0"
   >
     <div
-      aria-orientation="horizontal"
       class="emotion-1"
       data-testid="scroll-container"
       tabindex="0"
@@ -138,7 +136,6 @@ exports[`Scroll renders horizontal scroll with visible controls 1`] = `
     class="emotion-0"
   >
     <div
-      aria-orientation="horizontal"
       class="emotion-1"
       data-testid="scroll-container"
       tabindex="0"
@@ -183,7 +180,6 @@ exports[`Scroll renders scroll with overriden controls style 1`] = `
     class="emotion-0"
   >
     <div
-      aria-orientation="horizontal"
       class="emotion-1"
       data-testid="scroll-container"
       tabindex="0"
@@ -228,7 +224,6 @@ exports[`Scroll renders vertical scroll 1`] = `
     class="emotion-0"
   >
     <div
-      aria-orientation="vertical"
       class="emotion-1"
       data-testid="scroll-container"
       tabindex="0"
@@ -291,7 +286,6 @@ exports[`Scroll renders vertical scroll with hidden controls 1`] = `
     class="emotion-0"
   >
     <div
-      aria-orientation="vertical"
       class="emotion-1"
       data-testid="scroll-container"
       tabindex="0"
@@ -336,7 +330,6 @@ exports[`Scroll renders vertical scroll with visible controls 1`] = `
     class="emotion-0"
   >
     <div
-      aria-orientation="vertical"
       class="emotion-1"
       data-testid="scroll-container"
       tabindex="0"
@@ -381,7 +374,6 @@ exports[`ScrollSnapAlignment ScrollBar Hide horizontal scroll bar on a horizonta
     class="emotion-0"
   >
     <div
-      aria-orientation="horizontal"
       class="emotion-1"
       data-testid="scroll-container"
       tabindex="0"
@@ -417,7 +409,6 @@ exports[`ScrollSnapAlignment ScrollBar Show horizontal scroll bar on a horizonta
     class="emotion-0"
   >
     <div
-      aria-orientation="horizontal"
       class="emotion-1"
       data-testid="scroll-container"
       tabindex="0"
@@ -453,7 +444,6 @@ exports[`ScrollSnapAlignment ScrollBar Show vertical scroll bar on a vertical sc
     class="emotion-0"
   >
     <div
-      aria-orientation="vertical"
       class="emotion-1"
       data-testid="scroll-container"
       tabindex="0"
@@ -521,7 +511,6 @@ exports[`ScrollSnapAlignment renders scroll with snapping enabled 1`] = `
     class="emotion-0"
   >
     <div
-      aria-orientation="horizontal"
       class="emotion-1"
       data-testid="scroll-container"
       tabindex="0"
@@ -590,7 +579,6 @@ exports[`ScrollSnapAlignment renders vertical scroll with snapping enabled 1`] =
     class="emotion-0"
   >
     <div
-      aria-orientation="vertical"
       class="emotion-1"
       data-testid="scroll-container"
       tabindex="0"

diff --git a/src/scroll/scroll.tsx b/src/scroll/scroll.tsx
@@ -122,7 +122,6 @@ const ThemelessScroll = React.forwardRef<HTMLDivElement, ScrollProps>(
           tabIndex={0}
           {...props}
           vertical={vertical}
-          aria-orientation={vertical ? 'vertical' : 'horizontal'}
           snapAlign={snapAlign}
           scrollBar={scrollBar}
           ref={composeRefs(scrollContainerRef, ref)}