Merge pull request #111 from BEXIS2/table

Replace titles with ARIA-labels

Author: DavidBlaa

src/lib/components/Table/ColumnsMenu.svelte

@@ -17,7 +17,6 @@
 	title="Hide or show columns"
 	class="btn btn-sm variant-filled-primary rounded-full order-last"
 	aria-label="Open menu to hide/show columns"
-	title="Open menu to hide/show columns"
 	use:popup={popupCombobox}>Columns</button
 >
 

src/lib/components/Table/TableContent.svelte

@@ -413,7 +413,6 @@
 							id="{tableId}-searchReset"
 							class="absolute right-3 items-center"
 							aria-label="Clear search"
-							title="Clear search"
 							on:click|preventDefault={() => {
 								if (serverSide && !sendModel) {
 									throw new Error('Server-side configuration is missing');
@@ -431,7 +430,7 @@
 						title="Search"
 						id="{tableId}-searchSubmit"
 						class="btn variant-filled-primary"
-						title="Search"
+						aria-label="Search"
 						on:click|preventDefault={() => {
 							if (serverSide && !sendModel) {
 								throw new Error('Server-side configuration is missing');
@@ -475,7 +474,7 @@
 							type="button"
 							title="Reset column and row sizing"
 							class="btn btn-sm variant-filled-primary rounded-full order-last"
-							title="Reset sizing of columns and rows"
+							aria-label="Reset sizing of columns and rows"
 							on:click|preventDefault={() =>
 								resetResize($headerRows, $pageRows, tableId, columns, resizable)}
 							>Reset sizing</button
@@ -486,7 +485,7 @@
 							type="button"
 							title="Export table data as CSV"
 							class="btn btn-sm variant-filled-primary rounded-full order-last"
-							title="Export table data as CSV"
+							aria-label="Export table data as CSV"
 							on:click|preventDefault={() => exportAsCsv(tableId, $exportedData)}
 							>Export as CSV</button
 						>

src/lib/components/Table/TableFilter.svelte

@@ -241,7 +241,6 @@
 		use:popup={popupFeatured}
 		id="{popupId}-button"
 		aria-label="Open filter menu for {id} column"
-		title="Open filter menu for {id} column"
 	>
 		<Fa icon={faFilter} size="12" />
 	</button>
@@ -252,7 +251,6 @@
 				class="btn variant-filled-primary btn-sm"
 				type="button"
 				aria-label="Clear Filters"
-				title="Clear Filters"
 				on:click|preventDefault={() => {
 					// Set the defaults when cleared
 					clearFilters();
@@ -271,15 +269,13 @@
 							<select
 								class="select border border-primary-500 text-sm p-1"
 								aria-label="Show rows with value that"
-								title="Show rows with value that"
 								on:change={(e) => optionChangeHandler(e, index)}
 								bind:value={dropdown.option}
 							>
 								{#each options[type] as option (option)}
 									<option
 										value={option.value}
 										aria-label={option.label}
-										title={option.label}
 										selected={dropdown.option === option.value}
 										disabled={Object.keys($filters[id]).includes(option.value) &&
 											dropdown.option !== option.value}>{option.label}</option
@@ -292,7 +288,6 @@
 									tabindex="0"
 									class="btn variant-filled-warning btn-sm h-full"
 									aria-label="Remove filter"
-									title="Remove filter"
 									on:click|preventDefault={() => removeFilter(dropdown.option)}
 									on:keydown|preventDefault={() => removeFilter(dropdown.option)}
 								>
@@ -308,7 +303,6 @@
 								on:input={(e) => valueChangeHandler(e, index)}
 								bind:value={dropdown.value}
 								aria-label="Filter value"
-								title="Filter value"
 							/>
 						{:else}
 							<input
@@ -317,7 +311,6 @@
 								on:input={(e) => valueChangeHandler(e, index)}
 								bind:value={dropdown.formValue}
 								aria-label="Filter value"
-								title="Filter value"
 							/>
 						{/if}
 					</div>
@@ -339,7 +332,6 @@
 						addFilter(remainingFilters[0].value, undefined);
 					}}
 					aria-label="Add filter"
-					title="Add filter"
 				>
 					<div class="flex gap-1 items-center"><Fa icon={faPlus} />Add Filter</div>
 				</div>
@@ -348,7 +340,6 @@
 				class="btn variant-filled-primary btn-sm"
 				type="button"
 				aria-label="Apply filters"
-				title="Apply filters"
 				on:click|preventDefault={() => {
 					$pageIndex = 0;
 					$filterValue = $filters[id];

src/lib/components/Table/TablePagination.svelte

@@ -64,7 +64,6 @@
 
 		<button
 			aria-label="Open menu to select number of items to display per page"
-			title="Open menu to select number of items to display per page"
 			class="btn variant-filled-primary w-20 justify-between"
 			use:popup={pageSizePopup}
 		>
@@ -88,7 +87,6 @@
 			class="btn btn-sm variant-filled-primary"
 			on:click|preventDefault={goToFirstPage}
 			aria-label="Go to first page"
-			title="Go to first page"
 			disabled={goToFirstPageDisabled}
 			id="{id}-first"
 		>
@@ -98,7 +96,6 @@
 			class="btn btn-sm variant-filled-primary"
 			id="{id}-previous"
 			aria-label="Go to previous page"
-			title="Go to previous page"
 			on:click|preventDefault={goToPreviousPage}
 			disabled={goToPreviousPageDisabled}><Fa icon={faAngleLeft} /></button
 		>
@@ -108,22 +105,19 @@
 			value={$pageIndex + 1}
 			max={$pageCount}
 			aria-label="Current page"
-			title="Current page"
 			min={1}
 			on:change={handleChange}
 		/>
 		<button
 			class="btn btn-sm variant-filled-primary"
 			id="{id}-next"
 			aria-label="Go to next page"
-			title="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"
-			title="Go to last page"
 			id="{id}-last"
 			on:click|preventDefault={goToLastPage}
 			disabled={goToLastPageDisabled}><Fa icon={faAnglesRight} /></button