ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(tooltip): add aria role

Browse source
This commit is contained in:
erik 2019-09-02 15:00:19 +02:00
parent be6e25467a
commit b8e9926056
2 changed files with 12 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
packages/tooltip/src/LionTooltip.js
View file

@ -6,6 +6,7 @@ export class LionTooltip extends LionPopup {
super.connectedCallback(); super.connectedCallback();
this.contentNode = this.querySelector('[slot="content"]'); this.contentNode = this.querySelector('[slot="content"]');
this.invokerNode = this.querySelector('[slot="invoker"]'); this.invokerNode = this.querySelector('[slot="invoker"]');
this.contentNode.setAttribute('role', 'tooltip');
this._controller = overlays.add( this._controller = overlays.add(
new LocalOverlayController({ new LocalOverlayController({

11
packages/tooltip/test/lion-tooltip.test.js
View file

@ -68,6 +68,17 @@ describe('lion-tooltip', () => {
expect(el.querySelector('[slot="content"]').style.display).to.be.equal('none'); 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`
<lion-tooltip>
<div slot="content">Hey there</div>
<lion-button slot="invoker">Tooltip button</lion-button>
</lion-tooltip>
`);
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 () => { it('should have aria-controls attribute set to the invoker', async () => {
const el = await fixture(html` const el = await fixture(html`
<lion-tooltip> <lion-tooltip>