@ebay/skin 17.1.1 → 17.2.0

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

@@ -5,7 +5,7 @@ export const collapsed = () => `
     <button class="btn btn--secondary" aria-haspopup="true" type="button">
         <span class="btn__cell">
             <span class="btn__text">Button</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>
@@ -31,7 +31,7 @@ export const disabled = () => `
     <button class="btn btn--secondary" aria-haspopup="true" type="button" disabled>
         <span class="btn__cell">
             <span class="btn__text">Button</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>
@@ -57,7 +57,7 @@ export const expanded = () => `
     <button class="btn btn--secondary" type="button" aria-expanded="true" aria-haspopup="true">
         <span class="btn__cell">
             <span class="btn__text">Button</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>
@@ -83,7 +83,7 @@ export const collapsedForm = () => `
     <button class="btn btn--form" aria-haspopup="true" type="button">
         <span class="btn__cell">
             <span class="btn__text">Button</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>
@@ -109,7 +109,7 @@ export const expandedForm = () => `
     <button class="btn btn--form" type="button" aria-expanded="true" aria-haspopup="true">
         <span class="btn__cell">
             <span class="btn__text">Button</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>
@@ -135,7 +135,7 @@ export const badged = () => `
     <button class="btn" type="button" aria-expanded="true" aria-haspopup="true">
         <span class="btn__cell">
             <span class="btn__text">Button</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>
@@ -161,7 +161,7 @@ export const expandedDisabledItem = () => `
     <button class="btn" type="button" aria-expanded="true" aria-haspopup="true">
         <span class="btn__cell">
             <span class="btn__text">Button</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>
@@ -187,7 +187,7 @@ export const radioItems = () => `
     <button class="btn" type="button" aria-expanded="true" aria-haspopup="true">
         <span class="btn__cell">
             <span class="btn__text">Button</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>
@@ -196,19 +196,19 @@ export const radioItems = () => `
         <div class="menu-button__items" role="menu">
             <div class="menu-button__item" role="menuitemradio" tabindex="0" aria-checked="true">
                 <span>Item 10000</span>
-                <svg class="icon icon--tick-16" focusable="false" height="8" width="8" aria-hidden="true">
+                <svg class="icon icon--tick-16" height="8" width="8" aria-hidden="true">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
             <div class="menu-button__item" role="menuitemradio">
                 <span>Item 20000</span>
-                <svg class="icon icon--tick-16" focusable="false" height="8" width="8" aria-hidden="true">
+                <svg class="icon icon--tick-16" height="8" width="8" aria-hidden="true">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
             <div class="menu-button__item" role="menuitemradio">
                 <span>Item 30000</span>
-                <svg class="icon icon--tick-16" focusable="false" height="8" width="8" aria-hidden="true">
+                <svg class="icon icon--tick-16" height="8" width="8" aria-hidden="true">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
@@ -222,7 +222,7 @@ export const radioItemsDisabledItem = () => `
     <button class="btn" type="button" aria-expanded="true" aria-haspopup="true">
         <span class="btn__cell">
             <span class="btn__text">Button</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>
@@ -231,19 +231,19 @@ export const radioItemsDisabledItem = () => `
         <div class="menu-button__items" role="menu">
             <div class="menu-button__item" role="menuitemradio" aria-checked="true" aria-disabled="true">
                 <span>Item 10000</span>
-                <svg class="icon icon--tick-16" focusable="false" height="8" width="8" aria-hidden="true">
+                <svg class="icon icon--tick-16" height="8" width="8" aria-hidden="true">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
             <div class="menu-button__item" role="menuitemradio" tabindex="0">
                 <span>Item 20000</span>
-                <svg class="icon icon--tick-16" focusable="false" height="8" width="8" aria-hidden="true">
+                <svg class="icon icon--tick-16" height="8" width="8" aria-hidden="true">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
             <div class="menu-button__item" role="menuitemradio">
                 <span>Item 30000</span>
-                <svg class="icon icon--tick-16" focusable="false" height="8" width="8" aria-hidden="true">
+                <svg class="icon icon--tick-16" height="8" width="8" aria-hidden="true">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
@@ -257,7 +257,7 @@ export const checkboxItems = () => `
     <button class="btn" type="button" aria-expanded="true" aria-haspopup="true">
         <span class="btn__cell">
             <span class="btn__text">Button</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>
@@ -266,19 +266,19 @@ export const checkboxItems = () => `
         <div class="menu-button__items" role="menu">
             <div class="menu-button__item" role="menuitemcheckbox" tabindex="0" aria-checked="true">
                 <span>Item 10000</span>
-                <svg class="icon icon--tick-16" focusable="false" height="8" width="8" aria-hidden="true">
+                <svg class="icon icon--tick-16" height="8" width="8" aria-hidden="true">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
             <div class="menu-button__item" role="menuitemcheckbox">
                 <span>Item 20000</span>
-                <svg class="icon icon--tick-16" focusable="false" height="8" width="8" aria-hidden="true">
+                <svg class="icon icon--tick-16" height="8" width="8" aria-hidden="true">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
             <div class="menu-button__item" role="menuitemcheckbox" aria-checked="true">
                 <span>Item 30000</span>
-                <svg class="icon icon--tick-16" focusable="false" height="8" width="8" aria-hidden="true">
+                <svg class="icon icon--tick-16" height="8" width="8" aria-hidden="true">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
@@ -292,7 +292,7 @@ export const checkboxItemsDisabledItem = () => `
     <button class="btn" type="button" aria-expanded="true" aria-haspopup="true">
         <span class="btn__cell">
             <span class="btn__text">Button</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>
@@ -301,19 +301,19 @@ export const checkboxItemsDisabledItem = () => `
         <div class="menu-button__items" role="menu">
             <div class="menu-button__item" role="menuitemcheckbox" aria-checked="true" aria-disabled="true">
                 <span>Item 10000</span>
-                <svg class="icon icon--tick-16" focusable="false" height="8" width="8" aria-hidden="true">
+                <svg class="icon icon--tick-16" height="8" width="8" aria-hidden="true">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
             <div class="menu-button__item" role="menuitemcheckbox" tabindex="0">
                 <span>Item 20000</span>
-                <svg class="icon icon--tick-16" focusable="false" height="8" width="8" aria-hidden="true">
+                <svg class="icon icon--tick-16" height="8" width="8" aria-hidden="true">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
             <div class="menu-button__item" role="menuitemcheckbox" aria-checked="true">
                 <span>Item 30000</span>
-                <svg class="icon icon--tick-16" focusable="false" height="8" width="8" aria-hidden="true">
+                <svg class="icon icon--tick-16" height="8" width="8" aria-hidden="true">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
@@ -327,7 +327,7 @@ export const longOptionText = () => `
     <button class="btn" type="button" aria-expanded="true" aria-haspopup="true">
         <span class="btn__cell">
             <span class="btn__text">Button</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>
@@ -353,7 +353,7 @@ export const menuIcons = () => `
     <button class="btn" aria-expanded="true" aria-haspopup="true" type="button">
         <span class="btn__cell">
             <span class="btn__text">Button</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>
@@ -361,7 +361,7 @@ export const menuIcons = () => `
     <div class="menu-button__menu">
         <div class="menu-button__items" role="menu">
             <div class="menu-button__item" role="menuitem">
-                <svg class="icon icon--settings-24" focusable="false" aria-label="Settings" role="icon">
+                <svg class="icon icon--settings-24" aria-label="Settings" role="icon">
                     <use href="#icon-settings-24"></use>
                 </svg>
                 <span style="margin: auto 5px;">
@@ -369,7 +369,7 @@ export const menuIcons = () => `
                 </span>
             </div>
             <div class="menu-button__item" role="menuitem">
-                <svg class="icon icon--calendar-24" focusable="false" aria-label="Calendar" role="icon">
+                <svg class="icon icon--calendar-24" aria-label="Calendar" role="icon">
                     <use href="#icon-calendar-24"></use>
                 </svg>
                 <span style="margin: auto 5px;">
@@ -377,7 +377,7 @@ export const menuIcons = () => `
                 </span>
             </div>
             <div class="menu-button__item" role="menuitem">
-                <svg class="icon icon--profile-24" focusable="false" aria-label="Profile" role="icon">
+                <svg class="icon icon--profile-24" aria-label="Profile" role="icon">
                     <use href="#icon-profile-24"></use>
                 </svg>
                 <span style="margin: auto 5px;">
@@ -394,7 +394,7 @@ export const separator = () => `
     <button class="btn" type="button" aria-expanded="true" aria-haspopup="true">
         <span class="btn__cell">
             <span class="btn__text">Button</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/menu-button/stories/cascade.stories.js

@@ -6,7 +6,7 @@ export const RTL = () => `
     <button class="btn btn--secondary" type="button" aria-expanded="true" aria-haspopup="true">
         <span class="btn__cell">
             <span class="btn__text">Button</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>
@@ -34,7 +34,7 @@ export const colour = () => `
         <button class="btn" aria-expanded="true" aria-haspopup="true" style="background-color: #6a29b9; color: white" type="button">
             <span class="btn__cell">
                 <span class="btn__text">Button</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>
@@ -62,7 +62,7 @@ export const fontSize = () => `
         <button class="btn" type="button" aria-expanded="true" aria-haspopup="true">
             <span class="btn__cell">
                 <span class="btn__text">Button</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>
@@ -71,19 +71,19 @@ export const fontSize = () => `
             <div class="menu-button__items" role="menu">
                 <div class="menu-button__item" role="menuitemradio" tabindex="0" aria-checked="true">
                     <span>Item 10000</span>
-                    <svg class="icon icon--tick-16" focusable="false" height="8" width="8" aria-hidden="true">
+                    <svg class="icon icon--tick-16" height="8" width="8" aria-hidden="true">
                         <use href="#icon-tick-16"></use>
                     </svg>
                 </div>
                 <div class="menu-button__item" role="menuitemradio">
                     <span>Item 20000</span>
-                    <svg class="icon icon--tick-16" focusable="false" height="8" width="8" aria-hidden="true">
+                    <svg class="icon icon--tick-16" height="8" width="8" aria-hidden="true">
                         <use href="#icon-tick-16"></use>
                     </svg>
                 </div>
                 <div class="menu-button__item" role="menuitemradio">
                     <span>Item 30000</span>
-                    <svg class="icon icon--tick-16" focusable="false" height="8" width="8" aria-hidden="true">
+                    <svg class="icon icon--tick-16" height="8" width="8" aria-hidden="true">
                         <use href="#icon-tick-16"></use>
                     </svg>
                 </div>

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

@@ -5,7 +5,7 @@ export const fixedWidth = () => `
     <button class="btn" aria-expanded="true" aria-haspopup="true" type="button">
         <span class="btn__cell">
             <span class="btn__text">Button</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/menu-button/stories/fake-menu-button.stories.js

@@ -5,7 +5,7 @@ export const links = () => `
     <button class="btn" aria-expanded="true" aria-haspopup="true" type="button">
         <span class="btn__cell">
             <span class="btn__text">Button</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>
@@ -35,7 +35,7 @@ export const linksSelected = () => `
     <button class="btn" aria-expanded="true" aria-haspopup="true" type="button">
         <span class="btn__cell">
             <span class="btn__text">Button</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>
@@ -44,7 +44,7 @@ export const linksSelected = () => `
         <li>
         <a aria-current="page" class="fake-menu-button__item" href="http://www.ebay.com">
             <span>Link 1</span>
-            <svg class="icon icon--tick-16" focusable="false" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--tick-16" height="8" width="8" aria-hidden="true">
                 <use href="#icon-tick-16"></use>
             </svg>
         </a>
@@ -68,7 +68,7 @@ export const linksDisabled = () => `
     <button class="btn" aria-expanded="true" aria-haspopup="true" type="button">
         <span class="btn__cell">
             <span class="btn__text">Button</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>
@@ -77,7 +77,7 @@ export const linksDisabled = () => `
         <li>
         <a aria-current="page" class="fake-menu-button__item">
             <span>Link 1</span>
-            <svg class="icon icon--tick-16" focusable="false" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--tick-16" height="8" width="8" aria-hidden="true">
                 <use href="#icon-tick-16"></use>
             </svg>
         </a>
@@ -101,7 +101,7 @@ export const linksFixedWidth = () => `
     <button class="btn" aria-expanded="true" aria-haspopup="true" type="button">
         <span class="btn__cell">
             <span class="btn__text">Button</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/mixins/private/bubble-mixins.less

@@ -1,15 +1,19 @@
 // this mixin is used by infotip, tooltip, tourtip, date-textbox
 
 :root {
-    --bubble-filter: drop-shadow(0 2px 7px rgba(0, 0, 0, 0.15))
-        drop-shadow(0 5px 17px rgba(0, 0, 0, 0.2));
+    // Do NOT use filter: drop-shadow() as Safari cannot do
+    //   drop-shadows outside an element with overflow.
+    //   Since box-shadow more widely supports various use cases,
+    //   it's a more robust solution.
+    --bubble-shadow: 0 2px 7px rgba(0, 0, 0, 0.15),
+        0 5px 17px rgba(0, 0, 0, 0.2);
 }
 
 .bubble(@border-radius-value: border-radius-50) {
     .border-radius-token(bubble-border-radius, @border-radius-value);
 
+    box-shadow: var(--bubble-shadow);
     display: none;
-    filter: var(--bubble-filter);
     font-size: 14px;
     left: 0;
     max-width: 344px;

package/src/less/mixins/private/dropdown-mixins.less

@@ -1,12 +1,9 @@
-@dropdown-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.07);
+@import "./bubble-mixins.less";
 
 .dropdown-base(@component) {
-    .background-color-token(~"@{component}-background-color", color-background-primary);
-    .border-color-token(~"@{component}-border-color", color-stroke-default);
+    .background-color-token(~"@{component}-background-color", color-background-elevated);
     .border-radius-token(~"@{component}-border-radius", border-radius-50);
-    border-style: solid;
-    border-width: 1px;
-    .box-shadow-token(~"@{component}-box-shadow", dropdown-box-shadow);
+    box-shadow: var(--bubble-shadow);
     box-sizing: border-box;
     display: none;
     left: 0;

package/src/less/mixins/private/filter-menu-mixins.less

@@ -1,5 +1,5 @@
 .filter-menu-item-base() {
-    .background-color-token(filter-menu-item-background-color, color-background-primary);
+    .background-color-token(filter-menu-item-background-color, color-background-elevated);
     box-sizing: border-box;
     .color-token(filter-menu-item-foreground-color, color-foreground-primary);
     display: flex;

package/src/less/page-notice/stories/page-notice.stories.js

@@ -33,7 +33,7 @@ export const generalWithLink = () => `
 export const confirmationWithButton = () => `
 <section class="page-notice page-notice--confirmation" role="region" aria-label="Confirmation">
     <div class="page-notice__header">
-        <svg class="icon icon--confirmation-filled-16" focusable="false" height="16" width="16" role="img" aria-label="Confirmation">
+        <svg class="icon icon--confirmation-filled-16" height="16" width="16" role="img" aria-label="Confirmation">
             <use href="#icon-confirmation-filled-16"></use>
         </svg>
     </div>
@@ -49,7 +49,7 @@ export const confirmationWithButton = () => `
 export const confirmationWithLink = () => `
 <section class="page-notice page-notice--confirmation" role="region" aria-label="Confirmation">
     <div class="page-notice__header">
-        <svg class="icon icon--confirmation-filled-16" focusable="false" height="16" width="16" role="img" aria-label="Confirmation">
+        <svg class="icon icon--confirmation-filled-16" height="16" width="16" role="img" aria-label="Confirmation">
             <use href="#icon-confirmation-filled-16"></use>
         </svg>
     </div>
@@ -65,7 +65,7 @@ export const confirmationWithLink = () => `
 export const attentionWithButton = () => `
 <section class="page-notice page-notice--attention" role="region" aria-label="Attention">
     <div class="page-notice__header">
-        <svg class="icon icon--attention-filled-16" focusable="false" height="16" width="16" role="img" aria-label="Attention">
+        <svg class="icon icon--attention-filled-16" height="16" width="16" role="img" aria-label="Attention">
             <use href="#icon-attention-filled-16"></use>
         </svg>
     </div>
@@ -81,7 +81,7 @@ export const attentionWithButton = () => `
 export const attentionWithLink = () => `
 <section class="page-notice page-notice--attention" role="region" aria-label="Attention">
     <div class="page-notice__header">
-        <svg class="icon icon--attention-filled-16" focusable="false" height="16" width="16" role="img" aria-label="Attention">
+        <svg class="icon icon--attention-filled-16" height="16" width="16" role="img" aria-label="Attention">
             <use href="#icon-attention-filled-16"></use>
         </svg>
     </div>
@@ -97,7 +97,7 @@ export const attentionWithLink = () => `
 export const informationWithButton = () => `
 <section class="page-notice page-notice--information" role="region" aria-label="Information">
     <div class="page-notice__header">
-        <svg class="icon icon--information-filled-16" focusable="false" height="16" width="16" role="img" aria-label="Information">
+        <svg class="icon icon--information-filled-16" height="16" width="16" role="img" aria-label="Information">
             <use href="#icon-information-filled-16"></use>
         </svg>
     </div>
@@ -113,7 +113,7 @@ export const informationWithButton = () => `
 export const informationWithLink = () => `
 <section class="page-notice page-notice--information" role="region" aria-label="Information">
     <div class="page-notice__header">
-        <svg class="icon icon--information-filled-16" focusable="false" height="16" width="16" role="img" aria-label="Information">
+        <svg class="icon icon--information-filled-16" height="16" width="16" role="img" aria-label="Information">
             <use href="#icon-information-filled-16"></use>
         </svg>
     </div>
@@ -129,7 +129,7 @@ export const informationWithLink = () => `
 export const InformationWithParagraph = () => `
 <section class="page-notice page-notice--information" role="region" aria-label="Information">
     <div class="page-notice__header">
-        <svg class="icon icon--information-filled-16" focusable="false" height="16" width="16" role="img" aria-label="Information">
+        <svg class="icon icon--information-filled-16" height="16" width="16" role="img" aria-label="Information">
             <use href="#icon-information-filled-16"></use>
         </svg>
     </div>
@@ -145,7 +145,7 @@ export const InformationWithParagraph = () => `
 export const dismissableWithTitle = () => `
 <section class="page-notice page-notice--information" role="region" aria-label="Information">
     <div class="page-notice__header">
-        <svg class="icon icon--information-filled-16" focusable="false" height="16" width="16" role="img" aria-label="Information">
+        <svg class="icon icon--information-filled-16" height="16" width="16" role="img" aria-label="Information">
             <use href="#icon-information-filled-16"></use>
         </svg>
     </div>
@@ -156,7 +156,7 @@ export const dismissableWithTitle = () => `
     <p class="page-notice__cta"><a href="https://www.ebay.com">Opt in</a></p>
     <div class="page-notice__footer">
         <button aria-label="Dismiss notification" class="fake-link page-notice__dismiss">
-            <svg aria-hidden="true" class="icon icon--close-16" focusable="false" height="14" width="14">
+            <svg aria-hidden="true" class="icon icon--close-16" height="14" width="14">
                 <use href="#icon-close-16"></use>
             </svg>
         </a>
@@ -167,7 +167,7 @@ export const dismissableWithTitle = () => `
 export const dismissableWithoutTitle = () => `
 <section class="page-notice page-notice--information" role="region" aria-label="Information">
     <div class="page-notice__header">
-        <svg class="icon icon--information-filled-16" focusable="false" height="16" width="16" role="img" aria-label="Information">
+        <svg class="icon icon--information-filled-16" height="16" width="16" role="img" aria-label="Information">
             <use href="#icon-information-filled-16"></use>
         </svg>
     </div>
@@ -177,7 +177,7 @@ export const dismissableWithoutTitle = () => `
     <p class="page-notice__cta"><a href="https://www.ebay.com">Opt in</a></p>
     <div class="page-notice__footer">
         <button aria-label="Dismiss notification" class="fake-link page-notice__dismiss">
-            <svg aria-hidden="true" class="icon icon--close-16" focusable="false" height="14" width="14">
+            <svg aria-hidden="true" class="icon icon--close-16" height="14" width="14">
                 <use href="#icon-close-16"></use>
             </svg>
         </a>
@@ -188,7 +188,7 @@ export const dismissableWithoutTitle = () => `
 export const formErrors = () => `
 <section class="page-notice page-notice--attention" role="region" aria-label="Attention">
     <div class="page-notice__header">
-        <svg class="icon icon--attention-filled-16" focusable="false" height="16" width="16" role="img" aria-label="Attention">
+        <svg class="icon icon--attention-filled-16" height="16" width="16" role="img" aria-label="Attention">
             <use href="#icon-attention-filled-16"></use>
         </svg>
     </div>

package/src/less/page-notice/stories/test.stories.js

@@ -4,7 +4,7 @@ export const RTL = () => `
 <div dir="rtl">
     <section class="page-notice page-notice--confirmation" role="region" aria-label="Confirmation">
         <div class="page-notice__header">
-            <svg class="icon icon--confirmation-filled-16" focusable="false" height="24" width="24" role="img" aria-label="Confirmation">
+            <svg class="icon icon--confirmation-filled-16" height="24" width="24" role="img" aria-label="Confirmation">
                 <use href="#icon-confirmation-filled-16"></use>
             </svg>
         </div>
@@ -22,7 +22,7 @@ export const RTL = () => `
 export const longText = () => `
 <section class="page-notice page-notice--confirmation" role="region" aria-label="Confirmation">
     <div class="page-notice__header">
-        <svg class="icon icon--confirmation-filled-16" focusable="false" height="24" width="24" role="img" aria-label="Confirmation">
+        <svg class="icon icon--confirmation-filled-16" height="24" width="24" role="img" aria-label="Confirmation">
             <use href="#icon-confirmation-filled-16"></use>
         </svg>
     </div>
@@ -38,7 +38,7 @@ export const longText = () => `
 export const legacy = () => `
 <section class="page-notice page-notice--confirmation" role="region" aria-label="Confirmation">
     <div class="page-notice__header">
-        <svg class="icon icon--confirmation-filled-16" focusable="false" height="24" width="24" role="img" aria-label="Confirmation">
+        <svg class="icon icon--confirmation-filled-16" height="24" width="24" role="img" aria-label="Confirmation">
             <use href="#icon-confirmation-filled-16"></use>
         </svg>
     </div>
@@ -52,7 +52,7 @@ export const legacy = () => `
 export const legacyLongText = () => `
 <section class="page-notice page-notice--confirmation" role="region" aria-label="Confirmation">
         <div class="page-notice__header">
-            <svg class="icon icon--confirmation-filled-16" focusable="false" height="24" width="24" role="img" aria-label="Confirmation">
+            <svg class="icon icon--confirmation-filled-16" height="24" width="24" role="img" aria-label="Confirmation">
                 <use href="#icon-confirmation-filled-16"></use>
             </svg>
         </div>
@@ -66,7 +66,7 @@ export const legacyLongText = () => `
 export const legacyLongTextAndCTA = () => `
 <section class="page-notice page-notice--confirmation" role="region" aria-label="Confirmation">
         <div class="page-notice__header">
-            <svg class="icon icon--confirmation-filled-16" focusable="false" height="24" width="24" role="img" aria-label="Confirmation">
+            <svg class="icon icon--confirmation-filled-16" height="24" width="24" role="img" aria-label="Confirmation">
                 <use href="#icon-confirmation-filled-16"></use>
             </svg>
         </div>
@@ -83,7 +83,7 @@ export const legacyLongTextAndCTA = () => `
 export const legacyMultiParagraph = () => `
 <section class="page-notice page-notice--confirmation" role="region" aria-label="Confirmation">
         <div class="page-notice__header">
-            <svg class="icon icon--confirmation-filled-16" focusable="false" height="24" width="24" role="img" aria-label="Confirmation">
+            <svg class="icon icon--confirmation-filled-16" height="24" width="24" role="img" aria-label="Confirmation">
                 <use href="#icon-confirmation-filled-16"></use>
             </svg>
         </div>
@@ -98,7 +98,7 @@ export const legacyMultiParagraph = () => `
 export const legacyMultiParagraphWithCTA = () => `
 <section class="page-notice page-notice--confirmation" role="region" aria-label="Confirmation">
         <div class="page-notice__header">
-            <svg class="icon icon--confirmation-filled-16" focusable="false" height="24" width="24" role="img" aria-label="Confirmation">
+            <svg class="icon icon--confirmation-filled-16" height="24" width="24" role="img" aria-label="Confirmation">
                 <use href="#icon-confirmation-filled-16"></use>
             </svg>
         </div>