eightball/PluralKit
1
0
Fork 0
mirror of https://github.com/PluralKit/PluralKit.git synced 2026-02-11 00:07:55 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(dashboard): more screenreader friendlyness

Browse source
This commit is contained in:
Draconizations 2022-05-20 13:39:30 +02:00
parent abd5a85ba1
commit 9744a3deb6
11 changed files with 103 additions and 97 deletions
Download patch file Download diff file Expand all files Collapse all files

24
dashboard/src/lib/system/Edit.svelte
View file

@ -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>

14
dashboard/src/lib/system/PrivacyEdit.svelte
View file

@ -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>