A11Y: improves avatar menu focus/active states (#12422)

app/assets/javascripts/discourse/app/widgets/quick-access-notifications.js

@@ -6,6 +6,10 @@ createWidgetFrom(QuickAccessPanel, "quick-access-notifications", {
   buildKey: () => "quick-access-notifications",
   emptyStatePlaceholderItemKey: "notifications.empty",
 
+  buildAttributes() {
+    return { tabindex: -1 };
+  },
+
   markReadRequest() {
     return ajax("/notifications/mark-read", { type: "PUT" });
   },

app/assets/stylesheets/common/base/menu-panel.scss

@@ -286,12 +286,16 @@
 
       a {
         display: flex;
+        margin: 0.25em;
+        padding: 0em 0.25em;
+      }
+
+      button {
+        padding: 0.25em 0.5em;
       }
 
       a,
       button {
-        padding: 0.25em 0.5em;
-
         > div {
           overflow: hidden; // clears the text from wrapping below icons
           overflow-wrap: anywhere;
@@ -437,7 +441,6 @@ div.menu-links-header {
         color: var(--primary-high);
       }
 
-      &:focus,
       &:hover {
         background-color: inherit;
       }

app/assets/stylesheets/common/components/buttons.scss

@@ -297,6 +297,15 @@
       }
     }
   }
+
+  &:focus {
+    outline: none;
+    background: var(--primary-medium);
+    color: var(--secondary);
+    .d-icon {
+      color: var(--primary-low);
+    }
+  }
 }
 
 .btn-link {