more tests

packages/floating-ui-svelte/src/hooks/use-interactions.svelte.ts

@@ -1,4 +1,5 @@
 import type { HTMLAttributes } from "svelte/elements";
+import { FOCUSABLE_ATTRIBUTE } from "../internal/get-floating-focus-element.js";
 
 const ACTIVE_KEY = "active";
 const SELECTED_KEY = "selected";
@@ -44,7 +45,10 @@ function mergeProps<Key extends keyof ElementProps>(
 	}
 
 	return {
-		...(elementKey === "floating" && { tabindex: -1 }),
+		...(elementKey === "floating" && {
+			tabindex: -1,
+			[FOCUSABLE_ATTRIBUTE]: "",
+		}),
 		...domUserProps,
 		...propsList
 			.map((value) => {

packages/floating-ui-svelte/src/internal/get-floating-focus-element.ts

@@ -8,8 +8,10 @@ export function getFloatingFocusElement(
 	// This indicates the floating element is acting as a positioning wrapper, and
 	// so focus should be managed on the child element with the event handlers and
 	// aria props.
-	return floatingElement.hasAttribute(FOCUSABLE_ATTRIBUTE)
+	const res = floatingElement.hasAttribute(FOCUSABLE_ATTRIBUTE)
 		? floatingElement
 		: floatingElement.querySelector(`[${FOCUSABLE_ATTRIBUTE}]`) ||
-				floatingElement;
+			floatingElement;
+	console.log(res);
+	return res as HTMLElement;
 }

packages/floating-ui-svelte/test/components/floating-focus-manager/components/connected-drawer.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import FloatingFocusManager from "../../../../src/components/floating-focus-manager/floating-focus-manager.svelte";
+	import {
+		useDismiss,
+		useFloating,
+		useInteractions,
+	} from "../../../../src/index.js";
+
+	let {
+		open,
+		onOpenChange,
+	}: { open: boolean; onOpenChange: (v: boolean) => void } = $props();
+
+	const f = useFloating({
+		open,
+		onOpenChange,
+	});
+
+	const ints = useInteractions([useDismiss(f.context)]);
+</script>
+
+<FloatingFocusManager context={f.context}>
+	<div bind:this={f.floating} {...ints.getFloatingProps()}>
+		<button data-testid="child-reference"> child reference </button>
+	</div>
+</FloatingFocusManager>

packages/floating-ui-svelte/test/components/floating-focus-manager/components/connected.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import FloatingFocusManager from "../../../../src/components/floating-focus-manager/floating-focus-manager.svelte";
+	import {
+		useClick,
+		useDismiss,
+		useFloating,
+		useInteractions,
+	} from "../../../../src/index.js";
+	import ConnectedDrawer from "./connected-drawer.svelte";
+
+	let open = $state(false);
+	let isDrawerOpen = $state(false);
+
+	const f = useFloating({
+		open: () => open,
+		onOpenChange: (v) => {
+			open = v;
+		},
+	});
+
+	const ints = useInteractions([useClick(f.context), useDismiss(f.context)]);
+</script>
+
+<button
+	bind:this={f.reference}
+	data-testid="parent-reference"
+	{...ints.getReferenceProps()}>ref</button>
+{#if open}
+	<FloatingFocusManager context={f.context}>
+		<div bind:this={f.floating} {...ints.getFloatingProps()}>
+			Parent Floating
+			<button
+				data-testid="parent-floating-reference"
+				onclick={() => {
+					isDrawerOpen = true;
+					open = false;
+				}}>parent floating ref</button>
+		</div>
+	</FloatingFocusManager>
+{/if}
+{#if isDrawerOpen}
+	<ConnectedDrawer
+		open={isDrawerOpen}
+		onOpenChange={(v) => (isDrawerOpen = v)} />
+{/if}

packages/floating-ui-svelte/test/components/floating-focus-manager/components/floating-wrapper.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import FloatingFocusManager from "../../../../src/components/floating-focus-manager/floating-focus-manager.svelte";
+	import {
+		useFloating,
+		useInteractions,
+		useRole,
+	} from "../../../../src/index.js";
+
+	let open = $state(false);
+
+	const f = useFloating({
+		open: () => open,
+		onOpenChange: (v) => {
+			open = v;
+		},
+	});
+
+	const ints = useInteractions([useRole(f.context)]);
+</script>
+
+<button
+	bind:this={f.reference}
+	{...ints.getReferenceProps({
+		onclick: () => (open = !open),
+	})}>
+	ref
+</button>
+
+{#if open}
+	<FloatingFocusManager context={f.context}>
+		<div bind:this={f.floating} data-testid="outer">
+			<div {...ints.getFloatingProps()} data-testid="inner"></div>
+		</div>
+	</FloatingFocusManager>
+{/if}

packages/floating-ui-svelte/test/components/floating-focus-manager/components/restore-focus.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import FloatingFocusManager from "../../../../src/components/floating-focus-manager/floating-focus-manager.svelte";
+	import {
+		useClick,
+		useFloating,
+		useInteractions,
+	} from "../../../../src/index.js";
+
+	let { restoreFocus = true }: { restoreFocus?: boolean } = $props();
+
+	let open = $state(false);
+	let removedIndex = $state(0);
+
+	const f = useFloating({
+		open: () => open,
+		onOpenChange: (v) => {
+			open = v;
+		},
+	});
+
+	const ints = useInteractions([useClick(f.context)]);
+</script>
+
+<button
+	bind:this={f.reference}
+	{...ints.getReferenceProps()}
+	data-testid="reference">ref</button>
+{#if open}
+	<FloatingFocusManager context={f.context} initialFocus={1} {restoreFocus}>
+		<div
+			bind:this={f.floating}
+			{...ints.getFloatingProps()}
+			data-testid="floating">
+			{#if removedIndex < 3}
+				<button onclick={() => (removedIndex = removedIndex + 1)}>
+					three
+				</button>
+			{/if}
+			{#if removedIndex < 1}
+				<button onclick={() => (removedIndex = removedIndex + 1)}>
+					one
+				</button>
+			{/if}
+			{#if removedIndex < 2}
+				<button onclick={() => (removedIndex = removedIndex + 1)}>
+					two
+				</button>
+			{/if}
+		</div>
+	</FloatingFocusManager>
+{/if}

packages/floating-ui-svelte/test/components/floating-focus-manager/components/trapped-combobox.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import FloatingFocusManager from "../../../../src/components/floating-focus-manager/floating-focus-manager.svelte";
+	import {
+		useClick,
+		useDismiss,
+		useFloating,
+		useInteractions,
+		useRole,
+	} from "../../../../src/index.js";
+
+	let open = $state(false);
+
+	const f = useFloating({
+		open: () => open,
+		onOpenChange: (v) => {
+			open = v;
+		},
+	});
+
+	const ints = useInteractions([
+		useRole(f.context),
+		useDismiss(f.context),
+		useClick(f.context),
+	]);
+</script>
+
+<div class="App">
+	<!-- svelte-ignore a11y_role_has_required_aria_props -->
+	<input
+		bind:this={f.reference}
+		{...ints.getReferenceProps()}
+		data-testid="input"
+		role="combobox" />
+	{#if open}
+		<FloatingFocusManager context={f.context}>
+			<div
+				bind:this={f.floating}
+				style={f.floatingStyles}
+				{...ints.getFloatingProps()}>
+				<button>one</button>
+				<button>two</button>
+			</div>
+		</FloatingFocusManager>
+	{/if}
+</div>

packages/floating-ui-svelte/test/components/floating-focus-manager/components/untrapped-combobox.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import FloatingFocusManager from "../../../../src/components/floating-focus-manager/floating-focus-manager.svelte";
+	import FloatingPortal from "../../../../src/components/floating-portal/floating-portal.svelte";
+	import {
+		useClick,
+		useDismiss,
+		useFloating,
+		useInteractions,
+		useRole,
+	} from "../../../../src/index.js";
+
+	let open = $state(false);
+
+	const f = useFloating({
+		open: () => open,
+		onOpenChange: (v) => {
+			open = v;
+		},
+	});
+
+	const ints = useInteractions([
+		useRole(f.context),
+		useDismiss(f.context),
+		useClick(f.context),
+	]);
+</script>
+
+<div class="App">
+	<!-- svelte-ignore a11y_role_has_required_aria_props -->
+	<input
+		bind:this={f.reference}
+		{...ints.getReferenceProps()}
+		data-testid="input"
+		role="combobox" />
+	{#if open}
+		<FloatingPortal>
+			<FloatingFocusManager
+				context={f.context}
+				initialFocus={-1}
+				modal={false}>
+				<div
+					bind:this={f.floating}
+					style={f.floatingStyles}
+					{...ints.getFloatingProps()}>
+					<button>one</button>
+					<button>two</button>
+				</div>
+			</FloatingFocusManager>
+		</FloatingPortal>
+	{/if}
+	<button>outside</button>
+</div>