From 6318d84a1d2a11a0d6fb4ecbe87f265637164cb4 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Thu, 20 Jun 2024 15:40:46 -0400
Subject: [PATCH] fix visually hidden labels in buttons

---
 src/components/button/button.styles.ts |  7 +++++--
 src/components/button/button.ts        | 17 ++++++++++++++---
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/components/button/button.styles.ts b/src/components/button/button.styles.ts
index 3e3d2f1d3..30d4df8b6 100644
--- a/src/components/button/button.styles.ts
+++ b/src/components/button/button.styles.ts
@@ -344,6 +344,10 @@ export default css`
     height: 0.875em;
   }
 
+  .button--caret:not(.button--visually-hidden-label) .button__caret {
+    margin-inline-start: 0.75em;
+  }
+
   /*
    * Loading modifier
    */
@@ -410,8 +414,7 @@ export default css`
     margin-inline-end: 0.75em;
   }
 
-  .button ::slotted([slot='suffix']),
-  .button .button__caret {
+  .button ::slotted([slot='suffix']) {
     margin-inline-start: 0.75em;
   }
 
diff --git a/src/components/button/button.ts b/src/components/button/button.ts
index 3a8cfd0c0..61b8887b0 100644
--- a/src/components/button/button.ts
+++ b/src/components/button/button.ts
@@ -67,6 +67,7 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
   @query('.button') button: HTMLButtonElement | HTMLLinkElement;
 
   @state() private hasFocus = false;
+  @state() visuallyHiddenLabel = false;
   @state() invalid = false;
   @property() title = ''; // make reactive to pass through
 
@@ -198,6 +199,15 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
     this.dispatchEvent(new WaInvalidEvent());
   }
 
+  private handleLabelSlotChange(event: Event) {
+    // If the only thing slotted in is a visually hidden element, we consider it a visually hidden label and apply a
+    // class so we can adjust styles accordingly.
+    const elements = (event.target as HTMLSlotElement).assignedElements({ flatten: true });
+    if (elements.length === 1 && elements[0].localName === 'wa-visually-hidden') {
+      this.visuallyHiddenLabel = true;
+    }
+  }
+
   private isButton() {
     return this.href ? false : true;
   }
@@ -213,7 +223,7 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
 
   // eslint-disable-next-line
   setValue(..._args: Parameters<WebAwesomeFormAssociatedElement['setValue']>) {
-    // This is just a stub. We dont ever actually want to set a value on the form. That happens when the button is clicked and added
+    // This is just a stub. We don't ever actually want to set a value on the form. That happens when the button is clicked and added
     // via the light dom button.
   }
 
@@ -260,7 +270,8 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
           'button--outline': this.appearance === 'outline',
           'button--text': this.appearance === 'text',
           'button--pill': this.pill,
-          'button--rtl': this.localize.dir() === 'rtl'
+          'button--rtl': this.localize.dir() === 'rtl',
+          'button--visually-hidden-label': this.visuallyHiddenLabel
         })}
         ?disabled=${ifDefined(isLink ? undefined : this.disabled)}
         type=${ifDefined(isLink ? undefined : this.type)}
@@ -280,7 +291,7 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
         @click=${this.handleClick}
       >
         <slot name="prefix" part="prefix" class="button__prefix"></slot>
-        <slot part="label" class="button__label"></slot>
+        <slot part="label" class="button__label" @slotchange=${this.handleLabelSlotChange}></slot>
         <slot name="suffix" part="suffix" class="button__suffix"></slot>
         ${
           this.caret