Uniformize focus ring styles and optimize navbar links and color

Author: tzi

plugins/CoreHome/stylesheets/coreHome.less

@@ -48,6 +48,7 @@
 }
 
 .accessibility-skip-to-content {
+    padding: 0 0.5rem;
     font-size: 14px;
     position: absolute;
     left: -10000px;
@@ -56,7 +57,7 @@
 .accessibility-skip-to-content:focus {
     display: block;
     position: absolute;
-    left: 200px;
+    left: 180px;
 }
 
 /* Calendar */

plugins/CoreHome/stylesheets/layout.less

@@ -14,6 +14,11 @@ ul.browser-default {
 nav {
   background-color: @theme-color-header-background !important;
 
+  a:focus-visible,
+  button:focus-visible {
+    outline-color: @theme-color-focus-ring-alternative;
+  }
+
   .brand-logo {
     font-size: 30px;
   }

plugins/CoreHome/stylesheets/selector.less

@@ -3,15 +3,20 @@
   line-height: 0;
 
   span.title,
-  a.title {
+  a.title,
+  button.title {
     .font-default(11px, 12px);
     display: inline-block;
     width: 100%;
     padding: 10px 15px 11px 13px;
+    background-color: transparent;
+    border: none;
+
     white-space: nowrap;
     cursor: pointer;
     text-transform: uppercase;
     text-decoration: none;
+    text-align: center;
     color: @theme-color-text;
 
     &.activityIndicator {

plugins/CoreHome/templates/_logo.twig

@@ -1,11 +1,11 @@
 <span id="logo" class="logo brand-logo {% if centeredLogo is defined and centeredLogo %}center{% endif %}">
     {% if logoLink is not defined or logoLink is not empty %}
-    <a href="{{ logoLink|default('index.php') }}" tabindex="-1"
+    <a href="{{ logoLink|default('index.php') }}" tabindex="3"
        title="{% if isCustomLogo %}{{ 'General_PoweredBy'|translate }} {% endif %}Matomo{% if not isCustomLogo %} # {{ 'General_OpenSourceWebAnalytics'|translate }}{% endif %}"
     >
     {% endif %}
     {% if hasSVGLogo %}
-        <img src='{{ logoSVG }}?matomo' tabindex="3"
+        <img src='{{ logoSVG }}?matomo'
              alt="{% if isCustomLogo %}{{ 'General_PoweredBy'|translate }} {% endif %}Matomo"
              class="{% if not isCustomLogo %}default-piwik-logo{% endif %}" />
     {% else %}

plugins/Morpheus/stylesheets/general/_default.less

@@ -131,6 +131,12 @@ a {
  }
 }
 
+a:focus-visible,
+button:focus-visible {
+  outline: 2px solid @theme-color-focus-ring;
+  outline-offset: -2px;
+}
+
 
 /* Make sure the scroll bar is always displayed so the content does not shift when reloading menu with/without scrollbar */
 html {

plugins/Morpheus/stylesheets/uibase/_header.less

@@ -1,8 +1,18 @@
 
 #root {
   #logo {
-    padding-left: 16px;
-    padding-top: 6px;
+    display: block;
+    height: 100%;
+
+    & > a {
+      display: flex;
+      align-items: center;
+      height: 100%;
+      padding-left: 1rem;
+      padding-right: 1rem;
+
+      text-decoration: none;
+    }
 
     img {
       max-height: 32px;
@@ -12,10 +22,6 @@
       }
     }
   }
-
-  #logo > a {
-    text-decoration: none;
-  }
 }
 
 #javascriptDisabled,