Merge branch 'tusooa/focus-visible' into 'develop'

Make sure each hover style is applied to :focus-visible

See merge request pleroma/pleroma-fe!2098

changelog.d/focus-visible.fix

@@ -0,0 +1 @@
+Make sure hover style is also applied to :focus-visible

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.

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',

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'
   },

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',

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'
   },

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: [

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: [