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>

1 files changed, 30 insertions, 2 deletions

diff --git a/core/css/styles.css b/core/css/styles.css
index 15035935c27..e3096e2a5ac 100644
--- a/core/css/styles.css
+++ b/core/css/styles.css
@@ -39,7 +39,6 @@ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pr
   margin: 0;
   padding: 0;
   border: 0;
-  outline: 0;
   font-weight: inherit;
   font-size: 100%;
   font-family: inherit;
@@ -49,6 +48,23 @@ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pr
   scrollbar-width: thin;
 }
 
+.js-focus-visible :focus:not(.focus-visible) {
+  outline: none;
+}
+
+:focus-visible {
+  box-shadow: 0 0 0 2px var(--color-primary);
+  outline: none;
+}
+
+/** Let vue apps handle the focus themselves */
+#content-vue :focus-visible,
+#app-navigation-vue :focus-visible,
+.vue :focus-visible {
+  box-shadow: none;
+  outline: none;
+}
+
 html, body {
   height: 100%;
 }
@@ -308,6 +324,12 @@ body {
   opacity: 0.8;
 }
 
+#show:focus-visible + label, #dbpassword-toggle:focus-visible + label, #personal-show:focus-visible + label {
+  box-shadow: var(--color-primary) 0 0 0 2px;
+  opacity: 1;
+  border-radius: 9999px;
+}
+
 #show + label, #dbpassword + label, #personal-show + label {
   position: absolute !important;
   height: 20px;
@@ -919,9 +941,15 @@ span.ui-icon {
 
 /* ---- CONTACTS MENU ---- */
 #contactsmenu .menutoggle {
+  cursor: pointer;
+}
+#contactsmenu .menutoggle:before {
   background-size: 20px 20px;
+  background-repeat: no-repeat;
+  background-position-x: 3px;
+  background-position-y: 4px;
   padding: 14px;
-  cursor: pointer;
+  content: " ";
   background-image: var(--original-icon-contacts-white);
   filter: var(--primary-invert-if-bright);
 }