Show hidden toolbar when tabbing in

studio1902 · Dec 22, 2023 · 568224b · 568224b
1 parent cc3fa13
commit 568224b
Showing 1 changed file with 5 additions and 5 deletions.
diff --git a/resources/views/components/_toolbar.antlers.html b/resources/views/components/_toolbar.antlers.html
@@ -7,7 +7,7 @@
 {{ if environment == 'local' }}
     {{ nocache }}
         <aside
-            class="fixed z-50 bottom-1 right-1 flex text-xs divide-x divide-white shadow-sm divide-solid motion-safe:transition-opacity hover:opacity-100"
+            class="fixed z-50 bottom-1 right-1 flex text-xs divide-x divide-white shadow-sm divide-solid motion-safe:transition-opacity hover:opacity-100 has-[button:focus,a:focus]:opacity-100"
             x-data="{ toolbarVisible: $persist(true).as('toolbarVisible') }"
             x-ref="toolbar"
             :class="{ 'opacity-100': toolbarVisible, 'opacity-0': !toolbarVisible }"
@@ -18,16 +18,16 @@
                 <span class="breakpoint"></span>
             </span>
 
-            {{ if logged_in == true }}
-                <a href="{{ edit_url }}" title="Edit entry in CP" aria-label="Edit entry in CP" target="_blank" class="flex items-center p-2 space-x-1 text-gray-800 bg-gray-200 hover:bg-gray-300">
+            {{ if logged_in }}
+                <a href="{{ edit_url }}" title="Edit entry in CP" aria-label="Edit entry in CP" target="_blank" class="flex items-center p-2 space-x-1 text-gray-800 bg-gray-200 hover:bg-gray-300 focus:outline-none focus-visible:ring ring-primary">
                     {{ svg:edit class="w-4 h-4 fill-current" alt="" aria-hidden="true" }}
                     <span>Edit</span>
                 </a>
             {{ /if }}
 
             <button
                 @click="toolbarVisible = !toolbarVisible"
-                title="Toggle toolbar visibility" aria-label="Toggle toolbar visibility" class="flex items-center justify-center px-2 bg-gray-200 hover:bg-gray-300"
+                title="Toggle toolbar visibility" aria-label="Toggle toolbar visibility" class="flex items-center justify-center px-2 bg-gray-200 hover:bg-gray-300 focus:outline-none focus-visible:ring ring-primary"
             >
                 <div x-show="!toolbarVisible">
                     {{ svg:invisible class="w-5 h-5 fill-current" alt="" aria-hidden="true" }}
@@ -39,7 +39,7 @@
 
             <button
                 @click="$refs.toolbar.remove()"
-                title="Remove toolbar" aria-label="Remove toolbar" class="flex items-center justify-center px-2 bg-gray-200 hover:bg-gray-300"
+                title="Remove toolbar" aria-label="Remove toolbar" class="flex items-center justify-center px-2 bg-gray-200 hover:bg-gray-300 focus:outline-none focus-visible:ring ring-primary"
             >
                 {{ svg:trash class="w-4 h-4 text-yellow-800 stroke-current" alt="" aria-hidden="true" }}
             </button>