#1892 Add ARIA labels for better accessibility

Author: zxyctn

src/lib/components/Table/ColumnsMenu.svelte

@@ -15,6 +15,7 @@
 <button
 	type="button"
 	class="btn btn-sm variant-filled-primary rounded-full order-last"
+	aria-label="Open menu to hide/show columns"
 	use:popup={popupCombobox}>Columns</button
 >
 
@@ -25,6 +26,7 @@
 	{#each columns as column}
 		<div class="flex gap-3 items-center">
 			<input
+				aria-label="Toggle column visibility for column {column.label}"
 				type="checkbox"
 				bind:checked={column.visible}
 				disabled={columns.filter((c) => c.visible).length === 1 && column.visible}

src/lib/components/Table/TableContent.svelte

@@ -394,7 +394,7 @@
 						} else {
 							sendModel.q = searchValue;
 						}
-            
+
 						$filterValue = searchValue;
 					}}
 				>
@@ -409,6 +409,7 @@
 							type="reset"
 							id="{tableId}-searchReset"
 							class="absolute right-3 items-center"
+							aria-label="Clear search"
 							on:click|preventDefault={() => {
 								if (serverSide && !sendModel) {
 									throw new Error('Server-side configuration is missing');

src/lib/components/Table/TableFilter.svelte

@@ -240,6 +240,7 @@
 		type="button"
 		use:popup={popupFeatured}
 		id="{popupId}-button"
+		aria-label="Open filter menu for column {id}"
 	>
 		<Fa icon={faFilter} size="12" />
 	</button>
@@ -249,6 +250,7 @@
 			<button
 				class="btn variant-filled-primary btn-sm"
 				type="button"
+				aria-label="Clear Filters"
 				on:click|preventDefault={() => {
 					// Set the defaults when cleared
 					clearFilters();
@@ -273,6 +275,7 @@
 								{#each options[type] as option (option)}
 									<option
 										value={option.value}
+										aria-label={option.label}
 										selected={dropdown.option === option.value}
 										disabled={Object.keys($filters[id]).includes(option.value) &&
 											dropdown.option !== option.value}>{option.label}</option
@@ -282,6 +285,7 @@
 							{#if dropdowns.length > 1}
 								<div
 									class="btn variant-filled-warning btn-sm h-full"
+									aria-label="Remove filter"
 									on:click|preventDefault={() => removeFilter(dropdown.option)}
 									on:keydown|preventDefault={() => removeFilter(dropdown.option)}
 								>
@@ -296,13 +300,15 @@
 								class="input p-1 border border-primary-500"
 								on:input={(e) => valueChangeHandler(e, index)}
 								bind:value={dropdown.value}
+								aria-label="Filter value"
 							/>
 						{:else}
 							<input
 								type="date"
 								class="input p-1 border border-primary-500"
 								on:input={(e) => valueChangeHandler(e, index)}
 								bind:value={dropdown.formValue}
+								aria-label="Filter value"
 							/>
 						{/if}
 					</div>
@@ -321,13 +327,15 @@
 					on:keydown|stopPropagation={() => {
 						addFilter(remainingFilters[0].value, undefined);
 					}}
+					aria-label="Add filter"
 				>
 					<div class="flex gap-1 items-center"><Fa icon={faPlus} />Add Filter</div>
 				</div>
 			{/if}
 			<button
 				class="btn variant-filled-primary btn-sm"
 				type="button"
+				aria-label="Apply filters"
 				on:click|preventDefault={() => {
 					$pageIndex = 0;
 					$filterValue = $filters[id];

src/lib/components/Table/TableFilterServer.svelte

@@ -233,6 +233,7 @@
 		type="button"
 		use:popup={popupFeatured}
 		id="{popupId}-button"
+		aria-label="Open filter menu for column {id}"
 	>
 		<Fa icon={faFilter} size="12" />
 	</button>
@@ -242,6 +243,7 @@
 			<button
 				class="btn variant-filled-primary btn-sm"
 				type="button"
+				aria-label="Clear Filters"
 				on:click|preventDefault={() => {
 					// Set the defaults when cleared
 					clearFilters();
@@ -264,6 +266,7 @@
 								{#each options[type] as option (option)}
 									<option
 										value={option.value}
+										aria-label={option.label}
 										selected={dropdown.option === option.value}
 										disabled={Object.keys($filters[id]).includes(option.value) &&
 											dropdown.option !== option.value}>{option.label}</option
@@ -275,7 +278,8 @@
 									class="btn variant-filled-warning btn-sm h-full"
 									on:click|preventDefault={() => removeFilter(dropdown.option)}
 									on:keydown|preventDefault={() => removeFilter(dropdown.option)}
-								>
+									aria-label="Remove filter"
+									>
 									<Fa icon={faXmark} />
 								</div>
 							{/if}
@@ -294,13 +298,15 @@
 								class="input p-1 border border-primary-500"
 								on:input={(e) => valueChangeHandler(e, index)}
 								bind:value={dropdown.value}
+								aria-label="Filter value"
 							/>
 						{:else}
 							<input
 								type="date"
 								class="input p-1 border border-primary-500"
 								on:input={(e) => valueChangeHandler(e, index)}
 								bind:value={dropdown.value}
+								aria-label="Filter value"
 							/>
 						{/if}
 					</div>
@@ -313,6 +319,7 @@
 			{#if remainingFilters.length}
 				<div
 					class="btn variant-filled-secondary btn-sm cursor-pointer"
+					aria-label="Add filter"
 					on:click|stopPropagation={() => {
 						addFilter(remainingFilters[0].value, undefined);
 					}}
@@ -326,6 +333,7 @@
 			<button
 				class="btn variant-filled-primary btn-sm"
 				type="button"
+				aria-label="Apply filters"
 				on:click|preventDefault={applyFilters}>Apply</button
 			>
 		</div>

src/lib/components/Table/TablePagination.svelte

@@ -62,7 +62,11 @@
 			{/each}
 		</select> -->
 
-		<button class="btn variant-filled-primary w-20 justify-between" use:popup={pageSizePopup}>
+		<button
+			aria-label="Open menu to select number of items per page"
+			class="btn variant-filled-primary w-20 justify-between"
+			use:popup={pageSizePopup}
+		>
 			<span class="capitalize font-semibold">{pageSizeDropdownValue}</span>
 			<Fa icon={faChevronDown} size="xs" />
 		</button>
@@ -82,6 +86,7 @@
 		<button
 			class="btn btn-sm variant-filled-primary"
 			on:click|preventDefault={goToFirstPage}
+			aria-label="Go to first page"
 			disabled={goToFirstPageDisabled}
 			id="{id}-first"
 		>
@@ -90,6 +95,7 @@
 		<button
 			class="btn btn-sm variant-filled-primary"
 			id="{id}-previous"
+			aria-label="Go to previous page"
 			on:click|preventDefault={goToPreviousPage}
 			disabled={goToPreviousPageDisabled}><Fa icon={faAngleLeft} /></button
 		>
@@ -98,17 +104,20 @@
 			class="input border border-primary-500 rounded flex w-24"
 			value={$pageIndex + 1}
 			max={$pageCount}
+			aria-label="Current page"
 			min={1}
 			on:change={handleChange}
 		/>
 		<button
 			class="btn btn-sm variant-filled-primary"
 			id="{id}-next"
+			aria-label="Go to next page"
 			on:click|preventDefault={goToNextPage}
 			disabled={goToNextPageDisabled}><Fa icon={faAngleRight} /></button
 		>
 		<button
 			class="btn btn-sm variant-filled-primary"
+			aria-label="Go to last page"
 			id="{id}-last"
 			on:click|preventDefault={goToLastPage}
 			disabled={goToLastPageDisabled}><Fa icon={faAnglesRight} /></button

src/lib/components/Table/TablePaginationServer.svelte

@@ -73,6 +73,7 @@
 		<select
 			name="pageSize"
 			id="{id}-pageSize"
+			aria-label="Open menu to select number of items per page"
 			class="select variant-filled-primary w-min font-bold"
 			bind:value={$pageSize}
 		>
@@ -86,19 +87,22 @@
 			class="btn btn-sm variant-filled-primary"
 			on:click|preventDefault={() => goTo('first')}
 			disabled={goToFirstPageDisabled}
+			aria-label="Go to first page"
 			id="{id}-first"
 		>
 			<Fa icon={faAnglesLeft} /></button
 		>
 		<button
 			class="btn btn-sm variant-filled-primary"
 			id="{id}-previous"
+			aria-label="Go to previous page"
 			on:click|preventDefault={() => goTo('previous')}
 			disabled={goToPreviousPageDisabled}><Fa icon={faAngleLeft} /></button
 		>
 		<input
 			type="number"
 			class="input border border-primary-500 rounded flex w-24"
+			aria-label="Current page"
 			value={$pageIndex + 1}
 			max={pageCount}
 			min={1}
@@ -108,11 +112,13 @@
 			class="btn btn-sm variant-filled-primary"
 			id="{id}-next"
 			on:click|preventDefault={() => goTo('next')}
+			aria-label="Go to next page"
 			disabled={goToNextPageDisabled}><Fa icon={faAngleRight} /></button
 		>
 		<button
 			class="btn btn-sm variant-filled-primary"
 			id="{id}-last"
+			aria-label="Go to last page"
 			on:click|preventDefault={() => goTo('last')}
 			disabled={goToLastPageDisabled}><Fa icon={faAnglesRight} /></button
 		>