UX: Ensure all header buttons are consistently sized (#26318)

- Converts all header buttons to use `<DButton`

- Updates `<DButton` to render `<a href=` tags when `@href` is passed (previously it was rendering a `<button`, and then using JS to route when clicked)

app/assets/javascripts/discourse/app/components/d-button.gjs

@@ -6,7 +6,6 @@ import { htmlSafe } from "@ember/template";
 import { or } from "truth-helpers";
 import GlimmerComponentWithDeprecatedParentView from "discourse/components/glimmer-component-with-deprecated-parent-view";
 import concatClass from "discourse/helpers/concat-class";
-import DiscourseURL from "discourse/lib/url";
 import icon from "discourse-common/helpers/d-icon";
 import deprecated from "discourse-common/lib/deprecated";
 import I18n from "discourse-i18n";
@@ -103,9 +102,9 @@ export default class DButton extends GlimmerComponentWithDeprecatedParentView {
   }
 
   _triggerAction(event) {
-    const { action: actionVal, route, href } = this.args;
+    const { action: actionVal, route } = this.args;
 
-    if (actionVal || route || href?.length) {
+    if (actionVal || route) {
       if (actionVal) {
         const { actionParam, forwardEvent } = this.args;
 
@@ -133,8 +132,6 @@ export default class DButton extends GlimmerComponentWithDeprecatedParentView {
         }
       } else if (route) {
         this.router.transitionTo(route);
-      } else if (href?.length) {
-        DiscourseURL.routeTo(href);
       }
 
       event.preventDefault();
@@ -144,9 +141,19 @@ export default class DButton extends GlimmerComponentWithDeprecatedParentView {
     }
   }
 
+  get wrapperElement() {
+    const { href, type } = this.args;
+
+    return href
+      ? <template><a href={{href}} ...attributes>{{yield}}</a></template>
+      : <template>
+          <button type={{or type "button"}} ...attributes>{{yield}}</button>
+        </template>;
+  }
+
   <template>
     {{! template-lint-disable no-pointer-down-event-binding }}
-    <button
+    <this.wrapperElement
       {{! For legacy compatibility. Prefer passing class as attributes. }}
       class={{concatClass
         @class
@@ -161,11 +168,10 @@ export default class DButton extends GlimmerComponentWithDeprecatedParentView {
       aria-controls={{@ariaControls}}
       aria-expanded={{this.computedAriaExpanded}}
       tabindex={{@tabindex}}
-      type={{or @type "button"}}
-      ...attributes
       disabled={{this.isDisabled}}
       title={{this.computedTitle}}
       aria-label={{this.computedAriaLabel}}
+      ...attributes
       {{on "keydown" this.keyDown}}
       {{on "click" this.click}}
       {{on "mousedown" this.mouseDown}}
@@ -197,6 +203,6 @@ export default class DButton extends GlimmerComponentWithDeprecatedParentView {
       {{~/if~}}
 
       {{yield}}
-    </button>
+    </this.wrapperElement>
   </template>
 }

app/assets/javascripts/discourse/app/components/glimmer-header/dropdown.gjs

@@ -3,9 +3,9 @@ import { hash } from "@ember/helper";
 import { on } from "@ember/modifier";
 import { action } from "@ember/object";
 import { and } from "truth-helpers";
+import DButton from "discourse/components/d-button";
 import concatClass from "discourse/helpers/concat-class";
 import { wantsNewWindow } from "discourse/lib/intercept-click";
-import icon from "discourse-common/helpers/d-icon";
 import i18n from "discourse-common/helpers/i18n";
 import closeOnClickOutside from "../../modifiers/close-on-click-outside";
 
@@ -38,18 +38,18 @@ export default class Dropdown extends Component {
         )
       )}}
     >
-      <button
+      <DButton
-        class="button icon btn-flat"
+        class="icon btn-flat"
         aria-expanded={{@active}}
         aria-haspopup="true"
-        title={{i18n @title}}
+        @translatedTitle={{i18n @title}}
         aria-label={{i18n @title}}
         id={{@iconId}}
+        @icon={{@icon}}
+        @translatedLabel={{@contents}}
         {{on "click" this.click}}
-      >
+      />
-        {{icon @icon}}
+
-        {{@contents}}
-      </button>
     </li>
   </template>
 }

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

@@ -182,7 +182,7 @@ createWidget(
 
       html(attrs) {
         return h(
-          "button.icon.btn-flat",
+          "button.icon.btn.no-text.btn-flat",
           {
             attributes: {
               "aria-haspopup": true,
@@ -215,7 +215,7 @@ createWidget(
         }
 
         return h(
-          "button.icon.btn-flat",
+          "button.icon.btn.no-text.btn-flat",
           {
             attributes: {
               "aria-expanded": attrs.active,

plugins/chat/assets/javascripts/discourse/components/chat/header/icon.gjs

@@ -1,5 +1,6 @@
 import Component from "@glimmer/component";
 import { service } from "@ember/service";
+import DButton from "discourse/components/d-button";
 import concatClass from "discourse/helpers/concat-class";
 import icon from "discourse-common/helpers/d-icon";
 import getURL from "discourse-common/lib/get-url";
@@ -81,8 +82,8 @@ export default class ChatHeaderIcon extends Component {
 
   <template>
     <li class="header-dropdown-toggle chat-header-icon">
-      <a
+      <DButton
-        href={{this.href}}
+        @href={{this.href}}
         tabindex="0"
         class={{concatClass "icon" "btn-flat" (if this.isActive "active")}}
         title={{this.title}}
@@ -95,7 +96,7 @@ export default class ChatHeaderIcon extends Component {
             @indicatorPreference={{@indicatorPreference}}
           />
         {{/if}}
-      </a>
+      </DButton>
     </li>
   </template>
 }