more

Author: huntabyte

biome.json

@@ -9,7 +9,8 @@
 				"rules": {
 					"style": {
 						"useConst": "off",
-						"useImportType": "off"
+						"useImportType": "off",
+						"noNonNullAssertion": "off"
 					}
 				}
 			}

packages/floating-ui-svelte/src/components/floating-focus-manager/floating-focus-manager.svelte

@@ -156,6 +156,7 @@
 	import { box } from "../../internal/box.svelte.js";
 	import { reactiveActiveElement } from "../../internal/active-element.svelte.js";
 	import { sleep } from "../../internal/sleep.js";
+	import { handleGuardFocus } from "../../internal/handle-guard-focus.js";
 
 	let {
 		context,
@@ -433,14 +434,14 @@
 		() => beforeGuardRef,
 		() => {
 			if (!portalContext) return;
-			portalContext.beforeInsideRef = beforeGuardRef;
+			portalContext.beforeInsideGuard = beforeGuardRef;
 		}
 	);
 	watch.pre(
 		() => afterGuardRef,
 		() => {
 			if (!portalContext) return;
-			portalContext.afterInsideRef = afterGuardRef;
+			portalContext.afterInsideGuard = afterGuardRef;
 		}
 	);
 
@@ -482,8 +483,8 @@
 				endDismissButtonRef.current,
 				beforeGuardRef,
 				afterGuardRef,
-				portalContext?.beforeOutsideRef,
-				portalContext?.afterOutsideRef,
+				portalContext?.beforeOutsideGuard,
+				portalContext?.afterOutsideGuard,
 				order.includes("reference") || isUntrappedTypeableCombobox
 					? context.domReference
 					: null,
@@ -811,7 +812,7 @@
 						nextTabbable?.focus();
 					});
 				} else {
-					portalContext.beforeOutsideRef?.focus();
+					handleGuardFocus(portalContext.beforeOutsideGuard);
 				}
 			}
 		}} />
@@ -850,7 +851,7 @@ will have a dismiss button.
 						prevTabbable?.focus();
 					});
 				} else {
-					portalContext.afterOutsideRef?.focus();
+					handleGuardFocus(portalContext.afterOutsideGuard);
 				}
 			}
 		}} />

packages/floating-ui-svelte/src/components/floating-portal/floating-portal.svelte

@@ -42,6 +42,7 @@
 <script lang="ts">
 	import Portal from "./portal.svelte";
 	import { sleep } from "../../internal/sleep.js";
+	import { handleGuardFocus } from "../../internal/handle-guard-focus.js";
 
 	let {
 		children,
@@ -56,10 +57,10 @@
 	});
 
 	let focusManagerState = $state.raw<FocusManagerState>(null);
-	let beforeOutsideRef = $state<HTMLSpanElement | null>(null);
-	let afterOutsideRef = $state<HTMLSpanElement | null>(null);
-	let beforeInsideRef = $state<HTMLSpanElement | null>(null);
-	let afterInsideRef = $state<HTMLSpanElement | null>(null);
+	let beforeOutsideGuard = $state<HTMLSpanElement | null>(null);
+	let afterOutsideGuard = $state<HTMLSpanElement | null>(null);
+	let beforeInsideGuard = $state<HTMLSpanElement | null>(null);
+	let afterInsideGuard = $state<HTMLSpanElement | null>(null);
 
 	const modal = $derived(focusManagerState?.modal);
 	const open = $derived(focusManagerState?.open);
@@ -110,23 +111,23 @@
 		get preserveTabOrder() {
 			return preserveTabOrder;
 		},
-		get beforeInsideRef() {
-			return beforeInsideRef;
+		get beforeInsideGuard() {
+			return beforeInsideGuard;
 		},
-		set beforeInsideRef(value: HTMLSpanElement | null) {
-			beforeInsideRef = value;
+		set beforeInsideGuard(value: HTMLSpanElement | null) {
+			beforeInsideGuard = value;
 		},
-		get beforeOutsideRef() {
-			return beforeOutsideRef;
+		get beforeOutsideGuard() {
+			return beforeOutsideGuard;
 		},
-		get afterInsideRef() {
-			return afterInsideRef;
+		get afterInsideGuard() {
+			return afterInsideGuard;
 		},
-		set afterInsideRef(value: HTMLSpanElement | null) {
-			afterInsideRef = value;
+		set afterInsideGuard(value: HTMLSpanElement | null) {
+			afterInsideGuard = value;
 		},
-		get afterOutsideRef() {
-			return afterOutsideRef;
+		get afterOutsideGuard() {
+			return afterOutsideGuard;
 		},
 		get portalNode() {
 			return portalNode.current;
@@ -141,10 +142,10 @@
 	<FocusGuard
 		type="outside"
 		data-name="before"
-		bind:ref={() => beforeOutsideRef, (v) => (beforeOutsideRef = v)}
+		bind:ref={() => beforeOutsideGuard, (v) => (beforeOutsideGuard = v)}
 		onfocus={(event) => {
 			if (isOutsideEvent(event, portalNode.current)) {
-				beforeInsideRef?.focus();
+				handleGuardFocus(beforeInsideGuard);
 			} else {
 				sleep().then(() => {
 					const prevTabbable =
@@ -168,10 +169,10 @@
 	<FocusGuard
 		type="outside"
 		data-name="after"
-		bind:ref={() => afterOutsideRef, (v) => (afterOutsideRef = v)}
+		bind:ref={() => afterOutsideGuard, (v) => (afterOutsideGuard = v)}
 		onfocus={(event) => {
 			if (isOutsideEvent(event, portalNode.current)) {
-				afterInsideRef?.focus();
+				handleGuardFocus(afterInsideGuard);
 			} else {
 				sleep().then(() => {
 					const nextTabbable =

packages/floating-ui-svelte/src/components/floating-portal/hooks.svelte.ts

@@ -17,10 +17,10 @@ const PortalContext = new Context<{
 	preserveTabOrder: boolean;
 	portalNode: HTMLElement | null;
 	setFocusManagerState: (state: FocusManagerState) => void;
-	beforeInsideRef: HTMLSpanElement | null;
-	afterInsideRef: HTMLSpanElement | null;
-	beforeOutsideRef: HTMLSpanElement | null;
-	afterOutsideRef: HTMLSpanElement | null;
+	beforeInsideGuard: HTMLSpanElement | null;
+	afterInsideGuard: HTMLSpanElement | null;
+	beforeOutsideGuard: HTMLSpanElement | null;
+	afterOutsideGuard: HTMLSpanElement | null;
 } | null>("PortalContext");
 
 const attr = createAttribute("portal");

packages/floating-ui-svelte/src/internal/handle-guard-focus.ts

@@ -0,0 +1,28 @@
+import { sleep } from "./sleep.js";
+
+/**
+ * Guards have an `aria-hidden` attribute on them, as they should not be visible to screen readers,
+ * however, they are used as an intermediary to focus the real target. When they receive focus in
+ * chromium browsers, an error is logged informing that an `aria-hidden` element should not be
+ * focused.
+ *
+ * This function handles the focus of the guard element first by momentary removing the
+ * `aria-hidden` attribute, focusing the guard (which will cause something else to focus), and then
+ * restoring the attribute.
+ */
+
+function handleGuardFocus(guard: HTMLElement | null) {
+	if (!guard) return;
+	const ariaHidden = guard.getAttribute("aria-hidden");
+	guard.removeAttribute("aria-hidden");
+	guard.focus();
+	sleep().then(() => {
+		if (ariaHidden === null) {
+			guard.setAttribute("aria-hidden", "");
+		} else {
+			guard.setAttribute("aria-hidden", ariaHidden);
+		}
+	});
+}
+
+export { handleGuardFocus };

packages/floating-ui-svelte/test/visual/components/drawer/drawer.svelte

@@ -13,14 +13,14 @@
 	import { box } from "../../../../src/internal/box.svelte.js";
 	import FloatingPortal from "../../../../src/components/floating-portal/floating-portal.svelte";
 	import FloatingOverlay from "../../../../src/components/floating-overlay.svelte";
+	import type { ReferenceSnippetProps } from "../../types.js";
+	import { MediaQuery } from "svelte/reactivity";
 
 	let {
 		reference,
 		content,
 	}: {
-		reference: Snippet<
-			[reference: Boxed<Element | null>, props: Record<string, unknown>]
-		>;
+		reference: Snippet<ReferenceSnippetProps>;
 		content: Snippet<
 			[{ labelId: string; descriptionId: string; close: () => void }]
 		>;
@@ -30,7 +30,8 @@
 
 	const ref = box<Element | null>(null);
 
-	const isLargeScreen = true;
+	const isLargeScreen = new MediaQuery("min-width: 1400px");
+
 	const f = useFloating({
 		reference: () => ref.current,
 		onReferenceChange: (v) => {
@@ -47,7 +48,7 @@
 	const labelId = `${id}-label`;
 	const descriptionId = `${id}-description`;
 
-	const modal = !isLargeScreen;
+	const modal = $derived(!isLargeScreen);
 
 	const ints = useInteractions([
 		useClick(f.context),

packages/floating-ui-svelte/test/visual/components/emoji-picker/main.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import type { Placement } from "@floating-ui/utils";
+
+	let open = $state(false);
+	let search = $state("");
+	let selectedEmoji = $state<string | null>(null);
+	let activeIndex = $state<number | null>(null);
+	let placement = $state<Placement | null>(null);
+
+	let arrowEl: HTMLElement = null!;
+</script>

packages/floating-ui-svelte/test/visual/components/emoji-picker/option.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import type { HTMLButtonAttributes } from "svelte/elements";
+	import { useId, type WithRef } from "../../../../src/index.js";
+	import c from "clsx";
+
+	let {
+		id = useId(),
+		name,
+		children,
+		active,
+		selected,
+		ref = $bindable(null),
+		...rest
+	}: HTMLButtonAttributes & {
+		name: string;
+		active: boolean;
+		selected: boolean;
+	} & Partial<WithRef<HTMLButtonElement>> = $props();
+</script>
+
+<button
+	{...rest}
+	bind:this={ref}
+	{id}
+	role="option"
+	class={c(
+		"rounded text-3xl text-center cursor-default select-none aspect-square",
+		{
+			"bg-cyan-100": selected && !active,
+			"bg-cyan-200": active,
+			"opacity-40": name === "orange",
+		}
+	)}
+	aria-selected={selected}
+	disabled={name === "orange"}
+	aria-label={name}
+	tabindex={-1}
+	data-active={active ? "" : undefined}>
+	{@render children?.()}
+</button>

packages/floating-ui-svelte/test/visual/routes/drawer/+page.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+	import Main from "../../components/drawer/main.svelte";
+</script>
+
+<Main />

packages/floating-ui-svelte/test/visual/types.ts

@@ -0,0 +1,6 @@
+import type { WritableBox } from "../../src/internal/box.svelte.js";
+
+export type ReferenceSnippetProps = [
+	WritableBox<Element | null>,
+	Record<string, unknown>,
+];