From c1499519d4a57859fa69098a743430a2dc068800 Mon Sep 17 00:00:00 2001
From: Carl Schwan <carl@carlschwan.eu>
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 <carl@carlschwan.eu>
---
 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

