@ebay/skin 17.1.1 → 17.2.0-next.0

package/src/less/split-button/stories/base.stories.js

@@ -8,7 +8,7 @@ export const primaryCollapsed = () => `
     </button>
     <span class="menu-button">
         <button class="btn btn--primary btn--split-end" aria-haspopup="true" type="button">
-            <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
+            <svg class="icon icon--chevron-down-12" height="10" width="14" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </button>
@@ -38,7 +38,7 @@ export const primaryExpanded = () => `
     </button>
     <span class="menu-button">
         <button class="btn btn--primary btn--split-end" aria-haspopup="true" aria-expanded="true" type="button">
-            <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
+            <svg class="icon icon--chevron-down-12" height="10" width="14" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </button>
@@ -68,7 +68,7 @@ export const secondaryCollapsed = () => `
     </button>
     <span class="menu-button">
         <button class="btn btn--secondary btn--split-end" aria-haspopup="true" type="button">
-            <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
+            <svg class="icon icon--chevron-down-12" height="10" width="14" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </button>
@@ -98,7 +98,7 @@ export const secondaryExpanded = () => `
     </button>
     <span class="menu-button">
         <button class="btn btn--secondary btn--split-end" aria-expanded="true" aria-haspopup="true" type="button">
-            <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
+            <svg class="icon icon--chevron-down-12" height="10" width="14" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </button>
@@ -128,7 +128,7 @@ export const tertiaryCollapsed = () => `
     </button>
     <span class="menu-button">
         <button class="btn btn--tertiary btn--split-end" aria-haspopup="true" type="button">
-            <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
+            <svg class="icon icon--chevron-down-12" height="10" width="14" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </button>
@@ -158,7 +158,7 @@ export const tertiaryExpanded = () => `
     </button>
     <span class="menu-button">
         <button class="btn btn--tertiary btn--split-end" aria-expanded="true" aria-haspopup="true" type="button">
-            <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
+            <svg class="icon icon--chevron-down-12" height="10" width="14" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </button>
@@ -186,7 +186,7 @@ export const fakePrimaryCollapsed = () => `
     </a>
     <span class="menu-button">
         <button class="btn btn--primary btn--split-end" aria-haspopup="true" type="button">
-            <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
+            <svg class="icon icon--chevron-down-12" height="10" width="14" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </button>
@@ -214,7 +214,7 @@ export const fakePrimaryExpanded = () => `
     </a>
     <span class="menu-button">
         <button class="btn btn--primary btn--split-end" aria-haspopup="true" aria-expanded="true" type="button">
-            <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
+            <svg class="icon icon--chevron-down-12" height="10" width="14" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </button>
@@ -242,7 +242,7 @@ export const fakeSecondaryCollapsed = () => `
     </a>
     <span class="menu-button">
         <button class="btn btn--secondary btn--split-end" aria-haspopup="true" type="button">
-            <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
+            <svg class="icon icon--chevron-down-12" height="10" width="14" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </button>
@@ -270,7 +270,7 @@ export const fakeSecondaryExpanded = () => `
     </a>
     <span class="menu-button">
         <button class="btn btn--secondary btn--split-end" aria-expanded="true" aria-haspopup="true" type="button">
-            <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
+            <svg class="icon icon--chevron-down-12" height="10" width="14" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </button>
@@ -298,7 +298,7 @@ export const fakeTertiaryCollapsed = () => `
     </a>
     <span class="menu-button">
         <button class="btn btn--tertiary btn--split-end" aria-haspopup="true" type="button">
-            <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
+            <svg class="icon icon--chevron-down-12" height="10" width="14" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </button>
@@ -326,7 +326,7 @@ export const fakeTertiaryExpanded = () => `
     </a>
     <span class="menu-button">
         <button class="btn btn--tertiary btn--split-end" aria-expanded="true" aria-haspopup="true" type="button">
-            <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
+            <svg class="icon icon--chevron-down-12" height="10" width="14" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </button>

package/src/less/split-button/stories/rtl.stories.js

@@ -10,7 +10,7 @@ export const primaryCollapsed = () => `
         </button>
         <span class="menu-button">
             <button class="btn btn--primary btn--split-end" aria-haspopup="true" type="button">
-                <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
+                <svg class="icon icon--chevron-down-12" height="10" width="14" aria-hidden="true">
                     <use href="#icon-chevron-down-12"></use>
                 </svg>
             </button>
@@ -42,7 +42,7 @@ export const primaryExpanded = () => `
         </button>
         <span class="menu-button">
             <button class="btn btn--primary btn--split-end" aria-haspopup="true" aria-expanded="true" type="button">
-                <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
+                <svg class="icon icon--chevron-down-12" height="10" width="14" aria-hidden="true">
                     <use href="#icon-chevron-down-12"></use>
                 </svg>
             </button>
@@ -74,7 +74,7 @@ export const secondaryCollapsed = () => `
         </button>
         <span class="menu-button">
             <button class="btn btn--secondary btn--split-end" aria-haspopup="true" type="button">
-                <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
+                <svg class="icon icon--chevron-down-12" height="10" width="14" aria-hidden="true">
                     <use href="#icon-chevron-down-12"></use>
                 </svg>
             </button>
@@ -106,7 +106,7 @@ export const secondaryExpanded = () => `
         </button>
         <span class="menu-button">
             <button class="btn btn--secondary btn--split-end" aria-expanded="true" aria-haspopup="true" type="button">
-                <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
+                <svg class="icon icon--chevron-down-12" height="10" width="14" aria-hidden="true">
                     <use href="#icon-chevron-down-12"></use>
                 </svg>
             </button>
@@ -138,7 +138,7 @@ export const tertiaryCollapsed = () => `
         </button>
         <span class="menu-button">
             <button class="btn btn--tertiary btn--split-end" aria-haspopup="true" type="button">
-                <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
+                <svg class="icon icon--chevron-down-12" height="10" width="14" aria-hidden="true">
                     <use href="#icon-chevron-down-12"></use>
                 </svg>
             </button>
@@ -170,7 +170,7 @@ export const tertiaryExpanded = () => `
         </button>
         <span class="menu-button">
             <button class="btn btn--tertiary btn--split-end" aria-expanded="true" aria-haspopup="true" type="button">
-                <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
+                <svg class="icon icon--chevron-down-12" height="10" width="14" aria-hidden="true">
                     <use href="#icon-chevron-down-12"></use>
                 </svg>
             </button>

package/src/less/split-button/stories/size.stories.js

@@ -8,7 +8,7 @@ export const longTextCollapsed = () => `
     </button>
     <span class="menu-button">
         <button class="btn btn--primary btn--split-end" aria-haspopup="true" type="button">
-            <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
+            <svg class="icon icon--chevron-down-12" height="10" width="14" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </button>
@@ -38,7 +38,7 @@ export const longTextExpanded = () => `
     </button>
     <span class="menu-button">
         <button class="btn btn--primary btn--split-end" aria-expanded="true" aria-haspopup="true" type="button">
-            <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
+            <svg class="icon icon--chevron-down-12" height="10" width="14" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </button>

package/src/less/star-rating/stories/star-rating.stories.js

@@ -2,23 +2,23 @@ export default { title: "Skin/Star Rating" };
 
 export const empty = () => `
 <div role="img" aria-label="Rating: 0/5" class="star-rating" data-stars="0">
-    <svg class="star-rating__icon" focusable="false" height="16" width="16" aria-hidden="true">
+    <svg class="star-rating__icon" height="16" width="16" aria-hidden="true">
         <use href="#icon-star-dynamic"></use>
     </svg>
 
-    <svg class="star-rating__icon" focusable="false" height="16" width="16" aria-hidden="true">
+    <svg class="star-rating__icon" height="16" width="16" aria-hidden="true">
         <use href="#icon-star-dynamic"></use>
     </svg>
 
-    <svg class="star-rating__icon" focusable="false" height="16" width="16" aria-hidden="true">
+    <svg class="star-rating__icon" height="16" width="16" aria-hidden="true">
         <use href="#icon-star-dynamic"></use>
     </svg>
 
-    <svg class="star-rating__icon" focusable="false" height="16" width="16" aria-hidden="true">
+    <svg class="star-rating__icon" height="16" width="16" aria-hidden="true">
         <use href="#icon-star-dynamic"></use>
     </svg>
 
-    <svg class="star-rating__icon" focusable="false" height="16" width="16" aria-hidden="true">
+    <svg class="star-rating__icon" height="16" width="16" aria-hidden="true">
         <use href="#icon-star-dynamic"></use>
     </svg>
 </div>
@@ -26,23 +26,23 @@ export const empty = () => `
 
 export const twoAndAHalfStars = () => `
 <div role="img" aria-label="Rating: 2.5/5" class="star-rating" data-stars="2-5">
-    <svg class="star-rating__icon" focusable="false" height="16" width="16" aria-hidden="true">
+    <svg class="star-rating__icon" height="16" width="16" aria-hidden="true">
         <use href="#icon-star-dynamic"></use>
     </svg>
 
-    <svg class="star-rating__icon" focusable="false" height="16" width="16" aria-hidden="true">
+    <svg class="star-rating__icon" height="16" width="16" aria-hidden="true">
         <use href="#icon-star-dynamic"></use>
     </svg>
 
-    <svg class="star-rating__icon" focusable="false" height="16" width="16" aria-hidden="true">
+    <svg class="star-rating__icon" height="16" width="16" aria-hidden="true">
         <use href="#icon-star-dynamic"></use>
     </svg>
 
-    <svg class="star-rating__icon" focusable="false" height="16" width="16" aria-hidden="true">
+    <svg class="star-rating__icon" height="16" width="16" aria-hidden="true">
         <use href="#icon-star-dynamic"></use>
     </svg>
 
-    <svg class="star-rating__icon" focusable="false" height="16" width="16" aria-hidden="true">
+    <svg class="star-rating__icon" height="16" width="16" aria-hidden="true">
         <use href="#icon-star-dynamic"></use>
     </svg>
 </div>
@@ -50,23 +50,23 @@ export const twoAndAHalfStars = () => `
 
 export const fourStars = () => `
 <div role="img" aria-label="Rating: 4/5" class="star-rating" data-stars="4">
-    <svg class="star-rating__icon" focusable="false" height="16" width="16" aria-hidden="true">
+    <svg class="star-rating__icon" height="16" width="16" aria-hidden="true">
         <use href="#icon-star-dynamic"></use>
     </svg>
 
-    <svg class="star-rating__icon" focusable="false" height="16" width="16" aria-hidden="true">
+    <svg class="star-rating__icon" height="16" width="16" aria-hidden="true">
         <use href="#icon-star-dynamic"></use>
     </svg>
 
-    <svg class="star-rating__icon" focusable="false" height="16" width="16" aria-hidden="true">
+    <svg class="star-rating__icon" height="16" width="16" aria-hidden="true">
         <use href="#icon-star-dynamic"></use>
     </svg>
 
-    <svg class="star-rating__icon" focusable="false" height="16" width="16" aria-hidden="true">
+    <svg class="star-rating__icon" height="16" width="16" aria-hidden="true">
         <use href="#icon-star-dynamic"></use>
     </svg>
 
-    <svg class="star-rating__icon" focusable="false" height="16" width="16" aria-hidden="true">
+    <svg class="star-rating__icon" height="16" width="16" aria-hidden="true">
         <use href="#icon-star-dynamic"></use>
     </svg>
 </div>

package/src/less/star-rating-select/stories/star-rating-select.stories.js

@@ -5,7 +5,7 @@ export const empty = () => `
     <span class="star-rating-select__radio">
         <input class="star-rating-select__control" aria-label="1 Star" type="radio" name="radio-star-rating-select" value="1">
         <span class="star-rating-select__radio-icon">
-            <svg focusable="false" height="16" width="16" aria-hidden="true">
+            <svg height="16" width="16" aria-hidden="true">
                 <use href="#icon-star-dynamic"></use>
             </svg>
         </span>
@@ -14,7 +14,7 @@ export const empty = () => `
     <span class="star-rating-select__radio">
         <input class="star-rating-select__control" aria-label="2 Stars" type="radio" name="radio-star-rating-select" value="2">
         <span class="star-rating-select__radio-icon">
-            <svg focusable="false" height="16" width="16" aria-hidden="true">
+            <svg height="16" width="16" aria-hidden="true">
                 <use href="#icon-star-dynamic"></use>
             </svg>
         </span>
@@ -23,7 +23,7 @@ export const empty = () => `
     <span class="star-rating-select__radio">
         <input class="star-rating-select__control" aria-label="3 Stars" type="radio" name="radio-star-rating-select" value="3">
         <span class="star-rating-select__radio-icon">
-            <svg focusable="false" height="16" width="16" aria-hidden="true">
+            <svg height="16" width="16" aria-hidden="true">
                 <use href="#icon-star-dynamic"></use>
             </svg>
         </span>
@@ -32,7 +32,7 @@ export const empty = () => `
     <span class="star-rating-select__radio">
         <input class="star-rating-select__control" aria-label="4 Stars" type="radio" name="radio-star-rating-select" value="4">
         <span class="star-rating-select__radio-icon">
-            <svg focusable="false" height="16" width="16" aria-hidden="true">
+            <svg height="16" width="16" aria-hidden="true">
                 <use href="#icon-star-dynamic"></use>
             </svg>
         </span>
@@ -41,7 +41,7 @@ export const empty = () => `
     <span class="star-rating-select__radio">
         <input class="star-rating-select__control" aria-label="5 Stars" type="radio" name="radio-star-rating-select" value="5">
         <span class="star-rating-select__radio-icon">
-            <svg focusable="false" height="16" width="16" aria-hidden="true">
+            <svg height="16" width="16" aria-hidden="true">
                 <use href="#icon-star-dynamic"></use>
             </svg>
         </span>
@@ -54,7 +54,7 @@ export const fourStars = () => `
     <span class="star-rating-select__radio">
         <input class="star-rating-select__control star-rating-select__control--filled" aria-label="1 Star" type="radio" name="radio-star-rating-select" value="1">
         <span class="star-rating-select__radio-icon">
-            <svg focusable="false" height="16" width="16" aria-hidden="true">
+            <svg height="16" width="16" aria-hidden="true">
                 <use href="#icon-star-dynamic"></use>
             </svg>
         </span>
@@ -63,7 +63,7 @@ export const fourStars = () => `
     <span class="star-rating-select__radio">
         <input class="star-rating-select__control star-rating-select__control--filled" aria-label="2 Stars" type="radio" name="radio-star-rating-select" value="2">
         <span class="star-rating-select__radio-icon">
-            <svg focusable="false" height="16" width="16" aria-hidden="true">
+            <svg height="16" width="16" aria-hidden="true">
                 <use href="#icon-star-dynamic"></use>
             </svg>
         </span>
@@ -72,7 +72,7 @@ export const fourStars = () => `
     <span class="star-rating-select__radio">
         <input class="star-rating-select__control star-rating-select__control--filled" aria-label="3 Stars" type="radio" name="radio-star-rating-select" value="3">
         <span class="star-rating-select__radio-icon">
-            <svg focusable="false" height="16" width="16" aria-hidden="true">
+            <svg height="16" width="16" aria-hidden="true">
                 <use href="#icon-star-dynamic"></use>
             </svg>
         </span>
@@ -81,7 +81,7 @@ export const fourStars = () => `
     <span class="star-rating-select__radio">
         <input class="star-rating-select__control star-rating-select__control--filled" aria-label="4 Stars" type="radio" name="radio-star-rating-select" value="4">
         <span class="star-rating-select__radio-icon">
-            <svg focusable="false" height="16" width="16" aria-hidden="true">
+            <svg height="16" width="16" aria-hidden="true">
                 <use href="#icon-star-dynamic"></use>
             </svg>
         </span>
@@ -90,7 +90,7 @@ export const fourStars = () => `
     <span class="star-rating-select__radio">
         <input class="star-rating-select__control" aria-label="5 Stars" type="radio" name="radio-star-rating-select" value="5">
         <span class="star-rating-select__radio-icon">
-            <svg focusable="false" height="16" width="16" aria-hidden="true">
+            <svg height="16" width="16" aria-hidden="true">
                 <use href="#icon-star-dynamic"></use>
             </svg>
         </span>

package/src/less/textbox/stories/icon.stories.js

@@ -2,7 +2,7 @@ export default { title: "Skin/Textbox/Icon" };
 
 export const base = () => `
 <span class="textbox">
-    <svg class="icon icon--mail-24" focusable="false" width="16" height="16" aria-hidden="true">
+    <svg class="icon icon--mail-24" width="16" height="16" aria-hidden="true">
         <use href="#icon-mail-24"></use>
     </svg>
     <input class="textbox__control" type="text" placeholder="placeholder text" />
@@ -12,7 +12,7 @@ export const base = () => `
 export const end = () => `
 <span class="textbox textbox--icon-end">
     <input class="textbox__control" type="text" placeholder="placeholder text" />
-    <svg class="icon icon--mail-24" focusable="false" width="16" height="16" aria-hidden="true">
+    <svg class="icon icon--mail-24" width="16" height="16" aria-hidden="true">
         <use href="#icon-mail-24"></use>
     </svg>
 </span>
@@ -20,11 +20,11 @@ export const end = () => `
 
 export const dual = () => `
 <span class="textbox textbox--icon-end">
-    <svg class="icon icon--search-24" focusable="false" width="16" height="16" aria-hidden="true">
+    <svg class="icon icon--search-24" width="16" height="16" aria-hidden="true">
         <use href="#icon-search-24"></use>
     </svg>
     <input class="textbox__control" type="text" placeholder="placeholder text" />
-    <svg class="icon icon--mail-24" focusable="false" width="16" height="16" aria-hidden="true">
+    <svg class="icon icon--mail-24" width="16" height="16" aria-hidden="true">
         <use href="#icon-mail-24"></use>
     </svg>
 </span>
@@ -34,7 +34,7 @@ export const actionable = () => `
 <span class="textbox textbox--icon-end">
     <input class="textbox__control" type="text" placeholder="placeholder text" />
     <button class="icon-btn" type="button" aria-label="Choose Contact">
-        <svg aria-hidden="true" class="icon icon--mail-24" focusable="false" width="16" height="16">
+        <svg aria-hidden="true" class="icon icon--mail-24" width="16" height="16">
             <use href="#icon-mail-24"></use>
         </svg>
     </button>
@@ -43,12 +43,12 @@ export const actionable = () => `
 
 export const dualActionable = () => `
 <span class="textbox textbox--icon-end">
-    <svg class="icon icon--search-24" focusable="false" width="16" height="16" aria-hidden="true">
+    <svg class="icon icon--search-24" width="16" height="16" aria-hidden="true">
         <use href="#icon-search-24"></use>
     </svg>
     <input class="textbox__control" type="text" placeholder="placeholder text" />
     <button class="icon-btn" type="button" aria-label="Choose Contact">
-        <svg class="icon icon--mail-24" focusable="false" width="16" height="16" aria-hidden="true">
+        <svg class="icon icon--mail-24" width="16" height="16" aria-hidden="true">
             <use href="#icon-mail-24"></use>
         </svg>
     </button>
@@ -59,7 +59,7 @@ export const actionableLarge = () => `
 <span class="textbox textbox--icon-end">
     <input class="textbox__control textbox__control--large" type="text" placeholder="placeholder text" />
     <button class="icon-btn" type="button" aria-label="Choose Contact">
-        <svg aria-hidden="true" class="icon icon--mail-24" focusable="false" width="16" height="16">
+        <svg aria-hidden="true" class="icon icon--mail-24" width="16" height="16">
             <use href="#icon-mail-24"></use>
         </svg>
     </button>
@@ -68,12 +68,12 @@ export const actionableLarge = () => `
 
 export const dualActionableLarge = () => `
 <span class="textbox textbox--icon-end">
-    <svg class="icon icon--search-24" focusable="false" width="16" height="16" aria-hidden="true">
+    <svg class="icon icon--search-24" width="16" height="16" aria-hidden="true">
         <use href="#icon-search-24"></use>
     </svg>
     <input class="textbox__control textbox__control--large" type="text" placeholder="placeholder text" />
     <button class="icon-btn" type="button" aria-label="Choose Contact">
-        <svg class="icon icon--mail-24" focusable="false" width="16" height="16" aria-hidden="true">
+        <svg class="icon icon--mail-24" width="16" height="16" aria-hidden="true">
             <use href="#icon-mail-24"></use>
         </svg>
     </button>

package/src/less/textbox/stories/rtl/icon.stories.js

@@ -3,7 +3,7 @@ export default { title: "Skin/Textbox/RTL/Icon" };
 export const base = () => `
 <div dir="rtl">
     <span class="textbox">
-        <svg class="icon icon--mail-24" focusable="false" width="16" height="16" aria-hidden="true">
+        <svg class="icon icon--mail-24" width="16" height="16" aria-hidden="true">
             <use href="#icon-mail-24"></use>
         </svg>
         <input class="textbox__control" type="text" placeholder="placeholder text" />
@@ -15,7 +15,7 @@ export const end = () => `
 <div dir="rtl">
     <span class="textbox textbox--icon-end">
         <input class="textbox__control" type="text" placeholder="placeholder text" />
-        <svg class="icon icon--mail-24" focusable="false" width="16" height="16" aria-hidden="true">
+        <svg class="icon icon--mail-24" width="16" height="16" aria-hidden="true">
             <use href="#icon-mail-24"></use>
         </svg>
     </span>
@@ -25,12 +25,12 @@ export const end = () => `
 export const dual = () => `
 <div dir="rtl">
     <span class="textbox textbox--icon-end">
-        <svg class="icon icon--search-24" focusable="false" width="16" height="16" aria-hidden="true">
+        <svg class="icon icon--search-24" width="16" height="16" aria-hidden="true">
             <use href="#icon-search-24"></use>
         </svg>
 
         <input class="textbox__control" type="text" placeholder="placeholder text" />
-        <svg class="icon icon--mail-24" focusable="false" width="16" height="16" aria-hidden="true">
+        <svg class="icon icon--mail-24" width="16" height="16" aria-hidden="true">
             <use href="#icon-mail-24"></use>
         </svg>
     </span>
@@ -42,7 +42,7 @@ export const actionable = () => `
     <span class="textbox textbox--icon-end">
         <input class="textbox__control" type="text" placeholder="placeholder text" />
         <button class="icon-btn" type="button" aria-label="Choose Contact">
-            <svg aria-hidden="true" class="icon icon--mail-24" focusable="false" width="16" height="16">
+            <svg aria-hidden="true" class="icon icon--mail-24" width="16" height="16">
                 <use href="#icon-mail-24"></use>
             </svg>
         </button>
@@ -53,13 +53,13 @@ export const actionable = () => `
 export const dualActionable = () => `
 <div dir="rtl">
     <span class="textbox textbox--icon-end">
-        <svg class="icon icon--search-24" focusable="false" width="16" height="16" aria-hidden="true">
+        <svg class="icon icon--search-24" width="16" height="16" aria-hidden="true">
             <use href="#icon-search-24"></use>
         </svg>
 
         <input class="textbox__control" type="text" placeholder="placeholder text" />
         <button class="icon-btn" type="button" aria-label="Choose Contact">
-            <svg class="icon icon--mail-24" focusable="false" width="16" height="16" aria-hidden="true">
+            <svg class="icon icon--mail-24" width="16" height="16" aria-hidden="true">
                 <use href="#icon-mail-24"></use>
             </svg>
         </button>

package/src/less/toast-dialog/stories/toast-dialog.stories.js

@@ -6,7 +6,7 @@ export const primaryAction = () => `
         <div class="toast-dialog__header">
             <h2>User Privacy Preferences</h2>
             <button class="icon-btn icon-btn--transparent toast-dialog__close" type="button" aria-label="Close notification dialog">
-                <svg class="icon icon--close icon--close-16" focusable="false">
+                <svg class="icon icon--close icon--close-16">
                     <use href="#icon-close-16"></use>
                 </svg>
             </button>
@@ -28,7 +28,7 @@ export const secondaryAction = () => `
         <div class="toast-dialog__header">
             <h2>User Privacy Preferences</h2>
             <button class="icon-btn icon-btn--transparent toast-dialog__close" type="button" aria-label="Close notification dialog">
-                <svg class="icon icon--close icon--close-16" focusable="false">
+                <svg class="icon icon--close icon--close-16">
                     <use href="#icon-close-16"></use>
                 </svg>
             </button>
@@ -52,7 +52,7 @@ export const RTL = () => `
             <div class="toast-dialog__header">
                 <h2>User Privacy Preferences</h2>
                 <button class="icon-btn icon-btn--transparent toast-dialog__close" type="button" aria-label="Close notification dialog">
-                    <svg class="icon icon--close icon--close-16" focusable="false">
+                    <svg class="icon icon--close icon--close-16">
                         <use href="#icon-close-16"></use>
                     </svg>
                 </button>

package/src/less/toggle-button/stories/gallery-layout.stories.js

@@ -3,7 +3,7 @@ export default { title: "Skin/Toggle Button/Gallery Layout" };
 export const iconTitleSubtitle = () => `
 <button type="button" class="toggle-button toggle-button--gallery-layout" aria-pressed="false">
     <span class="toggle-button__icon">
-        <svg aria-hidden="true" class="icon icon--on-the-way-16" focusable="false" height="64" width="64">
+        <svg aria-hidden="true" class="icon icon--on-the-way-16" height="64" width="64">
             <use href="#icon-on-the-way-16"></use>
         </svg>
     </span>
@@ -126,7 +126,7 @@ export const disabledImage = () => `
 export const disabledIcon = () => `
 <button type="button" class="toggle-button toggle-button--gallery-layout" aria-pressed="false" disabled>
     <span class="toggle-button__icon">
-        <svg aria-hidden="true" class="icon icon--on-the-way-16" focusable="false" height="64" width="64">
+        <svg aria-hidden="true" class="icon icon--on-the-way-16" height="64" width="64">
             <use href="#icon-on-the-way-16"></use>
         </svg>
     </span>
@@ -140,7 +140,7 @@ export const disabledIcon = () => `
 export const disabledIconColored = () => `
 <button type="button" class="toggle-button toggle-button--gallery-layout" aria-pressed="false" disabled>
     <span class="toggle-button__icon">
-        <svg aria-hidden="true" class="icon icon--mastercard-32-colored" focusable="false" height="64" width="64">
+        <svg aria-hidden="true" class="icon icon--mastercard-32-colored" height="64" width="64">
             <use href="#icon-mastercard-32-colored"></use>
         </svg>
     </span>

package/src/less/toggle-button/stories/list-layout.stories.js

@@ -32,7 +32,7 @@ export const titleMultilineSubtitle = () => `
 export const iconTitleSubtitle = () => `
 <button type="button" class="toggle-button toggle-button--list-layout" aria-pressed="false">
     <span class="toggle-button__icon">
-        <svg aria-hidden="true" class="icon icon--on-the-way-16" focusable="false" height="16" width="16">
+        <svg aria-hidden="true" class="icon icon--on-the-way-16" height="16" width="16">
             <use href="#icon-on-the-way-16"></use>
         </svg>
     </span>
@@ -116,7 +116,7 @@ export const disabledImage = () => `
 export const disabledIcon = () => `
 <button type="button" class="toggle-button toggle-button--list-layout" aria-pressed="false" disabled>
     <span class="toggle-button__icon">
-        <svg aria-hidden="true" class="icon icon--on-the-way-16" focusable="false" height="16" width="16">
+        <svg aria-hidden="true" class="icon icon--on-the-way-16" height="16" width="16">
             <use href="#icon-on-the-way-16"></use>
         </svg>
     </span>
@@ -130,7 +130,7 @@ export const disabledIcon = () => `
 export const disabledIconColored = () => `
 <button type="button" class="toggle-button toggle-button--list-layout" aria-pressed="false" disabled>
     <span class="toggle-button__icon">
-        <svg aria-hidden="true" class="icon icon--mastercard-32-colored" focusable="false" height="16" width="16">
+        <svg aria-hidden="true" class="icon icon--mastercard-32-colored" height="16" width="16">
             <use href="#icon-mastercard-32-colored"></use>
         </svg>
     </span>