diff --git a/src/icon_button/icon_button.ts b/src/icon_button/icon_button.ts
index 7d4764e..0c658e3 100644
--- a/src/icon_button/icon_button.ts
+++ b/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);
diff --git a/src/icon_button/icon_button_test.ts b/src/icon_button/icon_button_test.ts
index 3b9e970..99303e1 100644
--- a/src/icon_button/icon_button_test.ts
+++ b/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`
+
+
+ `);
+
+ expect(el.role).toBe('none');
+ });
});
diff --git a/src/place_building_blocks/place_directions_button/place_directions_button.ts b/src/place_building_blocks/place_directions_button/place_directions_button.ts
index a619dc5..73d514f 100644
--- a/src/place_building_blocks/place_directions_button/place_directions_button.ts
+++ b/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 {
return ['displayName', 'formattedAddress', 'location'];
diff --git a/src/place_building_blocks/place_directions_button/place_directions_button_test.ts b/src/place_building_blocks/place_directions_button/place_directions_button_test.ts
index 715ea04..5bc7c4e 100644
--- a/src/place_building_blocks/place_directions_button/place_directions_button_test.ts
+++ b/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`
+
+
+ `);
+ await env.waitForStability();
+ const el = root.querySelector(
+ 'gmpx-place-directions-button')!;
+
+ expect(el.role).toBe('none');
+ });
});