fix: fix ally issues from axe-core 4.2

ccontrols · Apr 29, 2021 · 389b99f · 389b99f
1 parent 35c0f33
commit 389b99f
Show file tree

Hide file tree

Showing 32 changed files with 150 additions and 155 deletions.
diff --git a/examples/stories/src/stories/VariantButton/VariantButton.stories.tsx b/examples/stories/src/stories/VariantButton/VariantButton.stories.tsx
@@ -13,7 +13,7 @@ export default {
     figma: [
       {
         url: 'https://www.figma.com/file/vgf0guEmC5IKtjHJKkRVSr',
-        'aria-label': 'figma design file',
+        title: 'figma design file',
       },
     ],
     notes: {

diff --git a/plugins/addon-images/src/ImagesBlock/__snapshots__/ImagesBlock.test.ts.snap b/plugins/addon-images/src/ImagesBlock/__snapshots__/ImagesBlock.test.ts.snap
@@ -13,7 +13,7 @@ exports[`ImagesBlock customConfigProps snapshot 1`] = `
         class="css-xhp9da"
       >
         <a
-          aria-label="Custom title here"
+          aria-label="navigate to Custom title here section"
           class="css-1ptrway-LinkHeading"
           data-id="custom-title-here"
           data-level="4"

diff --git a/plugins/addon-notes/src/NotesBlock/__snapshots__/NotesBlock.test.ts.snap b/plugins/addon-notes/src/NotesBlock/__snapshots__/NotesBlock.test.ts.snap
@@ -13,7 +13,7 @@ exports[`NotesBlock customConfigProps snapshot 1`] = `
         class="css-xhp9da"
       >
         <a
-          aria-label="Custom title here"
+          aria-label="navigate to Custom title here section"
           class="css-1ptrway-LinkHeading"
           data-id="custom-title-here"
           data-level="4"
@@ -52,7 +52,7 @@ exports[`NotesBlock customConfigProps snapshot 1`] = `
           class="css-xhp9da"
         >
           <a
-            aria-label="Component  design notes"
+            aria-label="navigate to Component  design notes section"
             class="css-1aob0xw-LinkHeading"
             data-id="component-design-notes"
             data-level="2"
@@ -135,7 +135,7 @@ exports[`NotesBlock customItems snapshot 1`] = `
               class="css-xhp9da"
             >
               <a
-                aria-label="Introduction"
+                aria-label="navigate to Introduction section"
                 class="css-6ugsdx-LinkHeading"
                 data-id="introduction"
                 data-level="1"
@@ -238,7 +238,7 @@ exports[`NotesBlock overview snapshot 1`] = `
               class="css-xhp9da"
             >
               <a
-                aria-label="Component  design notes"
+                aria-label="navigate to Component  design notes section"
                 class="css-1aob0xw-LinkHeading"
                 data-id="component-design-notes"
                 data-level="2"

diff --git a/plugins/addon-stats/src/ui/AttributeUsage/__snapshots__/AttributeUsage.test.ts.snap b/plugins/addon-stats/src/ui/AttributeUsage/__snapshots__/AttributeUsage.test.ts.snap
@@ -13,7 +13,7 @@ exports[`AttributeUsage overview snapshot 1`] = `
         class="css-xhp9da"
       >
         <a
-          aria-label="Attributes usage"
+          aria-label="navigate to Attributes usage section"
           class="css-walqom-LinkHeading"
           data-id="attributes-usage"
           data-level="3"
@@ -44,7 +44,7 @@ exports[`AttributeUsage overview snapshot 1`] = `
           >
             Attributes usage
             <a
-              aria-label="Collapse this block"
+              aria-expanded="true"
               class="css-1t48u3b-BlockContainer"
             >
               <span

diff --git a/...don-stats/src/ui/AttributesUsageDetails/__snapshots__/AttributesUsageDetails.test.ts.snap b/...don-stats/src/ui/AttributesUsageDetails/__snapshots__/AttributesUsageDetails.test.ts.snap
@@ -13,7 +13,7 @@ exports[`AttributesUsageDetails overview snapshot 1`] = `
         class="css-xhp9da"
       >
         <a
-          aria-label="ref"
+          aria-label="navigate to ref section"
           class="css-walqom-LinkHeading"
           data-id="attribute-ref"
           data-level="3"
@@ -44,7 +44,7 @@ exports[`AttributesUsageDetails overview snapshot 1`] = `
           >
             ref
             <a
-              aria-label="Collapse this block"
+              aria-expanded="true"
               class="css-1t48u3b-BlockContainer"
             >
               <span

diff --git a/...ins/addon-stats/src/ui/AttributesUsageList/__snapshots__/AttributesUsageList.test.ts.snap b/...ins/addon-stats/src/ui/AttributesUsageList/__snapshots__/AttributesUsageList.test.ts.snap
@@ -13,7 +13,7 @@ exports[`AttributesUsageList overview snapshot 1`] = `
         class="css-xhp9da"
       >
         <a
-          aria-label="ref"
+          aria-label="navigate to ref section"
           class="css-walqom-LinkHeading"
           data-id="attribute-ref"
           data-level="3"
@@ -44,7 +44,7 @@ exports[`AttributesUsageList overview snapshot 1`] = `
           >
             ref
             <a
-              aria-label="Collapse this block"
+              aria-expanded="true"
               class="css-1t48u3b-BlockContainer"
             >
               <span
@@ -207,7 +207,7 @@ exports[`AttributesUsageList overview snapshot 1`] = `
         class="css-xhp9da"
       >
         <a
-          aria-label="id"
+          aria-label="navigate to id section"
           class="css-walqom-LinkHeading"
           data-id="attribute-id"
           data-level="3"
@@ -238,7 +238,7 @@ exports[`AttributesUsageList overview snapshot 1`] = `
           >
             id
             <a
-              aria-label="Collapse this block"
+              aria-expanded="true"
               class="css-1t48u3b-BlockContainer"
             >
               <span

diff --git a/plugins/addon-stats/src/ui/ComponentUsage/__snapshots__/ComponentUsage.test.ts.snap b/plugins/addon-stats/src/ui/ComponentUsage/__snapshots__/ComponentUsage.test.ts.snap
@@ -13,7 +13,7 @@ exports[`ComponentUsage overview snapshot 1`] = `
         class="css-xhp9da"
       >
         <a
-          aria-label="Components usage"
+          aria-label="navigate to Components usage section"
           class="css-walqom-LinkHeading"
           data-id="components-usage"
           data-level="3"
@@ -44,7 +44,7 @@ exports[`ComponentUsage overview snapshot 1`] = `
           >
             Components usage
             <a
-              aria-label="Collapse this block"
+              aria-expanded="true"
               class="css-1t48u3b-BlockContainer"
             >
               <span

diff --git a/...addon-stats/src/ui/ComponentUsageDetails/__snapshots__/ComponentUsageDetails.test.ts.snap b/...addon-stats/src/ui/ComponentUsageDetails/__snapshots__/ComponentUsageDetails.test.ts.snap
@@ -13,7 +13,7 @@ exports[`ComponentUsageDetails overview snapshot 1`] = `
         class="css-xhp9da"
       >
         <a
-          aria-label="ArrowButton"
+          aria-label="navigate to ArrowButton section"
           class="css-walqom-LinkHeading"
           data-id="attribute-arrowbutton"
           data-level="3"
@@ -44,7 +44,7 @@ exports[`ComponentUsageDetails overview snapshot 1`] = `
           >
             ArrowButton
             <a
-              aria-label="Collapse this block"
+              aria-expanded="true"
               class="css-1t48u3b-BlockContainer"
             >
               <span

diff --git a/plugins/addon-stats/src/ui/ComponentUsageList/__snapshots__/ComponentUsageList.test.ts.snap b/plugins/addon-stats/src/ui/ComponentUsageList/__snapshots__/ComponentUsageList.test.ts.snap
@@ -13,7 +13,7 @@ exports[`ComponentUsageList overview snapshot 1`] = `
         class="css-xhp9da"
       >
         <a
-          aria-label="Button"
+          aria-label="navigate to Button section"
           class="css-walqom-LinkHeading"
           data-id="attribute-button"
           data-level="3"
@@ -44,7 +44,7 @@ exports[`ComponentUsageList overview snapshot 1`] = `
           >
             Button
             <a
-              aria-label="Collapse this block"
+              aria-expanded="true"
               class="css-1t48u3b-BlockContainer"
             >
               <span

diff --git a/plugins/figma-embed/src/FigmaEmbedBlock/FigmaEmbedBlock.stories.tsx b/plugins/figma-embed/src/FigmaEmbedBlock/FigmaEmbedBlock.stories.tsx
@@ -32,12 +32,12 @@ export const customURLS: Example = () => {
           {
             url:
               'https://www.figma.com/file/hS1sLjYq49vjnKXhwGgHwg/Navigation-UI-design-components-Community?node-id=1%3A2309',
-            'aria-label': 'design document 1',
+            title: 'design document 1',
           },
           {
             url:
               'https://www.figma.com/file/LtgbR2mbVPbQTNDfDQxbKL/Atanas-Stoyanov-s-Team-Colors?node-id=0%3A1',
-            'aria-label': 'design document 2',
+            title: 'design document 2',
           },
         ]}
       />
@@ -67,7 +67,7 @@ export const customIFrameProps: Example = () => {
           {
             url:
               'https://www.figma.com/file/vgf0guEmC5IKtjHJKkRVSr/Button?node-id=0%3A1',
-            'aria-label': 'figma design file',
+            title: 'figma design file',
             height: '300',
           },
         ]}

diff --git a/plugins/figma-embed/src/FigmaEmbedBlock/__snapshots__/FigmaEmbedBlock.test.ts.snap b/plugins/figma-embed/src/FigmaEmbedBlock/__snapshots__/FigmaEmbedBlock.test.ts.snap
@@ -21,10 +21,10 @@ exports[`FigmaEmbedBlock customConfigProps snapshot 1`] = `
       <div>
         <iframe
           allowfullscreen=""
-          aria-label="figma design file"
           class="css-6u5w61"
           height="450"
           src="https://www.figma.com/embed?embed_host=component-controls&url=https://www.figma.com/file/vgf0guEmC5IKtjHJKkRVSr/Button?node-id=0%3A1"
+          title="figma design file"
           width="100%"
         />
       </div>
@@ -54,10 +54,10 @@ exports[`FigmaEmbedBlock customIFrameProps snapshot 1`] = `
       <div>
         <iframe
           allowfullscreen=""
-          aria-label="figma design file"
           class="css-6u5w61"
           height="300"
           src="https://www.figma.com/embed?embed_host=component-controls&url=https://www.figma.com/file/vgf0guEmC5IKtjHJKkRVSr/Button?node-id=0%3A1"
+          title="figma design file"
           width="100%"
         />
       </div>
@@ -87,18 +87,18 @@ exports[`FigmaEmbedBlock customURLS snapshot 1`] = `
       <div>
         <iframe
           allowfullscreen=""
-          aria-label="design document 1"
           class="css-6u5w61"
           height="450"
           src="https://www.figma.com/embed?embed_host=component-controls&url=https://www.figma.com/file/hS1sLjYq49vjnKXhwGgHwg/Navigation-UI-design-components-Community?node-id=1%3A2309"
+          title="design document 1"
           width="100%"
         />
         <iframe
           allowfullscreen=""
-          aria-label="design document 2"
           class="css-6u5w61"
           height="450"
           src="https://www.figma.com/embed?embed_host=component-controls&url=https://www.figma.com/file/LtgbR2mbVPbQTNDfDQxbKL/Atanas-Stoyanov-s-Team-Colors?node-id=0%3A1"
+          title="design document 2"
           width="100%"
         />
       </div>
@@ -127,10 +127,10 @@ exports[`FigmaEmbedBlock noFullScreen snapshot 1`] = `
     >
       <div>
         <iframe
-          aria-label="figma design file"
           class="css-6u5w61"
           height="450"
           src="https://www.figma.com/embed?embed_host=component-controls&url=https://www.figma.com/file/vgf0guEmC5IKtjHJKkRVSr/Button?node-id=0%3A1"
+          title="figma design file"
           width="100%"
         />
       </div>
@@ -160,10 +160,10 @@ exports[`FigmaEmbedBlock overview snapshot 1`] = `
       <div>
         <iframe
           allowfullscreen=""
-          aria-label="figma design file"
           class="css-6u5w61"
           height="450"
           src="https://www.figma.com/embed?embed_host=component-controls&url=https://www.figma.com/file/vgf0guEmC5IKtjHJKkRVSr/Button?node-id=0%3A1"
+          title="figma design file"
           width="100%"
         />
       </div>

diff --git a/ui/app/src/Sidebar/__snapshots__/Sidebar.test.ts.snap b/ui/app/src/Sidebar/__snapshots__/Sidebar.test.ts.snap
@@ -48,6 +48,7 @@ exports[`Sidebar overview snapshot 1`] = `
                   class="css-162ewbd"
                 >
                   <button
+                    aria-expanded="true"
                     class="css-t9fq0h"
                   >
                     <div
@@ -68,7 +69,6 @@ exports[`Sidebar overview snapshot 1`] = `
                         class="css-vthntz"
                       >
                         <div
-                          aria-label="collapse items"
                           class="css-aqscwe"
                         >
                           <svg