Use focus-visible for focus indicator heuristics (#1332)

eBay · Jan 13, 2021 · 465b7ae · 465b7ae
1 parent 9475281
commit 465b7ae
Show file tree

Hide file tree

Showing 75 changed files with 345 additions and 75 deletions.
diff --git a/dist/breadcrumbs/ds4/breadcrumbs.css b/dist/breadcrumbs/ds4/breadcrumbs.css
@@ -58,6 +58,10 @@ nav.breadcrumbs button[aria-current] {
   color: var(--breadcrumbs-item-current-foreground-color, #767676);
   text-decoration: none;
 }
+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,10 @@ nav.breadcrumbs button[aria-current] {
   color: var(--breadcrumbs-item-current-foreground-color, #767676);
   text-decoration: none;
 }
+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,10 @@ a.fake-btn--truncated span {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+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,10 @@ a.fake-btn--truncated span {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+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,9 @@ div.carousel {
   color: #333;
   color: var(--carousel-paddle-foreground-color, #333);
 }
+.carousel__control:focus:not(:focus-visible) {
+  outline: none;
+}
 @media (min-width: 601px) {
   .carousel:focus-within .carousel__control {
     opacity: 0.92;
@@ -152,6 +155,9 @@ div.carousel {
 .carousel__control:active {
   background-color: #333;
 }
+.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,9 @@ div.carousel {
   color: #111820;
   color: var(--carousel-paddle-foreground-color, #111820);
 }
+.carousel__control:focus:not(:focus-visible) {
+  outline: none;
+}
 @media (min-width: 601px) {
   .carousel:focus-within .carousel__control {
     opacity: 0.92;
@@ -160,6 +163,9 @@ div.carousel {
 .carousel__control:active {
   background-color: #414141;
 }
+.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,9 @@ a.cta-btn--truncated span {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+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,9 @@ a.cta-btn--truncated span {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+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,6 @@ details.details[open] span.details__icon {
 details.details[open] summary.details__summary::before {
   content: none;
 }
+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,6 @@ details.details[open] span.details__icon {
 details.details[open] summary.details__summary::before {
   content: none;
 }
+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,6 @@ button.drawer-dialog__close {
   -webkit-transform: translateX(0);
           transform: translateX(0);
 }
+.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,6 @@ button.drawer-dialog__close {
   -webkit-transform: translateX(0);
           transform: translateX(0);
 }
+.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,9 @@ button.expand-btn--truncated span {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+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,9 @@ button.expand-btn--truncated span {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+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,9 @@ 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: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,9 @@ 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:not(:focus-visible),
+a.filter-link:focus:not(:focus-visible) {
+  outline: none;
+}
+/* stylelint-enable no-descending-specificity */
diff --git a/dist/filter-menu-button/ds4/filter-menu-button.css b/dist/filter-menu-button/ds4/filter-menu-button.css
@@ -310,6 +310,9 @@ button.filter-menu-button__footer:hover {
 .filter-menu-button__item[role="menuitemradio"][aria-checked="true"] svg.icon--radio-checked {
   display: block;
 }
+button.filter-menu-button__button:focus:not(:focus-visible) {
+  outline: none;
+}
 [dir="rtl"] .filter-menu-button__button-cell .icon--dropdown {
   margin-left: 0;
   margin-right: 8px;

diff --git a/dist/filter-menu-button/ds6/filter-menu-button.css b/dist/filter-menu-button/ds6/filter-menu-button.css
@@ -315,6 +315,9 @@ button.filter-menu-button__footer:hover {
 .filter-menu-button__item[role="menuitemradio"][aria-checked="true"] svg.icon--radio-checked {
   display: block;
 }
+button.filter-menu-button__button:focus:not(:focus-visible) {
+  outline: none;
+}
 [dir="rtl"] .filter-menu-button__button-cell .icon--dropdown {
   margin-left: 0;
   margin-right: 8px;

diff --git a/dist/icon-button/ds4/icon-button.css b/dist/icon-button/ds4/icon-button.css
@@ -39,6 +39,10 @@ a.icon-link:hover > svg {
   fill: #333;
   fill: var(--icon-button-icon-hover-foreground-color, #333);
 }
+button.icon-btn:not(:focus-visible),
+a.icon-link:not(:focus-visible) {
+  outline: none;
+}
 a.icon-link:visited > svg {
   fill: #555;
   fill: var(--icon-button-icon-foreground-color, #555);

diff --git a/dist/icon-button/ds6/icon-button.css b/dist/icon-button/ds6/icon-button.css
@@ -48,6 +48,10 @@ a.icon-link:hover > svg {
   fill: #3665f3;
   fill: var(--icon-button-icon-hover-foreground-color, #3665f3);
 }
+button.icon-btn:not(:focus-visible),
+a.icon-link:not(:focus-visible) {
+  outline: none;
+}
 a.icon-link:visited > svg {
   fill: #111820;
   fill: var(--icon-button-icon-foreground-color, #111820);

diff --git a/dist/listbox-button/ds4/listbox-button.css b/dist/listbox-button/ds4/listbox-button.css
@@ -136,3 +136,6 @@ span.listbox-button__value {
   -webkit-box-flex: 1;
           flex: 1 0 auto;
 }
+.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,6 @@ span.listbox-button__value {
   -webkit-box-flex: 1;
           flex: 1 0 auto;
 }
+.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,6 @@ div.listbox__option[role="option"]:active svg.icon {
   color: #ccc;
   color: var(--dropdown-item-active-status-color, #ccc);
 }
+.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,6 @@ div.listbox__option[role="option"]:active svg.icon {
   color: #fff;
   color: var(--dropdown-item-active-status-color, #fff);
 }
+.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,6 @@ hr.menu-button__separator {
   border-width: 1px;
   margin: 0;
 }
+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,6 @@ hr.menu-button__separator {
   border-width: 1px;
   margin: 0;
 }
+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,6 @@ hr.menu__separator {
   border-style: solid;
   border-width: 1px;
 }
+div.menu__item[role^="menuitem"]:focus:not(:focus-visible) {
+  outline: none;
+}
diff --git a/dist/menu/ds6/menu.css b/dist/menu/ds6/menu.css
@@ -178,3 +178,6 @@ hr.menu__separator {
   border-style: solid;
   border-width: 1px;
 }
+div.menu__item[role^="menuitem"]:focus:not(:focus-visible) {
+  outline: none;
+}
diff --git a/dist/mixins/button/base/button-mixins.less b/dist/mixins/button/base/button-mixins.less
@@ -16,6 +16,11 @@
 
         height: 40px;
     }
+
+    // https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/
+    &:focus:not(:focus-visible) {
+        outline: none;
+    }
 }
 
 .btn-icon-base() {

diff --git a/dist/mixins/carousel/base/carousel-mixins.less b/dist/mixins/carousel/base/carousel-mixins.less
@@ -47,6 +47,11 @@
         .customColorProperty(carousel-paddle-foreground-color);
     }
 
+    // https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/
+    &:focus:not(:focus-visible) {
+        outline: none;
+    }
+
     // progressive enhancement for browsers with support
     // :focus-within and :hover cannot be combined as
     // IE/Edge will discard the entire rule

diff --git a/dist/pagination/ds4/pagination.css b/dist/pagination/ds4/pagination.css
@@ -111,6 +111,10 @@ nav.pagination--fluid ol.pagination__items li {
   -webkit-box-flex: 1;
           flex: 1 0 48px;
 }
+a.pagination__item:focus:not(:focus-visible),
+button.pagination__item:focus:not(:focus-visible) {
+  outline: none;
+}
 @media (min-width: 601px) {
   nav.pagination {
     margin: 16px 0;

diff --git a/dist/pagination/ds6/pagination.css b/dist/pagination/ds6/pagination.css
@@ -117,6 +117,10 @@ nav.pagination--fluid ol.pagination__items li {
   -webkit-box-flex: 1;
           flex: 1 0 48px;
 }
+a.pagination__item:focus:not(:focus-visible),
+button.pagination__item:focus:not(:focus-visible) {
+  outline: none;
+}
 @media (min-width: 601px) {
   nav.pagination {
     margin: 16px 0;

diff --git a/dist/radio/ds4/radio.css b/dist/radio/ds4/radio.css
@@ -65,12 +65,16 @@ input.radio__control[type="radio"]:checked + span.radio__icon svg.radio__checked
 input.radio__control[type="radio"]:checked + span.radio__icon svg.radio__unchecked {
   display: none;
 }
-input.radio__control[type="radio"]:focus + span.radio__icon {
-  outline: 1px dotted #767676;
-}
 input.radio__control[type="radio"][disabled] + span.radio__icon {
   opacity: 1;
 }
 input.radio__control[type="radio"][disabled] + span.radio__icon svg {
   fill: #ccc;
 }
+input.radio__control[type="radio"]:focus + span.radio__icon {
+  outline: 1px auto #767676;
+  outline-offset: 2px;
+}
+input.radio__control[type="radio"]:focus:not(:focus-visible) + span.radio__icon {
+  outline: none;
+}
diff --git a/dist/radio/ds6/radio.css b/dist/radio/ds6/radio.css
@@ -71,12 +71,16 @@ input.radio__control[type="radio"]:checked + span.radio__icon svg.radio__checked
 input.radio__control[type="radio"]:checked + span.radio__icon svg.radio__unchecked {
   display: none;
 }
-input.radio__control[type="radio"]:focus + span.radio__icon {
-  outline: 1px dotted #767676;
-}
 input.radio__control[type="radio"][disabled] + span.radio__icon {
   opacity: 1;
 }
 input.radio__control[type="radio"][disabled] + span.radio__icon svg {
   fill: #c7c7c7;
 }
+input.radio__control[type="radio"]:focus + span.radio__icon {
+  outline: 1px auto #767676;
+  outline-offset: 2px;
+}
+input.radio__control[type="radio"]:focus:not(:focus-visible) + span.radio__icon {
+  outline: none;
+}