Accessibility changes #1837

geofranzi · geofranzi · commit bc97bb3429b7 · 2024-10-12T00:43:55.000+02:00
diff --git a/src/docs/Navigation.svelte b/src/docs/Navigation.svelte
@@ -60,13 +60,13 @@
 			><div class="flex justify-center py-2">
 				<LightSwitch />
 			</div>
-			<AppRailTile label="General" title="Tile" value={'general'} on:click={onListItemClick}
+			<AppRailTile label="General" title="General" value={'general'} on:click={onListItemClick}
 				><i class="fa-solid fa-screwdriver-wrench text-2xl" /></AppRailTile
 			>
-			<AppRailTile label="Theme" title="Tile" value={'theme'} on:click={onListItemClick}
+			<AppRailTile label="Theme" title="Theme" value={'theme'} on:click={onListItemClick}
 				><i class="fa-solid fa-code-compare text-2xl" /></AppRailTile
 			>
-			<AppRailTile label="Components" title="Tile" value={'components'} on:click={onListItemClick}
+			<AppRailTile label="Components" title="Components" value={'components'} on:click={onListItemClick}
 				><i class="fa-solid fa-list-check text-2xl" /></AppRailTile
 			>
 		</svelte:fragment>
@@ -85,8 +85,8 @@
 				<nav class="list-nav">
 					<ul>
 						{#each list as { href, label, badge }}
-							<li on:click={onListItemClick} on:keypress>
-								<a {href} class={classesActive(href)} data-sveltekit-preload-data="hover">
+							<li>
+								<a {href} class={classesActive(href)} data-sveltekit-preload-data="hover" on:click={onListItemClick} on:keypress>
 									<span class="flex-auto">{@html label}</span>
 									{#if badge}<span class="badge variant-filled-secondary">{badge}</span>{/if}
 								</a>
diff --git a/src/lib/components/CodeEditor/CodeEditor.svelte b/src/lib/components/CodeEditor/CodeEditor.svelte
@@ -100,6 +100,7 @@
 		<div class="flex gap-2">
 			<button
 				class="btn variant-filled-warning"
+				title="Reset"
 				id="{id}-reset"
 				on:click|preventDefault={() => modalStore.trigger(modal)}
 				><Fa icon={faArrowRotateLeft} /></button
@@ -108,6 +109,7 @@
 					class="btn border"
 					class:bg-slate-700={dark}
 					class:bg-white={!dark}
+					title="Toggle dark mode"
 					id="{id}-toggle"
 					on:click|preventDefault={() => (dark = !dark)}
 				>
@@ -124,11 +126,13 @@
 			<div class="flex gap-2">
 				<button
 					class="btn variant-filled-warning"
+					title="Cancel"
 					id="{id}-cancel"
 					on:click|preventDefault={() => dispatch('cancel')}><Fa icon={faXmark} /></button
 				>
 				<button
 					class="btn variant-filled-primary"
+					title="Save"
 					id="{id}-save"
 					disabled={!isValid}
 					on:click|preventDefault={() => dispatch('save')}><Fa icon={faSave} /></button
diff --git a/src/lib/components/File/FileUploader.svelte b/src/lib/components/File/FileUploader.svelte
@@ -193,7 +193,7 @@
 			{/if}
 		</div>
 
-		<button id={submitBt} color="primary" style="display:none"><Fa icon={faSave} /></button>
+		<button title="Submit" id={submitBt} color="primary" style="display:none"><Fa icon={faSave} /></button>
 	{:else}
 		<!-- while data is not loaded show a loading information -->
 
diff --git a/src/lib/components/Table/ColumnsMenu.svelte b/src/lib/components/Table/ColumnsMenu.svelte
@@ -14,6 +14,7 @@
 
 <button
 	type="button"
+	title="Hide or show columns"
 	class="btn btn-sm variant-filled-primary rounded-full order-last"
 	use:popup={popupCombobox}>Columns</button
 >
@@ -24,8 +25,10 @@
 >
 	{#each columns as column}
 		<div class="flex gap-3 items-center">
+			<label for={column.id} class="cursor-pointer" title={column.label}></label>
 			<input
 				type="checkbox"
+				id = {column.id}
 				bind:checked={column.visible}
 				disabled={columns.filter((c) => c.visible).length === 1 && column.visible}
 			/>
diff --git a/src/lib/components/Table/TableContent.svelte b/src/lib/components/Table/TableContent.svelte
@@ -394,19 +394,21 @@
 						} else {
 							sendModel.q = searchValue;
 						}
-            
+
 						$filterValue = searchValue;
 					}}
 				>
 					<div class="relative w-full flex items-center">
 						<input
 							class="input p-2 border border-primary-500"
 							type="text"
+							title="Search within all table rows"
 							bind:value={searchValue}
 							placeholder="Search rows..."
 							id="{tableId}-search"
 						/><button
 							type="reset"
+							title="Clear search"
 							id="{tableId}-searchReset"
 							class="absolute right-3 items-center"
 							on:click|preventDefault={() => {
@@ -423,6 +425,7 @@
 					</div>
 					<button
 						type="submit"
+						title="Search"
 						id="{tableId}-searchSubmit"
 						class="btn variant-filled-primary"
 						on:click|preventDefault={() => {
@@ -448,6 +451,7 @@
 					{#if toggle}
 						<SlideToggle
 							name="slider-label"
+							label="Fit to screen"
 							active="bg-primary-500"
 							size="sm"
 							checked={fitToScreen}
@@ -461,6 +465,7 @@
 					{#if resizable !== 'none'}
 						<button
 							type="button"
+							title="Reset column and row sizing"
 							class="btn btn-sm variant-filled-primary rounded-full order-last"
 							on:click|preventDefault={() =>
 								resetResize($headerRows, $pageRows, tableId, columns, resizable)}
@@ -470,6 +475,7 @@
 					{#if exportable}
 						<button
 							type="button"
+							title="Export table data as CSV"
 							class="btn btn-sm variant-filled-primary rounded-full order-last"
 							on:click|preventDefault={() => exportAsCsv(tableId, $exportedData)}
 							>Export as CSV</button
@@ -486,6 +492,7 @@
 					{...$tableAttrs}
 					class="table table-auto table-compact bg-tertiary-500/30 dark:bg-tertiary-900/10 overflow-clip"
 					id="{tableId}-table"
+					title="Table"
 				>
 					<!-- If table height is provided, making the top row sticky -->
 					<thead class={height != null && $pageRows.length > 0 ? `sticky top-0` : ''}>
@@ -511,6 +518,8 @@
 														<div class="flex gap-1 whitespace-pre-wrap">
 															<!-- Adding sorting config and styling -->
 															<span
+																role="button"
+																tabindex="0"
 																class:underline={props.sort.order}
 																class:normal-case={cell.id !== cell.label}
 																class:cursor-pointer={!props.sort.disabled}
diff --git a/src/lib/components/Table/TableFilter.svelte b/src/lib/components/Table/TableFilter.svelte
@@ -238,6 +238,7 @@
 		class:variant-filled-primary={active}
 		class="btn w-max p-2"
 		type="button"
+		title="Filter"
 		use:popup={popupFeatured}
 		id="{popupId}-button"
 	>
@@ -249,6 +250,7 @@
 			<button
 				class="btn variant-filled-primary btn-sm"
 				type="button"
+				title="Clear Filters"
 				on:click|preventDefault={() => {
 					// Set the defaults when cleared
 					clearFilters();
@@ -281,7 +283,10 @@
 							</select>
 							{#if dropdowns.length > 1}
 								<div
+									role="button"
+									tabindex="0"
 									class="btn variant-filled-warning btn-sm h-full"
+									title="Remove filter"
 									on:click|preventDefault={() => removeFilter(dropdown.option)}
 									on:keydown|preventDefault={() => removeFilter(dropdown.option)}
 								>
@@ -293,13 +298,15 @@
 						{#if type === 'number' || type === 'string'}
 							<input
 								type="text"
+								title="Filter value"
 								class="input p-1 border border-primary-500"
 								on:input={(e) => valueChangeHandler(e, index)}
 								bind:value={dropdown.value}
 							/>
 						{:else}
 							<input
 								type="date"
+								title="Filter value"
 								class="input p-1 border border-primary-500"
 								on:input={(e) => valueChangeHandler(e, index)}
 								bind:value={dropdown.formValue}
@@ -315,6 +322,8 @@
 			{#if remainingFilters.length}
 				<div
 					class="btn variant-filled-secondary btn-sm cursor-pointer"
+					role="button"
+					tabindex="0"
 					on:click|stopPropagation={() => {
 						addFilter(remainingFilters[0].value, undefined);
 					}}
@@ -328,6 +337,7 @@
 			<button
 				class="btn variant-filled-primary btn-sm"
 				type="button"
+				title="Apply"
 				on:click|preventDefault={() => {
 					$pageIndex = 0;
 					$filterValue = $filters[id];
diff --git a/src/lib/components/Table/TableFilterServer.svelte b/src/lib/components/Table/TableFilterServer.svelte
@@ -272,6 +272,8 @@
 							</select>
 							{#if dropdowns.length > 1}
 								<div
+									role="button"
+									tabindex="0"
 									class="btn variant-filled-warning btn-sm h-full"
 									on:click|preventDefault={() => removeFilter(dropdown.option)}
 									on:keydown|preventDefault={() => removeFilter(dropdown.option)}
@@ -313,6 +315,8 @@
 			{#if remainingFilters.length}
 				<div
 					class="btn variant-filled-secondary btn-sm cursor-pointer"
+					role="button"
+					tabindex="0"
 					on:click|stopPropagation={() => {
 						addFilter(remainingFilters[0].value, undefined);
 					}}
diff --git a/src/lib/components/Table/TablePagination.svelte b/src/lib/components/Table/TablePagination.svelte
@@ -62,7 +62,7 @@
 			{/each}
 		</select> -->
 
-		<button class="btn variant-filled-primary w-20 justify-between" use:popup={pageSizePopup}>
+		<button class="btn variant-filled-primary w-20 justify-between" title="Change page size" use:popup={pageSizePopup}>
 			<span class="capitalize font-semibold">{pageSizeDropdownValue}</span>
 			<Fa icon={faChevronDown} size="xs" />
 		</button>
@@ -81,6 +81,7 @@
 	<div class="flex justify-center gap-1">
 		<button
 			class="btn btn-sm variant-filled-primary"
+			title="Go to first page"
 			on:click|preventDefault={goToFirstPage}
 			disabled={goToFirstPageDisabled}
 			id="{id}-first"
@@ -89,26 +90,30 @@
 		>
 		<button
 			class="btn btn-sm variant-filled-primary"
+			title="Go to previous page"
 			id="{id}-previous"
 			on:click|preventDefault={goToPreviousPage}
 			disabled={goToPreviousPageDisabled}><Fa icon={faAngleLeft} /></button
 		>
 		<input
 			type="number"
 			class="input border border-primary-500 rounded flex w-24"
+			title="Go to page"
 			value={$pageIndex + 1}
 			max={$pageCount}
 			min={1}
 			on:change={handleChange}
 		/>
 		<button
 			class="btn btn-sm variant-filled-primary"
+			title="Go to next page"
 			id="{id}-next"
 			on:click|preventDefault={goToNextPage}
 			disabled={goToNextPageDisabled}><Fa icon={faAngleRight} /></button
 		>
 		<button
 			class="btn btn-sm variant-filled-primary"
+			title="Go to last page"
 			id="{id}-last"
 			on:click|preventDefault={goToLastPage}
 			disabled={goToLastPageDisabled}><Fa icon={faAnglesRight} /></button
diff --git a/src/lib/components/Table/TablePaginationServer.svelte b/src/lib/components/Table/TablePaginationServer.svelte
@@ -84,6 +84,7 @@
 	<div class="flex justify-center gap-1">
 		<button
 			class="btn btn-sm variant-filled-primary"
+			title="Go to first page"
 			on:click|preventDefault={() => goTo('first')}
 			disabled={goToFirstPageDisabled}
 			id="{id}-first"
@@ -92,26 +93,30 @@
 		>
 		<button
 			class="btn btn-sm variant-filled-primary"
+			title="Go to previous page"
 			id="{id}-previous"
 			on:click|preventDefault={() => goTo('previous')}
 			disabled={goToPreviousPageDisabled}><Fa icon={faAngleLeft} /></button
 		>
 		<input
 			type="number"
 			class="input border border-primary-500 rounded flex w-24"
+			title="Go to page"
 			value={$pageIndex + 1}
 			max={pageCount}
 			min={1}
 			on:change={handleChange}
 		/>
 		<button
 			class="btn btn-sm variant-filled-primary"
+			title="Go to next page"
 			id="{id}-next"
 			on:click|preventDefault={() => goTo('next')}
 			disabled={goToNextPageDisabled}><Fa icon={faAngleRight} /></button
 		>
 		<button
 			class="btn btn-sm variant-filled-primary"
+			title="Go to last page"
 			id="{id}-last"
 			on:click|preventDefault={() => goTo('last')}
 			disabled={goToLastPageDisabled}><Fa icon={faAnglesRight} /></button
diff --git a/src/lib/components/form/CheckboxKvPList.svelte b/src/lib/components/form/CheckboxKvPList.svelte
@@ -15,13 +15,14 @@
 
 <InputContainer {id} label={title} {feedback} {required} {help}>
 	{#each source as item}
-		<label class="flex items-center space-x-2" for={key}>
+		<label class="flex items-center space-x-2" for={item.key}>
 			<input
 				class="checkbox"
 				type="checkbox"
 				bind:group={target}
 				checked={item.key}
 				value={item.key}
+				id={item.key}
 			/>
 			<p>{item.value}</p>
 		</label>
diff --git a/src/lib/components/form/CheckboxList.svelte b/src/lib/components/form/CheckboxList.svelte
@@ -13,8 +13,8 @@
 
 <InputContainer label={title} {feedback} {required}>
 	{#each source as item}
-		<label class="flex items-center space-x-2" for={key}>
-			<input class="checkbox" type="checkbox" bind:group={target} value={item} />
+		<label class="flex items-center space-x-2" for={item}>
+			<input class="checkbox" type="checkbox" bind:group={target} value={item} id={item}/>
 			<p>{item}</p>
 		</label>
 	{/each}
diff --git a/src/lib/components/form/InputContainer.svelte b/src/lib/components/form/InputContainer.svelte
@@ -16,7 +16,7 @@
 	function onMouseOut() {}
 </script>
 
-<div id="{id}-container" on:mouseover={onMouseOver} on:focus={onMouseOver} on:mouseout={onMouseOut} on:blur={onMouseOut}>
+<div id="{id}-container" role="group" on:mouseover={onMouseOver} on:focus={onMouseOver} on:mouseout={onMouseOut} on:blur={onMouseOut}>
 	<label class="label">
 		<span
 			>{label}
diff --git a/src/lib/components/page/Alert.svelte b/src/lib/components/page/Alert.svelte
@@ -32,7 +32,7 @@
 			<slot name="actions" />
 
 			{#if deleteBtn}
-				<button class="btn hover:text-primary-100" on:click={() => (show = false)}>
+				<button class="btn hover:text-primary-100" title="Close alert" on:click={() => (show = false)}>
 					<Fa icon={faXmark} />
 				</button>
 			{/if}
diff --git a/src/lib/components/page/BackToTop.svelte b/src/lib/components/page/BackToTop.svelte
@@ -26,5 +26,5 @@
 <svelte:window on:scroll={handleOnScroll} />
 
 <div class="w-full items-center">
-	<button class="btn ring back-to-top" on:click={goTop} class:hidden>Back to top</button>
+	<button class="btn ring back-to-top" title="Back to top" on:click={goTop} class:hidden>Back to top</button>
 </div>
diff --git a/src/lib/components/page/GoToTop.svelte b/src/lib/components/page/GoToTop.svelte
@@ -17,6 +17,7 @@
 {#if showGotoTop}
  <button
  id="gotToTop"
+ title="Go to top"
  class="chip variant-filled-warning fixed bottom-5 right-20 shadow-md"
  on:click={gotoTop}
  ><Fa icon={faAngleUp}/></button >
diff --git a/src/lib/components/page/HelpPopUp.svelte b/src/lib/components/page/HelpPopUp.svelte
@@ -45,6 +45,7 @@
 {#if active}
 	<button
 		id="helpButton"
+		title="Open help window"
 		class="chip variant-filled-warning fixed bottom-5 right-10 shadow-md"
 		use:popup={helpClick}><Fa icon={faQuestion} /></button
 	>
diff --git a/src/routes/components/form/examples/RadioGroupExample.svelte b/src/routes/components/form/examples/RadioGroupExample.svelte
diff --git a/src/routes/components/table/components/IsAdmin.svelte b/src/routes/components/table/components/IsAdmin.svelte
diff --git a/src/routes/components/table/components/TableCRUDOptions.svelte b/src/routes/components/table/components/TableCRUDOptions.svelte
