From 813084fc23113ae2f594bf6ef1cf53bd003c9479 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Tue, 18 Jan 2022 14:29:25 +0100 Subject: chore: improve keyboard navigation Add some focus styles mainly in toolbar components to help identify active items when navigating with a keyboard. --- src/components/Form/Toggle/Toggle.module.scss | 21 ++++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) (limited to 'src/components/Form/Toggle/Toggle.module.scss') diff --git a/src/components/Form/Toggle/Toggle.module.scss b/src/components/Form/Toggle/Toggle.module.scss index e860b5e..48c88f6 100644 --- a/src/components/Form/Toggle/Toggle.module.scss +++ b/src/components/Form/Toggle/Toggle.module.scss @@ -30,7 +30,7 @@ display: block; width: calc(var(--toggle-width) / 2); height: calc(var(--toggle-width) / 2); - background: var(--color-primary-lighter); + background: var(--color-primary-light); border: fun.convert-px(1) solid var(--color-primary); border-radius: 50%; box-shadow: inset 0 0 fun.convert-px(1) fun.convert-px(1) @@ -53,4 +53,23 @@ left: calc(100% - (var(--toggle-width) / 2) + #{fun.convert-px(2)}); } } + + &:hover, + &:focus { + ~ .label { + .toggle::after { + background: var(--color-primary-lighter); + } + } + } + + &:focus ~ .label { + .title { + text-decoration: underline solid var(--color-primary) fun.convert-px(2); + } + + .toggle { + outline: var(--color-border) solid fun.convert-px(5); + } + } } -- cgit v1.2.3