Skip to content

a11y(2.1.1): navigation primitives — replace hover-only CSS :after label tooltip with focusable Tooltip #3529

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

Open
rosanusi wants to merge 2 commits into
base: main
Choose a base branch
from
Open

a11y(2.1.1): navigation primitives — replace hover-only CSS :after label tooltip with focusable Tooltip #3529

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b5714c3
a11y(2.1.1): replace hover-only CSS :after nav tooltips with Tooltip …
rosanusi Jun 10, 2026
5f9130f
fix: import order in navigation-badge and navigation-button
rosanusi Jun 11, 2026
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
13 changes: 9 additions & 4 deletions src/lib/holocene/navigation/navigation-badge.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
<script lang="ts">
import Tooltip from '$lib/holocene/tooltip.svelte';
import { navOpen } from '$lib/stores/nav-open';

import type { IconName } from '../icon';
import Icon from '../icon/icon.svelte';

Expand All @@ -25,14 +28,16 @@
{target}
class="relative flex cursor-pointer items-center border border-white/10 bg-white/5 text-white hover:bg-white hover:text-black group-data-[nav=closed]:p-1 group-data-[nav=open]:px-2.5 group-data-[nav=open]:py-2"
>
<div
class="flex h-6 w-6 items-center whitespace-nowrap after:absolute after:left-[calc(100%_+_1.5rem)] after:top-0 after:hidden after:h-8 after:items-center after:rounded-md after:bg-slate-800 after:p-1 after:px-2 after:text-xs after:text-white after:content-[attr(data-tooltip)] group-data-[nav=open]:hidden group-data-[nav=open]:justify-start group-data-[nav=closed]:justify-center group-data-[nav=closed]:hover:after:flex"
data-tooltip={tooltip}
<Tooltip
text={tooltip}
right
hide={$navOpen}
class="flex h-6 w-6 items-center whitespace-nowrap group-data-[nav=open]:hidden group-data-[nav=closed]:justify-center"
>
{#if icon}
<Icon name={icon} />
{/if}
</div>
</Tooltip>
<div
class="text-center group-data-[nav=open]:visible group-data-[nav=closed]:hidden"
>
Expand Down
13 changes: 8 additions & 5 deletions src/lib/holocene/navigation/navigation-button.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@
import { twMerge as merge } from 'tailwind-merge';

import type { IconName } from '$lib/holocene/icon';
import Tooltip from '$lib/holocene/tooltip.svelte';
import { navOpen } from '$lib/stores/nav-open';

import Icon from '../icon/icon.svelte';

Expand Down Expand Up @@ -32,13 +34,14 @@
)}
>
{#if icon}
<div
class="flex h-6 w-6 items-center after:absolute after:left-[calc(100%_+_1.5rem)] after:top-0 after:hidden after:h-8 after:items-center after:bg-slate-800 after:p-1 after:px-2 after:text-xs after:text-white after:content-[attr(data-tooltip)] group-data-[nav=closed]:hover:after:flex"
data-tooltip={tooltip}
aria-hidden="true"
<Tooltip
text={tooltip}
right
hide={$navOpen}
class="flex h-6 w-6 items-center"
>
<Icon name={icon} {animate} {active} />
</div>
</Tooltip>
{/if}
<div class="opacity-0 transition-opacity group-data-[nav=open]:opacity-100">
{label}
Expand Down
11 changes: 7 additions & 4 deletions src/lib/holocene/navigation/navigation-item.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@

import type { IconName } from '$lib/holocene/icon';
import Icon from '$lib/holocene/icon/icon.svelte';
import Tooltip from '$lib/holocene/tooltip.svelte';
import { navOpen } from '$lib/stores/nav-open';

export let link: string;
Expand Down Expand Up @@ -48,12 +49,14 @@
class:text-disabled={disabled}
>
{#if icon}
<div
class="flex h-6 w-6 items-center after:absolute after:left-[calc(100%_+_1.5rem)] after:top-0 after:hidden after:h-8 after:items-center after:bg-slate-800 after:p-1 after:px-2 after:text-xs after:text-white after:content-[attr(data-tooltip)] group-data-[nav=closed]:hover:after:flex"
data-tooltip={tooltip}
<Tooltip
text={tooltip}
right
hide={$navOpen}
class="flex h-6 w-6 items-center"
>
<Icon name={icon} {animate} />
</div>
</Tooltip>
{/if}
<div
class="opacity-0 transition-opacity group-data-[nav=open]:opacity-100"
Expand Down
Loading