@ebay/skin 17.1.1 → 17.2.0-next.0

package/src/less/progress-stepper/stories/progress-stepper.stories.js

@@ -5,7 +5,7 @@ export const base = () => `
     <div class="progress-stepper__items" role="list">
         <div class="progress-stepper__item" role="listitem">
             <span class="progress-stepper__icon">
-                <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
+                <svg role="img" aria-hidden="true" class="icon" height="24" width="24">
                     <use href="#icon-stepper-confirmation-24"></use>
                 </svg>
             </span>
@@ -17,7 +17,7 @@ export const base = () => `
         <hr class="progress-stepper__separator" role="presentation" />
         <div class="progress-stepper__item" role="listitem">
             <span class="progress-stepper__icon">
-                <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
+                <svg role="img" aria-hidden="true" class="icon" height="24" width="24">
                     <use href="#icon-stepper-confirmation-24"></use>
                 </svg>
             </span>
@@ -29,7 +29,7 @@ export const base = () => `
         <hr class="progress-stepper__separator" role="presentation" />
         <div aria-current="step" class="progress-stepper__item" role="listitem">
             <span class="progress-stepper__icon">
-                <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
+                <svg role="img" aria-hidden="true" class="icon" height="24" width="24">
                     <use href="#icon-stepper-confirmation-24"></use>
                 </svg>
             </span>
@@ -40,7 +40,7 @@ export const base = () => `
         </div>
         <hr class="progress-stepper__separator" role="presentation" />
         <div class="progress-stepper__item" role="listitem">
-            <svg role="img" aria-label="upcoming" class="icon" focusable="false" height="24" width="24">
+            <svg role="img" aria-label="upcoming" class="icon" height="24" width="24">
                 <use href="#icon-stepper-upcoming-24"></use>
             </svg>
             <span class="progress-stepper__text">
@@ -57,7 +57,7 @@ export const multipleUpcoming = () => `
     <div class="progress-stepper__items" role="list">
         <div aria-current="step" class="progress-stepper__item" role="listitem">
             <span class="progress-stepper__icon">
-                <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
+                <svg role="img" aria-hidden="true" class="icon" height="24" width="24">
                     <use href="#icon-stepper-confirmation-24"></use>
                 </svg>
             </span>
@@ -69,7 +69,7 @@ export const multipleUpcoming = () => `
         <hr class="progress-stepper__separator" role="presentation" />
         <div class="progress-stepper__item" role="listitem">
             <span class="progress-stepper__icon">
-                <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
+                <svg role="img" aria-hidden="true" class="icon" height="24" width="24">
                     <use href="#icon-stepper-upcoming-24"></use>
                 </svg>
             </span>
@@ -81,7 +81,7 @@ export const multipleUpcoming = () => `
         <hr class="progress-stepper__separator" role="presentation" />
         <div class="progress-stepper__item" role="listitem">
             <span class="progress-stepper__icon">
-                <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
+                <svg role="img" aria-hidden="true" class="icon" height="24" width="24">
                     <use href="#icon-stepper-upcoming-24"></use>
                 </svg>
             </span>
@@ -92,7 +92,7 @@ export const multipleUpcoming = () => `
         </div>
         <hr class="progress-stepper__separator" role="presentation" />
         <div class="progress-stepper__item" role="listitem">
-            <svg role="img" aria-label="upcoming" class="icon" focusable="false" height="24" width="24">
+            <svg role="img" aria-label="upcoming" class="icon" height="24" width="24">
                 <use href="#icon-stepper-upcoming-24"></use>
             </svg>
             <span class="progress-stepper__text">
@@ -110,7 +110,7 @@ export const allSelected = () => `
     <div class="progress-stepper__items" role="list">
         <div class="progress-stepper__item" role="listitem">
             <span class="progress-stepper__icon">
-                <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
+                <svg role="img" aria-hidden="true" class="icon" height="24" width="24">
                     <use href="#icon-stepper-confirmation-24"></use>
                 </svg>
             </span>
@@ -122,7 +122,7 @@ export const allSelected = () => `
         <hr class="progress-stepper__separator" role="presentation" />
         <div class="progress-stepper__item" role="listitem">
             <span class="progress-stepper__icon">
-                <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
+                <svg role="img" aria-hidden="true" class="icon" height="24" width="24">
                     <use href="#icon-stepper-confirmation-24"></use>
                 </svg>
             </span>
@@ -134,7 +134,7 @@ export const allSelected = () => `
         <hr class="progress-stepper__separator" role="presentation" />
         <div class="progress-stepper__item" role="listitem">
             <span class="progress-stepper__icon">
-                <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
+                <svg role="img" aria-hidden="true" class="icon" height="24" width="24">
                     <use href="#icon-stepper-confirmation-24"></use>
                 </svg>
             </span>
@@ -146,7 +146,7 @@ export const allSelected = () => `
         <hr class="progress-stepper__separator" role="presentation" />
         <div class="progress-stepper__item" role="listitem">
             <span class="progress-stepper__icon">
-                <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
+                <svg role="img" aria-hidden="true" class="icon" height="24" width="24">
                     <use href="#icon-stepper-confirmation-24"></use>
                 </svg>
             </span>
@@ -164,7 +164,7 @@ export const noneSelected = () => `
     <div class="progress-stepper__items  progress-stepper__items--upcoming" role="list">
         <div class="progress-stepper__item" role="listitem">
             <span class="progress-stepper__icon">
-                <svg role="img" aria-label="upcoming" class="icon" focusable="false" height="24" width="24">
+                <svg role="img" aria-label="upcoming" class="icon" height="24" width="24">
                     <use href="#icon-stepper-upcoming-24"></use>
                 </svg>
             </span>
@@ -176,7 +176,7 @@ export const noneSelected = () => `
         <hr class="progress-stepper__separator" role="presentation" />
         <div class="progress-stepper__item" role="listitem">
             <span class="progress-stepper__icon">
-                <svg role="img" aria-label="upcoming" class="icon" focusable="false" height="24" width="24">
+                <svg role="img" aria-label="upcoming" class="icon" height="24" width="24">
                     <use href="#icon-stepper-upcoming-24"></use>
                 </svg>
             </span>
@@ -188,7 +188,7 @@ export const noneSelected = () => `
         <hr class="progress-stepper__separator" role="presentation" />
         <div class="progress-stepper__item" role="listitem">
             <span class="progress-stepper__icon">
-                <svg role="img" aria-label="upcoming" class="icon" focusable="false" height="24" width="24">
+                <svg role="img" aria-label="upcoming" class="icon" height="24" width="24">
                     <use href="#icon-stepper-upcoming-24"></use>
                 </svg>
             </span>
@@ -200,7 +200,7 @@ export const noneSelected = () => `
         <hr class="progress-stepper__separator" role="presentation" />
         <div class="progress-stepper__item" role="listitem">
             <span class="progress-stepper__icon">
-                <svg role="img" aria-label="upcoming" class="icon" focusable="false" height="24" width="24">
+                <svg role="img" aria-label="upcoming" class="icon" height="24" width="24">
                     <use href="#icon-stepper-upcoming-24"></use>
                 </svg>
             </span>
@@ -218,7 +218,7 @@ export const RTL = () => `
     <div class="progress-stepper__items" role="list">
         <div class="progress-stepper__item" role="listitem">
             <span class="progress-stepper__icon">
-                <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
+                <svg role="img" aria-hidden="true" class="icon" height="24" width="24">
                     <use href="#icon-stepper-confirmation-24"></use>
                 </svg>
             </span>
@@ -230,7 +230,7 @@ export const RTL = () => `
         <hr class="progress-stepper__separator" role="presentation" />
         <div class="progress-stepper__item" role="listitem">
             <span class="progress-stepper__icon">
-                <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
+                <svg role="img" aria-hidden="true" class="icon" height="24" width="24">
                     <use href="#icon-stepper-confirmation-24"></use>
                 </svg>
             </span>
@@ -242,7 +242,7 @@ export const RTL = () => `
         <hr class="progress-stepper__separator" role="presentation" />
         <div aria-current="step" class="progress-stepper__item" role="listitem">
             <span class="progress-stepper__icon">
-                <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
+                <svg role="img" aria-hidden="true" class="icon" height="24" width="24">
                     <use href="#icon-stepper-confirmation-24"></use>
                 </svg>
             </span>
@@ -254,7 +254,7 @@ export const RTL = () => `
         <hr class="progress-stepper__separator" role="presentation" />
         <div class="progress-stepper__item" role="listitem">
             <span class="progress-stepper__icon">
-                <svg role="img" aria-label="upcoming" class="icon" focusable="false" height="24" width="24">
+                <svg role="img" aria-label="upcoming" class="icon" height="24" width="24">
                     <use href="#icon-stepper-upcoming-24"></use>
                 </svg>
             </span>
@@ -273,7 +273,7 @@ export const vertical = () => `
     <div class="progress-stepper__items" role="list">
         <div class="progress-stepper__item" role="listitem">
             <span class="progress-stepper__icon">
-                <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
+                <svg role="img" aria-hidden="true" class="icon" height="24" width="24">
                     <use href="#icon-stepper-confirmation-24"></use>
                 </svg>
             </span>
@@ -286,7 +286,7 @@ export const vertical = () => `
         <hr class="progress-stepper__separator" role="presentation" />
         <div aria-current="step" class="progress-stepper__item" role="listitem">
             <span class="progress-stepper__icon">
-                <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
+                <svg role="img" aria-hidden="true" class="icon" height="24" width="24">
                     <use href="#icon-stepper-confirmation-24"></use>
                 </svg>
             </span>
@@ -298,7 +298,7 @@ export const vertical = () => `
         <hr class="progress-stepper__separator" role="presentation" />
         <div class="progress-stepper__item" role="listitem">
             <span class="progress-stepper__icon">
-                <svg role="img" aria-label="upcoming" class="icon" focusable="false" height="24" width="24">
+                <svg role="img" aria-label="upcoming" class="icon" height="24" width="24">
                     <use href="#icon-stepper-upcoming-24"></use>
                 </svg>
             </span>
@@ -316,7 +316,7 @@ export const verticalUpcoming = () => `
     <div class="progress-stepper__items" role="list">
         <div aria-current="current" class="progress-stepper__item" role="listitem">
             <span class="progress-stepper__icon">
-                <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
+                <svg role="img" aria-hidden="true" class="icon" height="24" width="24">
                     <use href="#icon-stepper-confirmation-24"></use>
                 </svg>
             </span>
@@ -329,7 +329,7 @@ export const verticalUpcoming = () => `
         <hr class="progress-stepper__separator" role="presentation" />
         <div class="progress-stepper__item" role="listitem">
             <span class="progress-stepper__icon">
-                <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
+                <svg role="img" aria-hidden="true" class="icon" height="24" width="24">
                     <use href="#icon-stepper-upcoming-24"></use>
                 </svg>
             </span>
@@ -341,7 +341,7 @@ export const verticalUpcoming = () => `
         <hr class="progress-stepper__separator" role="presentation" />
         <div class="progress-stepper__item" role="listitem">
             <span class="progress-stepper__icon">
-                <svg role="img" aria-label="upcoming" class="icon" focusable="false" height="24" width="24">
+                <svg role="img" aria-label="upcoming" class="icon" height="24" width="24">
                     <use href="#icon-stepper-upcoming-24"></use>
                 </svg>
             </span>
@@ -359,7 +359,7 @@ export const verticalSingleLine = () => `
     <div class="progress-stepper__items" role="list">
         <div class="progress-stepper__item" role="listitem">
             <span class="progress-stepper__icon">
-                <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
+                <svg role="img" aria-hidden="true" class="icon" height="24" width="24">
                     <use href="#icon-stepper-confirmation-24"></use>
                 </svg>
             </span>
@@ -370,7 +370,7 @@ export const verticalSingleLine = () => `
         <hr class="progress-stepper__separator" role="presentation" />
         <div aria-current="step" class="progress-stepper__item" role="listitem">
             <span class="progress-stepper__icon">
-                <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
+                <svg role="img" aria-hidden="true" class="icon" height="24" width="24">
                     <use href="#icon-stepper-confirmation-24"></use>
                 </svg>
             </span>
@@ -381,7 +381,7 @@ export const verticalSingleLine = () => `
         <hr class="progress-stepper__separator" role="presentation" />
         <div class="progress-stepper__item" role="listitem">
             <span class="progress-stepper__icon">
-                <svg role="img" aria-label="upcoming" class="icon" focusable="false" height="24" width="24">
+                <svg role="img" aria-label="upcoming" class="icon" height="24" width="24">
                     <use href="#icon-stepper-upcoming-24"></use>
                 </svg>
             </span>
@@ -399,7 +399,7 @@ export const verticalRTL = () => `
         <div class="progress-stepper__items" role="list">
             <div class="progress-stepper__item" role="listitem">
                 <span class="progress-stepper__icon">
-                    <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
+                    <svg role="img" aria-hidden="true" class="icon" height="24" width="24">
                         <use href="#icon-stepper-confirmation-24"></use>
                     </svg>
                 </span>
@@ -412,7 +412,7 @@ export const verticalRTL = () => `
             <hr class="progress-stepper__separator" role="presentation" />
             <div aria-current="step" class="progress-stepper__item" role="listitem">
                 <span class="progress-stepper__icon">
-                    <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
+                    <svg role="img" aria-hidden="true" class="icon" height="24" width="24">
                         <use href="#icon-stepper-confirmation-24"></use>
                     </svg>
                 </span>
@@ -424,7 +424,7 @@ export const verticalRTL = () => `
             <hr class="progress-stepper__separator" role="presentation" />
             <div class="progress-stepper__item" role="listitem">
                 <span class="progress-stepper__icon">
-                    <svg role="img" aria-label="upcoming" class="icon" focusable="false" height="24" width="24">
+                    <svg role="img" aria-label="upcoming" class="icon" height="24" width="24">
                     <use href="#icon-stepper-upcoming-24"></use>
                 </svg>
                 </span>
@@ -443,7 +443,7 @@ export const errorState = () => `
     <div class="progress-stepper__items" role="list">
         <div class="progress-stepper__item" role="listitem">
             <span class="progress-stepper__icon">
-                <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
+                <svg role="img" aria-hidden="true" class="icon" height="24" width="24">
                     <use href="#icon-stepper-confirmation-24"></use>
                 </svg>
             </span>
@@ -455,7 +455,7 @@ export const errorState = () => `
         <hr class="progress-stepper__separator" role="presentation" />
         <div aria-current="step" class="progress-stepper__item progress-stepper__item--attention" role="listitem">
             <span class="progress-stepper__icon">
-                <svg aria-hidden="true" class="icon" focusable="false" height="24" width="24">
+                <svg aria-hidden="true" class="icon" height="24" width="24">
                     <use href="#icon-stepper-attention-24"></use>
                 </svg>
             </span>
@@ -467,7 +467,7 @@ export const errorState = () => `
         <hr class="progress-stepper__separator" role="presentation" />
         <div class="progress-stepper__item" role="listitem">
             <span class="progress-stepper__icon">
-                <svg role="img" aria-label="upcoming" class="icon" focusable="false" height="24" width="24">
+                <svg role="img" aria-label="upcoming" class="icon" height="24" width="24">
                     <use href="#icon-stepper-upcoming-24"></use>
                 </svg>
             </span>
@@ -484,7 +484,7 @@ export const errorStateVertical = () => `
     <div class="progress-stepper__items" role="list">
         <div class="progress-stepper__item" role="listitem">
             <span class="progress-stepper__icon">
-                <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
+                <svg role="img" aria-hidden="true" class="icon" height="24" width="24">
                     <use href="#icon-stepper-confirmation-24"></use>
                 </svg>
             </span>
@@ -496,7 +496,7 @@ export const errorStateVertical = () => `
         <hr class="progress-stepper__separator" role="presentation" />
         <div aria-current="step" class="progress-stepper__item progress-stepper__item--attention" role="listitem">
             <span class="progress-stepper__icon">
-                <svg aria-hidden="true" class="icon" focusable="false" height="24" width="24">
+                <svg aria-hidden="true" class="icon" height="24" width="24">
                     <use href="#icon-stepper-attention-24"></use>
                 </svg>
             </span>
@@ -508,7 +508,7 @@ export const errorStateVertical = () => `
         <hr class="progress-stepper__separator" role="presentation" />
         <div class="progress-stepper__item" role="listitem">
             <span class="progress-stepper__icon">
-                <svg role="img" aria-label="upcoming" class="icon" focusable="false" height="24" width="24">
+                <svg role="img" aria-label="upcoming" class="icon" height="24" width="24">
                     <use href="#icon-stepper-upcoming-24"></use>
                 </svg>
             </span>
@@ -525,7 +525,7 @@ export const allSelectedVertical = () => `
     <div class="progress-stepper__items" role="list">
         <div class="progress-stepper__item" role="listitem">
             <span class="progress-stepper__icon">
-                <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
+                <svg role="img" aria-hidden="true" class="icon" height="24" width="24">
                     <use href="#icon-stepper-confirmation-24"></use>
                 </svg>
             </span>
@@ -537,7 +537,7 @@ export const allSelectedVertical = () => `
         <hr class="progress-stepper__separator" role="presentation" />
         <div class="progress-stepper__item" role="listitem">
             <span class="progress-stepper__icon">
-                <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
+                <svg role="img" aria-hidden="true" class="icon" height="24" width="24">
                     <use href="#icon-stepper-confirmation-24"></use>
                 </svg>
             </span>
@@ -549,7 +549,7 @@ export const allSelectedVertical = () => `
         <hr class="progress-stepper__separator" role="presentation" />
         <div class="progress-stepper__item" role="listitem">
             <span class="progress-stepper__icon">
-                <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
+                <svg role="img" aria-hidden="true" class="icon" height="24" width="24">
                     <use href="#icon-stepper-confirmation-24"></use>
                 </svg>
             </span>
@@ -561,7 +561,7 @@ export const allSelectedVertical = () => `
         <hr class="progress-stepper__separator" role="presentation" />
         <div class="progress-stepper__item" role="listitem">
             <span class="progress-stepper__icon">
-                <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
+                <svg role="img" aria-hidden="true" class="icon" height="24" width="24">
                     <use href="#icon-stepper-confirmation-24"></use>
                 </svg>
             </span>
@@ -579,7 +579,7 @@ export const noneSelectedVertical = () => `
     <div class="progress-stepper__items  progress-stepper__items--upcoming" role="list">
         <div class="progress-stepper__item" role="listitem">
             <span class="progress-stepper__icon">
-                <svg role="img" aria-label="upcoming" class="icon" focusable="false" height="24" width="24">
+                <svg role="img" aria-label="upcoming" class="icon" height="24" width="24">
                     <use href="#icon-stepper-upcoming-24"></use>
                 </svg>
             </span>
@@ -591,7 +591,7 @@ export const noneSelectedVertical = () => `
         <hr class="progress-stepper__separator" role="presentation" />
         <div class="progress-stepper__item" role="listitem">
             <span class="progress-stepper__icon">
-                <svg role="img" aria-label="upcoming" class="icon" focusable="false" height="24" width="24">
+                <svg role="img" aria-label="upcoming" class="icon" height="24" width="24">
                     <use href="#icon-stepper-upcoming-24"></use>
                 </svg>
             </span>
@@ -603,7 +603,7 @@ export const noneSelectedVertical = () => `
         <hr class="progress-stepper__separator" role="presentation" />
         <div class="progress-stepper__item" role="listitem">
             <span class="progress-stepper__icon">
-                <svg role="img" aria-label="upcoming" class="icon" focusable="false" height="24" width="24">
+                <svg role="img" aria-label="upcoming" class="icon" height="24" width="24">
                     <use href="#icon-stepper-upcoming-24"></use>
                 </svg>
             </span>
@@ -615,7 +615,7 @@ export const noneSelectedVertical = () => `
         <hr class="progress-stepper__separator" role="presentation" />
         <div class="progress-stepper__item" role="listitem">
             <span class="progress-stepper__icon">
-                <svg role="img" aria-label="upcoming" class="icon" focusable="false" height="24" width="24">
+                <svg role="img" aria-label="upcoming" class="icon" height="24" width="24">
                     <use href="#icon-stepper-upcoming-24"></use>
                 </svg>
             </span>
@@ -634,7 +634,7 @@ export const smallScreens = () => `
         <div class="progress-stepper__items" role="list">
             <div class="progress-stepper__item" role="listitem">
                 <span class="progress-stepper__icon">
-                    <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
+                    <svg role="img" aria-hidden="true" class="icon" height="24" width="24">
                         <use href="#icon-stepper-confirmation-24"></use>
                     </svg>
                 </span>
@@ -646,7 +646,7 @@ export const smallScreens = () => `
             <hr class="progress-stepper__separator" role="presentation" />
             <div aria-current="step" class="progress-stepper__item" role="listitem">
                 <span class="progress-stepper__icon">
-                    <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
+                    <svg role="img" aria-hidden="true" class="icon" height="24" width="24">
                         <use href="#icon-stepper-confirmation-24"></use>
                     </svg>
                 </span>
@@ -657,7 +657,7 @@ export const smallScreens = () => `
             </div>
             <hr class="progress-stepper__separator" role="presentation" />
             <div class="progress-stepper__item" role="listitem">
-                <svg role="img" aria-label="upcoming" class="icon" focusable="false" height="24" width="24">
+                <svg role="img" aria-label="upcoming" class="icon" height="24" width="24">
                     <use href="#icon-stepper-upcoming-24"></use>
                 </svg>
                 <span class="progress-stepper__text">

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

@@ -4,10 +4,10 @@ export const base = () => `
 <span class="radio">
     <input aria-label="Foreground SVG radio example" class="radio__control" name="r1" type="radio" checked />
     <span class="radio__icon" hidden>
-        <svg aria-hidden="true" class="radio__unchecked" focusable="false">
+        <svg aria-hidden="true" class="radio__unchecked">
             <use href="#icon-radio-unchecked-18"></use>
         </svg>
-        <svg aria-hidden="true" class="radio__checked" focusable="false">
+        <svg aria-hidden="true" class="radio__checked">
             <use href="#icon-radio-checked-18"></use>
         </svg>
     </span>
@@ -19,10 +19,10 @@ export const RTL = () => `
     <span class="radio">
         <input aria-label="Foreground SVG radio example" class="radio__control" name="r1" type="radio" checked />
         <span class="radio__icon" hidden>
-            <svg aria-hidden="true" class="radio__unchecked" focusable="false">
+            <svg aria-hidden="true" class="radio__unchecked">
                 <use href="#icon-radio-unchecked-18"></use>
             </svg>
-            <svg aria-hidden="true" class="radio__checked" focusable="false">
+            <svg aria-hidden="true" class="radio__checked">
                 <use href="#icon-radio-checked-18"></use>
             </svg>
         </span>
@@ -34,10 +34,10 @@ export const disabled = () => `
 <span class="radio">
     <input aria-label="Disabled Foreground SVG radio example" class="radio__control" name="r3" disabled checked type="radio" />
     <span class="radio__icon" hidden>
-        <svg aria-hidden="true" class="radio__unchecked" focusable="false">
+        <svg aria-hidden="true" class="radio__unchecked">
             <use href="#icon-radio-unchecked-18"></use>
         </svg>
-        <svg aria-hidden="true" class="radio__checked" focusable="false">
+        <svg aria-hidden="true" class="radio__checked">
             <use href="#icon-radio-checked-18"></use>
         </svg>
     </span>
@@ -48,10 +48,10 @@ export const customColour = () => `
 <span class="radio">
     <input aria-label="Foreground SVG radio example" class="radio__control" name="r5" type="radio" checked />
     <span class="radio__icon" hidden>
-        <svg aria-hidden="true" class="radio__unchecked" focusable="false">
+        <svg aria-hidden="true" class="radio__unchecked">
             <use href="#icon-radio-unchecked-18"></use>
         </svg>
-        <svg aria-hidden="true" class="radio__checked" focusable="false" style="color: #5ba71b">
+        <svg aria-hidden="true" class="radio__checked" style="color: #5ba71b">
             <use href="#icon-radio-checked-18"></use>
         </svg>
     </span>
@@ -62,10 +62,10 @@ export const customIcon = () => `
 <span class="radio" style="color: #5ba71b">
 <input aria-label="Custom radio example" class="radio__control" name="r7" type="radio" checked />
 <span class="radio__icon" hidden>
-    <svg aria-hidden="true" class="radio__unchecked" focusable="false">
+    <svg aria-hidden="true" class="radio__unchecked">
         <use href="#icon-radio-unchecked-18"></use>
     </svg>
-    <svg aria-hidden="true" class="radio__checked" focusable="false">
+    <svg aria-hidden="true" class="radio__checked">
         <use href="#icon-confirmation"></use>
     </svg>
 </span>
@@ -79,10 +79,10 @@ export const multiLineLabel = () => `
         <span class="field__control radio">
             <input class="radio__control" id="group-radio-1" type="radio" value="1" name="radio-group" />
             <span class="radio__icon" hidden>
-                <svg class="radio__unchecked" focusable="false" height="18" width="18">
+                <svg class="radio__unchecked" height="18" width="18">
                     <use href="#icon-radio-unchecked-18"></use>
                 </svg>
-                <svg class="radio__checked" focusable="false" height="18" width="18">
+                <svg class="radio__checked" height="18" width="18">
                     <use href="#icon-radio-checked-18"></use>
                 </svg>
             </span>
@@ -93,10 +93,10 @@ export const multiLineLabel = () => `
         <span class="field__control radio">
             <input class="radio__control" id="group-radio-2" type="radio" value="2" name="radio-group" />
             <span class="radio__icon" hidden>
-                <svg class="radio__unchecked" focusable="false" height="18" width="18">
+                <svg class="radio__unchecked" height="18" width="18">
                     <use href="#icon-radio-unchecked-18"></use>
                 </svg>
-                <svg class="radio__checked" focusable="false" height="18" width="18">
+                <svg class="radio__checked" height="18" width="18">
                     <use href="#icon-radio-checked-18"></use>
                 </svg>
             </span>
@@ -107,10 +107,10 @@ export const multiLineLabel = () => `
         <span class="field__control radio">
             <input class="radio__control" id="group-radio-3" type="radio" value="3" name="radio-group" />
             <span class="radio__icon" hidden>
-                <svg class="radio__unchecked" focusable="false" height="18" width="18">
+                <svg class="radio__unchecked" height="18" width="18">
                     <use href="#icon-radio-unchecked-18"></use>
                 </svg>
-                <svg class="radio__checked" focusable="false" height="18" width="18">
+                <svg class="radio__checked" height="18" width="18">
                     <use href="#icon-radio-checked-18"></use>
                 </svg>
             </span>

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

@@ -4,10 +4,10 @@ export const base = () => `
 <span class="radio">
     <input aria-label="Foreground SVG radio example" class="radio__control" name="r2" type="radio" />
     <span class="radio__icon" hidden>
-        <svg aria-hidden="true" class="radio__unchecked" focusable="false">
+        <svg aria-hidden="true" class="radio__unchecked">
             <use href="#icon-radio-unchecked-18"></use>
         </svg>
-        <svg aria-hidden="true" class="radio__checked" focusable="false">
+        <svg aria-hidden="true" class="radio__checked">
             <use href="#icon-radio-checked-18"></use>
         </svg>
     </span>
@@ -18,10 +18,10 @@ export const disabled = () => `
 <span class="radio">
     <input aria-label="Disabled Foreground SVG radio example" class="radio__control" name="r4" type="radio" disabled />
     <span class="radio__icon" hidden>
-        <svg aria-hidden="true" class="radio__unchecked" focusable="false">
+        <svg aria-hidden="true" class="radio__unchecked">
             <use href="#icon-radio-unchecked-18"></use>
         </svg>
-        <svg aria-hidden="true" class="radio__checked" focusable="false">
+        <svg aria-hidden="true" class="radio__checked">
             <use href="#icon-radio-checked-18"></use>
         </svg>
     </span>
@@ -32,10 +32,10 @@ export const customColour = () => `
 <span class="radio">
     <input aria-label="Foreground SVG radio example" class="radio__control" name="r6" type="radio" />
     <span class="radio__icon" hidden>
-        <svg aria-hidden="true" class="radio__unchecked" focusable="false">
+        <svg aria-hidden="true" class="radio__unchecked">
             <use href="#icon-radio-unchecked-18"></use>
         </svg>
-        <svg aria-hidden="true" class="radio__checked" focusable="false" style="color: #5ba71b">
+        <svg aria-hidden="true" class="radio__checked" style="color: #5ba71b">
             <use href="#icon-radio-checked-18"></use>
         </svg>
     </span>
@@ -46,10 +46,10 @@ export const customIcon = () => `
 <span class="radio" style="color: #5ba71b">
     <input aria-label="Custom radio example" class="radio__control" name="r8" type="radio" />
     <span class="radio__icon" hidden>
-        <svg aria-hidden="true" class="radio__unchecked" focusable="false">
+        <svg aria-hidden="true" class="radio__unchecked">
             <use href="#icon-radio-unchecked-18"></use>
         </svg>
-        <svg aria-hidden="true" class="radio__checked" focusable="false">
+        <svg aria-hidden="true" class="radio__checked">
             <use href="#icon-confirmation"></use>
         </svg>
     </span>