Respect default elements outline on tab-navigation (#2749)

assets/css/components.css

@@ -40,7 +40,7 @@
   }
 
   .tabs .tab {
-    @apply flex items-center space-x-2 px-3 py-2 border-b-2 text-gray-400 border-gray-100 whitespace-nowrap;
+    @apply flex items-center space-x-2 px-3 py-2 border-b-2 text-gray-400 border-gray-100 whitespace-nowrap focus-visible:bg-gray-50 focus-visible:outline-none focus-visible:rounded-t-lg;
   }
 
   .tabs .tab.active {

assets/css/global.css

@@ -13,12 +13,6 @@
       "Segoe UI Emoji";
   }
 
-  /* Remove the default outline on focused elements */
-  :focus,
-  button:focus {
-    outline: none;
-  }
-
   menu {
     margin: 0;
     padding: 0;

assets/css/js_interop.css

@@ -51,7 +51,7 @@ solely client-side operations.
 
 [data-el-notebook-headline][data-js-focused] [data-el-heading],
 [data-el-section-headline][data-js-focused] [data-el-heading] {
-  @apply border-blue-300;
+  @apply border-blue-300 outline-none;
 }
 
 [data-el-section-headline]:not(:hover):not([data-js-focused])

lib/livebook_web/components/core_components.ex

@@ -200,7 +200,6 @@ defmodule LivebookWeb.CoreComponents do
           role="dialog"
           aria-modal="true"
           tabindex="0"
-          autofocus
           phx-window-keydown={JS.exec("data-cancel", to: "##{@id}")}
           phx-click-away={JS.exec("data-cancel", to: "##{@id}")}
           phx-key="escape"
@@ -236,6 +235,7 @@ defmodule LivebookWeb.CoreComponents do
   def show_modal(js \\ %JS{}, id) do
     js
     |> JS.show(to: "##{id}")
+    |> JS.dispatch("lb:focus", to: "##{id}-content")
     |> JS.transition(
       {"ease-out duration-200", "opacity-0", "opacity-100"},
       to: "##{id}-container"
@@ -455,7 +455,7 @@ defmodule LivebookWeb.CoreComponents do
     ~H"""
     <li class={[
       "w-full",
-      "[&>:first-child]:w-full [&>:first-child]:flex [&>:first-child]:space-x-3 [&>:first-child]:px-5 [&>:first-child]:py-2 [&>:first-child]:items-center [&>:first-child:hover]:bg-gray-100 [&>:first-child:focus]:bg-gray-100 [&>:first-child]:whitespace-nowrap font-medium",
+      "[&>:first-child]:w-full [&>:first-child]:flex [&>:first-child]:space-x-3 [&>:first-child]:px-5 [&>:first-child]:py-2 [&>:first-child]:items-center [&>:first-child:hover]:bg-gray-100 [&>:first-child:focus-visible]:bg-gray-100 [&>:first-child:focus-visible]:outline-none [&>:first-child]:whitespace-nowrap font-medium",
       menu_item_class(@variant),
       @disabled && "pointer-events-none opacity-50"
     ]}>
@@ -889,7 +889,7 @@ defmodule LivebookWeb.CoreComponents do
       else
         "px-5 py-2 font-medium text-sm"
       end,
-      "inline-flex rounded-lg border whitespace-nowrap items-center justify-center gap-1.5",
+      "inline-flex rounded-lg border whitespace-nowrap items-center justify-center gap-1.5 focus-visible:outline-none",
       if disabled do
         "cursor-default pointer-events-none border-transparent bg-gray-100 text-gray-400"
       else
@@ -961,7 +961,7 @@ defmodule LivebookWeb.CoreComponents do
       if disabled do
         "cursor-default text-gray-300"
       else
-        "text-gray-500 hover:text-gray-900 focus:bg-gray-100"
+        "text-gray-500 hover:text-gray-900 hover:bg-gray-50 focus-visible:bg-gray-100 focus-visible:outline-none"
       end
     ]
   end

lib/livebook_web/components/form_components.ex

@@ -39,7 +39,7 @@ defmodule LivebookWeb.FormComponents do
 
   defp input_classes(errors) do
     [
-      "w-full px-3 py-2 text-sm font-normal border rounded-lg placeholder-gray-400 disabled:opacity-70 disabled:cursor-not-allowed",
+      "w-full px-3 py-2 text-sm font-normal border rounded-lg placeholder-gray-400 disabled:opacity-70 disabled:cursor-not-allowed focus:border-blue-600 focus-visible:outline-none",
       if errors == [] do
         "bg-gray-50 border-gray-200 text-gray-600"
       else
@@ -249,7 +249,7 @@ defmodule LivebookWeb.FormComponents do
             type="checkbox"
             value={@checked_value}
             class={[
-              "appearance-none absolute block w-7 h-7 rounded-full bg-white border-[5px] border-gray-200 cursor-pointer transition-all duration-300",
+              "appearance-none absolute block w-7 h-7 rounded-full bg-white border-[5px] border-gray-200 cursor-pointer transition-[transform,border-color] duration-300 outline-none",
               "peer checked:bg-white checked:border-blue-600 checked:translate-x-full"
             ]}
             name={@name}
@@ -258,8 +258,8 @@ defmodule LivebookWeb.FormComponents do
             {@rest}
           />
           <div class={[
-            "block h-full w-full rounded-full bg-gray-200 cursor-pointer transition-all duration-300",
-            "peer-checked:bg-blue-600"
+            "block h-full w-full rounded-full bg-gray-200 cursor-pointer transition-colors duration-300",
+            "peer-checked:bg-blue-600 peer-focus-visible:outline peer-focus-visible:outline-offset-2 peer-focus-visible:outline-2 peer-focus-visible:outline-blue-600"
           ]}>
           </div>
         </label>
@@ -306,7 +306,7 @@ defmodule LivebookWeb.FormComponents do
           checked={to_string(@value) == @checked_value}
           {@rest}
         />
-        <div class="w-5 h-5 flex items-center justify-center border border-gray-300 peer-checked:border-transparent bg-white peer-checked:bg-blue-600 rounded">
+        <div class="w-5 h-5 flex items-center justify-center border border-gray-300 peer-checked:border-transparent bg-white peer-checked:bg-blue-600 rounded peer-focus-visible:outline peer-focus-visible:outline-offset-2 peer-focus-visible:outline-2 peer-focus-visible:outline-blue-600">
           <svg viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg">
             <path d="M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z" />
           </svg>
@@ -487,7 +487,7 @@ defmodule LivebookWeb.FormComponents do
           id={@id}
           name={@name}
           class={[
-            "w-full px-3 py-2 pr-7 appearance-none text-sm border rounded-lg placeholder-gray-400 disabled:opacity-70 disabled:cursor-not-allowed",
+            "w-full px-3 py-2 pr-7 appearance-none text-sm border rounded-lg placeholder-gray-400 disabled:opacity-70 disabled:cursor-not-allowed focus:border-blue-600 focus-visible:outline-none",
             if(@errors == [],
               do: "bg-gray-50 border-gray-200 text-gray-600",
               else: "bg-red-50 border-red-600 text-red-600"

lib/livebook_web/components/layout_components.ex

@@ -81,7 +81,7 @@ defmodule LivebookWeb.LayoutComponents do
         <div class="flex flex-col">
           <div class="space-y-3">
             <div class="flex items-center mb-5">
-              <.link navigate={~p"/"} class="flex items-center border-l-4 border-gray-900 group">
+              <.link navigate={~p"/"} class="flex items-center ml-1 group">
                 <img
                   src={~p"/images/logo.png"}
                   class="mx-2"

lib/livebook_web/live/session_live/cell_component.ex

@@ -315,7 +315,7 @@ defmodule LivebookWeb.SessionLive.CellComponent do
     ~H"""
     <!-- By setting tabindex we can programmatically focus this element,
          also we actually want to make this element tab-focusable -->
-    <div class="flex relative" data-el-cell-body tabindex="0">
+    <div class="flex relative focus-visible:outline-none" data-el-cell-body tabindex="0">
       <div class="w-1 h-full rounded-lg absolute top-0 -left-3" data-el-cell-focus-indicator></div>
       <div class="w-full">
         <%= render_slot(@inner_block) %>
@@ -328,7 +328,7 @@ defmodule LivebookWeb.SessionLive.CellComponent do
     ~H"""
     <div class="flex items-center space-x-1">
       <button
-        class="text-gray-600 hover:text-gray-800 focus:text-gray-800 flex space-x-1 items-center"
+        class="text-gray-600 hover:text-gray-800 flex space-x-1 items-center"
         data-el-queue-cell-evaluation-button
         data-cell-id={@cell_id}
       >
@@ -346,7 +346,7 @@ defmodule LivebookWeb.SessionLive.CellComponent do
       </button>
       <.menu id={"cell-#{@cell_id}-evaluation-menu"} position={:bottom_left} distant>
         <:toggle>
-          <button class="flex text-gray-600 hover:text-gray-800 focus:text-gray-800">
+          <button class="flex text-gray-600 hover:text-gray-800">
             <.remix_icon icon="arrow-down-s-line" class="text-xl" />
           </button>
         </:toggle>
@@ -380,7 +380,7 @@ defmodule LivebookWeb.SessionLive.CellComponent do
   defp cell_evaluation_button(assigns) do
     ~H"""
     <button
-      class="text-gray-600 hover:text-gray-800 focus:text-gray-800 flex space-x-1 items-center"
+      class="text-gray-600 hover:text-gray-800 flex space-x-1 items-center"
       phx-click="cancel_cell_evaluation"
       phx-value-cell_id={@cell_id}
     >
@@ -396,7 +396,7 @@ defmodule LivebookWeb.SessionLive.CellComponent do
     ~H"""
     <div class="flex items-center space-x-1">
       <button
-        class="text-gray-600 hover:text-gray-800 focus:text-gray-800 flex space-x-1 items-center"
+        class="text-gray-600 hover:text-gray-800 flex space-x-1 items-center"
         data-el-queue-cell-evaluation-button
         data-cell-id={@cell_id}
       >
@@ -411,7 +411,7 @@ defmodule LivebookWeb.SessionLive.CellComponent do
       <%= unless Livebook.Runtime.fixed_dependencies?(@runtime) do %>
         <.menu id="setup-menu" position={:bottom_left} distant>
           <:toggle>
-            <button class="flex text-gray-600 hover:text-gray-800 focus:text-gray-800">
+            <button class="flex text-gray-600 hover:text-gray-800">
               <.remix_icon icon="arrow-down-s-line" class="text-xl" />
             </button>
           </:toggle>
@@ -435,7 +435,7 @@ defmodule LivebookWeb.SessionLive.CellComponent do
   defp setup_cell_evaluation_button(assigns) do
     ~H"""
     <button
-      class="text-gray-600 hover:text-gray-800 focus:text-gray-800 flex space-x-1 items-center"
+      class="text-gray-600 hover:text-gray-800 flex space-x-1 items-center"
       phx-click="cancel_cell_evaluation"
       phx-value-cell_id={@cell_id}
     >

lib/livebook_web/live/session_live/render.ex

@@ -1231,22 +1231,22 @@ defmodule LivebookWeb.SessionLive.Render do
 
   defp status_button_classes(color) do
     [
-      "text-xl leading-none p-1 flex items-center justify-center rounded-full rounded-full border-2",
+      "text-xl leading-none p-1 flex items-center justify-center rounded-full rounded-full border-2 focus-visible:outline-none",
       case color do
         :gray ->
-          "text-gray-400 border-gray-200 hover:bg-gray-100 focus:bg-gray-100"
+          "text-gray-400 border-gray-200 hover:bg-gray-100 focus-visible:bg-gray-100"
 
         :blue ->
-          "text-blue-500 border-blue-400 hover:bg-blue-50 focus:bg-blue-50"
+          "text-blue-500 border-blue-400 hover:bg-blue-50 focus-visible:bg-blue-50"
 
         :green ->
-          "text-green-bright-400 border-green-bright-300 hover:bg-green-bright-50 focus:bg-green-bright-50"
+          "text-green-bright-400 border-green-bright-300 hover:bg-green-bright-50 focus-visible:bg-green-bright-50"
 
         :yellow ->
-          "text-yellow-bright-300 border-yellow-bright-200 hover:bg-yellow-bright-50 focus:bg-yellow-bright-50"
+          "text-yellow-bright-300 border-yellow-bright-200 hover:bg-yellow-bright-50 focus-visible:bg-yellow-bright-50"
 
         :red ->
-          "text-red-400 border-red-300 hover:bg-red-50 focus:bg-red-50"
+          "text-red-400 border-red-300 hover:bg-red-50 focus-visible:bg-red-50"
       end
     ]
   end