feat(dashboard): more screenreader friendlyness

dashboard/src/lib/group/Edit.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { Row, Col, Input, Button, Label, Alert, Spinner, Modal, ModalHeader, ModalBody } from 'sveltestrap';
-    import { createEventDispatcher } from 'svelte';
+    import { createEventDispatcher, tick } from 'svelte';
     import { Group } from '../../api/types';
     import api from '../../api';
     import autosize from 'svelte-autosize';
@@ -87,6 +87,11 @@
             loading = false;
         }
     }
+
+    async function focus(el) {
+        await tick();
+        el.focus();
+    }
 </script>
 
 {#each err as error}
@@ -95,41 +100,41 @@
 <Row>
     <Col xs={12} lg={4} class="mb-2">
         <Label>Name:</Label>
-        <Input bind:value={input.name} maxlength={100} type="text" placeholder={group.name} />
+        <Input bind:value={input.name} maxlength={100} type="text" placeholder={group.name} aria-label="group name" />
     </Col>
     <Col xs={12} lg={4} class="mb-2">
         <Label>Display name:</Label>
-        <textarea class="form-control" style="resize: none; height: 1em" bind:value={input.display_name} maxlength={100} type="text" placeholder={group.display_name} />
+        <textarea class="form-control" style="resize: none; height: 1em" bind:value={input.display_name} maxlength={100} type="text" placeholder={group.display_name} aria-label="group display name"/>
     </Col>
     <Col xs={12} lg={4} class="mb-2">
         <Label>Color:</Label>
-        <Input bind:value={input.color} type="text" placeholder={group.color}/>
+        <Input bind:value={input.color} type="text" placeholder={group.color} aria-label="group color"/>
     </Col>
     <Col xs={12} lg={4} class="mb-2">
         <Label>Icon url:</Label>
-        <Input bind:value={input.icon} maxlength={256} type="url" placeholder={group.icon}/>
+        <Input bind:value={input.icon} maxlength={256} type="url" placeholder={group.icon} aria-label="group icon url"/>
     </Col>
     <Col xs={12} lg={4} class="mb-2">
         <Label>Banner url:</Label>
-        <Input bind:value={input.banner} maxlength={256} type="url" placeholder={group.banner}/>
+        <Input bind:value={input.banner} maxlength={256} type="url" placeholder={group.banner} aria-label="group banner url"/>
     </Col>
 </Row>
 <div class="my-2">
     <b>Description:</b><br />
     {#if descriptions.length > 0 && descriptions[0].trim() != ""}
-    <Button size="sm" color="primary" on:click={() => input.description = descriptions[0]}>Template 1</Button>
+    <Button size="sm" color="primary" on:click={() => input.description = descriptions[0]} aria-label="use template 1">Template 1</Button>
     {/if}
     {#if descriptions.length > 1 && descriptions[1].trim() != ""}
-    <Button size="sm" color="primary" on:click={() => input.description = descriptions[1]}>Template 2</Button>
+    <Button size="sm" color="primary" on:click={() => input.description = descriptions[1]} aria-label="use template 2">Template 2</Button>
     {/if}
     {#if descriptions.length > 2 && descriptions[2].trim() != ""}
-    <Button size="sm" color="primary" on:click={() => input.description = descriptions[2]}>Template 3</Button>
+    <Button size="sm" color="primary" on:click={() => input.description = descriptions[2]} aria-label="use template 3">Template 3</Button>
     {/if}
     <br>
-    <textarea class="form-control" bind:value={input.description} maxlength={1000} use:autosize placeholder={group.description}/>
+    <textarea class="form-control" bind:value={input.description} maxlength={1000} use:autosize placeholder={group.description} aria-label="group description"/>
 </div>
-{#if !loading}<Button style="flex: 0" color="primary" on:click={submit}>Submit</Button> <Button style="flex: 0" color="secondary" on:click={() => editMode = false}>Back</Button><Button style="flex: 0; float: right;" color="danger" on:click={toggleDeleteModal}>Delete</Button>
+{#if !loading}<Button style="flex: 0" color="primary" on:click={submit} aria-label="submit edits">Submit</Button> <Button style="flex: 0" color="secondary" on:click={() => editMode = false} aria-label="cancel edits">Back</Button><Button style="flex: 0; float: right;" color="danger" on:click={toggleDeleteModal} aria-label="delete group">Delete</Button>
-{:else}<Button style="flex: 0" color="primary" disabled><Spinner size="sm"/></Button> <Button style="flex: 0" color="secondary" disabled>Back</Button><Button style="flex: 0; float: right;" color="danger" disabled>Delete</Button>{/if}
+{:else}<Button style="flex: 0" color="primary" disabled aria-label="submit edits"><Spinner size="sm"/></Button> <Button style="flex: 0" color="secondary" disabled aria-label="cancel edits">Back</Button><Button style="flex: 0; float: right;" color="danger" disabled aria-label="delete group">Delete</Button>{/if}
 <Modal size="lg" isOpen={deleteOpen} toggle={toggleDeleteModal}>
     <ModalHeader toggle={toggleDeleteModal}>
         Delete member
@@ -137,9 +142,9 @@
          <ModalBody>
              {#if deleteErr}<Alert color="danger">{deleteErr}</Alert>{/if}
              <Label>If you're sure you want to delete this group, type out the group ID (<code>{group.id}</code>) below.</Label>
-             <Input class="mb-3" bind:value={deleteInput} maxlength={7} placeholder={group.id}></Input>
+             <input class="mb-3 form-control" bind:value={deleteInput} maxlength={7} placeholder={group.id} aria-label={`type out the group id ${group.id} to confirm deletion`} use:focus>
-            {#if !loading}<Button style="flex 0" color="danger" on:click={submitDelete}>Delete</Button> <Button style="flex: 0" color="secondary" on:click={toggleDeleteModal}>Back</Button>
+            {#if !loading}<Button style="flex 0" color="danger" on:click={submitDelete} aria-label="confirm delete">Delete</Button> <Button style="flex: 0" color="secondary" on:click={toggleDeleteModal} aria-label="cancel delete">Back</Button>
-            {:else}<Button style="flex 0" color="danger" disabled><Spinner size="sm"/></Button> <Button style="flex: 0" color="secondary" disabled>Back</Button>
+            {:else}<Button style="flex 0" color="danger" disabled aria-label="confirm delete"><Spinner size="sm"/></Button> <Button style="flex: 0" color="secondary" disabled aria-label="cancel delete">Back</Button>
             {/if}
         </ModalBody>
 </Modal>

dashboard/src/lib/group/MemberEdit.svelte

@@ -127,20 +127,20 @@ function memberListRenderer(item: any) {
         <h5><div class="icon d-inline-block">
             <FaUserPlus />
         </div>Add Members</h5>
-        <Svelecte renderer="member-list" disableHighlight bind:value={membersToBeAdded} options={membersNotInGroupSelection} multiple/>
+        <Svelecte renderer="member-list" disableHighlight bind:value={membersToBeAdded} options={membersNotInGroupSelection} multiple aria-label="search for members to add"/>
         {#if !loading && membersToBeAdded && membersToBeAdded.length > 0}
-        <Button class="w-100 mt-2" color="primary" on:click={submitAdd}>Add</Button>{:else}
+        <Button class="w-100 mt-2" color="primary" on:click={submitAdd} aria-label="add members">Add</Button>{:else}
-        <Button class="w-100 mt-2" color="primary" disabled>{#if loading}<Spinner size="sm" />{:else}Add{/if}</Button>
+        <Button class="w-100 mt-2" color="primary" disabled aria-label="add members">{#if loading}<Spinner size="sm" />{:else}Add{/if}</Button>
         {/if}
         <hr/>
         <h5><div class="icon d-inline-block">
             <FaUserMinus />
         </div>Remove Members</h5>
-        <Svelecte renderer="member-list" disableHighlight bind:value={membersToBeRemoved} options={membersInGroupSelection} multiple/>
+        <Svelecte renderer="member-list" disableHighlight bind:value={membersToBeRemoved} options={membersInGroupSelection} multiple aria-label="search for members to remove"/>
         {#if !loading && membersToBeRemoved && membersToBeRemoved.length > 0}
-        <Button class="w-100 mt-2" color="primary" on:click={submitRemove}>Remove</Button>{:else}
+        <Button class="w-100 mt-2" color="primary" on:click={submitRemove} aria-label="remove members">Remove</Button>{:else}
-        <Button class="w-100 mt-2" color="primary" disabled>{#if loading}<Spinner size="sm" />{:else}Remove{/if}</Button>
+        <Button class="w-100 mt-2" color="primary" disabled aria-label="remove members">{#if loading}<Spinner size="sm" />{:else}Remove{/if}</Button>
         {/if}
     </Col>
 </Row>
-<Button style="flex: 0" color="secondary" on:click={() => memberMode = false}>Back</Button>
+<Button style="flex: 0" color="secondary" on:click={() => memberMode = false} aria-label="back to group card">Back</Button>

dashboard/src/lib/group/Privacy.svelte

@@ -65,7 +65,7 @@
     <Alert color="danger">{err}</Alert>
     {/if}
     <Label><b>Set all to:</b></Label>
-    <select class="form-select" bind:value={allPrivacy} use:focus>
+    <select class="form-select" bind:value={allPrivacy} use:focus aria-label="set all to">
         <option>public</option>
         <option>private</option>
     </select>
@@ -73,47 +73,47 @@
     <Row>
         <Col xs={12} lg={6} class="mb-3">
             <Label>Description:</Label>
-            <Input type="select" bind:value={input.privacy.description_privacy}>
+            <Input type="select" bind:value={input.privacy.description_privacy} aria-label="group description privacy">
                 <option default={group.privacy.description_privacy === "public"}>public</option>
                 <option default={group.privacy.description_privacy === "private"}>private</option>
             </Input>
         </Col>
         <Col xs={12} lg={6} class="mb-3">
             <Label>Name:</Label>
-            <Input type="select" bind:value={input.privacy.name_privacy}>
+            <Input type="select" bind:value={input.privacy.name_privacy} aria-label="group name privacy">
                 <option default={group.privacy.name_privacy === "public"}>public</option>
                 <option default={group.privacy.name_privacy === "private"}>private</option>
             </Input>
         </Col>
         <Col xs={12} lg={6} class="mb-3">
             <Label>Member list:</Label>
-            <Input type="select" bind:value={input.privacy.list_privacy}>
+            <Input type="select" bind:value={input.privacy.list_privacy} aria-label="group member list privacy">
                 <option default={group.privacy.list_privacy === "public"}>public</option>
                 <option default={group.privacy.list_privacy === "private"}>private</option>
             </Input>
         </Col>
         <Col xs={12} lg={6} class="mb-3">
             <Label>Icon:</Label>
-            <Input type="select" bind:value={input.privacy.icon_privacy}>
+            <Input type="select" bind:value={input.privacy.icon_privacy} aria-label="group icon privacy">
                 <option default={group.privacy.icon_privacy === "public"}>public</option>
                 <option default={group.privacy.icon_privacy === "private"}>private</option>
             </Input>
         </Col>
         <Col xs={12} lg={6} class="mb-3">
             <Label>Visibility:</Label>
-            <Input type="select" bind:value={input.privacy.visibility}>
+            <Input type="select" bind:value={input.privacy.visibility} aria-label="group visibility privacy">
                 <option default={group.privacy.visibility === "public"}>public</option>
                 <option default={group.privacy.visibility === "private"}>private</option>
             </Input>
         </Col>
         <Col xs={12} lg={6} class="mb-3">
             <Label>Metadata:</Label>
-            <Input type="select" bind:value={input.privacy.metadata_privacy}>
+            <Input type="select" bind:value={input.privacy.metadata_privacy} aria-label="group metadata privacy">
                 <option default={group.privacy.metadata_privacy === "public"}>public</option>
                 <option default={group.privacy.metadata_privacy === "private"}>private</option>
             </Input>
         </Col>
     </Row>
-    {#if !loading}<Button style="flex: 0" color="primary" on:click={submit}>Submit</Button> <Button style="flex: 0" color="secondary" on:click={togglePrivacyModal}>Back</Button>
+    {#if !loading}<Button style="flex: 0" color="primary" on:click={submit} aria-label="submit privacy edits">Submit</Button> <Button style="flex: 0" color="secondary" on:click={togglePrivacyModal} aria-label="cancel privacy edits">Back</Button>
-    {:else}<Button style="flex: 0" color="primary" disabled><Spinner size="sm"/></Button> <Button style="flex: 0" color="secondary" disabled>Back</Button>
+    {:else}<Button style="flex: 0" color="primary" disabled aria-label="submit privacy edits"><Spinner size="sm"/></Button> <Button style="flex: 0" color="secondary" disabled aria-label="cancel privacy edits">Back</Button>
     {/if}

dashboard/src/lib/member/Edit.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { Row, Col, Input, Button, Label, Alert, Spinner, Modal, ModalHeader, ModalBody } from 'sveltestrap';
-    import { createEventDispatcher } from 'svelte';
+    import { createEventDispatcher, tick } from 'svelte';
     import autosize from 'svelte-autosize';
     import moment from 'moment';
 
@@ -102,6 +102,11 @@
             loading = false;
         }
     }
+
+    async function focus(el) {
+        await tick();
+        el.focus();
+    }
 </script>
 
 {#each err as error}
@@ -110,49 +115,49 @@
 <Row>
     <Col xs={12} lg={4} class="mb-2">
         <Label>Name:</Label>
-        <Input bind:value={input.name} maxlength={100} type="text" placeholder={member.name} />
+        <Input bind:value={input.name} maxlength={100} type="text" placeholder={member.name} aria-label="member name"/>
     </Col>
     <Col xs={12} lg={4} class="mb-2">
         <Label>Display name:</Label>
-        <textarea class="form-control" style="resize: none; height: 1em" bind:value={input.display_name} maxlength={100} type="text" placeholder={member.display_name} />
+        <textarea class="form-control" style="resize: none; height: 1em" bind:value={input.display_name} maxlength={100} type="text" placeholder={member.display_name} aria-label="member display name" />
     </Col>
     <Col xs={12} lg={4} class="mb-2">
         <Label>Pronouns:</Label>
-        <textarea class="form-control" style="resize: none; height: 1em" bind:value={input.pronouns} maxlength={100} type="text" placeholder={member.pronouns} />
+        <textarea class="form-control" style="resize: none; height: 1em" bind:value={input.pronouns} maxlength={100} type="text" placeholder={member.pronouns} aria-label="member pronouns" />
     </Col>
     <Col xs={12} lg={4} class="mb-2">
         <Label>Birthday:</Label>
-        <Input bind:value={input.birthday} maxlength={100} type="text" placeholder={member.birthday} />
+        <Input bind:value={input.birthday} maxlength={100} type="text" placeholder={member.birthday} aria-label="member birthday" />
     </Col>
     <Col xs={12} lg={4} class="mb-2">
         <Label>Color:</Label>
-        <Input bind:value={input.color} type="text" placeholder={member.color}/>
+        <Input bind:value={input.color} type="text" placeholder={member.color} aria-label="member color" />
     </Col>
     <Col xs={12} lg={4} class="mb-2">
         <Label>Avatar url:</Label>
-        <Input bind:value={input.avatar_url} maxlength={256} type="url" placeholder={member.avatar_url}/>
+        <Input bind:value={input.avatar_url} maxlength={256} type="url" placeholder={member.avatar_url} aria-label="member avatar url"/>
     </Col>
     <Col xs={12} lg={4} class="mb-2">
         <Label>Banner url:</Label>
-        <Input bind:value={input.banner} maxlength={256} type="url" placeholder={member.banner}/>
+        <Input bind:value={input.banner} maxlength={256} type="url" placeholder={member.banner} aria-label="member banner url"/>
     </Col>
 </Row>
 <div class="my-2">
     <b>Description:</b><br />
     {#if descriptions.length > 0 && descriptions[0].trim() != ""}
-    <Button size="sm" color="primary" on:click={() => input.description = descriptions[0]}>Template 1</Button>
+    <Button size="sm" color="primary" on:click={() => input.description = descriptions[0]} aria-label="use template 1">Template 1</Button>
     {/if}
     {#if descriptions.length > 1 && descriptions[1].trim() != ""}
-    <Button size="sm" color="primary" on:click={() => input.description = descriptions[1]}>Template 2</Button>
+    <Button size="sm" color="primary" on:click={() => input.description = descriptions[1]} aria-label="use template 2">Template 2</Button>
     {/if}
     {#if descriptions.length > 2 && descriptions[2].trim() != ""}
-    <Button size="sm" color="primary" on:click={() => input.description = descriptions[2]}>Template 3</Button>
+    <Button size="sm" color="primary" on:click={() => input.description = descriptions[2]} aria-label="use template 3">Template 3</Button>
     {/if}
     <br>
-    <textarea class="form-control" bind:value={input.description} maxlength={1000} use:autosize placeholder={member.description}/>
+    <textarea class="form-control" bind:value={input.description} maxlength={1000} use:autosize placeholder={member.description} aria-label="member description"/>
 </div>
-{#if !loading}<Button style="flex: 0" color="primary" on:click={submit}>Submit</Button> <Button style="flex: 0" color="secondary" on:click={() => editMode = false}>Back</Button><Button style="flex: 0; float: right;" color="danger" on:click={toggleDeleteModal}>Delete</Button>
+{#if !loading}<Button style="flex: 0" color="primary" on:click={submit} aria-label="submit edits" >Submit</Button> <Button style="flex: 0" color="secondary" on:click={() => editMode = false} aria-label="cancel edits">Back</Button><Button style="flex: 0; float: right;" color="danger" on:click={toggleDeleteModal} aria-label="delete member">Delete</Button>
-{:else}<Button style="flex: 0" color="primary" disabled><Spinner size="sm"/></Button> <Button style="flex: 0" color="secondary" disabled>Back</Button><Button style="flex: 0; float: right;" color="danger" disabled>Delete</Button>{/if}
+{:else}<Button style="flex: 0" color="primary" disabled  aria-label="submit edits"><Spinner size="sm"/></Button> <Button style="flex: 0" color="secondary" disabled aria-label="cancel edits">Back</Button><Button style="flex: 0; float: right;" color="danger" disabled aria-label="delete member">Delete</Button>{/if}
 <Modal size="lg" isOpen={deleteOpen} toggle={toggleDeleteModal}>
     <ModalHeader toggle={toggleDeleteModal}>
         Delete member
@@ -160,9 +165,9 @@
          <ModalBody>
              {#if deleteErr}<Alert color="danger">{deleteErr}</Alert>{/if}
              <Label>If you're sure you want to delete this member, type out the member ID (<code>{member.id}</code>) below.</Label>
-             <Input class="mb-3" bind:value={deleteInput} maxlength={7} placeholder={member.id}></Input>
+             <input class="mb-3 form-control" bind:value={deleteInput} maxlength={7} placeholder={member.id} aria-label={`type out the member id ${member.id} to confirm deletion`} use:focus>
-            {#if !loading}<Button style="flex 0" color="danger" on:click={submitDelete}>Delete</Button> <Button style="flex: 0" color="secondary" on:click={toggleDeleteModal}>Back</Button>
+            {#if !loading}<Button style="flex 0" color="danger" on:click={submitDelete} aria-label="confirm delete">Delete</Button> <Button style="flex: 0" color="secondary" on:click={toggleDeleteModal} aria-label="cancel deletion">Back</Button>
-            {:else}<Button style="flex 0" color="danger" disabled><Spinner size="sm"/></Button> <Button style="flex: 0" color="secondary" disabled>Back</Button>
+            {:else}<Button style="flex 0" color="danger" disabled><Spinner size="sm"/></Button> <Button style="flex: 0" color="secondary" disabled aria-label="cancel deletion">Back</Button>
             {/if}
         </ModalBody>
 </Modal>

dashboard/src/lib/member/GroupEdit.svelte

@@ -128,20 +128,20 @@
         <h5><div class="icon d-inline-block">
             <FaFolderPlus />
         </div>Add to Groups</h5>
-        <Svelecte renderer="member-list" disableHighlight bind:value={groupsToBeAdded} options={groupsWithoutMemberSelection} multiple/>
+        <Svelecte renderer="member-list" disableHighlight bind:value={groupsToBeAdded} options={groupsWithoutMemberSelection} multiple aria-label="search for groups to add"/>
         {#if !loading && groupsToBeAdded && groupsToBeAdded.length > 0}
-        <Button class="w-100 mt-2" color="primary" on:click={submitAdd}>Add</Button>{:else}
+        <Button class="w-100 mt-2" color="primary" on:click={submitAdd} aria-label="add groups to member">Add</Button>{:else}
-        <Button class="w-100 mt-2" color="primary" disabled>{#if loading}<Spinner size="sm" />{:else}Add{/if}</Button>
+        <Button class="w-100 mt-2" color="primary" disabled aria-label="add groups to member">{#if loading}<Spinner size="sm" />{:else}Add{/if}</Button>
         {/if}
         <hr/>
         <h5><div class="icon d-inline-block">
             <FaFolderMinus />
         </div>Remove from Groups</h5>
-        <Svelecte renderer="member-list" disableHighlight bind:value={groupsToBeRemoved} options={groupsWithMemberSelection} multiple/>
+        <Svelecte renderer="member-list" disableHighlight bind:value={groupsToBeRemoved} options={groupsWithMemberSelection} multiple aria-label="search for groups to remove"/>
         {#if !loading && groupsToBeRemoved && groupsToBeRemoved.length > 0}
-        <Button class="w-100 mt-2" color="primary" on:click={submitRemove}>Remove</Button>{:else}
+        <Button class="w-100 mt-2" color="primary" on:click={submitRemove} aria-label="remove groups from member">Remove</Button>{:else}
-        <Button class="w-100 mt-2" color="primary" disabled>{#if loading}<Spinner size="sm" />{:else}Remove{/if}</Button>
+        <Button class="w-100 mt-2" color="primary" disabled aria-label="remove groups from member">{#if loading}<Spinner size="sm" />{:else}Remove{/if}</Button>
         {/if}
     </Col>
 </Row>
-<Button style="flex: 0" color="secondary" on:click={() => groupMode = false}>Back</Button>
+<Button style="flex: 0" color="secondary" on:click={() => groupMode = false} aria-label="back to member card">Back</Button>

dashboard/src/lib/member/Privacy.svelte

@@ -67,7 +67,7 @@
     <Alert color="danger">{err}</Alert>
     {/if}
     <Label><b>Set all to:</b></Label>
-    <select class="form-select" bind:value={allPrivacy} use:focus>
+    <select class="form-select" bind:value={allPrivacy} use:focus aria-label="set all to">
         <option>public</option>
         <option>private</option>
     </select>
@@ -75,54 +75,54 @@
     <Row>
         <Col xs={12} lg={6} class="mb-3">
             <Label>Description:</Label>
-            <Input type="select" bind:value={input.privacy.description_privacy}>
+            <Input type="select" bind:value={input.privacy.description_privacy} aria-label="member description privacy">
                 <option default={member.privacy.description_privacy === "public"}>public</option>
                 <option default={member.privacy.description_privacy === "private"}>private</option>
             </Input>
         </Col>
         <Col xs={12} lg={6} class="mb-3">
             <Label>Name:</Label>
-            <Input type="select" bind:value={input.privacy.name_privacy}>
+            <Input type="select" bind:value={input.privacy.name_privacy} aria-label="member name privacy">
                 <option default={member.privacy.name_privacy === "public"}>public</option>
                 <option default={member.privacy.name_privacy === "private"}>private</option>
             </Input>
         </Col>
         <Col xs={12} lg={6} class="mb-3">
             <Label>Avatar:</Label>
-            <Input type="select" bind:value={input.privacy.avatar_privacy}>
+            <Input type="select" bind:value={input.privacy.avatar_privacy} aria-label="member avatar privacy">
                 <option default={member.privacy.avatar_privacy === "public"}>public</option>
                 <option default={member.privacy.avatar_privacy === "private"}>private</option>
             </Input>
         </Col>
         <Col xs={12} lg={6} class="mb-3">
             <Label>Birthday:</Label>
-            <Input type="select" bind:value={input.privacy.birthday_privacy}>
+            <Input type="select" bind:value={input.privacy.birthday_privacy} aria-label="member birthday privacy">
                 <option default={member.privacy.birthday_privacy === "public"}>public</option>
                 <option default={member.privacy.birthday_privacy === "private"}>private</option>
             </Input>
         </Col>
         <Col xs={12} lg={6} class="mb-3">
             <Label>Pronouns:</Label>
-            <Input type="select" bind:value={input.privacy.pronoun_privacy}>
+            <Input type="select" bind:value={input.privacy.pronoun_privacy} aria-label="member pronoun privacy">
                 <option default={member.privacy.pronoun_privacy === "public"}>public</option>
                 <option default={member.privacy.pronoun_privacy === "private"}>private</option>
             </Input>
         </Col>
         <Col xs={12} lg={6} class="mb-3">
             <Label>Visibility:</Label>
-            <Input type="select" bind:value={input.privacy.visibility}>
+            <Input type="select" bind:value={input.privacy.visibility} aria-label="member visibility privacy">
                 <option default={member.privacy.visibility === "public"}>public</option>
                 <option default={member.privacy.visibility === "private"}>private</option>
             </Input>
         </Col>
         <Col xs={12} lg={6} class="mb-3">
             <Label>Metadata:</Label>
-            <Input type="select" bind:value={input.privacy.metadata_privacy}>
+            <Input type="select" bind:value={input.privacy.metadata_privacy} aria-label="member metadata privacy">
                 <option default={member.privacy.metadata_privacy === "public"}>public</option>
                 <option default={member.privacy.metadata_privacy === "private"}>private</option>
             </Input>
         </Col>
     </Row>
-{#if !loading}<Button style="flex: 0" color="primary" on:click={submit}>Submit</Button> <Button style="flex: 0" color="secondary" on:click={togglePrivacyModal}>Back</Button>
+    {#if !loading}<Button style="flex: 0" color="primary" on:click={submit} aria-label="submit privacy edits">Submit</Button> <Button style="flex: 0" color="secondary" on:click={togglePrivacyModal} aria-label="cancel privacy edits">Back</Button>
-{:else}<Button style="flex: 0" color="primary" disabled><Spinner size="sm"/></Button> <Button style="flex: 0" color="secondary" disabled>Back</Button>
+    {:else}<Button style="flex: 0" color="primary" disabled aria-label="submit privacy edits"><Spinner size="sm"/></Button> <Button style="flex: 0" color="secondary" disabled aria-label="cancel privacy edits">Back</Button>
-{/if}
+    {/if}

dashboard/src/lib/member/ProxyTags.svelte

@@ -59,9 +59,9 @@
     {#each input as proxyTag, index (index)}
     <Col xs={12} lg={6} class="mb-2">
         <InputGroup>
-            <textarea class="form-control" style="resize: none; height: 1em" bind:value={proxyTag.prefix} use:focus={index === 0 ? true : false}/>
+            <textarea class="form-control" style="resize: none; height: 1em" bind:value={proxyTag.prefix} use:focus={index === 0 ? true : false} aria-label="proxy tag prefix"/>
             <Input disabled value="text"/>
-            <Input style="resize: none; height: 1em" type="textarea" bind:value={proxyTag.suffix}/>
+            <Input style="resize: none; height: 1em" type="textarea" bind:value={proxyTag.suffix} aria-label="proxy tag suffix"/>
         </InputGroup>
     </Col>
     {/each}
@@ -69,6 +69,6 @@
         <Button class="w-100" color="secondary" on:click={() => {input.push({prefix: "", suffix: ""}); input = input;}}>New</Button>
     </Col>
 </Row>
-{#if !loading}<Button style="flex 0" color="primary" on:click={submit}>Submit</Button> <Button style="flex: 0" color="secondary" on:click={toggleProxyModal}>Back</Button>
+{#if !loading}<Button style="flex 0" color="primary" on:click={submit} aria-label="submit proxy tags">Submit</Button> <Button style="flex: 0" color="secondary" on:click={toggleProxyModal} aria-label="go back">Back</Button>
-{:else}<Button style="flex 0" color="primary" disabled><Spinner size="sm"/></Button> <Button style="flex: 0" color="secondary" disabled>Back</Button>
+{:else}<Button style="flex 0" color="primary" disabled aria-label="submit proxy tags"><Spinner size="sm"/></Button> <Button style="flex: 0" color="secondary" disabled aria-label="go back">Back</Button>
 {/if}

dashboard/src/lib/system/Edit.svelte

@@ -59,41 +59,37 @@
 <Row>
     <Col xs={12} lg={4} class="mb-2">
         <Label>Name:</Label>
-        <Input bind:value={input.name} maxlength={100} type="text" placeholder={user.name} />
+        <Input bind:value={input.name} maxlength={100} type="text" placeholder={user.name} aria-label="system name" />
     </Col>
     <Col xs={12} lg={4} class="mb-2">
         <Label>Tag:</Label>
-        <Input bind:value={input.tag} maxlength={100} type="text" placeholder={user.tag} />
+        <Input bind:value={input.tag} maxlength={100} type="text" placeholder={user.tag} aria-label="system tag" />
     </Col>
-    <!-- <Col xs={12} lg={4} class="mb-2">
-        <Label>Timezone:</Label>
-        <Input bind:value={input.timezone} type="text" placeholder={user.timezone} />
-    </Col> -->
     <Col xs={12} lg={4} class="mb-2">
         <Label>Color:</Label>
-        <Input bind:value={input.color} type="text" placeholder={user.color}/>
+        <Input bind:value={input.color} type="text" placeholder={user.color} aria-label="system color"/>
     </Col>
     <Col xs={12} lg={4} class="mb-2">
         <Label>Avatar url:</Label>
-        <Input bind:value={input.avatar_url} maxlength={256} type="url" placeholder={user.avatar_url}/>
+        <Input bind:value={input.avatar_url} maxlength={256} type="url" placeholder={user.avatar_url} aria-label="system avatar url" />
     </Col>
     <Col xs={12} lg={4} class="mb-2">
         <Label>Banner url:</Label>
-        <Input bind:value={input.banner} maxlength={256} type="url" placeholder={user.banner}/>
+        <Input bind:value={input.banner} maxlength={256} type="url" placeholder={user.banner} aria-label="system banner url" />
     </Col>
 </Row>
 <div class="my-2">
     <b>Description:</b><br />
     {#if descriptions.length > 0 && descriptions[0].trim() != ""}
-    <Button size="sm" color="primary" on:click={() => input.description = descriptions[0]}>Template 1</Button>
+    <Button size="sm" color="primary" on:click={() => input.description = descriptions[0]} aria-label="use template 1">Template 1</Button>
     {/if}
     {#if descriptions.length > 1 && descriptions[1].trim() != ""}
-    <Button size="sm" color="primary" on:click={() => input.description = descriptions[1]}>Template 2</Button>
+    <Button size="sm" color="primary" on:click={() => input.description = descriptions[1]} aria-label="use template 2">Template 2</Button>
     {/if}
     {#if descriptions.length > 2 && descriptions[2].trim() != ""}
-    <Button size="sm" color="primary" on:click={() => input.description = descriptions[2]}>Template 3</Button>
+    <Button size="sm" color="primary" on:click={() => input.description = descriptions[2]} aria-label="use template 3">Template 3</Button>
     {/if}
     <br>
-    <textarea class="form-control" bind:value={input.description} maxlength={1000} use:autosize placeholder={user.description}/>
+    <textarea class="form-control" bind:value={input.description} maxlength={1000} use:autosize placeholder={user.description}  aria-label="system description"/>
 </div>
-<Button style="flex: 0" color="primary" on:click={submit}>Submit</Button> <Button style="flex: 0" color="light" on:click={() => editMode = false}>Back</Button>
+<Button style="flex: 0" color="primary" on:click={submit} aria-label="submit edits">Submit</Button> <Button style="flex: 0" color="light" on:click={() => editMode = false} aria-label="cancel edits" >Back</Button>

dashboard/src/lib/system/PrivacyEdit.svelte

@@ -51,7 +51,7 @@
     <Alert color="danger">{err}</Alert>
 {/if}
 <Label><b>Set all to:</b></Label>
-<Input type="select" bind:value={allPrivacy}>
+<Input type="select" bind:value={allPrivacy} aria-label="set all to">
     <option>public</option>
     <option>private</option>
 </Input>
@@ -59,38 +59,38 @@
 <Row>
     <Col xs={12} lg={4} class="mb-3">
         <Label>Description:</Label>
-        <Input type="select" bind:value={input.privacy.description_privacy}>
+        <Input type="select" bind:value={input.privacy.description_privacy} aria-label="system description privacy">
             <option default={user.privacy.description_privacy === "public"}>public</option>
             <option default={user.privacy.description_privacy === "private"}>private</option>
         </Input>
     </Col>
     <Col xs={12} lg={4} class="mb-3">
         <Label>Member list:</Label>
-        <Input type="select" bind:value={input.privacy.member_list_privacy}>
+        <Input type="select" bind:value={input.privacy.member_list_privacy} aria-label="system member list privacy">
             <option default={user.privacy.member_list_privacy === "public"}>public</option>
             <option default={user.privacy.member_list_privacy === "private"}>private</option>
         </Input>
     </Col>
     <Col xs={12} lg={4} class="mb-3">
         <Label>Group list:</Label>
-        <Input type="select" bind:value={input.privacy.group_list_privacy}>
+        <Input type="select" bind:value={input.privacy.group_list_privacy} aria-label="system group list privacy">
             <option default={user.privacy.group_list_privacy === "public"}>public</option>
             <option default={user.privacy.group_list_privacy === "private"}>private</option>
         </Input>
     </Col>
     <Col xs={12} lg={4} class="mb-3">
         <Label>Current front:</Label>
-        <Input type="select" bind:value={input.privacy.front_privacy}>
+        <Input type="select" bind:value={input.privacy.front_privacy} aria-label="system front privacy">
             <option default={user.privacy.front_privacy === "public"}>public</option>
             <option default={user.privacy.front_privacy === "private"}>private</option>
         </Input>
     </Col>
     <Col xs={12} lg={4} class="mb-3">
         <Label>Front history:</Label>
-        <Input type="select" bind:value={input.privacy.front_history_privacy}>
+        <Input type="select" bind:value={input.privacy.front_history_privacy} aria-label="system front history privacy">
             <option default={user.privacy.front_history_privacy === "public"}>public</option>
             <option default={user.privacy.front_history_privacy === "private"}>private</option>
         </Input>
     </Col>
 </Row>
-<Button style="flex: 0" color="primary" on:click={submit}>Submit</Button> <Button style="flex: 0" color="secondary" on:click={() => editMode = false}>Back</Button>
+<Button style="flex: 0" color="primary" on:click={submit} aria-label="submit privacy edit">Submit</Button> <Button style="flex: 0" color="secondary" on:click={() => editMode = false} aria-label="cancel privacy edit">Back</Button>

dashboard/src/pages/BulkGroupPrivacy.svelte

@@ -71,7 +71,7 @@
 					<Alert color="success">Group privacy updated!</Alert>
 					{/if}
 					<Label><b>Set all to:</b></Label>
-					<Input type="select" on:change={(e) => changeAll(e)}>
+					<Input type="select" on:change={(e) => changeAll(e)} aria-label="set all to">
 						<option>no change</option>
 						<option>public</option>
 						<option>private</option>
@@ -81,7 +81,7 @@
 						{#each Object.keys(privacy) as x}
 						<Col xs={12} lg={6} class="mb-3">
 							<Label>{privacyNames[x]}:</Label>
-							<Input type="select" bind:value={privacy[x]}>
+							<Input type="select" bind:value={privacy[x]} aria-label={`group ${privacyNames[x]} privacy`}>
 								<option default>no change</option>
 								<option>public</option>
 								<option>private</option>
@@ -90,7 +90,7 @@
 						{/each}
 					</Row>
 
-					<Button color="primary" on:click={submit} bind:disabled={loading}>
+					<Button color="primary" on:click={submit} bind:disabled={loading} aria-label="submit bulk group privacy">
 						{#if loading}
 						<Spinner />
 						{:else}

dashboard/src/pages/BulkMemberPrivacy.svelte

@@ -73,7 +73,7 @@ import Member from './Member.svelte';
 					<Alert color="success">Member privacy updated!</Alert>
 					{/if}
 					<Label><b>Set all to:</b></Label>
-					<Input type="select" on:change={(e) => changeAll(e)}>
+					<Input type="select" on:change={(e) => changeAll(e)} aria-label="set all to">
 						<option>no change</option>
 						<option>public</option>
 						<option>private</option>
@@ -83,7 +83,7 @@ import Member from './Member.svelte';
 						{#each Object.keys(privacy) as x}
 						<Col xs={12} lg={6} class="mb-3">
 							<Label>{privacyNames[x]}:</Label>
-							<Input type="select" bind:value={privacy[x]}>
+							<Input type="select" bind:value={privacy[x]} aria-label={`member ${privacyNames[x]} privacy`}>
 								<option default>no change</option>
 								<option>public</option>
 								<option>private</option>
@@ -92,7 +92,7 @@ import Member from './Member.svelte';
 						{/each}
 					</Row>
 
-					<Button color="primary" on:click={submit} bind:disabled={loading}>
+					<Button color="primary" on:click={submit} bind:disabled={loading} aria-label="submit bulk member privacy">
 						{#if loading}
 						<Spinner />
 						{:else}