docs(Search): fixed A11y warnings

fix(Checkbox): fixed A11y warnings fix(Drawer): fixed A11y warnings fix(Dropdown): fixed A11y warnings fix(FilePicker): fixed A11y warnings fix(Menu): fixed A11y warnings fix(Modal): fixed A11y warnings fix(Post): fixed A11y warnings fix(Radio): fixed A11y warnings fix(Toggle): fixed A11y warnings
N00nDay · Jul 3, 2023 · 803ba13 · 803ba13
1 parent 195308a
commit 803ba13
Show file tree

Hide file tree

Showing 12 changed files with 151 additions and 116 deletions.
diff --git a/src/docs/components/search/Search.svelte b/src/docs/components/search/Search.svelte
@@ -151,7 +151,7 @@
 						on:input={filterData}
 					/>
 					{#if value && value.length > 0}
-						<span
+						<button
 							transition:scale|local
 							class="absolute inset-y-0 right-16 items-center cursor-pointer flex active:flex"
 							on:click={handleClear}
@@ -160,7 +160,7 @@
 							<span class="text-content">
 								<Icon data={close} />
 							</span>
-						</span>
+						</button>
 					{/if}
 
 					<Kbd class="absolute inset-y-0 right-4 top-2.5 flex items-center justify-center h-[26px]">
@@ -176,39 +176,43 @@
 								class:bg-hover={index === selectedIndex}
 								id={`option-${index}`}
 								tabindex="-1"
-								on:click={() => handleSelect(item.href)}
-								on:keypress
 							>
-								<div
-									class="flex h-10 w-10 flex-none items-center justify-center rounded-lg"
-									class:bg-info={item.type === 'Component'}
-									class:bg-success={item.type === 'Guide'}
-									class:bg-warn={item.type === 'Action'}
-									class:bg-error={item.type === 'Utility'}
-									class:text-info-content={item.type === 'Component'}
-									class:text-success-content={item.type === 'Guide'}
-									class:text-warn-content={item.type === 'Action'}
-									class:text-error-content={item.type === 'Utility'}
+								<button
+									type="button"
+									class="h-full flex justify-start text-left"
+									on:click={() => handleSelect(item.href)}
 								>
-									{#if item.type === 'Component'}
-										<Icon data={toggle_switch} />
-									{:else if item.type === 'Guide'}
-										<Icon data={format_list_numbered} />
-									{:else if item.type === 'Action'}
-										<Icon data={lightning_bolt_circle} />
-									{:else if item.type === 'Utility'}
-										<Icon data={function_variant} />
-									{/if}
-								</div>
-								<div class="ml-4 flex-auto">
-									<p class="text-sm font-medium text-content">
-										{item.name}
-									</p>
-									<p class="text-sm text-secondary-content">
-										{item.type}
-									</p>
-								</div>
-								<HoverBackground class="rounded-xl" />
+									<div
+										class="flex h-10 w-10 flex-none items-center justify-center rounded-lg"
+										class:bg-info={item.type === 'Component'}
+										class:bg-success={item.type === 'Guide'}
+										class:bg-warn={item.type === 'Action'}
+										class:bg-error={item.type === 'Utility'}
+										class:text-info-content={item.type === 'Component'}
+										class:text-success-content={item.type === 'Guide'}
+										class:text-warn-content={item.type === 'Action'}
+										class:text-error-content={item.type === 'Utility'}
+									>
+										{#if item.type === 'Component'}
+											<Icon data={toggle_switch} />
+										{:else if item.type === 'Guide'}
+											<Icon data={format_list_numbered} />
+										{:else if item.type === 'Action'}
+											<Icon data={lightning_bolt_circle} />
+										{:else if item.type === 'Utility'}
+											<Icon data={function_variant} />
+										{/if}
+									</div>
+									<div class="ml-4 flex-auto">
+										<h4 class="font-medium text-content">
+											{item.name}
+										</h4>
+										<p class="text-xs text-secondary-content">
+											{item.type}
+										</p>
+									</div>
+									<HoverBackground class="rounded-xl" />
+								</button>
 							</li>
 						{/each}
 					</ul>

diff --git a/src/lib/components/checkbox/Checkbox.svelte b/src/lib/components/checkbox/Checkbox.svelte
@@ -27,7 +27,9 @@
 	setContext('checkbox-name', name);
 </script>
 
-<div
+<button
+	tabindex="-1"
+	type="button"
 	on:keydown={handleKeydown}
 	class="relative flex items-start"
 	class:pointer-events-none={disabled}
@@ -51,7 +53,7 @@
 		<slot name="description" />
 		<slot />
 	</div>
-</div>
+</button>
 {#if error}
 	<p transition:slide|local class="!mt-2 text-sm text-danger" id="{name}-error">{error}</p>
 {/if}

diff --git a/src/lib/components/drawer/Backdrop.svelte b/src/lib/components/drawer/Backdrop.svelte
@@ -11,10 +11,11 @@
 	const disableOverlayClose: boolean = getContext('drawer-disableOverlayClose');
 </script>
 
-<div
+<button
 	class={finalClass}
 	style={$$props.style}
 	transition:fade
 	on:click={disableOverlayClose ? undefined : handleClose}
-	on:keypress
+	type="button"
+	tabindex="-1"
 />
diff --git a/src/lib/components/dropdown/Item.svelte b/src/lib/components/dropdown/Item.svelte
@@ -27,12 +27,16 @@
 <li
 	class={finalClass}
 	tabindex="-1"
-	on:keydown={handleKeydown}
 	use:useActions={use}
 	use:forwardEvents
 	{...exclude($$props, ['use', 'class'])}
 >
-	<button type="button" aria-label="select option" class="w-full flex items-center">
+	<button
+		type="button"
+		aria-label="select option"
+		class="w-full flex items-center"
+		on:keydown={handleKeydown}
+	>
 		<span class="flex items-center justify-start flex-grow">
 			<slot name="icon" />
 			<span class="truncate" class:ml-3={$$slots.icon}>{label}</span>

diff --git a/src/lib/components/file-picker/FilePicker.svelte b/src/lib/components/file-picker/FilePicker.svelte
@@ -162,7 +162,8 @@
 	setContext('filepicker-disabled', disabled);
 </script>
 
-<div
+<button
+	type="button"
 	class={finalClass}
 	use:useActions={use}
 	use:forwardEvents
@@ -193,4 +194,4 @@
 		on:focus={handleFocus}
 		on:blur={handleBlur}
 	/>
-</div>
+</button>
diff --git a/src/lib/components/menu/Group.svelte b/src/lib/components/menu/Group.svelte
@@ -16,7 +16,7 @@
 	export let key: string;
 
 	let active = false;
-	let collapsable: HTMLDivElement;
+	let collapsable: HTMLButtonElement;
 
 	const menuCollapse: Writable<boolean> = getContext('menu-collapse');
 	const activeItem: Writable<string> = getContext('menu-active-item');
@@ -66,7 +66,8 @@
 	setContext('menu-group-key', key);
 </script>
 
-<div
+<button
+	type="button"
 	bind:this={collapsable}
 	class="relative w-full"
 	on:mouseover={$menuCollapse ? toggleOpen : undefined}
@@ -130,4 +131,4 @@
 			</div>
 		</div>
 	{/if}
-</div>
+</button>
diff --git a/src/lib/components/modal/Backdrop.svelte b/src/lib/components/modal/Backdrop.svelte
@@ -9,4 +9,11 @@
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
-<div class={finalClass} style={$$props.style} transition:fade on:click={handleClose} on:keypress />
+<button
+	type="button"
+	tabindex="-1"
+	class={finalClass}
+	style={$$props.style}
+	transition:fade
+	on:click={handleClose}
+/>