diff --git a/packages/css/switch.css b/packages/css/switch.css index 62fc88c4f9..9d093a5dc4 100644 --- a/packages/css/switch.css +++ b/packages/css/switch.css @@ -155,10 +155,22 @@ opacity: var(--ds-disabled-opacity); } - .fds-switch__input:focus-visible + .fds-switch__label .fds-switch__track { + /* .fds-switch__input:focus-visible + .fds-switch__label .fds-switch__track { outline: var(--dsc-switch-focus-border-width) solid var(--ds-focus-outer); outline-offset: var(--dsc-switch-focus-border-width); box-shadow: 0 0 0 var(--dsc-switch-focus-border-width) var(--ds-focus-inner); + } */ + + /** + * Apply a focus outline on an element when it is focused with keyboard + */ + .fds-switch:has(.fds-switch__input:focus-visible) { + --dsc-focus-border-width: 3px; + + outline: var(--dsc-focus-border-width) solid var(--ds-focus-outer); + outline-offset: var(--dsc-focus-border-width); + box-shadow: 0 0 0 var(--dsc-focus-border-width) var(--ds-focus-inner); + border-radius: var(--ds-border-radius-md); } .fds-switch__input:not([readonly]):checked + .fds-switch__label .fds-switch__track {