@ebay/skin 17.1.1 → 17.2.0-next.0

package/src/less/global/stories/global.stories.js

@@ -41,7 +41,7 @@ export const alignment = () => `
         <option value="2">Option 2</option>
         <option value="3">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>
@@ -53,7 +53,7 @@ export const alignment = () => `
 <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>
@@ -63,7 +63,7 @@ export const alignment = () => `
     <button class="btn btn--form btn--fixed-height" aria-expanded="false" aria-haspopup="listbox">
         <span class="btn__cell">
             <span class="btn__text">Options</span>
-            <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>
@@ -74,7 +74,7 @@ export const alignment = () => `
     <button class="btn btn--form btn--fixed-height" aria-haspopup="true" type="button">
         <span class="btn__cell">
             <span class="btn__text">Menu</span>
-            <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>
@@ -94,7 +94,7 @@ export const RTLAlignment = () => `
             <option value="2">Option 2</option>
             <option value="3">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>
@@ -106,7 +106,7 @@ export const RTLAlignment = () => `
     <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>
@@ -116,7 +116,7 @@ export const RTLAlignment = () => `
         <button class="btn btn--fixed-height" aria-expanded="false" aria-haspopup="listbox">
             <span class="btn__cell">
                 <span class="btn__text">Options</span>
-                <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>
@@ -127,7 +127,7 @@ export const RTLAlignment = () => `
         <button class="btn btn--fixed-height" aria-haspopup="true" type="button">
             <span class="btn__cell">
                 <span class="btn__text">Menu</span>
-                <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>
@@ -147,7 +147,7 @@ export const alignmentLarge = () => `
         <option value="2">Option 2</option>
         <option value="3">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>
@@ -159,7 +159,7 @@ export const alignmentLarge = () => `
 <span class="combobox combobox--large">
     <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>
@@ -169,7 +169,7 @@ export const alignmentLarge = () => `
     <button class="btn btn--large btn--form btn--large-fixed-height" aria-expanded="false" aria-haspopup="listbox">
         <span class="btn__cell">
             <span class="btn__text">Options</span>
-            <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>
@@ -180,7 +180,7 @@ export const alignmentLarge = () => `
     <button class="btn btn--large btn--form btn--large-fixed-height" aria-haspopup="true" type="button">
         <span class="btn__cell">
             <span class="btn__text">Menu</span>
-            <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/icon/generated/icon.less

@@ -1507,6 +1507,10 @@ svg.icon--locked-16 {
     height: 16px;
     width: 16px;
 }
+svg.icon--locked-20 {
+    height: 20px;
+    width: 20px;
+}
 svg.icon--locked-24 {
     height: 24px;
     width: 24px;
@@ -1531,6 +1535,10 @@ svg.icon--mail-16 {
     height: 16px;
     width: 16px;
 }
+svg.icon--mail-20 {
+    height: 20px;
+    width: 20px;
+}
 svg.icon--mail-24 {
     height: 24px;
     width: 24px;
@@ -1751,6 +1759,18 @@ svg.icon--package-64 {
     height: 64px;
     width: 64px;
 }
+svg.icon--passkey-16 {
+    height: 16px;
+    width: 16px;
+}
+svg.icon--passkey-24 {
+    height: 24px;
+    width: 24px;
+}
+svg.icon--passkey-64 {
+    height: 64px;
+    width: 64px;
+}
 svg.icon--pause-16 {
     height: 16px;
     width: 16px;
@@ -2411,6 +2431,10 @@ svg.icon--support-24 {
     height: 24px;
     width: 24px;
 }
+svg.icon--swap-24 {
+    height: 24px;
+    width: 24px;
+}
 svg.icon--switch-camera-24 {
     height: 24px;
     width: 24px;

package/src/less/icon-button/stories/alignment.stories.js

@@ -2,27 +2,27 @@ export default { title: "Skin/Icon Button/Alignment" };
 
 export const menu = () => `
 <button aria-label="menu" type="button" class="icon-btn">
-    <svg class="icon icon--menu-20" aria-hidden="true" focusable="false" width="16" height="16"><use href="#icon-menu-20"></use></svg>
+    <svg class="icon icon--menu-20" aria-hidden="true" width="16" height="16"><use href="#icon-menu-20"></use></svg>
 </button>
 <a aria-label="menu" class="icon-link" href="http://www.ebay.com">
-     <svg class="icon icon--menu-20" aria-hidden="true" focusable="false" width="16" height="16"><use href="#icon-menu-20"></use></svg>
+     <svg class="icon icon--menu-20" aria-hidden="true" width="16" height="16"><use href="#icon-menu-20"></use></svg>
 </a>
 `;
 
 export const settings = () => `
 <button aria-label="settings" type="button" class="icon-btn">
-    <svg class="icon icon--settings-24" aria-hidden="true" focusable="false" width="16" height="16"><use href="#icon-settings-24"></use></svg>
+    <svg class="icon icon--settings-24" aria-hidden="true" width="16" height="16"><use href="#icon-settings-24"></use></svg>
 </button>
 <a aria-label="settings" class="icon-link" href="http://www.ebay.com">
-     <svg class="icon icon--settings-24" aria-hidden="true" focusable="false" width="16" height="16"><use href="#icon-settings-24"></use></svg>
+     <svg class="icon icon--settings-24" aria-hidden="true" width="16" height="16"><use href="#icon-settings-24"></use></svg>
 </a>
 `;
 
 export const close = () => `
 <button aria-label="close" type="button" class="icon-btn">
-    <svg class="icon icon--close-16" aria-hidden="true" focusable="false" width="16" height="16"><use href="#icon-close-16"></use></svg>
+    <svg class="icon icon--close-16" aria-hidden="true" width="16" height="16"><use href="#icon-close-16"></use></svg>
 </button>
 <a aria-label="close" class="icon-link" href="http://www.ebay.com">
-     <svg class="icon icon--close-16" aria-hidden="true" focusable="false" width="16" height="16"><use href="#icon-close-16"></use></svg>
+     <svg class="icon icon--close-16" aria-hidden="true" width="16" height="16"><use href="#icon-close-16"></use></svg>
 </a>
 `;

package/src/less/infotip/infotip.less

@@ -12,14 +12,14 @@ span.infotip {
 
 .infotip__overlay {
     .bubble();
-    .background-color-token(infotip-background-color, color-background-primary);
+    .background-color-token(infotip-background-color, color-background-elevated);
     .color-token(infotip-foreground-color, color-foreground-primary);
     display: none;
 }
 
 .infotip__mask {
     .bubble-mask();
-    .background-color-token(infotip-background-color, color-background-primary);
+    .background-color-token(infotip-background-color, color-background-elevated);
     .color-token(infotip-foreground-color, color-foreground-primary);
 }
 
@@ -36,7 +36,7 @@ span.infotip__mask {
 }
 
 .infotip__pointer {
-    .background-color-token(infotip-background-color, color-background-primary);
+    .background-color-token(infotip-background-color, color-background-elevated);
 
     .pointer-base();
 }

package/src/less/infotip/stories/infotip.stories.js

@@ -3,7 +3,7 @@ export default { title: "Skin/Infotip" };
 export const collapsed = () => `
 <span class="infotip">
     <button class="icon-btn icon-btn--transparent infotip__host" type="button" aria-expanded="false" aria-label="Help">
-        <svg class="icon icon--information-16" focusable="false" width="16" height="16" aria-hidden="true">
+        <svg class="icon icon--information-16" width="16" height="16" aria-hidden="true">
             <use href="#icon-information-16"></use>
         </svg>
     </button>
@@ -16,7 +16,7 @@ export const collapsed = () => `
                     <p>Here's a tip to help you be successful at your task.</p>
                 </span>
                 <button class="icon-btn infotip__close" type="button" aria-label="Dismiss infotip">
-                    <svg class="icon icon--close-16" focusable="false" height="24" width="24" aria-hidden="true">
+                    <svg class="icon icon--close-16" height="24" width="24" aria-hidden="true">
                         <use href="#icon-close-16"></use>
                     </svg>
                 </button>
@@ -28,7 +28,7 @@ export const collapsed = () => `
 export const expanded = () => `
 <span class="infotip">
     <button class="icon-btn icon-btn--transparent infotip__host" type="button" aria-expanded="true" aria-label="Help">
-        <svg class="icon icon--information-16" focusable="false" width="16" height="16" aria-hidden="true">
+        <svg class="icon icon--information-16" width="16" height="16" aria-hidden="true">
             <use href="#icon-information-16"></use>
         </svg>
     </button>
@@ -41,7 +41,7 @@ export const expanded = () => `
                     <p>Here's a tip to help you be successful at your task.</p>
                 </span>
                 <button class="icon-btn infotip__close" type="button" aria-label="Dismiss infotip">
-                    <svg class="icon icon--close-16" focusable="false" height="24" width="24" aria-hidden="true">
+                    <svg class="icon icon--close-16" height="24" width="24" aria-hidden="true">
                         <use href="#icon-close-16"></use>
                     </svg>
                 </button>
@@ -55,7 +55,7 @@ export const paragraphCollapsed = () => `
     Inside paragraph
     <span class="infotip">
         <button class="icon-btn icon-btn--transparent infotip__host" type="button" aria-expanded="false" aria-label="Help">
-            <svg class="icon icon--information-16" focusable="false" width="16" height="16" aria-hidden="true">
+            <svg class="icon icon--information-16" width="16" height="16" aria-hidden="true">
                 <use href="#icon-information-16"></use>
             </svg>
         </button>
@@ -68,7 +68,7 @@ export const paragraphCollapsed = () => `
                         <span>Here's a tip to help you be successful at your task.</span>
                     </span>
                     <button class="icon-btn infotip__close" type="button" aria-label="Dismiss infotip">
-                        <svg class="icon icon--close-16" focusable="false" height="24" width="24" aria-hidden="true">
+                        <svg class="icon icon--close-16" height="24" width="24" aria-hidden="true">
                             <use href="#icon-close-16"></use>
                         </svg>
                     </button>
@@ -83,7 +83,7 @@ export const paragraphExpanded = () => `
     Inside paragraph
     <span class="infotip">
         <button class="icon-btn icon-btn--transparent infotip__host" type="button" aria-expanded="true" aria-label="Help">
-            <svg class="icon icon--information-16" focusable="false" width="16" height="16" aria-hidden="true">
+            <svg class="icon icon--information-16" width="16" height="16" aria-hidden="true">
                 <use href="#icon-information-16"></use>
             </svg>
         </button>
@@ -96,7 +96,7 @@ export const paragraphExpanded = () => `
                         <span>Here's a tip to help you be successful at your task.</span>
                     </span>
                     <button class="icon-btn infotip__close" type="button" aria-label="Dismiss infotip">
-                        <svg class="icon icon--close-16" focusable="false" height="24" width="24" aria-hidden="true">
+                        <svg class="icon icon--close-16" height="24" width="24" aria-hidden="true">
                             <use href="#icon-close-16"></use>
                         </svg>
                     </button>
@@ -109,7 +109,7 @@ export const paragraphExpanded = () => `
 export const infotipModal = () => `
     <span class="infotip infotip--modal">
         <button class="icon-btn icon-btn--transparent dialog-button" type="button" data-makeup-for="lightbox-dialog-mini-infotip-0" aria-expanded="true" aria-label="Help">
-            <svg class="icon icon--information-16" focusable="false" width="16" height="16" aria-hidden="true">
+            <svg class="icon icon--information-16" width="16" height="16" aria-hidden="true">
                 <use href="#icon-information-16"></use>
             </svg>
         </button>
@@ -120,7 +120,7 @@ export const infotipModal = () => `
             <div class="lightbox-dialog__header">
                 <h2>Info</h2>
                 <button aria-label="Close dialog" class="icon-btn lightbox-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/inline-notice/stories/inline.stories.js

@@ -3,7 +3,7 @@ export default { title: "Skin/Inline Notice" };
 export const confirmation = () => `
 <div class="inline-notice inline-notice--confirmation">
     <span class="inline-notice__header">
-        <svg focusable="false" class="icon icon--confirmation-filled-16" role="img">
+        <svg class="icon icon--confirmation-filled-16" role="img">
             <use href="#icon-confirmation-filled-16"></use>
         </svg>
     </span>
@@ -17,7 +17,7 @@ export const RTL = () => `
 <div dir="rtl">
     <div class="inline-notice inline-notice--confirmation">
         <span class="inline-notice__header">
-            <svg focusable="false" class="icon icon--confirmation-filled-16" role="img">
+            <svg class="icon icon--confirmation-filled-16" role="img">
                 <use href="#icon-confirmation-filled-16"></use>
             </svg>
         </span>
@@ -31,7 +31,7 @@ export const RTL = () => `
 export const attention = () => `
 <div class="inline-notice inline-notice--attention">
     <span class="inline-notice__header">
-        <svg focusable="false" class="icon icon--attention-filled-16" role="img">
+        <svg class="icon icon--attention-filled-16" role="img">
             <use href="#icon-attention-filled-16"></use>
         </svg>
     </span>
@@ -44,7 +44,7 @@ export const attention = () => `
 export const information = () => `
 <div class="inline-notice inline-notice--information">
     <span class="inline-notice__header">
-        <svg focusable="false" class="icon icon--information-filled-16" role="img">
+        <svg class="icon icon--information-filled-16" role="img">
             <use href="#icon-information-filled-16"></use>
         </svg>
     </span>
@@ -65,7 +65,7 @@ export const general = () => `
 export const paragraphAndLink = () => `
 <div class="inline-notice inline-notice--attention">
     <span class="inline-notice__header">
-        <svg focusable="false" class="icon icon--attention-filled-16" role="img">
+        <svg class="icon icon--attention-filled-16" role="img">
             <use href="#icon-attention-filled-16"></use>
         </svg>
     </span>
@@ -79,7 +79,7 @@ export const paragraphAndLink = () => `
 export const longParagraph = () => `
 <div class="inline-notice inline-notice--attention">
     <span class="inline-notice__header">
-        <svg focusable="false" class="icon icon--attention-filled-16" role="img">
+        <svg class="icon icon--attention-filled-16" role="img">
             <use href="#icon-attention-filled-16"></use>
         </svg>
     </span>
@@ -92,7 +92,7 @@ export const longParagraph = () => `
 export const longParagraphAndLink = () => `
 <div class="inline-notice inline-notice--attention">
     <span class="inline-notice__header" role="img">
-        <svg focusable="false" class="icon icon--attention-filled-16">
+        <svg class="icon icon--attention-filled-16">
             <use href="#icon-attention-filled-16"></use>
         </svg>
     </span>
@@ -106,7 +106,7 @@ export const longParagraphAndLink = () => `
 export const multiParagraph = () => `
 <div class="inline-notice inline-notice--attention">
     <span class="inline-notice__header">
-        <svg focusable="false" class="icon icon--attention-filled-16" role="img">
+        <svg class="icon icon--attention-filled-16" role="img">
             <use href="#icon-attention-filled-16"></use>
         </svg>
     </span>
@@ -120,7 +120,7 @@ export const multiParagraph = () => `
 export const multiParagraphAndLink = () => `
 <div class="inline-notice inline-notice--attention">
     <span class="inline-notice__header">
-        <svg focusable="false" class="icon icon--attention-filled-16" role="img">
+        <svg class="icon icon--attention-filled-16" role="img">
             <use href="#icon-attention-filled-16"></use>
         </svg>
     </span>
@@ -136,7 +136,7 @@ export const longWordInConstrainedWidth = () => `
 <div style="width:300px;">
     <div class="inline-notice inline-notice--confirmation">
         <span class="inline-notice__header">
-            <svg focusable="false" class="icon icon--confirmation-filled-16" role="img">
+            <svg class="icon icon--confirmation-filled-16" role="img">
                 <use href="#icon-confirmation-filled-16"></use>
             </svg>
         </span>

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

@@ -5,19 +5,19 @@ export const RTL = () => `
     <div class="listbox__options" role="listbox" tabindex="0">
         <div class="listbox__option" role="option" aria-selected="true">
             <span class="listbox__value">Option 1</span>
-            <svg class="icon icon--tick-16" focusable="false" height="8" width="8">
+            <svg class="icon icon--tick-16" height="8" width="8">
                 <use href="#icon-tick-16"></use>
             </svg>
         </div>
         <div class="listbox__option" role="option">
             <span class="listbox__value">Option 2</span>
-            <svg class="icon icon--tick-16" focusable="false" height="8" width="8">
+            <svg class="icon icon--tick-16" height="8" width="8">
                 <use href="#icon-tick-16"></use>
             </svg>
         </div>
         <div class="listbox__option" role="option">
             <span class="listbox__value">Option 3</span>
-            <svg class="icon icon--tick-16" focusable="false" height="8" width="8">
+            <svg class="icon icon--tick-16" height="8" width="8">
                 <use href="#icon-tick-16"></use>
             </svg>
         </div>
@@ -30,19 +30,19 @@ export const color = () => `
     <div class="listbox__options" role="listbox" style="color: red" tabindex="0">
         <div class="listbox__option" role="option" aria-selected="true">
             <span class="listbox__value">Option 1</span>
-            <svg class="icon icon--tick-16" focusable="false" height="8" width="8">
+            <svg class="icon icon--tick-16" height="8" width="8">
                 <use href="#icon-tick-16"></use>
             </svg>
         </div>
         <div class="listbox__option" role="option" aria-selected="false">
             <span class="listbox__value">Option 2</span>
-            <svg class="icon icon--tick-16" focusable="false" height="8" width="8">
+            <svg class="icon icon--tick-16" height="8" width="8">
                 <use href="#icon-tick-16"></use>
             </svg>
         </div>
         <div class="listbox__option" role="option" aria-selected="false">
             <span class="listbox__value">Option 3</span>
-            <svg class="icon icon--tick-16" focusable="false" height="8" width="8">
+            <svg class="icon icon--tick-16" height="8" width="8">
                 <use href="#icon-tick-16"></use>
             </svg>
         </div>
@@ -55,19 +55,19 @@ export const fontSize = () => `
     <div class="listbox__options" role="listbox" style="font-size: 200%" tabindex="0">
         <div class="listbox__option" role="option" aria-selected="true">
             <span class="listbox__value">Option 1</span>
-            <svg class="icon icon--tick-16" focusable="false" height="8" width="8">
+            <svg class="icon icon--tick-16" height="8" width="8">
                 <use href="#icon-tick-16"></use>
             </svg>
         </div>
         <div class="listbox__option" role="option" aria-selected="false">
             <span class="listbox__value">Option 2</span>
-            <svg class="icon icon--tick-16" focusable="false" height="8" width="8">
+            <svg class="icon icon--tick-16" height="8" width="8">
                 <use href="#icon-tick-16"></use>
             </svg>
         </div>
         <div class="listbox__option" role="option" aria-selected="false">
             <span class="listbox__value">Option 3</span>
-            <svg class="icon icon--tick-16" focusable="false" height="8" width="8">
+            <svg class="icon icon--tick-16" height="8" width="8">
                 <use href="#icon-tick-16"></use>
             </svg>
         </div>

package/src/less/listbox/stories/listbox.stories.js

@@ -5,19 +5,19 @@ export const unselected = () => `
     <div class="listbox__options" role="listbox" tabindex="0">
         <div class="listbox__option" role="option" aria-selected="false">
             <span class="listbox__value">Option 1</span>
-            <svg class="icon icon--tick-16" focusable="false" height="8" width="8">
+            <svg class="icon icon--tick-16" height="8" width="8">
                 <use href="#icon-tick-16"></use>
             </svg>
         </div>
         <div class="listbox__option" role="option" aria-selected="false">
             <span class="listbox__value">Option 2</span>
-            <svg class="icon icon--tick-16" focusable="false" height="8" width="8">
+            <svg class="icon icon--tick-16" height="8" width="8">
                 <use href="#icon-tick-16"></use>
             </svg>
         </div>
         <div class="listbox__option" role="option" aria-selected="false">
             <span class="listbox__value">Option 3</span>
-            <svg class="icon icon--tick-16" focusable="false" height="8" width="8">
+            <svg class="icon icon--tick-16" height="8" width="8">
                 <use href="#icon-tick-16"></use>
             </svg>
         </div>
@@ -30,19 +30,19 @@ export const selected = () => `
     <div class="listbox__options" role="listbox" tabindex="0">
         <div class="listbox__option" role="option" aria-selected="true">
             <span class="listbox__value">Option 1</span>
-            <svg class="icon icon--tick-16" focusable="false" height="8" width="8">
+            <svg class="icon icon--tick-16" height="8" width="8">
                 <use href="#icon-tick-16"></use>
             </svg>
         </div>
         <div class="listbox__option" role="option" aria-selected="false">
             <span class="listbox__value">Option 2</span>
-            <svg class="icon icon--tick-16" focusable="false" height="8" width="8">
+            <svg class="icon icon--tick-16" height="8" width="8">
                 <use href="#icon-tick-16"></use>
             </svg>
         </div>
         <div class="listbox__option" role="option" aria-selected="false">
             <span class="listbox__value">Option 3</span>
-            <svg class="icon icon--tick-16" focusable="false" height="8" width="8">
+            <svg class="icon icon--tick-16" height="8" width="8">
                 <use href="#icon-tick-16"></use>
             </svg>
         </div>
@@ -55,19 +55,19 @@ export const multiSelected = () => `
     <div class="listbox__options" role="listbox" tabindex="0">
         <div class="listbox__option" role="option" aria-selected="true">
             <span class="listbox__value">Option 1</span>
-            <svg class="icon icon--tick-16" focusable="false" height="8" width="8">
+            <svg class="icon icon--tick-16" height="8" width="8">
                 <use href="#icon-tick-16"></use>
             </svg>
         </div>
         <div class="listbox__option" role="option" aria-selected="true">
             <span class="listbox__value">Option 2</span>
-            <svg class="icon icon--tick-16" focusable="false" height="8" width="8">
+            <svg class="icon icon--tick-16" height="8" width="8">
                 <use href="#icon-tick-16"></use>
             </svg>
         </div>
         <div class="listbox__option" role="option" aria-selected="true">
             <span class="listbox__value">Option 3</span>
-            <svg class="icon icon--tick-16" focusable="false" height="8" width="8">
+            <svg class="icon icon--tick-16" height="8" width="8">
                 <use href="#icon-tick-16"></use>
             </svg>
         </div>
@@ -84,7 +84,7 @@ export const subtitleUnselected = () => `
                 <span class="clipped">.</span>
                 More info about option 1
             </span>
-            <svg class="icon icon--tick-16" focusable="false" height="8" width="8">
+            <svg class="icon icon--tick-16" height="8" width="8">
                 <use href="#icon-tick-16"></use>
             </svg>
         </div>
@@ -94,7 +94,7 @@ export const subtitleUnselected = () => `
                 <span class="clipped">.</span>
                 More info about option 2
             </span>
-            <svg class="icon icon--tick-16" focusable="false" height="8" width="8">
+            <svg class="icon icon--tick-16" height="8" width="8">
                 <use href="#icon-tick-16"></use>
             </svg>
         </div>
@@ -104,7 +104,7 @@ export const subtitleUnselected = () => `
                 <span class="clipped">.</span>
                 More info about option 3
             </span>
-            <svg class="icon icon--tick-16" focusable="false" height="8" width="8">
+            <svg class="icon icon--tick-16" height="8" width="8">
                 <use href="#icon-tick-16"></use>
             </svg>
         </div>
@@ -121,7 +121,7 @@ export const subtitleSelected = () => `
                 <span class="clipped">.</span>
                 More info about option 1
             </span>
-            <svg class="icon icon--tick-16" focusable="false" height="8" width="8">
+            <svg class="icon icon--tick-16" height="8" width="8">
                 <use href="#icon-tick-16"></use>
             </svg>
         </div>
@@ -131,7 +131,7 @@ export const subtitleSelected = () => `
                 <span class="clipped">.</span>
                 More info about option 2
             </span>
-             <svg class="icon icon--tick-16" focusable="false" height="8" width="8">
+             <svg class="icon icon--tick-16" height="8" width="8">
                 <use href="#icon-tick-16"></use>
             </svg>
         </div>
@@ -141,7 +141,7 @@ export const subtitleSelected = () => `
                 <span class="clipped">.</span>
                 More info about option 3
             </span>
-            <svg class="icon icon--tick-16" focusable="false" height="8" width="8">
+            <svg class="icon icon--tick-16" height="8" width="8">
                 <use href="#icon-tick-16"></use>
             </svg>
         </div>