Enable F mode for text input and toggle button

Author: mtsgrd

packages/ui/src/lib/components/Textbox.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import Icon from '$components/Icon.svelte';
+	import { focusable } from '$lib/focus/focusable';
 	import { clickOutside } from '$lib/utils/clickOutside';
 	import { pxToRem } from '$lib/utils/pxToRem';
 	import { onMount, tick } from 'svelte';
@@ -176,6 +177,7 @@
 			style:text-align={textAlign}
 			bind:value
 			bind:this={htmlInput}
+			use:focusable={{ button: true }}
 			{onclick}
 			{onmousedown}
 			oninput={(e) => {

packages/ui/src/lib/components/Toggle.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { focusable } from '$lib/focus/focusable';
+
 	interface Props {
 		small?: boolean;
 		disabled?: boolean;
@@ -36,6 +38,7 @@
 	{value}
 	{id}
 	{disabled}
+	use:focusable={{ button: true }}
 />
 
 <style lang="postcss">

packages/ui/src/lib/focus/fModeManager.ts

@@ -178,7 +178,7 @@ export class FModeManager {
 			return;
 		}
 
-		if (isInputElement(element)) {
+		if (isInputElement(element) && element.type !== 'checkbox') {
 			element.focus();
 		} else {
 			element.click();

packages/ui/src/lib/focus/focusUtils.ts

@@ -12,7 +12,7 @@ export function getNavigationAction(key: string): NavigationAction | null {
 	return keyMap[key] ?? null;
 }
 
-export function isInputElement(target: EventTarget | null): boolean {
+export function isInputElement(target: EventTarget | null): target is HTMLInputElement {
 	return (
 		(target instanceof HTMLElement && isContentEditable(target)) ||
 		target instanceof HTMLTextAreaElement ||