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

feat(dashboard): make navigating more screenreader friendly

Browse Source
This commit is contained in:
Draconizations 2022-05-20 12:09:10 +02:00
parent 379bb7c55d
commit 1eb910e61e
5 changed files with 20 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
dashboard/src/pages/Dash.svelte
View File

@ -78,6 +78,7 @@
<Container> <Container>
<Row> <Row>
<Col class="mx-auto" xs={12} lg={11} xl={10}> <Col class="mx-auto" xs={12} lg={11} xl={10}>
<h2 class="visually-hidden">Viewing your own system</h2>
<TabContent class="mt-3"> <TabContent class="mt-3">
<TabPane tabId="system" tab="System" active={tabPane === "system"}> <TabPane tabId="system" tab="System" active={tabPane === "system"}>
<SystemMain bind:user={user} bind:isPublic /> <SystemMain bind:user={user} bind:isPublic />

3
dashboard/src/pages/Group.svelte
View File

@ -109,11 +109,12 @@
<Container> <Container>
<Row> <Row>
<Col class="mx-auto" xs={12} lg={11} xl={10}> <Col class="mx-auto" xs={12} lg={11} xl={10}>
<h2 class="visually-hidden">Viewing {isPublic ? "a public" : "your own"} group</h2>
{#if isDeleted} {#if isDeleted}
<Alert color="success">Group has been successfully deleted. <Link to="/dash">Return to dash</Link></Alert> <Alert color="success">Group has been successfully deleted. <Link to="/dash">Return to dash</Link></Alert>
{:else} {:else}
{#if isPublic} {#if isPublic}
<Alert color="info">You are currently <b>viewing</b> a group.</Alert> <Alert color="info" aria-hidden>You are currently <b>viewing</b> a group.</Alert>
{/if} {/if}
{#if notOwnSystem} {#if notOwnSystem}
<Alert color="danger">This group does not belong to your system, did you mean to look up <Link to={`/profile/g/${group.id}`}>it's public page</Link>?</Alert> <Alert color="danger">This group does not belong to your system, did you mean to look up <Link to={`/profile/g/${group.id}`}>it's public page</Link>?</Alert>

3
dashboard/src/pages/Member.svelte
View File

@ -115,11 +115,12 @@
<Container> <Container>
<Row> <Row>
<Col class="mx-auto" xs={12} lg={11} xl={10}> <Col class="mx-auto" xs={12} lg={11} xl={10}>
<h2 class="visually-hidden">Viewing {isPublic ? "a public" : "your own"} member</h2>
{#if isDeleted} {#if isDeleted}
<Alert color="success">Member has been successfully deleted. <Link to="/dash">Return to dash</Link></Alert> <Alert color="success">Member has been successfully deleted. <Link to="/dash">Return to dash</Link></Alert>
{:else} {:else}
{#if isPublic} {#if isPublic}
<Alert color="info">You are currently <b>viewing</b> a member.</Alert> <Alert color="info" aria-hidden>You are currently <b>viewing</b> a member.</Alert>
{/if} {/if}
{#if notOwnSystem} {#if notOwnSystem}
<Alert color="danger">This member does not belong to your system, did you mean to look up <Link to={`/profile/m/${member.id}`}>their public page</Link>?</Alert> <Alert color="danger">This member does not belong to your system, did you mean to look up <Link to={`/profile/m/${member.id}`}>their public page</Link>?</Alert>

3
dashboard/src/pages/profiles/Main.svelte
View File

@ -57,6 +57,7 @@
{/if} {/if}
<Container> <Container>
<Row> <Row>
<h1 class="visually-hidden">Viewing a public system</h1>
<Col class="mx-auto" xs={12} lg={11} xl={10}> <Col class="mx-auto" xs={12} lg={11} xl={10}>
{#if !user.id && !err} {#if !user.id && !err}
<div class="mx-auto text-center"> <div class="mx-auto text-center">
@ -65,7 +66,7 @@
{:else if err} {:else if err}
<Alert color="danger">{err}</Alert> <Alert color="danger">{err}</Alert>
{:else} {:else}
<Alert color="info">You are currently <b>viewing</b> a system.</Alert> <Alert color="info" aria-hidden>You are currently <b>viewing</b> a system.</Alert>
<TabContent class="mt-3"> <TabContent class="mt-3">
<TabPane tabId="system" tab="System" active={tabPane === "system"}> <TabPane tabId="system" tab="System" active={tabPane === "system"}>
<SystemMain bind:user isPublic={true} /> <SystemMain bind:user isPublic={true} />

14
dashboard/styles/generic.scss
View File

@ -163,4 +163,16 @@ img.emoji {
width: auto; width: auto;
margin: 0 .05em 0 .1em; margin: 0 .05em 0 .1em;
vertical-align: -0.1125em; vertical-align: -0.1125em;
} }
//misc
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}