tomas/pocketbase
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[#1702] added aria-label to some buttons for accessibility

Browse Source 
Co-authored-by: Nolan Darilek <nolan@thewordnerd.info>
This commit is contained in:
Gani Georgiev
2023-01-28 20:13:15 +02:00
parent 51ee1b5367
commit c51148e4d7
36 changed files with 82 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/components/admins/AdminUpsertPanel.svelte
+1 -1
View File
@@ -233,7 +233,7 @@
<svelte:fragment slot="footer">
{#if !admin.isNew}
<button type="button" class="btn btn-sm btn-circle btn-transparent">
<button type="button" aria-label="More" class="btn btn-sm btn-circle btn-transparent">
<!-- empty span for alignment -->
<span />
<i class="ri-more-line" />
ui/src/components/base/RefreshButton.svelte
+1
View File
@@ -30,6 +30,7 @@
<button
type="button"
aria-label="Refresh"
class="btn btn-transparent btn-circle"
class:refreshing={refreshTimeoutId}
use:tooltip={tooltipData}
ui/src/components/collections/CollectionUpsertPanel.svelte
+1 -1
View File
@@ -249,7 +249,7 @@
{#if !collection.isNew && !collection.system}
<div class="flex-fill" />
<button type="button" class="btn btn-sm btn-circle btn-transparent flex-gap-0">
<button type="button" aria-label="More" class="btn btn-sm btn-circle btn-transparent flex-gap-0">
<i class="ri-more-line" />
<Toggler class="dropdown dropdown-right m-t-5">
<button type="button" class="dropdown-item closable" on:click={() => duplicateConfirm()}>
ui/src/components/collections/FieldAccordion.svelte
+1 -1
View File
@@ -308,7 +308,7 @@
<div class="col-sm-4 txt-right">
<div class="flex-fill" />
<div class="inline-flex flex-gap-sm flex-nowrap">
<button type="button" class="btn btn-circle btn-sm btn-transparent">
<button type="button" aria-label="More" class="btn btn-circle btn-sm btn-transparent">
<i class="ri-more-line" />
<Toggler
class="dropdown dropdown-sm dropdown-upside dropdown-right dropdown-nowrap no-min-width"
ui/src/components/records/PageRecords.svelte
+1
View File
@@ -106,6 +106,7 @@
{#if !$hideControls}
<button
type="button"
aria-label="Edit collection"
class="btn btn-transparent btn-circle"
use:tooltip={{ text: "Edit collection", position: "right" }}
on:click={() => collectionUpsertPanel?.show($activeCollection)}
ui/src/components/records/RecordUpsertPanel.svelte
+27 -33
View File
@@ -286,48 +286,42 @@
{#if !record.isNew}
<div class="flex-fill" />
<button type="button" class="btn btn-sm btn-circle btn-transparent">
<div class="content">
<i class="ri-more-line" />
<Toggler class="dropdown dropdown-right dropdown-nowrap">
{#if collection.isAuth && !original.verified && original.email}
<button
type="button"
class="dropdown-item closable"
on:click={() => sendVerificationEmail()}
>
<i class="ri-mail-check-line" />
<span class="txt">Send verification email</span>
</button>
{/if}
{#if collection.isAuth && original.email}
<button
type="button"
class="dropdown-item closable"
on:click={() => sendPasswordResetEmail()}
>
<i class="ri-mail-lock-line" />
<span class="txt">Send password reset email</span>
</button>
{/if}
<button type="button" aria-label="More" class="btn btn-sm btn-circle btn-transparent flex-gap-0">
<i class="ri-more-line" />
<Toggler class="dropdown dropdown-right dropdown-nowrap">
{#if collection.isAuth && !original.verified && original.email}
<button
type="button"
class="dropdown-item closable"
on:click={() => duplicateConfirm()}
on:click={() => sendVerificationEmail()}
>
<i class="ri-file-copy-line" />
<span class="txt">Duplicate</span>
<i class="ri-mail-check-line" />
<span class="txt">Send verification email</span>
</button>
{/if}
{#if collection.isAuth && original.email}
<button
type="button"
class="dropdown-item txt-danger closable"
on:click|preventDefault|stopPropagation={() => deleteConfirm()}
class="dropdown-item closable"
on:click={() => sendPasswordResetEmail()}
>
<i class="ri-delete-bin-7-line" />
<span class="txt">Delete</span>
<i class="ri-mail-lock-line" />
<span class="txt">Send password reset email</span>
</button>
</Toggler>
</div>
{/if}
<button type="button" class="dropdown-item closable" on:click={() => duplicateConfirm()}>
<i class="ri-file-copy-line" />
<span class="txt">Duplicate</span>
</button>
<button
type="button"
class="dropdown-item txt-danger closable"
on:click|preventDefault|stopPropagation={() => deleteConfirm()}
>
<i class="ri-delete-bin-7-line" />
<span class="txt">Delete</span>
</button>
</Toggler>
</button>
{/if}
ui/src/components/records/RecordsList.svelte
+6 -1
View File
@@ -345,7 +345,12 @@
{/if}
<th class="col-type-action min-width">
<button bind:this={columnsTrigger} type="button" class="btn btn-sm btn-transparent p-0">
<button
bind:this={columnsTrigger}
type="button"
aria-label="Toggle columns"
class="btn btn-sm btn-transparent p-0"
>
<i class="ri-more-line" />
</button>
</th>