A11Y: Header icons should be buttons, not links (#20242)

app/assets/javascripts/discourse/app/widgets/header.js

@@ -230,7 +230,7 @@ createWidget(
 
       html(attrs) {
         return h(
-          "a.icon",
+          "button.icon.btn-flat",
           {
             attributes: {
               "aria-haspopup": true,
@@ -263,7 +263,7 @@ createWidget(
         }
 
         return h(
-          "a.icon.btn-flat",
+          "button.icon.btn-flat",
           {
             attributes: {
               "aria-expanded": attrs.active,

app/assets/stylesheets/common/base/header.scss

@@ -117,6 +117,8 @@
     float: left;
   }
   .icon {
+    box-sizing: content-box;
+    appearance: none;
     position: relative;
     display: flex;
     align-items: center;

plugins/chat/assets/javascripts/discourse/components/chat-header-icon.hbs

@@ -1,7 +1,7 @@
 <a
   href={{this.href}}
   tabindex="0"
-  class={{concat-class "icon" (if this.isActive "active")}}
+  class={{concat-class "icon btn-flat" (if this.isActive "active")}}
 >
   {{d-icon "comment"}}