1
0
mirror of https://github.com/nolanlawson/pinafore synced 2024-12-11 09:45:24 +01:00

improve a11y

This commit is contained in:
Nolan Lawson 2018-01-17 23:00:33 -08:00
parent 31244a5f8e
commit 1c354817a6
8 changed files with 26 additions and 10 deletions

View File

@ -1,11 +1,11 @@
{{#await imagePromise}} {{#await imagePromise}}
<img class="{{className}} avatar" alt="Profile picture for @{{account.acct}}" <img class="{{className}} avatar" aria-hidden="true"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" /> src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" />
{{then src}} {{then src}}
<img class="{{className}} avatar" alt="Profile picture for @{{account.acct}}" <img class="{{className}} avatar" aria-hidden="true"
src="{{account.avatar}}" /> src="{{account.avatar}}" />
{{catch error}} {{catch error}}
<svg class="{{className}} avatar"> <svg class="{{className}} avatar" aria-hidden="true">
<use xlink:href="#fa-user" /> <use xlink:href="#fa-user" />
</svg> </svg>
{{/await}} {{/await}}

View File

@ -1,4 +1,7 @@
<a class='{{page === name ? "selected" : ""}}' aria-label='{{page === name ? "Current page" : label}}' href='{{href}}'> <a class='{{page === name ? "selected" : ""}}'
aria-label='{{page === name ? `${label} (current page)` : label}}'
aria-current="page === name"
href='{{href}}'>
<svg> <svg>
<use xlink:href="{{svg}}" /> <use xlink:href="{{svg}}" />
</svg> </svg>

View File

@ -1,4 +1,4 @@
<article class="status-article"> <article class="status-article" tabindex="0" aria-posinset="{{index}}" aria-setsize="{{length}}">
{{#if status.reblog}} {{#if status.reblog}}
<div class="status-boosted"> <div class="status-boosted">
<svg> <svg>
@ -19,7 +19,7 @@
@{{originalAccount.acct}} @{{originalAccount.acct}}
</span> </span>
<a class="status-author-date" rel="noopener" target="_blank" href="{{originalAccount.url}}"> <a class="status-author-date" rel="noopener" target="_blank" href="{{originalAccount.url}}">
{{relativeDate}} <time datetime={{createdAtDate}} title="{{accessibleDate}}">{{relativeDate}}</time>
</a> </a>
</div> </div>
<Avatar account={{originalAccount}} className="status-sidebar"/> <Avatar account={{originalAccount}} className="status-sidebar"/>
@ -214,6 +214,15 @@
}, },
computed: { computed: {
createdAtDate: (status) => status.created_at, createdAtDate: (status) => status.created_at,
accessibleDate: (createdAtDate) => {
return Intl.DateTimeFormat('en-US', {
year: 'numeric',
month: 'long',
day: 'numeric',
hour: 'numeric',
minute: 'numeric'
}).format(new Date(createdAtDate))
},
relativeDate: (createdAtDate) => { relativeDate: (createdAtDate) => {
mark('compute relativeDate') mark('compute relativeDate')
let res = relativeFormat.format(new Date(createdAtDate)) let res = relativeFormat.format(new Date(createdAtDate))

View File

@ -1,4 +1,4 @@
<Status status="{{virtualProps}}" /> <Status status="{{virtualProps}}" index="{{virtualIndex}}" length="{{virtualLength}}"/>
<script> <script>
import Status from './Status.html' import Status from './Status.html'

View File

@ -1,4 +1,4 @@
<div class="timeline"> <div class="timeline" role="feed" aria-label="{{label}}">
<VirtualList component="{{StatusListItem}}" <VirtualList component="{{StatusListItem}}"
items="{{keyedStatuses}}" items="{{keyedStatuses}}"
on:scrollToBottom="onScrollToBottom()" /> on:scrollToBottom="onScrollToBottom()" />
@ -36,7 +36,8 @@
props: status, props: status,
key: status.id key: status.id
})), })),
lastStatusId: (statuses) => statuses.length && statuses[statuses.length - 1].id lastStatusId: (statuses) => statuses.length && statuses[statuses.length - 1].id,
label: (target, $currentInstance) => `${target} timeline for ${$currentInstance}`
}, },
store: () => store, store: () => store,
components: { components: {

View File

@ -5,6 +5,7 @@
offset="{{item.offset}}" offset="{{item.offset}}"
props="{{item.props}}" props="{{item.props}}"
key="{{item.key}}" key="{{item.key}}"
index="{{item.index}}"
/> />
{{/each}} {{/each}}
</div> </div>

View File

@ -3,7 +3,7 @@
ref:node ref:node
style="transform: translate3d(0, {{offset}}px, 0);" style="transform: translate3d(0, {{offset}}px, 0);"
> >
<:Component {component} virtualProps="{{props}}" /> <:Component {component} virtualProps="{{props}}" virtualIndex="{{index}}" virtualLength="{{$numItems}}"/>
</div> </div>
<style> <style>
.virtual-list-item { .virtual-list-item {

View File

@ -87,6 +87,8 @@ virtualListStore.compute('height', ['items', 'itemHeights'], (items, itemHeights
return sum return sum
}) })
virtualListStore.compute('numItems', ['items'], (items) => items.length)
if (process.browser && process.env.NODE_ENV !== 'production') { if (process.browser && process.env.NODE_ENV !== 'production') {
window.virtualListStore = virtualListStore window.virtualListStore = virtualListStore
} }