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/Buttons/Buttons.module.scss | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) (limited to 'src/components/Buttons/Buttons.module.scss') diff --git a/src/components/Buttons/Buttons.module.scss b/src/components/Buttons/Buttons.module.scss index df5ca3d..3219a96 100644 --- a/src/components/Buttons/Buttons.module.scss +++ b/src/components/Buttons/Buttons.module.scss @@ -46,11 +46,16 @@ translateY(#{fun.convert-px(-4)}); } + &:focus { + text-decoration: underline solid var(--color-fg-inverted) fun.convert-px(2); + } + &:active { background: var(--color-primary-dark); box-shadow: 0 0 0 fun.convert-px(2) var(--color-primary), 0 0 0 fun.convert-px(3) var(--color-primary-darker), 0 0 0 0 var(--color-primary-dark); + text-decoration: none; transform: translateX(#{fun.convert-px(4)}) translateY(#{fun.convert-px(4)}); } } @@ -96,7 +101,7 @@ } &:focus { - text-decoration: underline var(--color-primary) fun.convert-px(3); + text-decoration: underline var(--color-primary) fun.convert-px(2); } &:active { @@ -179,6 +184,10 @@ border: none; font-size: var(--font-size-md); + &:focus { + outline: var(--color-primary-light) solid fun.convert-px(3); + } + @include mix.media("screen") { @include mix.dimensions("md") { &:hover, @@ -255,7 +264,13 @@ } } + &:focus { + outline: var(--color-primary-light) solid fun.convert-px(3); + } + &:active { + outline: none; + svg { transform: scale(0.7); } -- cgit v1.2.3