#57428 - Add missing title attr in icons

Joanna Szczęch · Joanna Szczęch · commit 7377fbb22c71 · 2019-11-12T20:51:13.000+01:00
diff --git a/src/molecules/alert/Alert.html b/src/molecules/alert/Alert.html
@@ -13,7 +13,10 @@
       class="a-alert__close"
       @click.native="close"
     >
-      <a-icon class="a-alert__close-icon">
+      <a-icon
+        class="a-alert__close-icon"
+        :title="closeIconTitle"
+      >
         <a-icon-close />
       </a-icon>
     </a-button>
diff --git a/src/molecules/alert/Alert.js b/src/molecules/alert/Alert.js
@@ -15,6 +15,13 @@ export default {
     closeAriaLabel: {
       type: String,
       default: null
+    },
+    /**
+     * Close icon title
+     */
+    closeIconTitle: {
+      type: String,
+      default: null
     }
   },
   methods: {
diff --git a/src/molecules/alert/Alert.stories.js b/src/molecules/alert/Alert.stories.js
@@ -30,6 +30,7 @@ storiesOf('Molecules/Alert', module)
       <a-alert
         :visible="isVisible"
         close-aria-label="Close alert"
+        close-icon-title="Close icon"
         @close="close"
       >
         {{ contentKnobs }}
diff --git a/src/molecules/cookie-message/CookieMessage.html b/src/molecules/cookie-message/CookieMessage.html
@@ -19,7 +19,10 @@
         @click.native="close"
       >
         {{ closeButton }}
-        <a-icon class="a-cookie-message__close-icon">
+        <a-icon
+          class="a-cookie-message__close-icon"
+          :title="closeIconTitle"
+        >
           <a-icon-close />
         </a-icon>
       </a-button>
diff --git a/src/molecules/cookie-message/CookieMessage.js b/src/molecules/cookie-message/CookieMessage.js
@@ -21,6 +21,13 @@ export default {
     closeAriaLabel: {
       type: String,
       default: null
+    },
+    /**
+     * Title for close icon
+     */
+    closeIconTitle: {
+      type: String,
+      default: null
     }
   },
   methods: {
diff --git a/src/molecules/cookie-message/CookieMessage.stories.js b/src/molecules/cookie-message/CookieMessage.stories.js
@@ -35,6 +35,7 @@ storiesOf('Molecules/Cookie Message', module)
         :visible="isVisible"
         :close-button="textKnobs"
         close-aria-label="Close cookie message"
+        close-icon-title="Close message"
         @close="close"
       >
         <a-link href='#'>
@@ -61,6 +62,7 @@ storiesOf('Molecules/Cookie Message', module)
       <a-cookie-message
         :visible="isVisible"
         close-aria-label="Close cookie message"
+        close-icon-title="Close message"
         @close="close"
       >
         <a-link href='#'>
diff --git a/src/molecules/footer-menu/FooterMenu.html b/src/molecules/footer-menu/FooterMenu.html
@@ -21,7 +21,10 @@
         :disabled="isLargeScreen"
       >
         {{ item.title }}
-        <a-icon class="a-footer-menu__icon a-collapse__icon">
+        <a-icon
+          class="a-footer-menu__icon a-collapse__icon"
+          :title="collapseIconTitle"
+        >
           <a-icon-expand-more />
         </a-icon>
       </a-button>
diff --git a/src/molecules/footer-menu/FooterMenu.js b/src/molecules/footer-menu/FooterMenu.js
@@ -7,6 +7,13 @@ export default {
     menu: {
       type: Array,
       default: null
+    },
+    /**
+     * Collapse icon title
+     */
+    collapseIconTitle: {
+      type: String,
+      default: null
     }
   },
   data () {
diff --git a/src/molecules/footer-menu/FooterMenu.stories.js b/src/molecules/footer-menu/FooterMenu.stories.js
@@ -19,5 +19,10 @@ storiesOf('Molecules/Footer menu', module)
     methods: {
       submit: action('Submitted')
     },
-    template: '<a-footer-menu :menu="menuKnob"/>'
+    template: `
+      <a-footer-menu 
+        :menu="menuKnob"
+        collapse-icon-title="Collapse icon"
+      />
+    `
   }))
diff --git a/src/molecules/modal/Modal.html b/src/molecules/modal/Modal.html
@@ -50,7 +50,10 @@
           >
             <!-- @slot Custom close icon (Named slot) -->
             <slot name="close">
-              <a-icon class="a-modal__close-icon">
+              <a-icon
+                class="a-modal__close-icon"
+                :title="closeIconTitle"
+              >
                 <a-icon-close />
               </a-icon>
             </slot>
diff --git a/src/molecules/modal/Modal.js b/src/molecules/modal/Modal.js
@@ -93,6 +93,13 @@ export default {
     closeButtonAriaLabel: {
       type: String,
       default: null
+    },
+    /**
+     * Title for close icon
+     */
+    closeIconTitle: {
+      type: String,
+      default: null
     }
   },
   data () {
diff --git a/src/molecules/modal/Modal.stories.js b/src/molecules/modal/Modal.stories.js
@@ -74,6 +74,7 @@ storiesOf('Molecules/Modal', module)
           :heading="headingKnob"
           :visible="isModalVisible"
           :class="classKnob"
+          close-icon-title="Close modal"
           @close="closeModal()"
           :modal-content-transition="contentTransitionKnob"
           close-button-aria-label="Close"
@@ -110,6 +111,7 @@ storiesOf('Molecules/Modal', module)
           :heading="headingKnob"
           :visible="isModalVisible"
           :class="classKnob"
+          close-icon-title="Close modal"
           :closeButton="false"
           @close="closeModal()"
           :modal-content-transition="contentTransitionKnob"
@@ -142,6 +144,7 @@ storiesOf('Molecules/Modal', module)
         <a-modal
           :visible="isModalVisible"
           :class="classKnob"
+          close-icon-title="Close modal"
           :closeButton="false"
           @close="closeModal()"
           :modal-content-transition="contentTransitionKnob"
@@ -209,7 +212,10 @@ storiesOf('Molecules/Modal', module)
             />
           </template>
           <template #close>
-            <a-icon class="a-modal__close-icon">
+            <a-icon 
+              class="a-modal__close-icon"
+              title="Close modal"
+            >
               <a-icon-close />
             </a-icon>
           </template>
@@ -236,7 +242,10 @@ storiesOf('Molecules/Modal', module)
             />
           </template>
           <template #close>
-            <a-icon class="a-modal__close-icon">
+            <a-icon 
+              class="a-modal__close-icon"
+              title="Close modal"
+            >
               <a-icon-close />
             </a-icon>
           </template>
diff --git a/src/molecules/product-grid-item/ProductGridItem.stories.js b/src/molecules/product-grid-item/ProductGridItem.stories.js
@@ -105,7 +105,10 @@ storiesOf('Molecules/Product Grid Item', module)
             style="display: flex; align-items: center;"
           >
             {{ badge.productBadgeText }}
-            <a-icon style="margin-left: 8px;">
+            <a-icon 
+              style="margin-left: 8px;"
+              title="Favorite border title"
+            >
               <a-icon-favorite-border />
             </a-icon>
           </a-badge>
diff --git a/src/molecules/product-list-item/ProductListItem.html b/src/molecules/product-list-item/ProductListItem.html
@@ -80,7 +80,10 @@
             custom-class="a-product-list-item__actions-item"
             @click.native="onRemove"
           >
-            <a-icon class="a-product-list-item__action-icon">
+            <a-icon
+              class="a-product-list-item__action-icon"
+              :title="actionIconTitle"
+            >
               <a-icon-delete />
             </a-icon>
           </a-button>
diff --git a/src/molecules/product-list-item/ProductListItem.js b/src/molecules/product-list-item/ProductListItem.js
@@ -53,6 +53,13 @@ export default {
     removeButtonAriaLabel: {
       type: String,
       default: null
+    },
+    /**
+     * Action icon title
+     */
+    actionIconTitle: {
+      type: String,
+      default: null
     }
   },
   computed: {
diff --git a/src/molecules/product-list-item/ProductListItem.stories.js b/src/molecules/product-list-item/ProductListItem.stories.js
@@ -55,6 +55,7 @@ storiesOf('Molecules/Product List Item', module)
         :prices="pricesKnob"
         :options="optionsKnob"
         remove-button-aria-label="Remove this product from your shopping cart"
+        action-icon-title="Action title"
         @remove="removeMethod"
       />
     `
@@ -92,6 +93,7 @@ storiesOf('Molecules/Product List Item', module)
         :prices="pricesKnob"
         :options="optionsKnob"
         remove-button-aria-label="Remove this product from your shopping cart"
+        action-icon-title="Action title"
         @remove="removeMethod"
       >
         <template #quantity>
diff --git a/src/organisms/footer/Footer.html b/src/organisms/footer/Footer.html
@@ -14,7 +14,10 @@
         :aria-label="scrollAriaLabel"
         @click.native="scrollToTop"
       >
-        <a-icon class="a-footer__scroll-up-icon">
+        <a-icon
+          class="a-footer__scroll-up-icon"
+          :title="scrollUpIconTitle"
+        >
           <a-icon-expand-less />
         </a-icon>
       </a-button>
diff --git a/src/organisms/footer/Footer.js b/src/organisms/footer/Footer.js
@@ -57,9 +57,19 @@ export default {
       type: Object,
       default: null
     },
+    /**
+     * Aria label for scroll
+     */
     scrollAriaLabel: {
       type: String,
       default: null
+    },
+    /**
+     * Title for scroll-up icon
+     */
+    scrollUpIconTitle: {
+      type: String,
+      default: null
     }
   },
   methods: {

Original file line number	Diff line number	Diff line change
`@@ -30,6 +30,7 @@ storiesOf('Molecules/Alert', module)`
`30`	`30`	`<a-alert`
`31`	`31`	`:visible="isVisible"`
`32`	`32`	`close-aria-label="Close alert"`
	`33`	`+ close-icon-title="Close icon"`
`33`	`34`	`@close="close"`
`34`	`35`	`>`
`35`	`36`	`{{ contentKnobs }}`