feat: add alt-text accessibility

EX-5930
empathyco · May 4, 2022 · da5a10a · da5a10a
1 parent 6f1d5ff
commit da5a10a
Show file tree

Hide file tree

Showing 8 changed files with 21 additions and 15 deletions.
diff --git a/packages/x-components/.eslintrc.js b/packages/x-components/.eslintrc.js
@@ -6,8 +6,7 @@ module.exports = {
   },
   rules: {
     'no-dupe-class-members': 'off',
-    '@typescript-eslint/no-unused-vars': 'off',
-    'vuejs-accessibility/alt-text': 'warn',
+    '@typescript-eslint/no-unused-vars-experimental': 'off',
     'vuejs-accessibility/anchor-has-content': 'warn',
     'vuejs-accessibility/aria-props': 'warn',
     'vuejs-accessibility/aria-role': 'warn',

diff --git a/packages/x-components/src/views/design-system/design-system-picture.vue b/packages/x-components/src/views/design-system/design-system-picture.vue
@@ -5,35 +5,35 @@
     <article class="x-list x-list--wrap x-list--gap-06 x-list--align-start x-picture-show-case">
       <h2 class="x-title2">Default</h2>
       <picture class="x-picture">
-        <img class="x-picture__image" :src="standardImageUrl" />
+        <img class="x-picture__image" :src="standardImageUrl" alt="Default image" />
       </picture>
     </article>
 
     <article class="x-list x-list--wrap x-list--gap-06 x-list--align-start x-picture-show-case">
       <h2 class="x-title2">Card</h2>
       <picture class="x-picture x-picture--card">
-        <img class="x-picture__image" :src="standardImageUrl" />
+        <img class="x-picture__image" :src="standardImageUrl" alt="Card image" />
       </picture>
     </article>
 
     <article class="x-list x-list--wrap x-list--gap-06 x-list--align-start x-picture-show-case">
       <h2 class="x-title2">Cover</h2>
       <picture class="x-picture x-picture--cover">
-        <img class="x-picture__image" :src="whiteBackgroundImageUrl" />
+        <img class="x-picture__image" :src="whiteBackgroundImageUrl" alt="Cover image" />
       </picture>
     </article>
 
     <article class="x-list x-list--wrap x-list--gap-06 x-list--align-start x-picture-show-case">
       <h2 class="x-title2">Colored</h2>
       <picture class="x-picture x-picture--colored">
-        <img class="x-picture__image" :src="whiteBackgroundImageUrl" />
+        <img class="x-picture__image" :src="whiteBackgroundImageUrl" alt="Colored image" />
       </picture>
     </article>
 
     <article class="x-list x-list--wrap x-list--gap-06 x-list--align-start x-picture-show-case">
       <h2 class="x-title2">Fixed Ratio</h2>
       <picture class="x-picture x-picture--fixed-ratio">
-        <img class="x-picture__image" :src="whiteBackgroundImageUrl" />
+        <img class="x-picture__image" :src="whiteBackgroundImageUrl" alt="Fixed Ratio image" />
       </picture>
     </article>
 

diff --git a/packages/x-components/src/views/design-system/design-system-result.vue b/packages/x-components/src/views/design-system/design-system-result.vue
@@ -19,7 +19,11 @@
       <div class="x-result">
         <div class="x-result__picture">
           <picture class="x-picture x-picture--cover x-picture--colored">
-            <img class="x-picture__image" :src="whiteBackgroundImageUrl" />
+            <img
+              class="x-picture__image"
+              :src="whiteBackgroundImageUrl"
+              alt="Woman in blue flower print dress"
+            />
           </picture>
         </div>
         <div class="x-result__overlay x-list x-list--horizontal x-padding--02">
@@ -50,7 +54,11 @@
       <div class="x-result x-result--card">
         <div class="x-result__picture">
           <picture class="x-picture x-picture--cover x-picture--colored">
-            <img class="x-picture__image" :src="whiteBackgroundImageUrl" />
+            <img
+              class="x-picture__image"
+              :src="whiteBackgroundImageUrl"
+              alt="Woman in blue flower print dress"
+            />
           </picture>
         </div>
         <div class="x-result__overlay x-list x-list--horizontal x-padding--02">

diff --git a/packages/x-components/src/views/infinite-scroll-body.vue b/packages/x-components/src/views/infinite-scroll-body.vue
@@ -9,8 +9,7 @@
     <MainScroll use-window>
       <ResultsList #result="{ item }" v-infinite-scroll:body>
         <MainScrollItem :item="item">
-          <img :src="item.images[0]" />
-          <p>{{ item.title }}</p>
+          <img :src="item.images[0]" :alt="item.name" />
         </MainScrollItem>
       </ResultsList>
     </MainScroll>

diff --git a/packages/x-components/src/views/infinite-scroll-document.vue b/packages/x-components/src/views/infinite-scroll-document.vue
@@ -9,7 +9,7 @@
     <MainScroll use-window>
       <ResultsList #result="{ item }" v-infinite-scroll>
         <MainScrollItem :item="item">
-          <img :src="item.images[0]" />
+          <img :src="item.images[0]" :alt="item.name" />
           <p>{{ item.title }}</p>
         </MainScrollItem>
       </ResultsList>

diff --git a/packages/x-components/src/views/infinite-scroll-html.vue b/packages/x-components/src/views/infinite-scroll-html.vue
@@ -9,7 +9,7 @@
     <MainScroll use-window>
       <ResultsList #result="{ item }" v-infinite-scroll:html>
         <MainScrollItem :item="item">
-          <img :src="item.images[0]" />
+          <img :src="item.images[0]" :alt="item.name" />
           <p>{{ item.title }}</p>
         </MainScrollItem>
       </ResultsList>

diff --git a/packages/x-components/src/x-modules/search/components/banner.vue b/packages/x-components/src/x-modules/search/components/banner.vue
@@ -1,6 +1,6 @@
 <template>
   <a @click="emitClickEvent" :href="banner.url" class="x-banner" data-test="banner">
-    <img :src="banner.image" class="x-banner__image" alt="" />
+    <img :src="banner.image" class="x-banner__image" :alt="banner.title" />
     <h2 class="x-banner__title">{{ banner.title }}</h2>
   </a>
 </template>

diff --git a/packages/x-components/src/x-modules/search/components/promoted.vue b/packages/x-components/src/x-modules/search/components/promoted.vue
@@ -1,6 +1,6 @@
 <template>
   <a @click="emitClickEvent" :href="promoted.url" class="x-promoted" data-test="promoted">
-    <img :src="promoted.image" class="x-promoted__image" alt="" />
+    <img :src="promoted.image" class="x-promoted__image" :alt="promoted.title" />
     <h2 class="x-promoted__title">{{ promoted.title }}</h2>
   </a>
 </template>