diff --git a/routes/_components/DynamicPageBanner.html b/routes/_components/DynamicPageBanner.html index 705aaf3..84df219 100644 --- a/routes/_components/DynamicPageBanner.html +++ b/routes/_components/DynamicPageBanner.html @@ -1,12 +1,15 @@ -<div class="dynamic-page-banner {icon ? 'dynamic-page-with-icon' : ''}"> +<div class="dynamic-page-banner {icon ? 'dynamic-page-with-icon' : ''}" + role="navigation" aria-label="Page header" +> {#if icon} <svg class="dynamic-page-banner-svg"> <use xlink:href={icon} /> </svg> {/if} - <h1 class="dynamic-page-title">{title}</h1> + <h1 class="dynamic-page-title" aria-label={ariaTitle}>{title}</h1> <button type="button" class="dynamic-page-go-back" + aria-label="Go back" on:click="onGoBack(event)">Back</button> </div> <style> @@ -61,7 +64,8 @@ <script> export default { data: () => ({ - icon: void 0 + icon: void 0, + ariaTitle: '' }), methods: { onGoBack (e) { diff --git a/routes/_components/community/PageListItem.html b/routes/_components/community/PageListItem.html index 37e92fa..c9ac73c 100644 --- a/routes/_components/community/PageListItem.html +++ b/routes/_components/community/PageListItem.html @@ -3,7 +3,7 @@ <svg class="page-list-item-svg"> <use xlink:href={icon} /> </svg> - <span aria-label="{label} {$pinnedPage === href ? 'Pinned page' : 'Unpinned page'}"> + <span aria-label={ariaLabel}> {label} </span> {#if pinnable} @@ -72,6 +72,15 @@ data: () => ({ pinnable: false }), + computed: { + ariaLabel: ({label, pinnable, $pinnedPage, href}) => { + let res = label + if (pinnable) { + res += ' (' + ($pinnedPage === href ? 'Pinned page' : 'Unpinned page') + ')' + } + return res + } + }, components: { IconButton }, diff --git a/routes/_components/compose/ComposeBox.html b/routes/_components/compose/ComposeBox.html index ff1c182..d268a7d 100644 --- a/routes/_components/compose/ComposeBox.html +++ b/routes/_components/compose/ComposeBox.html @@ -1,5 +1,5 @@ {#if realm === 'home'} - <h1 class="sr-only">Compose toot</h1> + <h1 class="sr-only">Compose status</h1> {/if} <div class="{computedClassName} {hideAndFadeIn}"> <ComposeAuthor /> diff --git a/routes/_components/profile/AccountProfile.html b/routes/_components/profile/AccountProfile.html index d4853d8..2a255db 100644 --- a/routes/_components/profile/AccountProfile.html +++ b/routes/_components/profile/AccountProfile.html @@ -1,3 +1,4 @@ +<h1 class="sr-only">Profile for {accountName}</h1> <div class="account-profile {headerImageIsMissing ? 'header-image-is-missing' : ''}" style="background-image: url({headerImage});"> <div class="account-profile-grid-wrapper"> @@ -79,7 +80,8 @@ store: () => store, computed: { headerImageIsMissing: ({ account }) => account.header.endsWith('missing.png'), - headerImage: ({ $autoplayGifs, account }) => $autoplayGifs ? account.header : account.header_static + headerImage: ({ $autoplayGifs, account }) => $autoplayGifs ? account.header : account.header_static, + accountName: ({ account }) => (account && (account.display_name || account.username)) || '' }, components: { AccountProfileHeader, diff --git a/routes/_components/profile/AccountProfileDetails.html b/routes/_components/profile/AccountProfileDetails.html index 982a9c6..2eb5970 100644 --- a/routes/_components/profile/AccountProfileDetails.html +++ b/routes/_components/profile/AccountProfileDetails.html @@ -1,3 +1,4 @@ +<h2 class="sr-only">Stats and more options</h2> <div class="account-profile-details"> <div class="account-profile-details-item"> <span class="account-profile-details-item-title"> diff --git a/routes/_components/profile/AccountProfileHeader.html b/routes/_components/profile/AccountProfileHeader.html index 4249933..06189c2 100644 --- a/routes/_components/profile/AccountProfileHeader.html +++ b/routes/_components/profile/AccountProfileHeader.html @@ -1,3 +1,4 @@ +<h2 class="sr-only">Name and following</h2> <div class="account-profile-avatar"> <Avatar {account} size="big" /> </div> diff --git a/routes/_components/profile/AccountProfileMeta.html b/routes/_components/profile/AccountProfileMeta.html index 4fc9d64..4cc2175 100644 --- a/routes/_components/profile/AccountProfileMeta.html +++ b/routes/_components/profile/AccountProfileMeta.html @@ -1,11 +1,20 @@ {#if emojifiedFields.length} + <h2 class="sr-only">Fields</h2> <div class="account-profile-meta"> <div class="account-profile-meta-border"></div> {#each emojifiedFields as field, i} - <div class="account-profile-meta-cell account-profile-meta-name"> + <div + id="account-profile-meta-name-{i}" + class="account-profile-meta-cell account-profile-meta-name" + role="term" + > {field.name} </div> - <div class="account-profile-meta-cell account-profile-meta-value"> + <div + class="account-profile-meta-cell account-profile-meta-value" + role="definition" + aria-labelledby="account-profile-meta-name-{i}" + > {@html field.value} </div> {/each} diff --git a/routes/_components/profile/AccountProfileNote.html b/routes/_components/profile/AccountProfileNote.html index 20e97a8..de82099 100644 --- a/routes/_components/profile/AccountProfileNote.html +++ b/routes/_components/profile/AccountProfileNote.html @@ -1,3 +1,4 @@ +<h2 class="sr-only">Description</h2> <div class="account-profile-note"> {@html massagedNote} </div> diff --git a/routes/_components/status/Status.html b/routes/_components/status/Status.html index 42abfb6..7b2fead 100644 --- a/routes/_components/status/Status.html +++ b/routes/_components/status/Status.html @@ -217,9 +217,10 @@ } return originalAccountDisplayName }, - ariaLabel: ({ originalAccountAccessibleName, originalStatus, visibility }) => ( + ariaLabel: ({ originalAccountAccessibleName, originalStatus, visibility, isStatusInOwnThread }) => ( (visibility === 'direct' ? 'Direct message' : 'Status') + - ` by ${originalAccountAccessibleName}` + ` by ${originalAccountAccessibleName}` + + (isStatusInOwnThread ? ' (focused)' : '') ), showHeader: ({ notification, status, timelineType }) => ( (notification && (notification.type === 'reblog' || notification.type === 'favourite')) || diff --git a/routes/_components/timeline/PinnedStatuses.html b/routes/_components/timeline/PinnedStatuses.html index aee0662..8deb594 100644 --- a/routes/_components/timeline/PinnedStatuses.html +++ b/routes/_components/timeline/PinnedStatuses.html @@ -1,13 +1,16 @@ -<div role="feed" aria-label="Pinned toots" class="pinned-statuses"> - {#each pinnedStatuses as status, index (status.id)} - <Status {status} - timelineType="pinned" - timelineValue={accountId} - {index} - length={pinnedStatuses.length} - /> - {/each} -</div> +{#if pinnedStatuses.length } + <h1 class="sr-only">Pinned statuses</h1> + <div role="feed" aria-label="Pinned statuses" class="pinned-statuses"> + {#each pinnedStatuses as status, index (status.id)} + <Status {status} + timelineType="pinned" + timelineValue={accountId} + {index} + length={pinnedStatuses.length} + /> + {/each} + </div> +{/if} <script> import { store } from '../../_store/store' import Status from '../status/Status.html' diff --git a/routes/_components/timeline/Timeline.html b/routes/_components/timeline/Timeline.html index 37f3916..9db09bb 100644 --- a/routes/_components/timeline/Timeline.html +++ b/routes/_components/timeline/Timeline.html @@ -109,20 +109,20 @@ }, label: ({ timeline, $currentInstance, timelineType, timelineValue }) => { if (timelines[timeline]) { - return `${timelines[timeline].label} timeline for ${$currentInstance}` + return `Statuses: ${timelines[timeline].label} timeline on ${$currentInstance}` } switch (timelineType) { case 'tag': - return `#${timelineValue} timeline for ${$currentInstance}` + return `Statuses: #${timelineValue} hashtag` case 'status': - return 'Status context' + return `Statuses: thread` case 'account': - return `Account #${timelineValue} on ${$currentInstance}` + return `Statuses: account timeline` case 'list': - return `List #${timelineValue} on ${$currentInstance}` + return `Statuses: list` case 'notifications': - return `Notifications for ${$currentInstance}` + return `Notifications on ${$currentInstance}` } }, timelineType: ({ timeline }) => { diff --git a/routes/_pages/accounts/[accountId].html b/routes/_pages/accounts/[accountId].html index 5be2cda..8893d7d 100644 --- a/routes/_pages/accounts/[accountId].html +++ b/routes/_pages/accounts/[accountId].html @@ -1,6 +1,6 @@ {#if $isUserLoggedIn} <TimelinePage timeline="account/{params.accountId}"> - <DynamicPageBanner title="" /> + <DynamicPageBanner title="" ariaTitle="Profile page for {accountName}"/> {#if $currentAccountProfile && $currentVerifyCredentials} <AccountProfile account={$currentAccountProfile} relationship={$currentAccountRelationship} @@ -42,6 +42,9 @@ }, shortProfileName: ({ $currentAccountProfile }) => { return ($currentAccountProfile && ('@' + $currentAccountProfile.username)) || '' + }, + accountName: ({ $currentAccountProfile }) => { + return ($currentAccountProfile && ($currentAccountProfile.display_name || $currentAccountProfile.username)) || '' } }, components: { diff --git a/routes/_pages/statuses/[statusId]/index.html b/routes/_pages/statuses/[statusId]/index.html index 57fa6d6..8abfbd4 100644 --- a/routes/_pages/statuses/[statusId]/index.html +++ b/routes/_pages/statuses/[statusId]/index.html @@ -1,6 +1,6 @@ {#if $isUserLoggedIn} <TimelinePage timeline="status/{params.statusId}"> - <DynamicPageBanner title=""/> + <DynamicPageBanner title="" ariaTitle="Status thread page" /> </TimelinePage> {:else} <HiddenFromSSR>