diff --git a/.changeset/swift-seals-deny.md b/.changeset/swift-seals-deny.md
new file mode 100644
index 000000000..0e9ca2a17
--- /dev/null
+++ b/.changeset/swift-seals-deny.md
@@ -0,0 +1,5 @@
+---
+'@lion/ui': patch
+---
+
+[select-rich] set focusableNode correctly so focused and focused-visible attributes are set when invoker gets focus
diff --git a/packages/ui/components/select-rich/src/LionSelectRich.js b/packages/ui/components/select-rich/src/LionSelectRich.js
index 7a7722fdb..4681eb636 100644
--- a/packages/ui/components/select-rich/src/LionSelectRich.js
+++ b/packages/ui/components/select-rich/src/LionSelectRich.js
@@ -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
diff --git a/packages/ui/components/select-rich/test/lion-select-rich.test.js b/packages/ui/components/select-rich/test/lion-select-rich.test.js
index c57c58f3f..cd6d2a77b 100644
--- a/packages/ui/components/select-rich/test/lion-select-rich.test.js
+++ b/packages/ui/components/select-rich/test/lion-select-rich.test.js
@@ -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` `);
+
+ 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`