diff --git a/changelog.d/focus-visible.fix b/changelog.d/focus-visible.fix
new file mode 100644
index 000000000..86f8df615
--- /dev/null
+++ b/changelog.d/focus-visible.fix
@@ -0,0 +1 @@
+Make sure hover style is also applied to :focus-visible
diff --git a/src/components/button.style.js b/src/components/button.style.js
index ad22f290b..887ff91b5 100644
--- a/src/components/button.style.js
+++ b/src/components/button.style.js
@@ -11,7 +11,7 @@ export default {
     toggled: '.toggled',
     focused: ':focus-within',
     pressed: ':focus:active',
-    hover: ':hover:not(:disabled)',
+    hover: ':is(:hover, :focus-visible):not(:disabled)',
     disabled: ':disabled'
   },
   // Variants are mutually exclusive, each component implicitly has "normal" variant, and all other variants inherit from it.
diff --git a/src/components/button_unstyled.style.js b/src/components/button_unstyled.style.js
index a387ed954..9e1a2ca90 100644
--- a/src/components/button_unstyled.style.js
+++ b/src/components/button_unstyled.style.js
@@ -6,8 +6,8 @@ export default {
   states: {
     toggled: '.toggled',
     disabled: ':disabled',
-    hover: ':hover:not(:disabled)',
-    focused: ':focus-within'
+    hover: ':is(:hover, :focus-visible):not(:disabled)',
+    focused: ':focus-within:not(:is(:focus-visible))'
   },
   validInnerComponents: [
     'Text',
diff --git a/src/components/input.style.js b/src/components/input.style.js
index 160b2f33d..00f51cbf6 100644
--- a/src/components/input.style.js
+++ b/src/components/input.style.js
@@ -2,7 +2,7 @@ export default {
   name: 'Input',
   selector: '.input',
   states: {
-    hover: ':hover:not(.disabled)',
+    hover: ':is(:hover, :focus-visible):not(.disabled)',
     focused: ':focus-within',
     disabled: '.disabled'
   },
diff --git a/src/components/list/list_item.style.js b/src/components/list/list_item.style.js
index e82a0a830..49b2b035f 100644
--- a/src/components/list/list_item.style.js
+++ b/src/components/list/list_item.style.js
@@ -3,7 +3,7 @@ export default {
   selector: '.list-item',
   states: {
     active: '.-active',
-    hover: ':hover:not(.-non-interactive)'
+    hover: ':is(:hover, :focus-visible, :has(:focus-visible)):not(.-non-interactive)'
   },
   validInnerComponents: [
     'Text',
diff --git a/src/components/menu_item.style.js b/src/components/menu_item.style.js
index d7fe0f7c7..883355efa 100644
--- a/src/components/menu_item.style.js
+++ b/src/components/menu_item.style.js
@@ -11,7 +11,7 @@ export default {
     'Avatar'
   ],
   states: {
-    hover: ':hover:not(.disabled)',
+    hover: ':is(:hover, :focus-visible, :has(:focus-visible)):not(.disabled)',
     active: '.-active',
     disabled: '.disabled'
   },
diff --git a/src/components/scrollbar_element.style.js b/src/components/scrollbar_element.style.js
index caa239aab..ef1ea8136 100644
--- a/src/components/scrollbar_element.style.js
+++ b/src/components/scrollbar_element.style.js
@@ -34,7 +34,7 @@ export default {
   notEditable: true, // for now
   states: {
     pressed: ':active',
-    hover: ':hover:not(:disabled)',
+    hover: ':is(:hover, :focus-visible, :has(:focus-visible)):not(:disabled)',
     disabled: ':disabled'
   },
   validInnerComponents: [
diff --git a/src/components/tab_switcher/tab.style.js b/src/components/tab_switcher/tab.style.js
index 814d33047..0cf90993e 100644
--- a/src/components/tab_switcher/tab.style.js
+++ b/src/components/tab_switcher/tab.style.js
@@ -3,7 +3,7 @@ export default {
   selector: '.tab', // CSS selector/prefix
   states: {
     active: '.active',
-    hover: ':hover:not(.disabled)',
+    hover: ':is(:hover, :focus-visible, :has(:focus-visible)):not(.disabled)',
     disabled: '.disabled'
   },
   validInnerComponents: [