pleroma-fe

commit: 97951fccfdce726c350ab633acc45213d675adb9
parent 378ed3682e56dc49ac74a9ab66b6ff9878d48882
Author: Tusooa Zhu <tusooa@kazv.moe>
Date:   Wed, 19 Jan 2022 19:45:38 -0500

Use :focus-visible instead of :focus for focus markers

In this way, after the user clicked with a pointer and moved that
pointer away, the focus marker will no longer show a focused style.

As Safari remains the only major browser engine that does not support
:focus-visible, a fallback to :focus is used if there is no browser
support for :focus-visible.

https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible

Diffstat:
M
src/components/extra_buttons/extra_buttons.vue
5
+++--
M
src/components/favorite_button/favorite_button.vue
9
+++++++--
M
src/components/react_button/react_button.vue
5
+++--
M
src/components/reply_button/reply_button.vue
5
+++--
M
src/components/retweet_button/retweet_button.vue
9
+++++++--

5 files changed, 23 insertions(+), 10 deletions(-)
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
@@ -168,11 +168,12 @@
       color: var(--text, $fallback--text);
     }
 
-    .focus-marker {
+    .focus-marker,
+    &:focus:not(:focus-visible):not(:hover) .focus-marker {
       visibility: hidden;
     }
 
-    &:hover, &:focus {
+    &:hover, &:focus, &:focus-visible {
       .focus-marker {
         visibility: visible;
       }
diff --git a/src/components/favorite_button/favorite_button.vue b/src/components/favorite_button/favorite_button.vue
@@ -78,11 +78,16 @@
       color: var(--cOrange, $fallback--cOrange);
     }
 
-    .focus-marker {
+    .focus-marker,
+    &:focus:not(:focus-visible):not(:hover) .focus-marker {
       visibility: hidden;
     }
 
-    &:hover, &:focus {
+    &:focus:not(:focus-visible):not(:hover) .active-marker {
+      visibility: visible;
+    }
+
+    &:hover, &:focus, &:focus-visible {
       .focus-marker {
         visibility: visible;
       }
diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
@@ -141,11 +141,12 @@
       color: var(--text, $fallback--text);
     }
 
-    .focus-marker {
+    .focus-marker,
+    &:focus:not(:focus-visible):not(:hover) .focus-marker {
       visibility: hidden;
     }
 
-    &:hover, &:focus {
+    &:hover, &:focus, &:focus-visible {
       .focus-marker {
         visibility: visible;
       }
diff --git a/src/components/reply_button/reply_button.vue b/src/components/reply_button/reply_button.vue
@@ -67,11 +67,12 @@
       color: var(--cBlue, $fallback--cBlue);
     }
 
-    .focus-marker {
+    .focus-marker,
+    &:focus:not(:focus-visible):not(:hover) .focus-marker {
       visibility: hidden;
     }
 
-    &:hover, &:focus {
+    &:hover, &:focus, &:focus-visible {
       .focus-marker {
         visibility: visible;
       }
diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue
@@ -85,11 +85,16 @@
       color: var(--cGreen, $fallback--cGreen);
     }
 
-    .focus-marker {
+    .focus-marker,
+    &:focus:not(:focus-visible):not(:hover) .focus-marker {
       visibility: hidden;
     }
 
-    &:hover, &:focus {
+    &:focus:not(:focus-visible):not(:hover) .active-marker {
+      visibility: visible;
+    }
+
+    &:hover, &:focus, &:focus-visible {
       .focus-marker {
         visibility: visible;
       }