From c1499519d4a57859fa69098a743430a2dc068800 Mon Sep 17 00:00:00 2001 From: Carl Schwan Date: Wed, 16 Mar 2022 01:07:55 +0100 Subject: Improve accessibility with more visible focus indication for non vue apps - Add visible-focus effect on each header entry - Show focus outline when using focus-visible (keyboard navigation) - Add polyfy for focus-visible since it's only very recently available on webkit - Change text for link to home button to describe the destination and not the current page - Improve focus effect in app sidebar navigation Signed-off-by: Carl Schwan --- apps/user_status/src/UserStatus.vue | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) (limited to 'apps/user_status/src/UserStatus.vue') diff --git a/apps/user_status/src/UserStatus.vue b/apps/user_status/src/UserStatus.vue index 8baf31de1b7..644ff97d689 100644 --- a/apps/user_status/src/UserStatus.vue +++ b/apps/user_status/src/UserStatus.vue @@ -231,6 +231,11 @@ export default { align-items: flex-start !important; color: var(--color-main-text) !important; + &:focus-visible { + padding: 6px 8px 1px 8px !important; + margin: 2px !important; + } + &:not([href]) { height: var(--header-menu-item-height) !important; color: var(--color-text-maxcontrast) !important; @@ -298,7 +303,7 @@ export default { background-color: var(--color-background-hover); } &:focus { - border: 2px solid var(--color-main-text)!important; + box-shadow: 0 0 0 2px var(--color-main-text) !important; } } } -- cgit v1.2.3