liz/PluralKit
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
Show Stats 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"> <Col xs={12} lg={3} class="mb-2">
<InputGroup> <InputGroup>
<InputGroupText>Page length</InputGroupText> <InputGroupText>Page length</InputGroupText>
<Input bind:value={itemsPerPageValue} type="select"> <Input bind:value={itemsPerPageValue} type="select" aria-label="page length">
<option>10</option> <option>10</option>
<option>25</option> <option>25</option>
<option>50</option> <option>50</option>
@ -208,7 +208,7 @@
<Col xs={12} lg={3} class="mb-2"> <Col xs={12} lg={3} class="mb-2">
<InputGroup> <InputGroup>
<InputGroupText>Search by</InputGroupText> <InputGroupText>Search by</InputGroupText>
<Input bind:value={searchBy} type="select"> <Input bind:value={searchBy} type="select" aria-label="search by">
<option>name</option> <option>name</option>
<option>display name</option> <option>display name</option>
<option>description</option> <option>description</option>
@ -219,7 +219,7 @@
<Col xs={12} lg={3} class="mb-2"> <Col xs={12} lg={3} class="mb-2">
<InputGroup> <InputGroup>
<InputGroupText>Sort by</InputGroupText> <InputGroupText>Sort by</InputGroupText>
<Input bind:value={sortBy} type="select"> <Input bind:value={sortBy} type="select" aria-label="sort by">
<option>name</option> <option>name</option>
<option>display name</option> <option>display name</option>
{#if !isPublic}<option>creation date</option>{/if} {#if !isPublic}<option>creation date</option>{/if}
@ -230,7 +230,7 @@
<Col xs={12} lg={3} class="mb-2"> <Col xs={12} lg={3} class="mb-2">
<InputGroup> <InputGroup>
<InputGroupText>Sort order</InputGroupText> <InputGroupText>Sort order</InputGroupText>
<Input bind:value={sortOrder} type="select"> <Input bind:value={sortOrder} type="select" aria-label="sort order">
<option>ascending</option> <option>ascending</option>
<option>descending</option> <option>descending</option>
</Input> </Input>
@ -240,7 +240,7 @@
<Col xs={12} lg={3} class="mb-2"> <Col xs={12} lg={3} class="mb-2">
<InputGroup> <InputGroup>
<InputGroupText>Only show</InputGroupText> <InputGroupText>Only show</InputGroupText>
<Input bind:value={privacyFilter} type="select"> <Input bind:value={privacyFilter} type="select" aria-label="only show">
<option>all</option> <option>all</option>
<option>public</option> <option>public</option>
<option>private</option> <option>private</option>
@ -277,7 +277,7 @@
<Alert color="danger">{err}</Alert> <Alert color="danger">{err}</Alert>
</Col> </Col>
<Col xs={12} lg={2}> <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> </Col>
</Row> </Row>
{:else} {:else}
@ -287,7 +287,7 @@
<Input class="mb-3" bind:value={searchValue} placeholder="search by {searchBy}..."/> <Input class="mb-3" bind:value={searchValue} placeholder="search by {searchBy}..."/>
</Col> </Col>
<Col xs={12} lg={2}> <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> </Col>
</Row> </Row>
<ListPagination bind:currentPage bind:pageAmount /> <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"> <Col xs={12} lg={3} class="mb-2">
<InputGroup> <InputGroup>
<InputGroupText>Page length</InputGroupText> <InputGroupText>Page length</InputGroupText>
<Input bind:value={itemsPerPageValue} type="select"> <Input bind:value={itemsPerPageValue} type="select" aria-label="page length">
<option>10</option> <option>10</option>
<option>25</option> <option>25</option>
<option>50</option> <option>50</option>
@ -207,7 +207,7 @@
<Col xs={12} lg={3} class="mb-2"> <Col xs={12} lg={3} class="mb-2">
<InputGroup> <InputGroup>
<InputGroupText>Search by</InputGroupText> <InputGroupText>Search by</InputGroupText>
<Input bind:value={searchBy} type="select"> <Input bind:value={searchBy} type="select" aria-label="search by">
<option>name</option> <option>name</option>
<option>display name</option> <option>display name</option>
<option>description</option> <option>description</option>
@ -218,7 +218,7 @@
<Col xs={12} lg={3} class="mb-2"> <Col xs={12} lg={3} class="mb-2">
<InputGroup> <InputGroup>
<InputGroupText>Sort by</InputGroupText> <InputGroupText>Sort by</InputGroupText>
<Input bind:value={sortBy} type="select"> <Input bind:value={sortBy} type="select" aria-label="sort by">
<option>name</option> <option>name</option>
<option>display name</option> <option>display name</option>
{#if !isPublic}<option>creation date</option>{/if} {#if !isPublic}<option>creation date</option>{/if}
@ -229,7 +229,7 @@
<Col xs={12} lg={3} class="mb-2"> <Col xs={12} lg={3} class="mb-2">
<InputGroup> <InputGroup>
<InputGroupText>Sort order</InputGroupText> <InputGroupText>Sort order</InputGroupText>
<Input bind:value={sortOrder} type="select"> <Input bind:value={sortOrder} type="select" aria-label="sort order">
<option>ascending</option> <option>ascending</option>
<option>descending</option> <option>descending</option>
</Input> </Input>
@ -239,7 +239,7 @@
<Col xs={12} lg={3} class="mb-2"> <Col xs={12} lg={3} class="mb-2">
<InputGroup> <InputGroup>
<InputGroupText>Only show</InputGroupText> <InputGroupText>Only show</InputGroupText>
<Input bind:value={privacyFilter} type="select"> <Input bind:value={privacyFilter} type="select" aria-label="only show">
<option>all</option> <option>all</option>
<option>public</option> <option>public</option>
<option>private</option> <option>private</option>
@ -276,7 +276,7 @@
<Alert color="danger">{err}</Alert> <Alert color="danger">{err}</Alert>
</Col> </Col>
<Col xs={12} lg={2}> <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> </Col>
</Row> </Row>
{:else} {:else}
@ -286,7 +286,7 @@
<Input class="mb-3" bind:value={searchValue} placeholder="search by {searchBy}..."/> <Input class="mb-3" bind:value={searchValue} placeholder="search by {searchBy}..."/>
</Col> </Col>
<Col xs={12} lg={2} class="mb-3 mb-lg-0"> <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> </Col>
</Row> </Row>
<ListPagination bind:currentPage bind:pageAmount /> <ListPagination bind:currentPage bind:pageAmount />