From 05c9c17b8c4b13d843cc3ca2e58851fe6cf5b555 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jonatan=20K=C5=82osko?= Date: Sat, 17 Aug 2024 05:17:26 +0200 Subject: [PATCH] Respect default elements outline on tab-navigation (#2749) --- assets/css/components.css | 2 +- assets/css/global.css | 6 ------ assets/css/js_interop.css | 2 +- lib/livebook_web/components/core_components.ex | 8 ++++---- lib/livebook_web/components/form_components.ex | 12 ++++++------ lib/livebook_web/components/layout_components.ex | 2 +- .../live/session_live/cell_component.ex | 14 +++++++------- lib/livebook_web/live/session_live/render.ex | 12 ++++++------ 8 files changed, 26 insertions(+), 32 deletions(-) diff --git a/assets/css/components.css b/assets/css/components.css index 92e9ff85f..df3d822a1 100644 --- a/assets/css/components.css +++ b/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 { diff --git a/assets/css/global.css b/assets/css/global.css index 61c52b41d..e1fc26745 100644 --- a/assets/css/global.css +++ b/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; diff --git a/assets/css/js_interop.css b/assets/css/js_interop.css index 2f94f3fcb..0138879fb 100644 --- a/assets/css/js_interop.css +++ b/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]) diff --git a/lib/livebook_web/components/core_components.ex b/lib/livebook_web/components/core_components.ex index 103fa4d71..df2245b6d 100644 --- a/lib/livebook_web/components/core_components.ex +++ b/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"""
  • :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 diff --git a/lib/livebook_web/components/form_components.ex b/lib/livebook_web/components/form_components.ex index c8ea3efa1..c7c8460a7 100644 --- a/lib/livebook_web/components/form_components.ex +++ b/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} />
    @@ -306,7 +306,7 @@ defmodule LivebookWeb.FormComponents do checked={to_string(@value) == @checked_value} {@rest} /> -
    +
    @@ -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" diff --git a/lib/livebook_web/components/layout_components.ex b/lib/livebook_web/components/layout_components.ex index 72a2cd026..5c43f92c9 100644 --- a/lib/livebook_web/components/layout_components.ex +++ b/lib/livebook_web/components/layout_components.ex @@ -81,7 +81,7 @@ defmodule LivebookWeb.LayoutComponents do
    - <.link navigate={~p"/"} class="flex items-center border-l-4 border-gray-900 group"> + <.link navigate={~p"/"} class="flex items-center ml-1 group"> -
    +
    <%= render_slot(@inner_block) %> @@ -328,7 +328,7 @@ defmodule LivebookWeb.SessionLive.CellComponent do ~H"""
    <.menu id={"cell-#{@cell_id}-evaluation-menu"} position={:bottom_left} distant> <:toggle> - @@ -380,7 +380,7 @@ defmodule LivebookWeb.SessionLive.CellComponent do defp cell_evaluation_button(assigns) do ~H""" @@ -435,7 +435,7 @@ defmodule LivebookWeb.SessionLive.CellComponent do defp setup_cell_evaluation_button(assigns) do ~H"""