mirror of
https://github.com/PluralKit/PluralKit.git
synced 2026-02-11 00:07:55 +00:00
feat(dashboard): more screenreader friendlyness
This commit is contained in:
Draconizations
parent
abd5a85ba1
commit
9744a3deb6
11 changed files with 103 additions and 97 deletions
|
|
@ -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>
|
||||
{: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}
|
||||
{#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 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>
|
||||
{#if !loading}<Button style="flex 0" color="danger" on:click={submitDelete}>Delete</Button> <Button style="flex: 0" color="secondary" on:click={toggleDeleteModal}>Back</Button>
|
||||
{:else}<Button style="flex 0" color="danger" disabled><Spinner size="sm"/></Button> <Button style="flex: 0" color="secondary" disabled>Back</Button>
|
||||
<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} 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 aria-label="confirm delete"><Spinner size="sm"/></Button> <Button style="flex: 0" color="secondary" disabled aria-label="cancel delete">Back</Button>
|
||||
{/if}
|
||||
</ModalBody>
|
||||
</Modal>
|
||||
|
|
@ -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" disabled>{#if loading}<Spinner size="sm" />{:else}Add{/if}</Button>
|
||||
<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 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" disabled>{#if loading}<Spinner size="sm" />{:else}Remove{/if}</Button>
|
||||
<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 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>
|
||||
|
|
@ -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>
|
||||
{:else}<Button style="flex: 0" color="primary" disabled><Spinner size="sm"/></Button> <Button style="flex: 0" color="secondary" disabled>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 aria-label="submit privacy edits"><Spinner size="sm"/></Button> <Button style="flex: 0" color="secondary" disabled aria-label="cancel privacy edits">Back</Button>
|
||||
{/if}
|
||||
Loading…
Add table
Add a link
Reference in a new issue