fix: fix duplicate node in a11y tree when using aria-label on components

PiperOrigin-RevId: 577350139

src/icon_button/icon_button.ts

@@ -242,6 +242,13 @@ export class IconButton extends BaseComponent {
     `;
   }
 
+  protected override updated() {
+    // If the aria-label attribute is set, hide it from the a11y tree. Otherwise
+    // the component and its shadow DOM content show up as duplicate nodes with
+    // the same aria-label.
+    this.role = this.ariaLabel != null ? 'none' : null;
+  }
+
   private renderContent() {
     const icon = this.icon ||
         (!this.hasLabel || this.condensed ? DEFAULT_ICON : undefined);

src/icon_button/icon_button_test.ts

@@ -104,4 +104,13 @@ describe('IconButton', () => {
     expect(el.variant).toBe('outlined');
     expect(el.getAttribute('variant')).toBe('outlined');
   });
+
+  it('sets role="none" on the host when aria-label is present', async () => {
+    const el = await prepareState(html`
+      <gmpx-icon-button aria-label="enter">
+      </gmpx-icon-button>
+    `);
+
+    expect(el.role).toBe('none');
+  });
 });

src/place_building_blocks/place_directions_button/place_directions_button.ts

@@ -123,6 +123,13 @@ export class PlaceDirectionsButton extends PlaceDataConsumer {
     `;
   }
 
+  protected override updated() {
+    // If the aria-label attribute is set, hide it from the a11y tree. Otherwise
+    // the component and its shadow DOM content show up as duplicate nodes with
+    // the same aria-label.
+    this.role = this.ariaLabel != null ? 'none' : null;
+  }
+
   /** @ignore */
   getRequiredFields(): Array<keyof Place> {
     return ['displayName', 'formattedAddress', 'location'];

src/place_building_blocks/place_directions_button/place_directions_button_test.ts

@@ -165,4 +165,16 @@ describe('PlaceDirectionsButton', () => {
                   expectedQuery}`);
     });
   });
+
+  it('sets role="none" on the host when aria-label is present', async () => {
+    const root = env.render(html`
+      <gmpx-place-directions-button aria-label="Get Directions">
+      </gmpx-place-directions-button>
+    `);
+    await env.waitForStability();
+    const el = root.querySelector<PlaceDirectionsButton>(
+        'gmpx-place-directions-button')!;
+
+    expect(el.role).toBe('none');
+  });
 });