refac

src/lib/components/common/AccessButton.svelte

@@ -13,7 +13,7 @@
 
 <button
 	type="button"
-	class="flex shrink-0 items-center gap-1 rounded-lg bg-gray-50 px-2 py-1 text-xs font-normal text-gray-900 transition ring-1 ring-gray-200 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-gray-850 dark:text-gray-100 dark:ring-gray-800 dark:hover:bg-gray-800 {className}"
+	class="focus-ring flex shrink-0 items-center gap-1 rounded-lg bg-gray-50 px-2 py-1 text-xs font-normal text-gray-900 transition ring-1 ring-gray-200 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-gray-850 dark:text-gray-100 dark:ring-gray-800 dark:hover:bg-gray-800 {className}"
 	{disabled}
 	on:click
 >

src/lib/components/common/Checkbox.svelte

@@ -15,7 +15,7 @@
 </script>
 
 <button
-	class=" outline -outline-offset-1 outline-[1.5px] outline-gray-200 dark:outline-gray-600 {state !==
+	class="focus-ring outline -outline-offset-1 outline-[1.5px] outline-gray-200 dark:outline-gray-600 {state !==
 	'unchecked'
 		? 'bg-black outline-black '
 		: 'hover:outline-gray-500 hover:bg-gray-50 dark:hover:bg-gray-800'} text-white transition-all rounded-sm inline-block w-3.5 h-3.5 relative {disabled

src/lib/components/common/MultiSelect.svelte

@@ -88,7 +88,7 @@
 
 <button
 	bind:this={triggerEl}
-	class={className}
+	class="focus-ring {className}"
 	aria-label={placeholder}
 	type="button"
 	on:click={toggleOpen}
@@ -109,7 +109,7 @@
 		>
 			{#each items as item}
 				<button
-					class="flex w-full gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
+					class="focus-ring flex w-full gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
 					type="button"
 					on:click={() => toggleItem(item.value)}
 				>

src/lib/components/common/Select.svelte

@@ -122,7 +122,7 @@
 
 <button
 	bind:this={triggerEl}
-	class={triggerClass}
+	class="focus-ring {triggerClass}"
 	type="button"
 	aria-expanded={open}
 	on:click={toggleOpen}
@@ -139,7 +139,7 @@
 		<DropdownMenu className={contentClass} style={`max-height: ${maxHeight}; overflow-y: auto;`}>
 			<slot {open} {selectItem}>
 				{#each items as item}
-					<button class={itemClass} type="button" on:click={() => selectItem(item)}>
+					<button class="focus-ring {itemClass}" type="button" on:click={() => selectItem(item)}>
 						<slot name="item" {item} selected={value === item.value}>
 							{item.label}
 						</slot>

src/lib/components/common/SplitCreateButton.svelte

@@ -50,7 +50,7 @@
 
 {#if visibleActions.length === 1}
 	<button
-		class="ml-1 rounded-lg bg-gray-50 px-2.5 py-1 text-xs text-gray-900 transition ring-1 ring-gray-200 hover:bg-gray-100 dark:bg-gray-850 dark:text-gray-100 dark:ring-gray-800 dark:hover:bg-gray-800"
+		class="focus-ring ml-1 rounded-lg bg-gray-50 px-2.5 py-1 text-xs text-gray-900 transition ring-1 ring-gray-200 hover:bg-gray-100 dark:bg-gray-850 dark:text-gray-100 dark:ring-gray-800 dark:hover:bg-gray-800"
 		type="button"
 		on:click={() => {
 			runAction(primaryAction);
@@ -63,7 +63,7 @@
 		class="ml-1 flex overflow-hidden rounded-lg bg-gray-50 text-xs text-gray-900 transition ring-1 ring-gray-200 dark:bg-gray-850 dark:text-gray-100 dark:ring-gray-800"
 	>
 		<button
-			class="px-2.5 py-1 transition hover:bg-gray-100 dark:hover:bg-gray-800"
+			class="focus-ring px-2.5 py-1 transition hover:bg-gray-100 dark:hover:bg-gray-800"
 			on:click={() => {
 				runAction(primaryAction);
 			}}
@@ -73,7 +73,7 @@
 
 		<Dropdown bind:show={showMenu} align="end" sideOffset={6}>
 			<button
-				class="flex items-center border-l border-gray-200 px-1.5 py-1 transition hover:bg-gray-100 dark:border-gray-800 dark:hover:bg-gray-800"
+				class="focus-ring flex items-center border-l border-gray-200 px-1.5 py-1 transition hover:bg-gray-100 dark:border-gray-800 dark:hover:bg-gray-800"
 				aria-label={$i18n.t('Open create menu')}
 			>
 				<ChevronDown className="size-2.5" strokeWidth="2.5" />

src/lib/components/common/Switch.svelte

@@ -36,7 +36,7 @@
 			{id}
 			aria-labelledby={ariaLabelledbyId || undefined}
 			aria-label={ariaLabel || undefined}
-			class="relative h-4 min-h-4 w-7 shrink-0 cursor-pointer rounded-full mx-[0.0625rem] transition-colors duration-150 disabled:cursor-not-allowed {($settings?.highContrastMode ??
+			class="focus-ring relative h-4 min-h-4 w-7 shrink-0 cursor-pointer rounded-full mx-[0.0625rem] transition-colors duration-150 disabled:cursor-not-allowed {($settings?.highContrastMode ??
 			false)
 				? 'focus:outline focus:outline-2 focus:outline-gray-800! focus:dark:outline-gray-200!'
 				: ''} {state ? 'bg-gray-900 dark:bg-white' : 'bg-gray-300 dark:bg-gray-700'}"