feat(fab): set aria hidden on the icon slot if element has aria-label or label

PiperOrigin-RevId: 543531953

Author: Elliott Marquez

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');
+    });
+  });
 });

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>`;
   }