@ebay/skin 17.1.1 → 17.2.0

package/src/less/combobox/stories/combobox.stories.js

@@ -4,7 +4,7 @@ export const collapsed = () => `
 <span class="combobox">
     <span class="combobox__control">
         <input name="combobox-default" placeholder="Combobox" role="combobox" type="text" aria-expanded="false" aria-haspopup="listbox" />
-        <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+        <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
             <use href="#icon-chevron-down-12"></use>
         </svg>
     </span>
@@ -25,7 +25,7 @@ export const expanded = () => `
 <span class="combobox combobox--expanded">
     <span class="combobox__control">
         <input name="combobox-default" placeholder="Combobox" role="combobox" type="text" aria-expanded="true" aria-haspopup="listbox" />
-        <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+        <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
             <use href="#icon-chevron-down-12"></use>
         </svg>
     </span>
@@ -46,7 +46,7 @@ export const disabled = () => `
 <span class="combobox">
     <span class="combobox__control">
         <input name="combobox-default" placeholder="Combobox" role="combobox" type="text" aria-expanded="false" aria-haspopup="listbox" disabled />
-        <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+        <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
             <use href="#icon-chevron-down-12"></use>
         </svg>
     </span>
@@ -67,7 +67,7 @@ export const large = () => `
 <span class="combobox combobox--large combobox--expanded">
     <span class="combobox__control">
         <input name="combobox-default" placeholder="Combobox" role="combobox" type="text" aria-expanded="true" aria-haspopup="listbox" />
-        <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+        <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
             <use href="#icon-chevron-down-12"></use>
         </svg>
     </span>
@@ -88,7 +88,7 @@ export const longOptions = () => `
 <span class="combobox combobox--expanded">
     <span class="combobox__control">
         <input name="combobox-default" placeholder="Combobox" role="combobox" type="text" aria-expanded="true" aria-haspopup="listbox" />
-        <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+        <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
             <use href="#icon-chevron-down-12"></use>
         </svg>
     </span>
@@ -110,7 +110,7 @@ export const actionable = () => `
     <span class="combobox__control">
         <input placeholder="Combobox" role="combobox" type="text" aria-haspopup="listbox" aria-owns="listbox1" />
         <button class="icon-btn icon-btn--actionable" type="button" aria-label="Expand Suggestions">
-            <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </button>
@@ -136,7 +136,7 @@ export const RTL = () => `
     <span class="combobox combobox--expanded">
         <span class="combobox__control">
             <input class="pink-placeholder-text" name="combobox-default" placeholder="Combobox" role="combobox" type="text" aria-expanded="true" aria-haspopup="listbox" />
-            <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
@@ -160,7 +160,7 @@ export const actionableRTL = () => `
         <span class="combobox__control combobox__control--actionable">
             <input placeholder="Combobox" role="combobox" type="text" aria-haspopup="listbox" aria-owns="listbox5" />
             <button class="icon-btn" type="button" aria-label="Expand Suggestions">
-                <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+                <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
                     <use href="#icon-chevron-down-12"></use>
                 </svg>
             </button>
@@ -187,7 +187,7 @@ export const inheritColour = () => `
     <span class="combobox combobox--expanded">
         <span class="combobox__control">
             <input class="pink-placeholder-text" name="combobox-default" placeholder="Combobox" role="combobox" type="text" aria-expanded="true" aria-haspopup="listbox" />
-            <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
@@ -210,7 +210,7 @@ export const inheritFontSize = () => `
     <span class="combobox combobox--expanded">
         <span class="combobox__control">
             <input name="combobox-default" placeholder="Combobox" role="combobox" type="text" aria-expanded="true" aria-haspopup="listbox" />
-            <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>

package/src/less/cta-button/stories/cascade.stories.js

@@ -4,7 +4,7 @@ export const color = () => `
 <a class="cta-btn" href="http://www.ebay.com" style="color: red">
     <span class="cta-btn__cell">
         <span>Link</span>
-        <svg class="icon icon--arrow-right-24" focusable="false" height="8" width="8" aria-hidden="true">
+        <svg class="icon icon--arrow-right-24" height="8" width="8" aria-hidden="true">
             <use href="#icon-arrow-right-24"></use>
         </svg>
     </span>
@@ -16,7 +16,7 @@ export const RTL = () => `
     <a class="cta-btn" href="http://www.ebay.com" style="color: red">
         <span class="cta-btn__cell">
             <span style="margin-right: 2px;">Link</span>
-            <svg style="margin-right: 5px; margin-left: 2px;" class="icon icon--arrow-right-24" focusable="false" height="8" width="8" aria-hidden="true">
+            <svg style="margin-right: 5px; margin-left: 2px;" class="icon icon--arrow-right-24" height="8" width="8" aria-hidden="true">
                 <use href="#icon-arrow-right-24"></use>
             </svg>
         </span>
@@ -28,7 +28,7 @@ export const fontSize = () => `
 <a class="cta-btn" href="http://www.ebay.com" style="font-size: 200%">
     <span class="cta-btn__cell">
         <span>Link</span>
-        <svg class="icon icon--arrow-right-24" focusable="false" height="8" width="8" aria-hidden="true">
+        <svg class="icon icon--arrow-right-24" height="8" width="8" aria-hidden="true">
             <use href="#icon-arrow-right-24"></use>
         </svg>
     </span>

package/src/less/cta-button/stories/cta-button.stories.js

@@ -4,7 +4,7 @@ export const base = () => `
 <a class="cta-btn" href="http://www.ebay.com">
     <span class="cta-btn__cell">
         <span>Link</span>
-        <svg class="icon icon--arrow-right-24" focusable="false" height="8" width="8" aria-hidden="true">
+        <svg class="icon icon--arrow-right-24" height="8" width="8" aria-hidden="true">
             <use href="#icon-arrow-right-24"></use>
         </svg>
     </span>

package/src/less/cta-button/stories/dimensions.stories.js

@@ -4,7 +4,7 @@ export const large = () => `
 <a class="cta-btn cta-btn--large" href="http://www.ebay.com">
     <span class="cta-btn__cell">
         <span>Link</span>
-        <svg class="icon icon--arrow-right-24" focusable="false" height="8" width="8" aria-hidden="true">
+        <svg class="icon icon--arrow-right-24" height="8" width="8" aria-hidden="true">
             <use href="#icon-arrow-right-24"></use>
         </svg>
     </span>
@@ -15,7 +15,7 @@ export const largeFixedWidthTruncated = () => `
 <a style="width: 200px;" class="cta-btn cta-btn--large cta-btn--truncated" href="http://www.ebay.com">
     <span class="cta-btn__cell">
         <span>Link with a lot of text that should wrap</span>
-        <svg class="icon icon--arrow-right-24" focusable="false" height="8" width="8" aria-hidden="true">
+        <svg class="icon icon--arrow-right-24" height="8" width="8" aria-hidden="true">
             <use href="#icon-arrow-right-24"></use>
         </svg>
     </span>

package/src/less/date-textbox/date-textbox.less

@@ -12,9 +12,9 @@
 }
 
 .date-textbox__popover {
-    .background-color-token(calendar-background-color, color-background-primary);
+    .background-color-token(calendar-background-color, color-background-elevated);
     border-radius: var(--spacing-200);
-    filter: var(--bubble-filter);
+    box-shadow: var(--bubble-shadow);
     margin-left: calc(var(--spacing-100) * -1);
     padding: var(--spacing-200);
     position: absolute;

package/src/less/details/stories/cascade.stories.js

@@ -6,7 +6,7 @@ export const RTL = () => `
         <summary class="details__summary">
             <span class="details__label">Details</span>
             <span class="details__icon" hidden>
-                <svg class="icon icon--chevron-down-12" focusable="false" aria-hidden="true">
+                <svg class="icon icon--chevron-down-12" aria-hidden="true">
                     <use href="#icon-chevron-down-12"></use>
                 </svg>
             </span>
@@ -22,7 +22,7 @@ export const colour = () => `
         <summary class="details__summary">
             <span class="details__label">Details</span>
             <span class="details__icon" hidden>
-                <svg class="icon icon--chevron-down-12" focusable="false" aria-hidden="true">
+                <svg class="icon icon--chevron-down-12" aria-hidden="true">
                     <use href="#icon-chevron-down-12"></use>
                 </svg>
             </span>
@@ -38,7 +38,7 @@ export const fontSize = () => `
         <summary class="details__summary">
             <span class="details__label">Details</span>
             <span class="details__icon" hidden>
-                <svg class="icon icon--chevron-down-12" focusable="false" aria-hidden="true">
+                <svg class="icon icon--chevron-down-12" aria-hidden="true">
                     <use href="#icon-chevron-down-12"></use>
                 </svg>
             </span>

package/src/less/details/stories/details.stories.js

@@ -5,7 +5,7 @@ export const closed = () => `
     <summary class="details__summary">
         <span class="details__label">Details</span>
         <span class="details__icon" hidden>
-            <svg class="icon icon--chevron-down-12" focusable="false" aria-hidden="true">
+            <svg class="icon icon--chevron-down-12" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
@@ -19,7 +19,7 @@ export const open = () => `
     <summary class="details__summary">
         <span class="details__label">Details</span>
         <span class="details__icon" hidden>
-            <svg class="icon icon--chevron-down-12" focusable="false" aria-hidden="true">
+            <svg class="icon icon--chevron-down-12" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
@@ -33,7 +33,7 @@ export const centered = () => `
     <summary class="details__summary details__summary--center">
         <span class="details__label">Details</span>
         <span class="details__icon" hidden>
-            <svg class="icon icon--chevron-down-12" focusable="false" aria-hidden="true">
+            <svg class="icon icon--chevron-down-12" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
@@ -47,7 +47,7 @@ export const small = () => `
     <summary class="details__summary details__summary--small">
         <span class="details__label">Details</span>
         <span class="details__icon" hidden>
-            <svg class="icon icon--chevron-down-12" focusable="false" aria-hidden="true">
+            <svg class="icon icon--chevron-down-12" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>

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

@@ -7,7 +7,7 @@ export const empty = () => `
         <div class="drawer-dialog__header">
             <h2 id="dialog-title" class="large-text-1 bold-text">Heading</h2>
             <button aria-label="Close dialog" class="icon-btn drawer-dialog__close" type="button">
-                <svg aria-hidden="true" class="icon icon--close-16" focusable="false" height="16" width="16">
+                <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
                     <use href="#icon-close-16"></use>
                 </svg>
             </button>
@@ -25,7 +25,7 @@ export const partial = () => `
         <div class="drawer-dialog__header">
             <h2 id="dialog-title" class="large-text-1 bold-text">Heading</h2>
             <button aria-label="Close dialog" class="icon-btn drawer-dialog__close" type="button">
-                <svg aria-hidden="true" class="icon icon--close-16" focusable="false" height="16" width="16">
+                <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
                     <use href="#icon-close-16"></use>
                 </svg>
             </button>
@@ -48,7 +48,7 @@ export const withFooter = () => `
         <div class="drawer-dialog__header">
             <h2 id="dialog-title" class="large-text-1 bold-text">Heading</h2>
             <button aria-label="Close dialog" class="icon-btn drawer-dialog__close" type="button">
-                <svg aria-hidden="true" class="icon icon--close-16" focusable="false" height="16" width="16">
+                <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
                     <use href="#icon-close-16"></use>
                 </svg>
             </button>
@@ -76,7 +76,7 @@ export const RTL = () => `
             <div class="drawer-dialog__header">
                 <h2 id="dialog-title" class="large-text-1 bold-text">Heading</h2>
                 <button aria-label="Close dialog" class="icon-btn drawer-dialog__close" type="button">
-                    <svg aria-hidden="true" class="icon icon--close-16" focusable="false" height="16" width="16">
+                    <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
                         <use href="#icon-close-16"></use>
                     </svg>
                 </button>
@@ -100,7 +100,7 @@ export const half = () => `
         <div class="drawer-dialog__header">
             <h2 id="dialog-title" class="large-text-1 bold-text">Heading</h2>
             <button aria-label="Close dialog" class="icon-btn drawer-dialog__close" type="button">
-                <svg aria-hidden="true" class="icon icon--close-16" focusable="false" height="16" width="16">
+                <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
                     <use href="#icon-close-16"></use>
                 </svg>
             </button>
@@ -159,7 +159,7 @@ export const full = () => `
         <div class="drawer-dialog__header">
             <h2 id="dialog-title" class="large-text-1 bold-text">Heading</h2>
             <button aria-label="Close dialog" class="icon-btn drawer-dialog__close" type="button">
-                <svg aria-hidden="true" class="icon icon--close-16" focusable="false" height="16" width="16">
+                <svg aria-hidden="true" class="icon icon--close-16" height="16" width="16">
                     <use href="#icon-close-16"></use>
                 </svg>
             </button>

package/src/less/field/stories/stacked.stories.js

@@ -8,10 +8,10 @@ export const group = () => `
             <span class="radio">
                 <input class="radio__control" id="paccount" type="radio" name="account"/>
                 <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>
@@ -22,10 +22,10 @@ export const group = () => `
             <span class="radio">
                 <input class="radio__control" id="baccount" type="radio" name="account"/>
                 <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>
@@ -74,7 +74,7 @@ export const group = () => `
                 <option value="44">United Kingdom +44</option>
                 <option value="1">Canada +1</option>
             </select>
-            <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </div>
@@ -127,7 +127,7 @@ export const descriptions = () => `
         <input aria-describedby="field-descriptions-4-description" class="textbox__control textbox__control--fluid" id="field-descriptions-4" type="text" aria-invalid="true" />
     </div>
     <div class="field__description field__description--attention" id="field-descriptions-4-description">
-        <svg class="icon icon--attention-filled-16" focusable="false" height="10" width="14" aria-hidden="true">
+        <svg class="icon icon--attention-filled-16" height="10" width="14" aria-hidden="true">
             <use href="#icon-attention-filled-16"></use>
         </svg>
         <span>Field description - error</span>
@@ -142,7 +142,7 @@ export const descriptions = () => `
                 <span class="btn__cell">
                     <span class="btn__label">Color: </span>
                     <span class="btn__text">-</span>
-                    <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>
                 </span>
@@ -151,25 +151,25 @@ export const descriptions = () => `
                 <div class="listbox-button__options" role="listbox">
                     <div class="listbox-button__option" role="option">
                         <span class="listbox-button__value">Red</span>
-                        <svg class="icon icon--tick-16" focusable="false" height="10" width="14">
+                        <svg class="icon icon--tick-16" height="10" width="14">
                             <use href="#icon-tick-16"></use>
                         </svg>
                     </div>
                     <div class="listbox-button__option" role="option">
                         <span class="listbox-button__value">Blue</span>
-                        <svg class="icon icon--tick-16" focusable="false" height="10" width="14">
+                        <svg class="icon icon--tick-16" height="10" width="14">
                             <use href="#icon-tick-16"></use>
                         </svg>
                     </div>
                     <div class="listbox-button__option" role="option" aria-disabled="true">
                         <span class="listbox-button__value">Yellow</span>
-                        <svg class="icon icon--tick-16" focusable="false" height="10" width="14">
+                        <svg class="icon icon--tick-16" height="10" width="14">
                             <use href="#icon-tick-16"></use>
                         </svg>
                     </div>
                     <div class="listbox-button__option" role="option">
                         <span class="listbox-button__value">Green</span>
-                        <svg class="icon icon--tick-16" focusable="false" height="10" width="14">
+                        <svg class="icon icon--tick-16" height="10" width="14">
                             <use href="#icon-tick-16"></use>
                         </svg>
                     </div>
@@ -184,7 +184,7 @@ export const descriptions = () => `
         </span>
     </div>
     <div class="field__description field__description--attention" id="field-listbox-button-1-description">
-        <svg class="icon icon--attention-filled-16" focusable="false" height="10" width="14" aria-hidden="true">
+        <svg class="icon icon--attention-filled-16" height="10" width="14" aria-hidden="true">
             <use href="#icon-attention-filled-16"></use>
         </svg>
         <span>There was an error</span>

package/src/less/field/stories/unstacked.stories.js

@@ -15,7 +15,7 @@ export const inlineLevel = () => `
             <option value="item2">Option 2</option>
             <option value="item3">Option 3</option>
         </select>
-        <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+        <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
             <use href="#icon-chevron-down-12"></use>
         </svg>
     </span>
@@ -51,7 +51,7 @@ export const RTL = () => `
                 <option value="item2">Option 2</option>
                 <option value="item3">Option 3</option>
             </select>
-            <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
@@ -87,7 +87,7 @@ export const blockLevel = () => `
             <option value="item2">Option 2</option>
             <option value="item3">Option 3</option>
         </select>
-        <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+        <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
             <use href="#icon-chevron-down-12"></use>
         </svg>
     </span>
@@ -122,7 +122,7 @@ export const disabled = () => `
             <option value="item2">Option 2</option>
             <option value="item3">Option 3</option>
         </select>
-        <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+        <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
             <use href="#icon-chevron-down-12"></use>
         </svg>
     </span>

package/src/less/filter-menu/stories/filter-menu.stories.js

@@ -5,10 +5,10 @@ export const base = () => `
     <div class="filter-menu__items" role="menu">
         <div class="filter-menu__item" role="menuitemcheckbox" tabindex="0" aria-checked="false">
             <span class="filter-menu__checkbox">
-                <svg class="icon icon--checkbox-unchecked-18" focusable="false" height="18" width="18">
+                <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
                     <use href="#icon-checkbox-unchecked-18"></use>
                 </svg>
-                <svg class="icon icon--checkbox-checked-18" focusable="false" height="18" width="18">
+                <svg class="icon icon--checkbox-checked-18" height="18" width="18">
                     <use href="#icon-checkbox-checked-18"></use>
                 </svg>
             </span>
@@ -16,10 +16,10 @@ export const base = () => `
         </div>
         <div class="filter-menu__item" role="menuitemcheckbox" aria-checked="false">
             <span class="filter-menu__checkbox">
-                <svg class="icon icon--checkbox-unchecked-18" focusable="false" height="18" width="18">
+                <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
                     <use href="#icon-checkbox-unchecked-18"></use>
                 </svg>
-                <svg class="icon icon--checkbox-checked-18" focusable="false" height="18" width="18">
+                <svg class="icon icon--checkbox-checked-18" height="18" width="18">
                     <use href="#icon-checkbox-checked-18"></use>
                 </svg>
             </span>
@@ -27,10 +27,10 @@ export const base = () => `
         </div>
         <div class="filter-menu__item" role="menuitemcheckbox" aria-checked="false">
             <span class="filter-menu__checkbox">
-                <svg class="icon icon--checkbox-unchecked-18" focusable="false" height="18" width="18">
+                <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
                     <use href="#icon-checkbox-unchecked-18"></use>
                 </svg>
-                <svg class="icon icon--checkbox-checked-18" focusable="false" height="18" width="18">
+                <svg class="icon icon--checkbox-checked-18" height="18" width="18">
                     <use href="#icon-checkbox-checked-18"></use>
                 </svg>
             </span>
@@ -45,10 +45,10 @@ export const withDisabled = () => `
     <div class="filter-menu__items" role="menu">
         <div class="filter-menu__item" role="menuitemcheckbox" tabindex="0" aria-checked="false" aria-disabled="true">
             <span class="filter-menu__checkbox">
-                <svg class="icon icon--checkbox-unchecked-18" focusable="false" height="18" width="18">
+                <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
                     <use href="#icon-checkbox-unchecked-18"></use>
                 </svg>
-                <svg class="icon icon--checkbox-checked-18" focusable="false" height="18" width="18">
+                <svg class="icon icon--checkbox-checked-18" height="18" width="18">
                     <use href="#icon-checkbox-checked-18"></use>
                 </svg>
             </span>
@@ -56,10 +56,10 @@ export const withDisabled = () => `
         </div>
         <div class="filter-menu__item" role="menuitemcheckbox" aria-checked="false">
             <span class="filter-menu__checkbox">
-                <svg class="icon icon--checkbox-unchecked-18" focusable="false" height="18" width="18">
+                <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
                     <use href="#icon-checkbox-unchecked-18"></use>
                 </svg>
-                <svg class="icon icon--checkbox-checked-18" focusable="false" height="18" width="18">
+                <svg class="icon icon--checkbox-checked-18" height="18" width="18">
                     <use href="#icon-checkbox-checked-18"></use>
                 </svg>
             </span>
@@ -67,10 +67,10 @@ export const withDisabled = () => `
         </div>
         <div class="filter-menu__item" role="menuitemcheckbox" aria-checked="true" aria-disabled="true">
             <span class="filter-menu__checkbox">
-                <svg class="icon icon--checkbox-unchecked-18" focusable="false" height="18" width="18">
+                <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
                     <use href="#icon-checkbox-unchecked-18"></use>
                 </svg>
-                <svg class="icon icon--checkbox-checked-18" focusable="false" height="18" width="18">
+                <svg class="icon icon--checkbox-checked-18" height="18" width="18">
                     <use href="#icon-checkbox-checked-18"></use>
                 </svg>
             </span>
@@ -85,10 +85,10 @@ export const withFooterButton = () => `
     <div class="filter-menu__items" role="menu">
         <div class="filter-menu__item" role="menuitemcheckbox" tabindex="0" aria-checked="false">
             <span class="filter-menu__checkbox">
-                <svg class="icon icon--checkbox-unchecked-18" focusable="false" height="18" width="18">
+                <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
                     <use href="#icon-checkbox-unchecked-18"></use>
                 </svg>
-                <svg class="icon icon--checkbox-checked-18" focusable="false" height="18" width="18">
+                <svg class="icon icon--checkbox-checked-18" height="18" width="18">
                     <use href="#icon-checkbox-checked-18"></use>
                 </svg>
             </span>
@@ -96,10 +96,10 @@ export const withFooterButton = () => `
         </div>
         <div class="filter-menu__item" role="menuitemcheckbox" aria-checked="false">
             <span class="filter-menu__checkbox">
-                <svg class="icon icon--checkbox-unchecked-18" focusable="false" height="18" width="18">
+                <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
                     <use href="#icon-checkbox-unchecked-18"></use>
                 </svg>
-                <svg class="icon icon--checkbox-checked-18" focusable="false" height="18" width="18">
+                <svg class="icon icon--checkbox-checked-18" height="18" width="18">
                     <use href="#icon-checkbox-checked-18"></use>
                 </svg>
             </span>
@@ -107,10 +107,10 @@ export const withFooterButton = () => `
         </div>
         <div class="filter-menu__item" role="menuitemcheckbox" aria-checked="false">
             <span class="filter-menu__checkbox">
-                <svg class="icon icon--checkbox-unchecked-18" focusable="false" height="18" width="18">
+                <svg class="icon icon--checkbox-unchecked-18" height="18" width="18">
                     <use href="#icon-checkbox-unchecked-18"></use>
                 </svg>
-                <svg class="icon icon--checkbox-checked-18" focusable="false" height="18" width="18">
+                <svg class="icon icon--checkbox-checked-18" height="18" width="18">
                     <use href="#icon-checkbox-checked-18"></use>
                 </svg>
             </span>
@@ -129,10 +129,10 @@ export const formVersion = () => `
                 <span class="checkbox">
                     <input aria-label="filter menu checkbox example option 1" class="checkbox__control" type="checkbox" name="filter-menu-form-checkbox-item-1" id="filter-menu-form-checkbox-item-1" />
                     <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>
@@ -143,10 +143,10 @@ export const formVersion = () => `
                 <span class="checkbox">
                     <input aria-label="filter menu checkbox example option 2" class="checkbox__control" type="checkbox" name="filter-menu-form-checkbox-item-2" id="filter-menu-form-checkbox-item-2" />
                     <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>
@@ -157,10 +157,10 @@ export const formVersion = () => `
                 <span class="checkbox">
                     <input aria-label="filter menu checkbox example option 3" class="checkbox__control" type="checkbox" name="filter-menu-form-checkbox-item-3" id="filter-menu-form-checkbox-item-3" />
                     <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>
@@ -182,10 +182,10 @@ export const RTL = () => `
                     <span class="checkbox">
                         <input aria-label="filter menu checkbox example option 1" class="checkbox__control" type="checkbox" name="filter-menu-form-checkbox-item-1" id="filter-menu-form-checkbox-item-1" />
                         <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>
@@ -196,10 +196,10 @@ export const RTL = () => `
                     <span class="checkbox">
                         <input aria-label="filter menu checkbox example option 2" class="checkbox__control" type="checkbox" name="filter-menu-form-checkbox-item-2" id="filter-menu-form-checkbox-item-2" />
                         <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>
@@ -210,10 +210,10 @@ export const RTL = () => `
                     <span class="checkbox">
                         <input aria-label="filter menu checkbox example option 3" class="checkbox__control" type="checkbox" name="filter-menu-form-checkbox-item-3" id="filter-menu-form-checkbox-item-3" />
                         <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>