From fb4d9c8008e863f48feea91ef1f5b4c3c004dc3c Mon Sep 17 00:00:00 2001
From: Elliott Marquez <emarquez@google.com>
Date: Mon, 26 Jun 2023 13:52:14 -0700
Subject: [PATCH] feat(fab): set aria hidden on the icon slot if element has
 aria-label or label

PiperOrigin-RevId: 543531953
---
 fab/fab_test.ts   | 36 ++++++++++++++++++++++++++++++++++++
 fab/lib/shared.ts |  8 +++++++-
 2 files changed, 43 insertions(+), 1 deletion(-)

diff --git a/fab/fab_test.ts b/fab/fab_test.ts
index f7c746fb3c..7226bdf832 100644
--- a/fab/fab_test.ts
+++ b/fab/fab_test.ts
@@ -213,4 +213,40 @@ describe('<md-branded-fab>', () => {
       expect(button.classList.contains('large')).toBeFalse();
     });
   });
+
+  describe('accessibility', () => {
+    it('sets aria-hidden on the icon slot when aria-label is set', async () => {
+      const {button, harness} = await setupTest();
+      await env.waitForStability();
+
+      const iconSlot = button.querySelector('slot[name="icon"]')!;
+
+      expect(button.hasAttribute('aria-label')).toBeFalse();
+      expect(iconSlot.hasAttribute('aria-hidden')).toBeFalse();
+
+      const element = harness.element;
+      element.ariaLabel = 'foo';
+      await env.waitForStability();
+
+      expect(button.hasAttribute('aria-label')).toBeTrue();
+      expect(iconSlot.getAttribute('aria-hidden')).toEqual('true');
+    });
+
+    it('sets aria-hidden on the icon slot when label is set', async () => {
+      const {button, harness} = await setupTest();
+      await env.waitForStability();
+      const element = harness.element;
+
+      const iconSlot = button.querySelector('slot[name="icon"]')!;
+
+      expect(!!element.label).toBeFalse();
+      expect(iconSlot.hasAttribute('aria-hidden')).toBeFalse();
+
+      element.label = 'foo';
+      await env.waitForStability();
+
+      expect(!!element.label).toBeTrue();
+      expect(iconSlot.getAttribute('aria-hidden')).toEqual('true');
+    });
+  });
 });
diff --git a/fab/lib/shared.ts b/fab/lib/shared.ts
index 18a10e100b..02345894e7 100644
--- a/fab/lib/shared.ts
+++ b/fab/lib/shared.ts
@@ -104,8 +104,14 @@ export abstract class SharedFab extends LitElement {
   }
 
   private renderIcon() {
+    const {ariaLabel} = this as ARIAMixinStrict;
     return html`<span class="icon">
-        <slot name="icon" @slotchange=${this.onSlotchange}></slot>
+        <slot
+            name="icon"
+            aria-hidden=${
+        ariaLabel || this.label ? 'true' : nothing as unknown as 'false'}
+            @slotchange=${this.onSlotchange}>
+        </slot>
       </span>`;
   }