Keyboard focus indicator changes #1321

eBay · Jan 12, 2021 · 570adff · 570adff
1 parent 9475281
commit 570adff
Show file tree

Hide file tree

Showing 75 changed files with 552 additions and 75 deletions.
diff --git a/dist/breadcrumbs/ds4/breadcrumbs.css b/dist/breadcrumbs/ds4/breadcrumbs.css
@@ -58,6 +58,15 @@ nav.breadcrumbs button[aria-current] {
   color: var(--breadcrumbs-item-current-foreground-color, #767676);
   text-decoration: none;
 }
+nav.breadcrumbs a:focus,
+nav.breadcrumbs button:focus {
+  outline: 1px auto #767676;
+  outline-offset: 1px;
+}
+nav.breadcrumbs a:focus:not(:focus-visible),
+nav.breadcrumbs button:focus:not(:focus-visible) {
+  outline: none;
+}
 @media (min-width: 601px) {
   nav.breadcrumbs {
     margin: 16px 0;

diff --git a/dist/breadcrumbs/ds6/breadcrumbs.css b/dist/breadcrumbs/ds6/breadcrumbs.css
@@ -65,6 +65,15 @@ nav.breadcrumbs button[aria-current] {
   color: var(--breadcrumbs-item-current-foreground-color, #767676);
   text-decoration: none;
 }
+nav.breadcrumbs a:focus,
+nav.breadcrumbs button:focus {
+  outline: 1px auto #767676;
+  outline-offset: 1px;
+}
+nav.breadcrumbs a:focus:not(:focus-visible),
+nav.breadcrumbs button:focus:not(:focus-visible) {
+  outline: none;
+}
 @media (min-width: 601px) {
   nav.breadcrumbs {
     margin: 16px 0;

diff --git a/dist/button/ds4/button.css b/dist/button/ds4/button.css
@@ -38,6 +38,15 @@ a.fake-btn--truncated span {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+button.btn:focus,
+a.fake-btn:focus {
+  outline: 1px auto #767676;
+  outline-offset: 2px;
+}
+button.btn:focus:not(:focus-visible),
+a.fake-btn:focus:not(:focus-visible) {
+  outline: none;
+}
 button.btn--wide,
 a.fake-btn--wide {
   padding-left: 48px;

diff --git a/dist/button/ds6/button.css b/dist/button/ds6/button.css
@@ -59,6 +59,15 @@ a.fake-btn--truncated span {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+button.btn:focus,
+a.fake-btn:focus {
+  outline: 1px auto #767676;
+  outline-offset: 2px;
+}
+button.btn:focus:not(:focus-visible),
+a.fake-btn:focus:not(:focus-visible) {
+  outline: none;
+}
 button.btn--wide,
 a.fake-btn--wide {
   padding-left: 48px;

diff --git a/dist/carousel/ds4/carousel.css b/dist/carousel/ds4/carousel.css
@@ -118,6 +118,13 @@ div.carousel {
   color: #333;
   color: var(--carousel-paddle-foreground-color, #333);
 }
+.carousel__control:focus {
+  outline: 1px auto #767676;
+  outline-offset: 2px;
+}
+.carousel__control:focus:not(:focus-visible) {
+  outline: none;
+}
 @media (min-width: 601px) {
   .carousel:focus-within .carousel__control {
     opacity: 0.92;
@@ -152,6 +159,13 @@ div.carousel {
 .carousel__control:active {
   background-color: #333;
 }
+.carousel__playback:focus {
+  outline: 1px auto #767676;
+  outline-offset: 1px;
+}
+.carousel__playback:focus:not(:focus-visible) {
+  outline: none;
+}
 span.carousel,
 span.carousel__container {
   display: inline-block;

diff --git a/dist/carousel/ds6/carousel.css b/dist/carousel/ds6/carousel.css
@@ -126,6 +126,13 @@ div.carousel {
   color: #111820;
   color: var(--carousel-paddle-foreground-color, #111820);
 }
+.carousel__control:focus {
+  outline: 1px auto #767676;
+  outline-offset: 2px;
+}
+.carousel__control:focus:not(:focus-visible) {
+  outline: none;
+}
 @media (min-width: 601px) {
   .carousel:focus-within .carousel__control {
     opacity: 0.92;
@@ -160,6 +167,13 @@ div.carousel {
 .carousel__control:active {
   background-color: #414141;
 }
+.carousel__playback:focus {
+  outline: 1px auto #767676;
+  outline-offset: 1px;
+}
+.carousel__playback:focus:not(:focus-visible) {
+  outline: none;
+}
 span.carousel,
 span.carousel__container {
   display: inline-block;

diff --git a/dist/checkbox/ds4/checkbox.css b/dist/checkbox/ds4/checkbox.css
@@ -65,12 +65,16 @@ input.checkbox__control[type="checkbox"]:checked + span.checkbox__icon svg.check
 input.checkbox__control[type="checkbox"]:checked + span.checkbox__icon svg.checkbox__unchecked {
   display: none;
 }
-input.checkbox__control[type="checkbox"]:focus + span.checkbox__icon {
-  outline: 1px dotted #767676;
-}
 input.checkbox__control[type="checkbox"][disabled] + span.checkbox__icon {
   opacity: 1;
 }
 input.checkbox__control[type="checkbox"][disabled] + span.checkbox__icon svg {
   fill: #ccc;
 }
+input.checkbox__control[type="checkbox"]:focus + span.checkbox__icon {
+  outline: 1px auto #767676;
+  outline-offset: 2px;
+}
+input.checkbox__control[type="checkbox"]:focus:not(:focus-visible) + span.checkbox__icon {
+  outline: none;
+}
diff --git a/dist/checkbox/ds6/checkbox.css b/dist/checkbox/ds6/checkbox.css
@@ -71,12 +71,16 @@ input.checkbox__control[type="checkbox"]:checked + span.checkbox__icon svg.check
 input.checkbox__control[type="checkbox"]:checked + span.checkbox__icon svg.checkbox__unchecked {
   display: none;
 }
-input.checkbox__control[type="checkbox"]:focus + span.checkbox__icon {
-  outline: 1px dotted #767676;
-}
 input.checkbox__control[type="checkbox"][disabled] + span.checkbox__icon {
   opacity: 1;
 }
 input.checkbox__control[type="checkbox"][disabled] + span.checkbox__icon svg {
   fill: #c7c7c7;
 }
+input.checkbox__control[type="checkbox"]:focus + span.checkbox__icon {
+  outline: 1px auto #767676;
+  outline-offset: 2px;
+}
+input.checkbox__control[type="checkbox"]:focus:not(:focus-visible) + span.checkbox__icon {
+  outline: none;
+}
diff --git a/dist/cta-button/ds4/cta-button.css b/dist/cta-button/ds4/cta-button.css
@@ -33,6 +33,13 @@ a.cta-btn--truncated span {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+a.cta-btn:focus {
+  outline: 1px auto #767676;
+  outline-offset: 2px;
+}
+a.cta-btn:focus:not(:focus-visible) {
+  outline: none;
+}
 a.cta-btn:visited {
   color: #333;
   color: var(--cta-button-visited-foreground-color, #333);

diff --git a/dist/cta-button/ds6/cta-button.css b/dist/cta-button/ds6/cta-button.css
@@ -43,6 +43,13 @@ a.cta-btn--truncated span {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+a.cta-btn:focus {
+  outline: 1px auto #767676;
+  outline-offset: 2px;
+}
+a.cta-btn:focus:not(:focus-visible) {
+  outline: none;
+}
 a.cta-btn:visited {
   color: #111820;
   color: var(--cta-button-visited-foreground-color, #111820);

diff --git a/dist/details/ds4/details.css b/dist/details/ds4/details.css
@@ -43,3 +43,9 @@ details.details[open] span.details__icon {
 details.details[open] summary.details__summary::before {
   content: none;
 }
+details.details summary:focus {
+  outline: 1px auto #767676;
+}
+details.details summary:focus:not(:focus-visible) {
+  outline: none;
+}
diff --git a/dist/details/ds6/details.css b/dist/details/ds6/details.css
@@ -48,3 +48,9 @@ details.details[open] span.details__icon {
 details.details[open] summary.details__summary::before {
   content: none;
 }
+details.details summary:focus {
+  outline: 1px auto #767676;
+}
+details.details summary:focus:not(:focus-visible) {
+  outline: none;
+}
diff --git a/dist/drawer-dialog/ds4/drawer-dialog.css b/dist/drawer-dialog/ds4/drawer-dialog.css
@@ -185,3 +185,9 @@ button.drawer-dialog__close {
   -webkit-transform: translateX(0);
           transform: translateX(0);
 }
+.drawer-dialog__handle:focus {
+  outline: 1px auto #767676;
+}
+.drawer-dialog__handle:focus:not(:focus-visible) {
+  outline: none;
+}
diff --git a/dist/drawer-dialog/ds6/drawer-dialog.css b/dist/drawer-dialog/ds6/drawer-dialog.css
@@ -190,3 +190,9 @@ button.drawer-dialog__close {
   -webkit-transform: translateX(0);
           transform: translateX(0);
 }
+.drawer-dialog__handle:focus {
+  outline: 1px auto #767676;
+}
+.drawer-dialog__handle:focus:not(:focus-visible) {
+  outline: none;
+}
diff --git a/dist/expand-button/ds4/expand-button.css b/dist/expand-button/ds4/expand-button.css
@@ -31,6 +31,13 @@ button.expand-btn--truncated span {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+button.expand-btn:focus {
+  outline: 1px auto #767676;
+  outline-offset: 2px;
+}
+button.expand-btn:focus:not(:focus-visible) {
+  outline: none;
+}
 button.expand-btn:hover,
 button.expand-btn:focus {
   border-color: #00489f;

diff --git a/dist/expand-button/ds6/expand-button.css b/dist/expand-button/ds6/expand-button.css
@@ -51,6 +51,13 @@ button.expand-btn--truncated span {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+button.expand-btn:focus {
+  outline: 1px auto #767676;
+  outline-offset: 2px;
+}
+button.expand-btn:focus:not(:focus-visible) {
+  outline: none;
+}
 button.expand-btn:hover,
 button.expand-btn:focus {
   border-color: #2b0eaf;

diff --git a/dist/filter-button/ds4/filter-button.css b/dist/filter-button/ds4/filter-button.css
@@ -116,3 +116,14 @@ a.filter-link--selected:not([href]):hover,
 a.filter-link--selected[aria-disabled="true"]:hover {
   background-color: #dbeafe;
 }
+/* stylelint-disable no-descending-specificity */
+button.filter-button:focus,
+a.filter-link:focus {
+  outline: 1px auto #767676;
+  outline-offset: 2px;
+}
+button.filter-button:focus:not(:focus-visible),
+a.filter-link:focus:not(:focus-visible) {
+  outline: none;
+}
+/* stylelint-enable no-descending-specificity */
diff --git a/dist/filter-button/ds6/filter-button.css b/dist/filter-button/ds6/filter-button.css
@@ -127,3 +127,14 @@ a.filter-link--selected:not([href]):hover,
 a.filter-link--selected[aria-disabled="true"]:hover {
   background-color: #e1e8fd;
 }
+/* stylelint-disable no-descending-specificity */
+button.filter-button:focus,
+a.filter-link:focus {
+  outline: 1px auto #767676;
+  outline-offset: 2px;
+}
+button.filter-button:focus:not(:focus-visible),
+a.filter-link:focus:not(:focus-visible) {
+  outline: none;
+}
+/* stylelint-enable no-descending-specificity */
diff --git a/dist/global/ds4/global.css b/dist/global/ds4/global.css
@@ -26,3 +26,7 @@ a:hover {
   color: #00489f;
   color: var(--color-link-hover, #00489f);
 }
+a:focus {
+  outline: 1px auto #767676;
+  outline-offset: 2px;
+}
diff --git a/dist/global/ds6/global.css b/dist/global/ds6/global.css
@@ -26,3 +26,7 @@ a:hover {
   color: #2b0eaf;
   color: var(--color-link-hover, #2b0eaf);
 }
+a:focus {
+  outline: 1px auto #767676;
+  outline-offset: 2px;
+}
diff --git a/dist/icon-button/ds4/icon-button.css b/dist/icon-button/ds4/icon-button.css
@@ -101,3 +101,11 @@ button.img-btn:not([disabled]):focus {
 button.img-btn:not([disabled]):active {
   border-color: #767676;
 }
+button.icon-btn:focus,
+a.icon-link:focus {
+  outline: 1px auto #767676;
+}
+button.icon-btn:focus:not(:focus-visible),
+a.icon-link:focus:not(:focus-visible) {
+  outline: none;
+}
diff --git a/dist/icon-button/ds6/icon-button.css b/dist/icon-button/ds6/icon-button.css
@@ -110,3 +110,11 @@ button.img-btn:not([disabled]):focus {
 button.img-btn:not([disabled]):active {
   border-color: #767676;
 }
+button.icon-btn:focus,
+a.icon-link:focus {
+  outline: 1px auto #767676;
+}
+button.icon-btn:focus:not(:focus-visible),
+a.icon-link:focus:not(:focus-visible) {
+  outline: none;
+}
diff --git a/dist/listbox-button/ds4/listbox-button.css b/dist/listbox-button/ds4/listbox-button.css
@@ -136,3 +136,9 @@ span.listbox-button__value {
   -webkit-box-flex: 1;
           flex: 1 0 auto;
 }
+.listbox-button__options:focus {
+  outline: 1px auto #767676;
+}
+.listbox-button__options:focus:not(:focus-visible) {
+  outline: none;
+}
diff --git a/dist/listbox-button/ds6/listbox-button.css b/dist/listbox-button/ds6/listbox-button.css
@@ -146,3 +146,9 @@ span.listbox-button__value {
   -webkit-box-flex: 1;
           flex: 1 0 auto;
 }
+.listbox-button__options:focus {
+  outline: 1px auto #767676;
+}
+.listbox-button__options:focus:not(:focus-visible) {
+  outline: none;
+}
diff --git a/dist/listbox/ds4/listbox.css b/dist/listbox/ds4/listbox.css
@@ -94,3 +94,9 @@ div.listbox__option[role="option"]:active svg.icon {
   color: #ccc;
   color: var(--dropdown-item-active-status-color, #ccc);
 }
+.listbox__options:focus {
+  outline: 1px auto #767676;
+}
+.listbox__options:focus:not(:focus-visible) {
+  outline: none;
+}
diff --git a/dist/listbox/ds6/listbox.css b/dist/listbox/ds6/listbox.css
@@ -104,3 +104,9 @@ div.listbox__option[role="option"]:active svg.icon {
   color: #fff;
   color: var(--dropdown-item-active-status-color, #fff);
 }
+.listbox__options:focus {
+  outline: 1px auto #767676;
+}
+.listbox__options:focus:not(:focus-visible) {
+  outline: none;
+}
diff --git a/dist/menu-button/ds4/menu-button.css b/dist/menu-button/ds4/menu-button.css
@@ -265,3 +265,9 @@ hr.menu-button__separator {
   border-width: 1px;
   margin: 0;
 }
+div.menu-button__item[role^="menuitem"]:focus {
+  outline: 1px auto #767676;
+}
+div.menu-button__item[role^="menuitem"]:focus:not(:focus-visible) {
+  outline: none;
+}
diff --git a/dist/menu-button/ds6/menu-button.css b/dist/menu-button/ds6/menu-button.css
@@ -274,3 +274,9 @@ hr.menu-button__separator {
   border-width: 1px;
   margin: 0;
 }
+div.menu-button__item[role^="menuitem"]:focus {
+  outline: 1px auto #767676;
+}
+div.menu-button__item[role^="menuitem"]:focus:not(:focus-visible) {
+  outline: none;
+}
diff --git a/dist/menu/ds4/menu.css b/dist/menu/ds4/menu.css
@@ -169,3 +169,9 @@ hr.menu__separator {
   border-style: solid;
   border-width: 1px;
 }
+div.menu__item[role^="menuitem"]:focus {
+  outline: 1px auto #767676;
+}
+div.menu__item[role^="menuitem"]:focus:not(:focus-visible) {
+  outline: none;
+}