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

fix(select-rich): set focusableNode correctly so focused and focused-visible attributes are set when invoker gets focus

Browse source
This commit is contained in:
gvangeest 2023-01-10 16:13:10 +01:00 committed by Thomas Allmer
parent 9fb14fa1c5
commit 9f6270b340
3 changed files with 26 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/swift-seals-deny.md Normal file
View file

@ -0,0 +1,5 @@
---
'@lion/ui': patch
---
[select-rich] set focusableNode correctly so focused and focused-visible attributes are set when invoker gets focus

9
packages/ui/components/select-rich/src/LionSelectRich.js
View file

@ -85,6 +85,15 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
);
}
/**
* @protected
* @configure FocusMixin
*/
// @ts-ignore
get _focusableNode() {
return this._invokerNode;
}
/**
* @configure ListboxMixin
* @protected

13
packages/ui/components/select-rich/test/lion-select-rich.test.js
View file

@ -49,10 +49,21 @@ describe('lion-select-rich', () => {
expect(document.activeElement === document.body).to.be.true;
const { _labelNode, _invokerNode } = getSelectRichMembers(el);
_labelNode.click();
expect(document.activeElement === _invokerNode).to.be.true;
});
it('has an attribute focused when focused', async () => {
const el = await fixture(html` <lion-select-rich label="foo"> </lion-select-rich> `);
el.focus();
await el.updateComplete;
expect(el.hasAttribute('focused')).to.be.true;
el.blur();
await el.updateComplete;
expect(el.hasAttribute('focused')).to.be.false;
});
it('checks the first enabled option', async () => {
const el = await fixture(html`
<lion-select-rich>