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

feat(overlays): add invokerRelation option (#672)

Browse source
This commit is contained in:
Thomas Rutten 2020-04-07 09:41:35 +02:00 committed by GitHub
parent b58aa65377
commit d7cfab016f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
packages/overlays/src/OverlayController.js
View file

@ -246,9 +246,11 @@ export class OverlayController {
this.contentNode.setAttribute('id', this._contentId); this.contentNode.setAttribute('id', this._contentId);
} }
if (this.isTooltip) { if (this.isTooltip) {
// TODO: (@tlouisse) this could also be labelledby.
if (this.invokerNode) { if (this.invokerNode) {
this.invokerNode.setAttribute('aria-describedby', this._contentId); this.invokerNode.setAttribute(
this.invokerRelation === 'label' ? 'aria-labelledby' : 'aria-describedby',
this._contentId,
);
} }
this.contentNode.setAttribute('role', 'tooltip'); this.contentNode.setAttribute('role', 'tooltip');
} else { } else {

13
packages/overlays/test/OverlayController.test.js
View file

@ -1167,6 +1167,19 @@ describe('OverlayController', () => {
expect(ctrl.invokerNode.getAttribute('aria-describedby')).to.equal(ctrl._contentId); expect(ctrl.invokerNode.getAttribute('aria-describedby')).to.equal(ctrl._contentId);
}); });
it('adds [aria-labelledby] on invoker when invokerRelation is label', async () => {
const invokerNode = await fixture('<div role="button">invoker</div>');
const ctrl = new OverlayController({
...withLocalTestConfig(),
handlesAccessibility: true,
isTooltip: true,
invokerRelation: 'label',
invokerNode,
});
expect(ctrl.invokerNode.getAttribute('aria-describedby')).to.equal(null);
expect(ctrl.invokerNode.getAttribute('aria-labelledby')).to.equal(ctrl._contentId);
});
it('adds [role=tooltip] on content', async () => { it('adds [role=tooltip] on content', async () => {
const invokerNode = await fixture('<div role="button">invoker</div>'); const invokerNode = await fixture('<div role="button">invoker</div>');
const ctrl = new OverlayController({ const ctrl = new OverlayController({