diff --git a/packages/tooltip/src/LionTooltip.js b/packages/tooltip/src/LionTooltip.js index 87f5ab7ac..54baaac5a 100644 --- a/packages/tooltip/src/LionTooltip.js +++ b/packages/tooltip/src/LionTooltip.js @@ -6,6 +6,7 @@ export class LionTooltip extends LionPopup { super.connectedCallback(); this.contentNode = this.querySelector('[slot="content"]'); this.invokerNode = this.querySelector('[slot="invoker"]'); + this.contentNode.setAttribute('role', 'tooltip'); this._controller = overlays.add( new LocalOverlayController({ diff --git a/packages/tooltip/test/lion-tooltip.test.js b/packages/tooltip/test/lion-tooltip.test.js index 14a4702bb..d3b09ac73 100644 --- a/packages/tooltip/test/lion-tooltip.test.js +++ b/packages/tooltip/test/lion-tooltip.test.js @@ -68,6 +68,17 @@ describe('lion-tooltip', () => { expect(el.querySelector('[slot="content"]').style.display).to.be.equal('none'); }); + it('should have a tooltip role set on the tooltip', async () => { + const el = await fixture(html` + +
Hey there
+ Tooltip button +
+ `); + const invoker = el.querySelector('[slot="content"]'); + expect(invoker.getAttribute('role')).to.be.equal('tooltip'); + }); + it('should have aria-controls attribute set to the invoker', async () => { const el = await fixture(html`