Skip to content

Commit bebdf40

Browse files
geofranzigeofranzi
authored
Merge pull request #105 from BEXIS2/1837_accessibility
Accessibility changes #1837
2 parents 4b0ae7d + 54a6d95 commit bebdf40

17 files changed

+45
-15
lines changed

‎src/docs/Navigation.svelte‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -60,13 +60,13 @@
6060
><div class="flex justify-center py-2">
6161
<LightSwitch />
6262
</div>
63-
<AppRailTile label="General" title="Tile" value={'general'} on:click={onListItemClick}
63+
<AppRailTile label="General" title="General" value={'general'} on:click={onListItemClick}
6464
><i class="fa-solid fa-screwdriver-wrench text-2xl" /></AppRailTile
6565
>
66-
<AppRailTile label="Theme" title="Tile" value={'theme'} on:click={onListItemClick}
66+
<AppRailTile label="Theme" title="Theme" value={'theme'} on:click={onListItemClick}
6767
><i class="fa-solid fa-code-compare text-2xl" /></AppRailTile
6868
>
69-
<AppRailTile label="Components" title="Tile" value={'components'} on:click={onListItemClick}
69+
<AppRailTile label="Components" title="Components" value={'components'} on:click={onListItemClick}
7070
><i class="fa-solid fa-list-check text-2xl" /></AppRailTile
7171
>
7272
</svelte:fragment>
@@ -85,8 +85,8 @@
8585
<nav class="list-nav">
8686
<ul>
8787
{#each list as { href, label, badge }}
88-
<li on:click={onListItemClick} on:keypress>
89-
<a {href} class={classesActive(href)} data-sveltekit-preload-data="hover">
88+
<li>
89+
<a {href} class={classesActive(href)} data-sveltekit-preload-data="hover" on:click={onListItemClick} on:keypress>
9090
<span class="flex-auto">{@html label}</span>
9191
{#if badge}<span class="badge variant-filled-secondary">{badge}</span>{/if}
9292
</a>

‎src/lib/components/CodeEditor/CodeEditor.svelte‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,7 @@
100100
<div class="flex gap-2">
101101
<button
102102
class="btn variant-filled-warning"
103+
title="Reset"
103104
id="{id}-reset"
104105
on:click|preventDefault={() => modalStore.trigger(modal)}
105106
><Fa icon={faArrowRotateLeft} /></button
@@ -108,6 +109,7 @@
108109
class="btn border"
109110
class:bg-slate-700={dark}
110111
class:bg-white={!dark}
112+
title="Toggle dark mode"
111113
id="{id}-toggle"
112114
on:click|preventDefault={() => (dark = !dark)}
113115
>
@@ -124,11 +126,13 @@
124126
<div class="flex gap-2">
125127
<button
126128
class="btn variant-filled-warning"
129+
title="Cancel"
127130
id="{id}-cancel"
128131
on:click|preventDefault={() => dispatch('cancel')}><Fa icon={faXmark} /></button
129132
>
130133
<button
131134
class="btn variant-filled-primary"
135+
title="Save"
132136
id="{id}-save"
133137
disabled={!isValid}
134138
on:click|preventDefault={() => dispatch('save')}><Fa icon={faSave} /></button

‎src/lib/components/File/FileUploader.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -193,7 +193,7 @@
193193
{/if}
194194
</div>
195195

196-
<button id={submitBt} color="primary" style="display:none"><Fa icon={faSave} /></button>
196+
<button title="Submit" id={submitBt} color="primary" style="display:none"><Fa icon={faSave} /></button>
197197
{:else}
198198
<!-- while data is not loaded show a loading information -->
199199

‎src/lib/components/Table/ColumnsMenu.svelte‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414

1515
<button
1616
type="button"
17+
title="Hide or show columns"
1718
class="btn btn-sm variant-filled-primary rounded-full order-last"
1819
aria-label="Open menu to hide/show columns"
1920
use:popup={popupCombobox}>Columns</button
@@ -25,9 +26,11 @@
2526
>
2627
{#each columns as column}
2728
<div class="flex gap-3 items-center">
29+
<label for={column.id} class="cursor-pointer" title={column.label}></label>
2830
<input
2931
aria-label="Toggle column visibility for column {column.label}"
3032
type="checkbox"
33+
id = {column.id}
3134
bind:checked={column.visible}
3235
disabled={columns.filter((c) => c.visible).length === 1 && column.visible}
3336
/>

‎src/lib/components/Table/TableContent.svelte‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -402,11 +402,13 @@
402402
<input
403403
class="input p-2 border border-primary-500"
404404
type="text"
405+
title="Search within all table rows"
405406
bind:value={searchValue}
406407
placeholder="Search rows..."
407408
id="{tableId}-search"
408409
/><button
409410
type="reset"
411+
title="Clear search"
410412
id="{tableId}-searchReset"
411413
class="absolute right-3 items-center"
412414
aria-label="Clear search"
@@ -424,6 +426,7 @@
424426
</div>
425427
<button
426428
type="submit"
429+
title="Search"
427430
id="{tableId}-searchSubmit"
428431
class="btn variant-filled-primary"
429432
on:click|preventDefault={() => {
@@ -449,6 +452,7 @@
449452
{#if toggle}
450453
<SlideToggle
451454
name="slider-label"
455+
label="Fit to screen"
452456
active="bg-primary-500"
453457
size="sm"
454458
checked={fitToScreen}
@@ -462,6 +466,7 @@
462466
{#if resizable !== 'none'}
463467
<button
464468
type="button"
469+
title="Reset column and row sizing"
465470
class="btn btn-sm variant-filled-primary rounded-full order-last"
466471
on:click|preventDefault={() =>
467472
resetResize($headerRows, $pageRows, tableId, columns, resizable)}
@@ -471,6 +476,7 @@
471476
{#if exportable}
472477
<button
473478
type="button"
479+
title="Export table data as CSV"
474480
class="btn btn-sm variant-filled-primary rounded-full order-last"
475481
on:click|preventDefault={() => exportAsCsv(tableId, $exportedData)}
476482
>Export as CSV</button
@@ -487,6 +493,7 @@
487493
{...$tableAttrs}
488494
class="table table-auto table-compact bg-tertiary-500/30 dark:bg-tertiary-900/10 overflow-clip"
489495
id="{tableId}-table"
496+
title="Table"
490497
>
491498
<!-- If table height is provided, making the top row sticky -->
492499
<thead class={height != null && $pageRows.length > 0 ? `sticky top-0` : ''}>
@@ -512,6 +519,8 @@
512519
<div class="flex gap-1 whitespace-pre-wrap">
513520
<!-- Adding sorting config and styling -->
514521
<span
522+
role="button"
523+
tabindex="0"
515524
class:underline={props.sort.order}
516525
class:normal-case={cell.id !== cell.label}
517526
class:cursor-pointer={!props.sort.disabled}

‎src/lib/components/Table/TableFilter.svelte‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -284,6 +284,8 @@
284284
</select>
285285
{#if dropdowns.length > 1}
286286
<div
287+
role="button"
288+
tabindex="0"
287289
class="btn variant-filled-warning btn-sm h-full"
288290
aria-label="Remove filter"
289291
on:click|preventDefault={() => removeFilter(dropdown.option)}
@@ -321,6 +323,8 @@
321323
{#if remainingFilters.length}
322324
<div
323325
class="btn variant-filled-secondary btn-sm cursor-pointer"
326+
role="button"
327+
tabindex="0"
324328
on:click|stopPropagation={() => {
325329
addFilter(remainingFilters[0].value, undefined);
326330
}}

‎src/lib/components/Table/TableFilterServer.svelte‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -275,6 +275,8 @@
275275
</select>
276276
{#if dropdowns.length > 1}
277277
<div
278+
role="button"
279+
tabindex="0"
278280
class="btn variant-filled-warning btn-sm h-full"
279281
on:click|preventDefault={() => removeFilter(dropdown.option)}
280282
on:keydown|preventDefault={() => removeFilter(dropdown.option)}
@@ -320,6 +322,8 @@
320322
<div
321323
class="btn variant-filled-secondary btn-sm cursor-pointer"
322324
aria-label="Add filter"
325+
role="button"
326+
tabindex="0"
323327
on:click|stopPropagation={() => {
324328
addFilter(remainingFilters[0].value, undefined);
325329
}}

‎src/lib/components/Table/TablePaginationServer.svelte‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,7 @@
8585
<div class="flex justify-center gap-1">
8686
<button
8787
class="btn btn-sm variant-filled-primary"
88+
title="Go to first page"
8889
on:click|preventDefault={() => goTo('first')}
8990
disabled={goToFirstPageDisabled}
9091
aria-label="Go to first page"
@@ -94,6 +95,7 @@
9495
>
9596
<button
9697
class="btn btn-sm variant-filled-primary"
98+
title="Go to previous page"
9799
id="{id}-previous"
98100
aria-label="Go to previous page"
99101
on:click|preventDefault={() => goTo('previous')}

‎src/lib/components/form/CheckboxKvPList.svelte‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,14 @@
1515

1616
<InputContainer {id} label={title} {feedback} {required} {help}>
1717
{#each source as item}
18-
<label class="flex items-center space-x-2" for={key}>
18+
<label class="flex items-center space-x-2" for={item.key}>
1919
<input
2020
class="checkbox"
2121
type="checkbox"
2222
bind:group={target}
2323
checked={item.key}
2424
value={item.key}
25+
id={item.key}
2526
/>
2627
<p>{item.value}</p>
2728
</label>

‎src/lib/components/form/CheckboxList.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@
1313

1414
<InputContainer label={title} {feedback} {required}>
1515
{#each source as item}
16-
<label class="flex items-center space-x-2" for={key}>
17-
<input class="checkbox" type="checkbox" bind:group={target} value={item} />
16+
<label class="flex items-center space-x-2" for={item}>
17+
<input class="checkbox" type="checkbox" bind:group={target} value={item} id={item}/>
1818
<p>{item}</p>
1919
</label>
2020
{/each}

0 commit comments

Comments
 (0)