diff --git a/packages/combobox/combobox.scss b/packages/combobox/combobox.scss index 7f84c05e1dc..39086c1c9c7 100644 --- a/packages/combobox/combobox.scss +++ b/packages/combobox/combobox.scss @@ -118,9 +118,11 @@ $_combobox-search-input-selection-color--inverted: color.scale( padding: var(--jkl-combobox-button-active-value-padding); } - &:has(:focus-visible) { - @include jkl.focus-outline; - background-color: var(--jkl-combobox-open-background-color); + @include jkl.keyboard-navigation { + &:has(:focus-visible) { + @include jkl.focus-outline; + background-color: var(--jkl-combobox-open-background-color); + } } &:has(.jkl-icon-button:focus-visible) { diff --git a/packages/jokul/src/components/combobox/styles/combobox.scss b/packages/jokul/src/components/combobox/styles/combobox.scss index c8858492382..5e8c2ffa467 100644 --- a/packages/jokul/src/components/combobox/styles/combobox.scss +++ b/packages/jokul/src/components/combobox/styles/combobox.scss @@ -116,9 +116,11 @@ $_combobox-search-input-selection-color--inverted: color.scale( padding: var(--jkl-combobox-button-active-value-padding); } - &:has(:focus-visible) { - @include jkl.focus-outline; - background-color: var(--jkl-combobox-open-background-color); + @include jkl.keyboard-navigation { + &:has(:focus-visible) { + @include jkl.focus-outline; + background-color: var(--jkl-combobox-open-background-color); + } } &:has(.jkl-icon-button:focus-visible) { diff --git a/packages/jokul/src/components/select/styles/select.scss b/packages/jokul/src/components/select/styles/select.scss index 99e441b700f..72df15064a0 100644 --- a/packages/jokul/src/components/select/styles/select.scss +++ b/packages/jokul/src/components/select/styles/select.scss @@ -39,7 +39,7 @@ @include jkl.reset-outline; - & *:focus { + & *:focus-visible { outline: none; } @@ -113,10 +113,6 @@ color: var(--jkl-color-text-default); } - &:focus { - @include jkl.focus-outline; - } - &:hover { border-color: var(--jkl-color-border-input-focus); box-shadow: 0 0 0 jkl.rem(1px) var(--jkl-color-border-input-focus); @@ -125,6 +121,27 @@ transform: translateY(calc(-50% + #{jkl.rem(3px)})); } } + + &:focus-visible { + outline: none; + } + } + + @include jkl.keyboard-navigation { + &__search-input, + &__button { + &:focus-visible, + &:has(:focus-visible) { + @include jkl.focus-outline; + } + } + + &:has(:focus-visible) { + .jkl-select__button, + .jkl-select__search-input { + @include jkl.focus-outline; + } + } } &__button { diff --git a/packages/select/select.scss b/packages/select/select.scss index 6ebb9854ad8..98f5f2caa8a 100644 --- a/packages/select/select.scss +++ b/packages/select/select.scss @@ -39,7 +39,7 @@ @include jkl.reset-outline; - & *:focus { + & *:focus-visible { outline: none; } @@ -113,10 +113,6 @@ color: var(--jkl-color-text-default); } - &:focus { - @include jkl.focus-outline; - } - &:hover { border-color: var(--jkl-color-border-input-focus); box-shadow: 0 0 0 jkl.rem(1px) var(--jkl-color-border-input-focus); @@ -125,6 +121,27 @@ transform: translateY(calc(-50% + #{jkl.rem(3px)})); } } + + &:focus-visible { + outline: none; + } + } + + @include jkl.keyboard-navigation { + &__search-input, + &__button { + &:focus-visible, + &:has(:focus-visible) { + @include jkl.focus-outline; + } + } + + &:has(:focus-visible) { + .jkl-select__button, + .jkl-select__search-input { + @include jkl.focus-outline; + } + } } &__button {