@ebay/skin 17.1.1 → 17.2.0-next.0

package/src/less/carousel/stories/carousel.stories.js

@@ -4,7 +4,7 @@ export const continuous = () => `
 <div class="carousel">
     <div class="carousel__container">
         <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-left-12" focusable="false">
+            <svg aria-hidden="true" class="icon icon--chevron-left-12">
                 <use href="#icon-chevron-left-12"></use>
             </svg>
         </button>
@@ -21,7 +21,7 @@ export const continuous = () => `
             </ul>
         </div>
         <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-right-12" focusable="false">
+            <svg aria-hidden="true" class="icon icon--chevron-right-12">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </button>
@@ -33,7 +33,7 @@ export const imageTreatment = () => `
 <div class="carousel">
     <div class="carousel__container">
         <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-left-12" focusable="false">
+            <svg aria-hidden="true" class="icon icon--chevron-left-12">
                 <use href="#icon-chevron-left-12"></use>
             </svg>
         </button>
@@ -50,7 +50,7 @@ export const imageTreatment = () => `
             </ul>
         </div>
         <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-right-12" focusable="false">
+            <svg aria-hidden="true" class="icon icon--chevron-right-12">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </button>
@@ -62,7 +62,7 @@ export const imageTreatmentLarge = () => `
 <div class="carousel">
     <div class="carousel__container">
         <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-left-12" focusable="false">
+            <svg aria-hidden="true" class="icon icon--chevron-left-12">
                 <use href="#icon-chevron-left-12"></use>
             </svg>
         </button>
@@ -79,7 +79,7 @@ export const imageTreatmentLarge = () => `
             </ul>
         </div>
         <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-right-12" focusable="false">
+            <svg aria-hidden="true" class="icon icon--chevron-right-12">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </button>
@@ -94,7 +94,7 @@ export const slides = () => `
             <span>Top Products - Slide 1 of 2</span>
         </h4>
         <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-left-12" focusable="false" >
+            <svg aria-hidden="true" class="icon icon--chevron-left-12" >
                 <use href="#icon-chevron-left-12"></use>
             </svg>
         </button>
@@ -111,7 +111,7 @@ export const slides = () => `
             </ul>
         </div>
         <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-right-12" focusable="false">
+            <svg aria-hidden="true" class="icon icon--chevron-right-12">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </button>
@@ -126,7 +126,7 @@ export const slideshow = () => `
             <span>Top Products - Slide 1 of 4</span>
         </h4>
         <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-left-12" focusable="false" >
+            <svg aria-hidden="true" class="icon icon--chevron-left-12" >
                 <use href="#icon-chevron-left-12"></use>
             </svg>
         </button>
@@ -139,13 +139,13 @@ export const slideshow = () => `
             </ul>
         </div>
         <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-right-12" focusable="false">
+            <svg aria-hidden="true" class="icon icon--chevron-right-12">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </button>
     </div>
     <button class="carousel__playback" aria-label="Play - Top Products">
-        <svg class="icon icon--play-24" focusable="false" aria-hidden="true">
+        <svg class="icon icon--play-24" aria-hidden="true">
             <use href="#icon-play-24"></use>
         </svg>
     </button>
@@ -160,7 +160,7 @@ export const RTL = () => `
                 <span>Top Products - Slide 1 of 4</span>
             </h4>
             <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products">
-                <svg aria-hidden="true" class="icon icon--chevron-left-12" focusable="false">
+                <svg aria-hidden="true" class="icon icon--chevron-left-12">
                     <use href="#icon-chevron-left-12"></use>
                 </svg>
             </button>
@@ -173,13 +173,13 @@ export const RTL = () => `
                 </ul>
             </div>
             <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products">
-                <svg aria-hidden="true" class="icon icon--chevron-right-12" focusable="false" >
+                <svg aria-hidden="true" class="icon icon--chevron-right-12" >
                     <use href="#icon-chevron-right-12"></use>
                 </svg>
             </button>
         </div>
         <button class="carousel__playback" aria-label="Play - Top Products">
-            <svg class="icon icon--play-24" focusable="false" aria-hidden="true">
+            <svg class="icon icon--play-24" aria-hidden="true">
                 <use href="#icon-play-24"></use>
             </svg>
         </button>
@@ -191,7 +191,7 @@ export const hiddenScrollbar = () => `
 <div class="carousel carousel--hidden-scrollbar">
     <div class="carousel__container">
         <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-left-12" focusable="false">
+            <svg aria-hidden="true" class="icon icon--chevron-left-12">
                 <use href="#icon-chevron-left-12"></use>
             </svg>
         </button>
@@ -208,7 +208,7 @@ export const hiddenScrollbar = () => `
             </ul>
         </div>
         <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products">
-            <svg aria-hidden="true" class="icon icon--chevron-right-12" focusable="false">
+            <svg aria-hidden="true" class="icon icon--chevron-right-12">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </button>
@@ -221,7 +221,7 @@ export const continuousWithPaddlesVisible = () => `
 <div class="carousel">
     <div class="carousel__container">
         <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products" style="opacity: 1">
-            <svg aria-hidden="true" class="icon icon--chevron-left-12" focusable="false">
+            <svg aria-hidden="true" class="icon icon--chevron-left-12">
                 <use href="#icon-chevron-left-12"></use>
             </svg>
         </button>
@@ -238,7 +238,7 @@ export const continuousWithPaddlesVisible = () => `
             </ul>
         </div>
         <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products" style="opacity: 1">
-            <svg aria-hidden="true" class="icon icon--chevron-right-12" focusable="false">
+            <svg aria-hidden="true" class="icon icon--chevron-right-12">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </button>
@@ -254,7 +254,7 @@ export const slidesWithPaddlesVisible = () => `
             <span>Top Products - Slide 1 of 2</span>
         </h4>
         <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products" style="opacity: 1">
-            <svg aria-hidden="true" class="icon icon--chevron-left-12" focusable="false" >
+            <svg aria-hidden="true" class="icon icon--chevron-left-12" >
                 <use href="#icon-chevron-left-12"></use>
             </svg>
         </button>
@@ -271,7 +271,7 @@ export const slidesWithPaddlesVisible = () => `
             </ul>
         </div>
         <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products" style="opacity: 1">
-            <svg aria-hidden="true" class="icon icon--chevron-right-12" focusable="false">
+            <svg aria-hidden="true" class="icon icon--chevron-right-12">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </button>
@@ -287,7 +287,7 @@ export const slideshowWithPaddlesVisible = () => `
             <span>Top Products - Slide 1 of 4</span>
         </h4>
         <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products" style="opacity: 1">
-            <svg aria-hidden="true" class="icon icon--chevron-left-12" focusable="false" >
+            <svg aria-hidden="true" class="icon icon--chevron-left-12" >
                 <use href="#icon-chevron-left-12"></use>
             </svg>
         </button>
@@ -300,13 +300,13 @@ export const slideshowWithPaddlesVisible = () => `
             </ul>
         </div>
         <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products" style="opacity: 1">
-            <svg aria-hidden="true" class="icon icon--chevron-right-12" focusable="false">
+            <svg aria-hidden="true" class="icon icon--chevron-right-12">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </button>
     </div>
     <button class="carousel__playback" aria-label="Play - Top Products">
-        <svg class="icon icon--play-24" focusable="false" aria-hidden="true">
+        <svg class="icon icon--play-24" aria-hidden="true">
             <use href="#icon-play-24"></use>
         </svg>
     </button>
@@ -318,7 +318,7 @@ export const hiddenScrollbarWithPaddlesVisible = () => `
 <div class="carousel carousel--hidden-scrollbar">
     <div class="carousel__container">
         <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products" style="opacity: 1">
-            <svg aria-hidden="true" class="icon icon--chevron-left-12" focusable="false">
+            <svg aria-hidden="true" class="icon icon--chevron-left-12">
                 <use href="#icon-chevron-left-12"></use>
             </svg>
         </button>
@@ -335,7 +335,7 @@ export const hiddenScrollbarWithPaddlesVisible = () => `
             </ul>
         </div>
         <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products" style="opacity: 1">
-            <svg aria-hidden="true" class="icon icon--chevron-right-12" focusable="false">
+            <svg aria-hidden="true" class="icon icon--chevron-right-12">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </button>

package/src/less/checkbox/stories/checked.stories.js

@@ -4,10 +4,10 @@ export const base = () => `
 <span class="checkbox">
     <input aria-label="Base checkbox" class="checkbox__control" type="checkbox" checked />
     <span class="checkbox__icon" hidden>
-        <svg aria-hidden="true" class="checkbox__unchecked" focusable="false">
+        <svg aria-hidden="true" class="checkbox__unchecked">
             <use href="#icon-checkbox-unchecked-18"></use>
         </svg>
-        <svg aria-hidden="true" class="checkbox__checked" focusable="false">
+        <svg aria-hidden="true" class="checkbox__checked">
             <use href="#icon-checkbox-checked-18"></use>
         </svg>
     </span>
@@ -18,10 +18,10 @@ export const disabled = () => `
 <span class="checkbox">
     <input aria-label="Disabled checkbox" class="checkbox__control" disabled checked type="checkbox" />
     <span class="checkbox__icon" hidden>
-        <svg aria-hidden="true" class="checkbox__unchecked" focusable="false">
+        <svg aria-hidden="true" class="checkbox__unchecked">
             <use href="#icon-checkbox-unchecked-18"></use>
         </svg>
-        <svg aria-hidden="true" class="checkbox__checked" focusable="false">
+        <svg aria-hidden="true" class="checkbox__checked">
             <use href="#icon-checkbox-checked-18"></use>
         </svg>
     </span>
@@ -32,10 +32,10 @@ export const customColour = () => `
 <span class="checkbox">
     <input aria-label="Custom colour checkbox" class="checkbox__control" type="checkbox" checked />
     <span class="checkbox__icon" hidden>
-        <svg aria-hidden="true" class="checkbox__unchecked" focusable="false">
+        <svg aria-hidden="true" class="checkbox__unchecked">
             <use href="#icon-checkbox-unchecked-18"></use>
         </svg>
-        <svg aria-hidden="true" class="checkbox__checked" focusable="false" style="color: #5ba71b">
+        <svg aria-hidden="true" class="checkbox__checked" style="color: #5ba71b">
             <use href="#icon-checkbox-checked-18"></use>
         </svg>
     </span>
@@ -47,10 +47,10 @@ export const RTL = () => `
     <span class="checkbox">
         <input aria-label="RTL checkbox" class="checkbox__control" type="checkbox" checked />
         <span class="checkbox__icon" hidden>
-            <svg aria-hidden="true" class="checkbox__unchecked" focusable="false">
+            <svg aria-hidden="true" class="checkbox__unchecked">
                 <use href="#icon-checkbox-unchecked-18"></use>
             </svg>
-            <svg aria-hidden="true" class="checkbox__checked" focusable="false" style="color: #5ba71b">
+            <svg aria-hidden="true" class="checkbox__checked" style="color: #5ba71b">
                 <use href="#icon-checkbox-checked-18"></use>
             </svg>
         </span>
@@ -62,10 +62,10 @@ export const customIcon = () => `
 <span class="checkbox">
     <input aria-label="Custom icon checkbox" class="checkbox__control" type="checkbox" checked />
     <span class="checkbox__icon" hidden>
-        <svg aria-hidden="true" class="checkbox__unchecked" focusable="false">
+        <svg aria-hidden="true" class="checkbox__unchecked">
             <use href="#icon-attention-24"></use>
         </svg>
-        <svg aria-hidden="true" class="checkbox__checked" focusable="false" style="color: #5ba71b">
+        <svg aria-hidden="true" class="checkbox__checked" style="color: #5ba71b">
             <use href="#icon-confirmation-24"></use>
         </svg>
     </span>
@@ -78,10 +78,10 @@ export const multiLineLabel = () => `
         <span class="checkbox field__control">
             <input aria-label="Multiline checkbox 1" class="checkbox__control" id="group-checkbox-1" type="checkbox" value="1" name="checkbox-group" checked />
             <span class="checkbox__icon" hidden>
-                <svg class="checkbox__unchecked" focusable="false" height="18" width="18">
+                <svg class="checkbox__unchecked" height="18" width="18">
                     <use href="#icon-checkbox-unchecked-18"></use>
                 </svg>
-                <svg class="checkbox__checked" focusable="false" height="18" width="18">
+                <svg class="checkbox__checked" height="18" width="18">
                     <use href="#icon-checkbox-checked-18"></use>
                 </svg>
             </span>
@@ -92,10 +92,10 @@ export const multiLineLabel = () => `
         <span class="checkbox field__control">
             <input aria-label="Multiline checkbox 2" class="checkbox__control" id="group-checkbox-2" type="checkbox" value="2" name="checkbox-group" />
             <span class="checkbox__icon" hidden>
-                <svg class="checkbox__unchecked" focusable="false" height="18" width="18">
+                <svg class="checkbox__unchecked" height="18" width="18">
                     <use href="#icon-checkbox-unchecked-18"></use>
                 </svg>
-                <svg class="checkbox__checked" focusable="false" height="18" width="18">
+                <svg class="checkbox__checked" height="18" width="18">
                     <use href="#icon-checkbox-checked-18"></use>
                 </svg>
             </span>
@@ -106,10 +106,10 @@ export const multiLineLabel = () => `
         <span class="checkbox field__control">
             <input aria-label="Multiline checkbox 3" class="checkbox__control" id="group-checkbox-3" type="checkbox" value="3" name="checkbox-group" />
             <span class="checkbox__icon" hidden>
-                <svg class="checkbox__unchecked" focusable="false" height="18" width="18">
+                <svg class="checkbox__unchecked" height="18" width="18">
                     <use href="#icon-checkbox-unchecked-18"></use>
                 </svg>
-                <svg class="checkbox__checked" focusable="false" height="18" width="18">
+                <svg class="checkbox__checked" height="18" width="18">
                     <use href="#icon-checkbox-checked-18"></use>
                 </svg>
             </span>

package/src/less/checkbox/stories/mixed.stories.js

@@ -4,10 +4,10 @@ export const base = () => `
 <span class="checkbox">
     <input aria-checked="mixed" aria-label="Mixed checkbox" class="checkbox__control" type="checkbox" checked />
     <span class="checkbox__icon" hidden>
-        <svg aria-hidden="true" class="checkbox__unchecked" focusable="false">
+        <svg aria-hidden="true" class="checkbox__unchecked">
             <use href="#icon-checkbox-unchecked-18"></use>
         </svg>
-        <svg aria-hidden="true" class="checkbox__checked" focusable="false">
+        <svg aria-hidden="true" class="checkbox__checked">
             <use href="#icon-checkbox-mixed-18"></use>
         </svg>
     </span>

package/src/less/checkbox/stories/unchecked.stories.js

@@ -4,10 +4,10 @@ export const base = () => `
 <span class="checkbox">
     <input aria-label="Base checkbox" class="checkbox__control" type="checkbox" />
     <span class="checkbox__icon" hidden>
-        <svg aria-hidden="true" class="checkbox__unchecked" focusable="false">
+        <svg aria-hidden="true" class="checkbox__unchecked">
             <use href="#icon-checkbox-unchecked-18"></use>
         </svg>
-        <svg aria-hidden="true" class="checkbox__checked" focusable="false">
+        <svg aria-hidden="true" class="checkbox__checked">
             <use href="#icon-checkbox-checked-18"></use>
         </svg>
     </span>
@@ -18,10 +18,10 @@ export const disabled = () => `
 <span class="checkbox">
     <input aria-label="Disabled checkbox" class="checkbox__control" disabled type="checkbox" />
     <span class="checkbox__icon" hidden>
-        <svg aria-hidden="true" class="checkbox__unchecked" focusable="false">
+        <svg aria-hidden="true" class="checkbox__unchecked">
             <use href="#icon-checkbox-unchecked-18"></use>
         </svg>
-        <svg aria-hidden="true" class="checkbox__checked" focusable="false">
+        <svg aria-hidden="true" class="checkbox__checked">
             <use href="#icon-checkbox-checked-18"></use>
         </svg>
     </span>
@@ -32,10 +32,10 @@ export const customColour = () => `
 <span class="checkbox">
     <input aria-label="Custom colour checkbox" class="checkbox__control" type="checkbox" />
     <span class="checkbox__icon" hidden>
-        <svg aria-hidden="true" class="checkbox__unchecked" focusable="false">
+        <svg aria-hidden="true" class="checkbox__unchecked">
             <use href="#icon-checkbox-unchecked-18"></use>
         </svg>
-        <svg aria-hidden="true" class="checkbox__checked" focusable="false" style="color: #5ba71b">
+        <svg aria-hidden="true" class="checkbox__checked" style="color: #5ba71b">
             <use href="#icon-checkbox-checked-18"></use>
         </svg>
     </span>
@@ -46,10 +46,10 @@ export const customIcon = () => `
 <span class="checkbox">
     <input aria-label="Custom icon checkbox" class="checkbox__control" type="checkbox" />
     <span class="checkbox__icon" hidden>
-        <svg aria-hidden="true" class="checkbox__unchecked" focusable="false">
+        <svg aria-hidden="true" class="checkbox__unchecked">
             <use href="#icon-attention-24"></use>
         </svg>
-        <svg aria-hidden="true" class="checkbox__checked" focusable="false" style="color: #5ba71b">
+        <svg aria-hidden="true" class="checkbox__checked" style="color: #5ba71b">
             <use href="#icon-confirmation-24"></use>
         </svg>
     </span>

package/src/less/chip/stories/interactive-chip.stories.js

@@ -4,7 +4,7 @@ export const typical = () => `
 <span class="chip">
     <span id="chip-interactive-1-text" class="chip__text">Football</span>
     <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-text">
-        <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
+        <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
             <use href="#icon-close-12"></use>
         </svg>
     </button>
@@ -15,7 +15,7 @@ export const leastContent = () => `
 <span class="chip">
     <span id="chip-interactive-1-text" class="chip__text">I</span>
     <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-text">
-        <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
+        <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
             <use href="#icon-close-12"></use>
         </svg>
     </button>
@@ -26,7 +26,7 @@ export const mostContent = () => `
 <span class="chip">
     <span id="chip-interactive-1-text" class="chip__text">Chip with the longest potentially possible content</span>
     <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-text">
-        <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
+        <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
             <use href="#icon-close-12"></use>
         </svg>
     </button>
@@ -37,7 +37,7 @@ export const set = () => `
 <span class="chip">
     <span id="chip-interactive-1-text" class="chip__text">Football</span>
     <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-text">
-        <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
+        <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
             <use href="#icon-close-12"></use>
         </svg>
     </button>
@@ -46,7 +46,7 @@ export const set = () => `
 <span class="chip">
     <span id="chip-interactive-2-text" class="chip__text">Basketball</span>
     <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-2-text">
-        <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
+        <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
             <use href="#icon-close-12"></use>
         </svg>
     </button>
@@ -55,7 +55,7 @@ export const set = () => `
 <span class="chip">
     <span id="chip-interactive-3-text" class="chip__text">Baseball</span>
     <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-3-text">
-        <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
+        <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
             <use href="#icon-close-12"></use>
         </svg>
     </button>
@@ -64,7 +64,7 @@ export const set = () => `
 <span class="chip">
     <span id="chip-interactive-4-text" class="chip__text">Hockey</span>
     <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-4-text">
-        <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
+        <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
             <use href="#icon-close-12"></use>
         </svg>
     </button>
@@ -73,7 +73,7 @@ export const set = () => `
 <span class="chip">
     <span id="chip-interactive-5-text" class="chip__text">Tennis</span>
     <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-5-text">
-        <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
+        <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
             <use href="#icon-close-12"></use>
         </svg>
     </button>
@@ -82,7 +82,7 @@ export const set = () => `
 <span class="chip">
     <span id="chip-interactive-6-text" class="chip__text">Golf</span>
     <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-6-text">
-        <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
+        <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
             <use href="#icon-close-12"></use>
         </svg>
     </button>
@@ -91,7 +91,7 @@ export const set = () => `
 <span class="chip">
     <span id="chip-interactive-7-text" class="chip__text">Gymnastics</span>
     <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-7-text">
-        <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
+        <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
             <use href="#icon-close-12"></use>
         </svg>
     </button>
@@ -100,7 +100,7 @@ export const set = () => `
 <span class="chip">
     <span id="chip-interactive-8-text" class="chip__text">Swimming</span>
     <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-8-text">
-        <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
+        <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
             <use href="#icon-close-12"></use>
         </svg>
     </button>
@@ -109,7 +109,7 @@ export const set = () => `
 <span class="chip">
     <span id="chip-interactive-9-text" class="chip__text">Cricket</span>
     <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-9-text">
-        <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
+        <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
             <use href="#icon-close-12"></use>
         </svg>
     </button>
@@ -118,7 +118,7 @@ export const set = () => `
 <span class="chip">
     <span id="chip-interactive-10-text" class="chip__text">Volleyball</span>
     <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-10-text">
-        <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
+        <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
             <use href="#icon-close-12"></use>
         </svg>
     </button>
@@ -127,7 +127,7 @@ export const set = () => `
 <span class="chip">
     <span id="chip-interactive-11-text" class="chip__text">Rugby</span>
     <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-11-text">
-        <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
+        <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
             <use href="#icon-close-12"></use>
         </svg>
     </button>
@@ -138,7 +138,7 @@ export const largeText = () => `
 <span class="chip" style="font-size: 200%;">
     <span id="chip-interactive-1-text" class="chip__text">Large Text</span>
     <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-text">
-        <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
+        <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
             <use href="#icon-close-12"></use>
         </svg>
     </button>
@@ -149,7 +149,7 @@ export const letterSpacing = () => `
 <span class="chip" style="letter-spacing: calc(14px * 0.12);">
     <span id="chip-interactive-1-text" class="chip__text">Letter Spacing</span>
     <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-text">
-        <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
+        <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
             <use href="#icon-close-12"></use>
         </svg>
     </button>
@@ -161,7 +161,7 @@ export const RTL = () => `
     <span class="chip">
         <span id="chip-interactive-1-text" class="chip__text">Football</span>
         <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-text">
-            <svg class="icon icon--close-12" focusable="false" width="13" height="12" aria-hidden="true">
+            <svg class="icon icon--close-12" width="13" height="12" aria-hidden="true">
                 <use href="#icon-close-12"></use>
             </svg>
         </button>