docs: added aria-label to all buttons that require it

fix(Alert): added aria-label to close button
fix(Autocomplete): added leadingAriaLabel prop
fix(Button): added ariaLabel prop
fix(ButtonGroup): added ariaLabel and htmlType prop
fix(Currency): added leadingAriaLabel and trailingAriaLabel prop
fix(Input): added leadingAriaLabel and trailingAriaLabel prop
fix(InputNumber): added leadingAriaLabel and trailingAriaLabel prop
fix(Select): added leadingAriaLabel prop
fix(Accordion.Item.Title): added aria-label
fix(Autocomplete.Option): added aria-label
fix(Badge): added aria-label to close button
fix(Carousel): added necessary aria-labels
fix(Chip.Close): added aria-label
fix(Dropdown.Header): added aria-label to close button
fix(Dropdown.Item): added aria-label
fix(LightBox): added necessary aria-labels
fix(Menu.Group): added aria-label
fix(Table.Header): added aria-label to sort buttons
fix(Toggle): added aria-label

src/docs/components/code-block/CodeBlock.svelte

@@ -31,7 +31,12 @@
 	<div class={finalClass} style={$$props.style}>
 		<header class="text-xs uppercase flex justify-between items-center p-2 pl-4 sticky top-0">
 			<span class="text-white/60">{language === 'bash' ? 'CODE' : language}</span>
-			<Button on:click={onCopyClick} size="sm" class="bg-white/5 hover:bg-white/10">
+			<Button
+				ariaLabel="copy code"
+				on:click={onCopyClick}
+				size="sm"
+				class="bg-white/5 hover:bg-white/10"
+			>
 				{!copyState ? 'Copy' : 'Copied ✓'}
 			</Button>
 		</header>

src/docs/components/search/Search.svelte

@@ -70,6 +70,7 @@
 <svelte:window on:keydown={captureEscapeEvent} />
 
 <Button
+	ariaLabel="open search"
 	on:click={handleOpen}
 	class="border-light-border dark:border-dark-border border ml-4 shadow-md dark:shadow-black hidden md:flex"
 >
@@ -87,6 +88,7 @@
 </Button>
 
 <Button
+	ariaLabel="open search"
 	on:click={handleOpen}
 	shape="circle"
 	class="flex md:hidden ml-4 bg-light-icon-background dark:bg-dark-icon-background text-light-icon dark:text-dark-icon"

src/docs/components/slots-table/CopyButton.svelte

@@ -16,6 +16,7 @@
 </script>
 
 <Button
+	ariaLabel="copy"
 	on:click={onCopyClick}
 	size="xs"
 	class="ml-2 bg-light-icon-background dark:bg-dark-icon-background text-light-icon dark:text-dark-icon"

src/lib/components/accordion/Title.svelte

@@ -32,6 +32,7 @@
 </script>
 
 <button
+	aria-label="Accordion Item Toggle"
 	class={finalClass}
 	type="button"
 	use:useActions={use}

src/lib/components/autocomplete/Autocomplete.svelte

@@ -24,6 +24,7 @@
 	export let autofocus = false;
 	export let handleLeadingClick: (() => void) | undefined = undefined;
 	export let allowNonListValue = false;
+	export let leadingAriaLabel = 'autocomplete leading';
 
 	let visible = false;
 	let input: HTMLInputElement;
@@ -86,7 +87,6 @@
 	use:forwardEvents
 	{...exclude($$props, ['use', 'class'])}
 >
-	<!-- TODO: label slot -->
 	{#if label}
 		<label
 			for={name}
@@ -98,6 +98,7 @@
 	{/if}
 	<div class="mt-1 relative rounded-md h-[2.5rem]">
 		<button
+			aria-label="Autocomplete Toggle"
 			bind:this={button}
 			type="button"
 			on:click={handleOpen}
@@ -132,6 +133,7 @@
 			{#if leading}
 				{#if handleLeadingClick}
 					<button
+						aria-label={leadingAriaLabel}
 						on:click|stopPropagation={handleLeadingClick}
 						class="absolute inset-y-0 left-0 pl-3"
 					>
@@ -154,6 +156,7 @@
 
 			{#if value && value.length > 0}
 				<button
+					aria-label="clear input"
 					on:click={handleClear}
 					class="absolute inset-y-0 right-8 items-center hidden group-focus-within:flex active:flex"
 				>

src/lib/components/autocomplete/Option.svelte

@@ -53,7 +53,11 @@
 	role="option"
 	aria-selected={selected}
 >
-	<button on:click={() => handleSelect(value)} class="w-full text-left">
+	<button
+		aria-label="autocomplete option"
+		on:click={() => handleSelect(value)}
+		class="w-full text-left"
+	>
 		<div class="relative py-1.5 pl-2.5 pr-7 w-full rounded-md overflow-hidden">
 			<span class="font-normal block truncate" class:font-semibold={selected}>
 				{value}

src/lib/components/badge/Close.svelte

@@ -37,6 +37,7 @@
 </script>
 
 <button
+	aria-label="close"
 	class={finalClass}
 	use:useActions={use}
 	use:forwardEvents

src/lib/components/button-group/Button.svelte

@@ -21,6 +21,8 @@
 	export let loading = false;
 	export let defaultLoading = true;
 	export let disabled = false;
+	export let ariaLabel: undefined | string = undefined;
+	export let htmlType = 'button';
 
 	useContext({
 		context_id: BUTTON_GROUP_CONTEXT_ID,
@@ -40,8 +42,8 @@
 </script>
 
 <button
-	on:click
-	type="button"
+	aria-label={ariaLabel}
+	type={htmlType}
 	class={finalClass}
 	class:bg-primary={active}
 	class:dark:bg-primary={active}

src/lib/components/button/Button.svelte

@@ -32,6 +32,7 @@
 	export let shape: 'square' | 'circle' | 'rounded' | 'pill' = 'rounded';
 	export let size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'fab' = 'md';
 	export let disableHover = false;
+	export let ariaLabel: undefined | string = undefined;
 
 	setContext(BUTTON_CONTEXT_ID, {
 		button: true,
@@ -58,6 +59,7 @@
 </script>
 
 <button
+	aria-label={ariaLabel}
 	type={htmlType}
 	{disabled}
 	class={finalClass}

src/lib/components/carousel/Carousel.svelte

@@ -30,6 +30,7 @@
 	<div class="absolute z-10 right-0 bottom-0 left-0 flex gap-2 justify-center p-0 mb-4">
 		{#each slides as _, i}
 			<button
+				aria-label="quick view slide {i + 1}"
 				on:click={() => handleGoTo(i)}
 				class="h-1.5 bg-light-surface shadow-md max-w-[40px] hover:shadow-lg hover:opacity-90"
 				class:opacity-50={activeSlide !== i}
@@ -55,6 +56,7 @@
 		{/each}
 	</div>
 	<button
+		aria-label="previous slide"
 		on:click={handlePrevious}
 		class="group absolute bg-black bg-opacity-5 top-0 bottom-0 flex items-center justify-center px-4 text-center border-0 outline-none hover:outline-none hover:no-underline focus:outline-none focus:no-underline shadow-md left-0"
 		type="button"
@@ -67,6 +69,7 @@
 		</div>
 	</button>
 	<button
+		aria-label="next slide"
 		on:click={handleNext}
 		class="group absolute bg-black bg-opacity-5 top-0 bottom-0 flex items-center justify-center px-4 text-center border-0 outline-none hover:outline-none hover:no-underline focus:outline-none focus:no-underline shadow-md right-0"
 		type="button"

src/lib/components/chip/Close.svelte

@@ -48,6 +48,7 @@
 </script>
 
 <button
+	aria-label="close"
 	type="button"
 	class={finalClass}
 	use:useActions={use}

src/lib/components/currency/Currency.svelte

@@ -16,6 +16,8 @@
 	export let handleLeadingClick: (() => void) | undefined = undefined;
 	export let handleTrailingClick: (() => void) | undefined = undefined;
 	export let readonly = false;
+	export let leadingAriaLabel = 'currency leading';
+	export let trailingAriaLabel = 'currency trailing';
 
 	function onlyNumeric(e: KeyboardEvent) {
 		if (!e.key.match(/^[0-9]+$/)) e.preventDefault();
@@ -75,7 +77,11 @@
 			on:keypress={onlyNumeric}
 		/>
 		{#if handleLeadingClick}
-			<button on:click={handleLeadingClick} class="absolute inset-y-0 left-0 pl-3">
+			<button
+				aria-label={leadingAriaLabel}
+				on:click={handleLeadingClick}
+				class="absolute inset-y-0 left-0 pl-3"
+			>
 				<span
 					class="material-icons flex items-center"
 					class:text-light-secondary-content={!error}
@@ -93,7 +99,11 @@
 		{/if}
 		{#if trailing && !error}
 			{#if handleTrailingClick}
-				<button on:click={handleTrailingClick} class="absolute inset-y-0 right-0 pr-3">
+				<button
+					aria-label={trailingAriaLabel}
+					on:click={handleTrailingClick}
+					class="absolute inset-y-0 right-0 pr-3"
+				>
 					<span
 						transition:scale|local
 						class="material-icons flex items-center"

src/lib/components/datepicker/DatePicker.svelte

@@ -216,6 +216,7 @@
 <Card class="max-w-[300px] mt-1 w-[300px]" on:focusout tabindex="-1" on:keydown={keydown}>
 	<div class="h-14 px-3 py-2 flex items-center">
 		<Button
+			ariaLabel="previous year"
 			size="xs"
 			shape="circle"
 			tabindex="-1"
@@ -225,6 +226,7 @@
 			<Button.Icon slot="icon" icon="keyboard_double_arrow_left" />
 		</Button>
 		<Button
+			ariaLabel="previous month"
 			size="xs"
 			shape="circle"
 			tabindex="-1"
@@ -244,6 +246,7 @@
 			<!-- {/key} -->
 		</div>
 		<Button
+			ariaLabel="next month"
 			size="xs"
 			shape="circle"
 			tabindex="-1"
@@ -253,6 +256,7 @@
 			<Button.Icon slot="icon" icon="chevron_right" />
 		</Button>
 		<Button
+			ariaLabel="next month"
 			size="xs"
 			shape="circle"
 			tabindex="-1"
@@ -291,6 +295,9 @@
 								</span>
 							{:else}
 								<button
+									aria-label="{iLocale.months[
+										browseDate.month()
+									]} {calendarDay.date()} {browseDate.year()} "
 									class="active w-full flex items-center justify-center cursor-pointer h-10 rounded-full"
 									on:click={() => selectDay(calendarDay)}
 									class:text-primary-content={calendarDay.isSame(value, 'date')}

src/lib/components/drawer/Header.svelte

@@ -35,7 +35,7 @@
 		<!-- TODO: pull out to allow for customization? -->
 		{#if handleClose}
 			<div class="ml-3 flex h-7 items-center">
-				<Button type="ghost" on:click={handleClose} shape="circle">
+				<Button ariaLabel="close" type="ghost" on:click={handleClose} shape="circle">
 					<Button.Icon slot="icon" icon="close" />
 				</Button>
 			</div>

src/lib/components/dropdown/Item.svelte

@@ -20,8 +20,8 @@
 </script>
 
 <button
+	aria-label="dropdown item"
 	class={finalClass}
-	style={$$props.style}
 	use:useActions={use}
 	use:forwardEvents
 	{...exclude($$props, ['use', 'class'])}

src/lib/components/input-number/InputNumber.svelte

@@ -18,6 +18,8 @@
 	export let handleTrailingClick: (() => void) | undefined = undefined;
 	export let step = '1';
 	export let readonly = false;
+	export let leadingAriaLabel = 'currency leading';
+	export let trailingAriaLabel = 'currency trailing';
 
 	function onlyNumeric(e: KeyboardEvent) {
 		if (!e.key.match(/^[0-9]+$/)) e.preventDefault();
@@ -68,7 +70,11 @@
 
 		{#if leading}
 			{#if handleLeadingClick}
-				<button on:click={handleLeadingClick} class="absolute inset-y-0 left-0 pl-3">
+				<button
+					aria-label={leadingAriaLabel}
+					on:click={handleLeadingClick}
+					class="absolute inset-y-0 left-0 pl-3"
+				>
 					<span
 						transition:scale|local
 						class="material-icons flex items-center"
@@ -90,7 +96,11 @@
 
 		{#if trailing && !error}
 			{#if handleTrailingClick}
-				<button on:click={handleTrailingClick} class="absolute inset-y-0 right-0 pr-3">
+				<button
+					aria-label={trailingAriaLabel}
+					on:click={handleTrailingClick}
+					class="absolute inset-y-0 right-0 pr-3"
+				>
 					<span
 						transition:scale|local
 						class="material-icons flex items-center"

src/lib/components/input/Input.svelte

@@ -28,6 +28,8 @@
 	export let handleTrailingClick: (() => void) | undefined = undefined;
 	export let showPasswordToggle = false;
 	export let allowClear = false;
+	export let leadingAriaLabel = 'input leading';
+	export let trailingAriaLabel = 'input trailing';
 
 	let input: HTMLInputElement;
 
@@ -103,7 +105,11 @@
 
 		{#if leading}
 			{#if handleLeadingClick}
-				<button on:click={handleLeadingClick} class="absolute inset-y-0 left-0 pl-3">
+				<button
+					aria-label={leadingAriaLabel}
+					on:click={handleLeadingClick}
+					class="absolute inset-y-0 left-0 pl-3"
+				>
 					<span
 						transition:scale|local
 						class="material-icons flex items-center"
@@ -125,6 +131,7 @@
 
 		{#if allowClear && value && value.length > 0}
 			<button
+				aria-label="clear"
 				on:click={handleClear}
 				class="absolute inset-y-0 hidden group-focus-within:flex active:flex items-center"
 				class:right-10={showPasswordToggle || trailing || error}
@@ -159,7 +166,11 @@
 			</Swap>
 		{:else if trailing && !error}
 			{#if handleTrailingClick}
-				<button on:click={handleTrailingClick} class="absolute inset-y-0 right-0 pr-3">
+				<button
+					aria-label={trailingAriaLabel}
+					on:click={handleTrailingClick}
+					class="absolute inset-y-0 right-0 pr-3"
+				>
 					<span
 						transition:scale|local
 						class="material-icons flex items-center"

src/lib/components/lightbox/LightBox.svelte

@@ -137,6 +137,7 @@
 				>
 					{#each slides as _, i}
 						<button
+							aria-label="quick view slide {i + 1}"
 							on:click={() => handleGoTo(i)}
 							class="h-1.5 rounded-sm bg-light-surface max-w-[40px] hover:shadow-lg hover:opacity-90"
 							class:opacity-50={activeSlide !== i}
@@ -161,6 +162,7 @@
 					{/key}
 				</div>
 				<button
+					aria-label="previous slide"
 					in:fly={{ delay: 250, x: -200 }}
 					out:fade
 					on:click={handlePrevious}
@@ -176,6 +178,7 @@
 					</div>
 				</button>
 				<button
+					aria-label="next slide"
 					in:fly={{ delay: 250, x: 200 }}
 					out:fade
 					on:click={handleNext}

src/lib/components/menu/Group.svelte

@@ -111,6 +111,7 @@
 				(!$menuCollapse && !active && menuActive)}
 		>
 			<button
+				aria-label="toggle collapse menu"
 				on:click={!$menuCollapse ? toggleOpen : undefined}
 				class="px-3 py-2 relative flex items-center w-full text-sm font-medium justify-between outline-none focus:outline-none"
 				type="button"