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