Use keyboard-mode instead of :focus-visible

This commit is contained in:
Jamie Kyle 2023-08-29 15:45:10 -07:00 committed by GitHub
parent ee9de52f9d
commit bc74a696f4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 32 additions and 26 deletions

View file

@ -117,10 +117,9 @@
&:focus { &:focus {
outline: none; outline: none;
} @include keyboard-mode {
box-shadow: 0 0 0 2px $color-white, 0 0 0 4px $color-ultramarine;
&:focus-visible { }
box-shadow: 0 0 0 2px $color-white, 0 0 0 4px $color-ultramarine;
} }
&::before { &::before {
@ -307,9 +306,9 @@
} }
&:focus { &:focus {
outline: none; outline: none;
} @include keyboard-mode {
&:focus-visible { box-shadow: 0 0 0 2px $color-ultramarine;
box-shadow: 0 0 0 2px $color-ultramarine; }
} }
&:disabled, &:disabled,
&[aria-disabled='true'] { &[aria-disabled='true'] {

View file

@ -96,10 +96,9 @@
&:focus { &:focus {
outline: none; outline: none;
} @include keyboard-mode {
box-shadow: 0 0 0 2px $color-ultramarine;
&:focus-visible { }
box-shadow: 0 0 0 2px $color-ultramarine;
} }
&::before { &::before {
@ -147,9 +146,11 @@
background: transparent; background: transparent;
cursor: col-resize; cursor: col-resize;
&:focus-visible { &:focus {
outline: none; outline: none;
box-shadow: inset 0 0 0 2px $color-ultramarine; @include keyboard-mode {
box-shadow: inset 0 0 0 2px $color-ultramarine;
}
} }
} }
@ -194,10 +195,9 @@
&:focus { &:focus {
outline: none; outline: none;
} @include keyboard-mode {
box-shadow: 0 0 0 2px $color-ultramarine;
&:focus-visible { }
box-shadow: 0 0 0 2px $color-ultramarine;
} }
} }

View file

@ -64,7 +64,7 @@ $NavTabs__ProfileAvatar__size: 28px;
padding-block: $NavTabs__ItemButton__blockPadding; padding-block: $NavTabs__ItemButton__blockPadding;
border-radius: 8px; border-radius: 8px;
.NavTabs__Item:hover &, .NavTabs__Item:hover &,
.NavTabs__Item:focus-visible & { .NavTabs__Item:focus & {
@include light-theme { @include light-theme {
background-color: $color-black-alpha-06; background-color: $color-black-alpha-06;
} }
@ -72,8 +72,11 @@ $NavTabs__ProfileAvatar__size: 28px;
background-color: $color-white-alpha-06; background-color: $color-white-alpha-06;
} }
} }
.NavTabs__Item:focus-visible & { .NavTabs__Item:focus & {
box-shadow: 0 0 0 2px $color-ultramarine; outline: none;
@include keyboard-mode {
box-shadow: 0 0 0 2px $color-ultramarine;
}
} }
.NavTabs__Item:active &, .NavTabs__Item:active &,
.NavTabs__Item[aria-selected='true'] & { .NavTabs__Item[aria-selected='true'] & {

View file

@ -19,10 +19,12 @@
max-width: 280px; max-width: 280px;
background-color: $color-gray-75; background-color: $color-gray-75;
color: $color-gray-05; color: $color-gray-05;
outline: none;
&:focus:focus-visible { &:focus {
box-shadow: inset 0px 0px 0px 2px $color-ultramarine; outline: none;
@include keyboard-mode {
box-shadow: inset 0px 0px 0px 2px $color-ultramarine;
}
} }
&--align-center { &--align-center {
@ -51,10 +53,12 @@
padding-inline: 16px; padding-inline: 16px;
white-space: nowrap; white-space: nowrap;
color: $color-ios-blue-tint; color: $color-ios-blue-tint;
outline: none;
&:focus:focus-visible { &:focus {
box-shadow: inset 0px 0px 0px 2px $color-ultramarine; outline: none;
@include keyboard-mode {
box-shadow: inset 0px 0px 0px 2px $color-ultramarine;
}
} }
} }
} }