liz/PluralKit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(dashboard): make lists more screenreader friendly

Browse Source
This commit is contained in:
Draconizations
2022-05-20 12:29:20 +02:00
parent 857eda0629
commit 4758e378e3
2 changed files with 14 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
dashboard/src/lib/group/List.svelte
View File

@@ -198,7 +198,7 @@
<Col xs={12} lg={3} class="mb-2">
<InputGroup>
<InputGroupText>Page length</InputGroupText>
<Input bind:value={itemsPerPageValue} type="select">
<Input bind:value={itemsPerPageValue} type="select" aria-label="page length">
<option>10</option>
<option>25</option>
<option>50</option>
@@ -208,7 +208,7 @@
<Col xs={12} lg={3} class="mb-2">
<InputGroup>
<InputGroupText>Search by</InputGroupText>
<Input bind:value={searchBy} type="select">
<Input bind:value={searchBy} type="select" aria-label="search by">
<option>name</option>
<option>display name</option>
<option>description</option>
@@ -219,7 +219,7 @@
<Col xs={12} lg={3} class="mb-2">
<InputGroup>
<InputGroupText>Sort by</InputGroupText>
<Input bind:value={sortBy} type="select">
<Input bind:value={sortBy} type="select" aria-label="sort by">
<option>name</option>
<option>display name</option>
{#if !isPublic}<option>creation date</option>{/if}
@@ -230,7 +230,7 @@
<Col xs={12} lg={3} class="mb-2">
<InputGroup>
<InputGroupText>Sort order</InputGroupText>
<Input bind:value={sortOrder} type="select">
<Input bind:value={sortOrder} type="select" aria-label="sort order">
<option>ascending</option>
<option>descending</option>
</Input>
@@ -240,7 +240,7 @@
<Col xs={12} lg={3} class="mb-2">
<InputGroup>
<InputGroupText>Only show</InputGroupText>
<Input bind:value={privacyFilter} type="select">
<Input bind:value={privacyFilter} type="select" aria-label="only show">
<option>all</option>
<option>public</option>
<option>private</option>
@@ -277,7 +277,7 @@
<Alert color="danger">{err}</Alert>
</Col>
<Col xs={12} lg={2}>
<Button class="w-100 mb-3" color="primary" on:click={fetchGroups}>Refresh</Button>
<Button class="w-100 mb-3" color="primary" on:click={fetchGroups} aria-label="refresh group list">Refresh</Button>
</Col>
</Row>
{:else}
@@ -287,7 +287,7 @@
<Input class="mb-3" bind:value={searchValue} placeholder="search by {searchBy}..."/>
</Col>
<Col xs={12} lg={2}>
<Button class="w-100 mb-3" color="primary" on:click={fetchGroups}>Refresh</Button>
<Button class="w-100 mb-3" color="primary" on:click={fetchGroups} aria-label="refresh group list">Refresh</Button>
</Col>
</Row>
<ListPagination bind:currentPage bind:pageAmount />

14
dashboard/src/lib/member/List.svelte
View File

@@ -197,7 +197,7 @@
<Col xs={12} lg={3} class="mb-2">
<InputGroup>
<InputGroupText>Page length</InputGroupText>
<Input bind:value={itemsPerPageValue} type="select">
<Input bind:value={itemsPerPageValue} type="select" aria-label="page length">
<option>10</option>
<option>25</option>
<option>50</option>
@@ -207,7 +207,7 @@
<Col xs={12} lg={3} class="mb-2">
<InputGroup>
<InputGroupText>Search by</InputGroupText>
<Input bind:value={searchBy} type="select">
<Input bind:value={searchBy} type="select" aria-label="search by">
<option>name</option>
<option>display name</option>
<option>description</option>
@@ -218,7 +218,7 @@
<Col xs={12} lg={3} class="mb-2">
<InputGroup>
<InputGroupText>Sort by</InputGroupText>
<Input bind:value={sortBy} type="select">
<Input bind:value={sortBy} type="select" aria-label="sort by">
<option>name</option>
<option>display name</option>
{#if !isPublic}<option>creation date</option>{/if}
@@ -229,7 +229,7 @@
<Col xs={12} lg={3} class="mb-2">
<InputGroup>
<InputGroupText>Sort order</InputGroupText>
<Input bind:value={sortOrder} type="select">
<Input bind:value={sortOrder} type="select" aria-label="sort order">
<option>ascending</option>
<option>descending</option>
</Input>
@@ -239,7 +239,7 @@
<Col xs={12} lg={3} class="mb-2">
<InputGroup>
<InputGroupText>Only show</InputGroupText>
<Input bind:value={privacyFilter} type="select">
<Input bind:value={privacyFilter} type="select" aria-label="only show">
<option>all</option>
<option>public</option>
<option>private</option>
@@ -276,7 +276,7 @@
<Alert color="danger">{err}</Alert>
</Col>
<Col xs={12} lg={2}>
<Button class="w-100 mb-3" color="primary" on:click={fetchMembers}>Refresh</Button>
<Button class="w-100 mb-3" color="primary" on:click={fetchMembers} aria-label="refresh member list">Refresh</Button>
</Col>
</Row>
{:else}
@@ -286,7 +286,7 @@
<Input class="mb-3" bind:value={searchValue} placeholder="search by {searchBy}..."/>
</Col>
<Col xs={12} lg={2} class="mb-3 mb-lg-0">
<Button class="w-100 mb-3" color="primary" on:click={fetchMembers}>Refresh</Button>
<Button class="w-100 mb-3" color="primary" on:click={fetchMembers} aria-label="refresh member list">Refresh</Button>
</Col>
</Row>
<ListPagination bind:currentPage bind:pageAmount />