Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Respect default elements outline on tab-navigation #2749

Merged
merged 1 commit into from
Aug 17, 2024
Merged

Respect default elements outline on tab-navigation #2749

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion assets/css/components.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
6 changes: 0 additions & 6 deletions assets/css/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,6 @@
"Segoe UI Emoji";
}

/* Remove the default outline on focused elements */
:focus,
button:focus {
outline: none;
}

menu {
margin: 0;
padding: 0;
Expand Down
2 changes: 1 addition & 1 deletion assets/css/js_interop.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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])
Expand Down
8 changes: 4 additions & 4 deletions lib/livebook_web/components/core_components.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
]}>
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down
12 changes: 6 additions & 6 deletions lib/livebook_web/components/form_components.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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}
Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion lib/livebook_web/components/layout_components.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
14 changes: 7 additions & 7 deletions lib/livebook_web/live/session_live/cell_component.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) %>
Expand All @@ -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}
>
Expand All @@ -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>
Expand Down Expand Up @@ -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}
>
Expand All @@ -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}
>
Expand All @@ -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>
Expand All @@ -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}
>
Expand Down
12 changes: 6 additions & 6 deletions lib/livebook_web/live/session_live/render.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Loading