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}}
<img class="{{className}} avatar" alt="Profile picture for @{{account.acct}}"
<img class="{{className}} avatar" aria-hidden="true"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" />
{{then src}}
<img class="{{className}} avatar" alt="Profile picture for @{{account.acct}}"
<img class="{{className}} avatar" aria-hidden="true"
src="{{account.avatar}}" />
{{catch error}}
<svg class="{{className}} avatar">
<svg class="{{className}} avatar" aria-hidden="true">
<use xlink:href="#fa-user" />
</svg>
{{/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>
<use xlink:href="{{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}}
<div class="status-boosted">
<svg>
@ -19,7 +19,7 @@
@{{originalAccount.acct}}
</span>
<a class="status-author-date" rel="noopener" target="_blank" href="{{originalAccount.url}}">
{{relativeDate}}
<time datetime={{createdAtDate}} title="{{accessibleDate}}">{{relativeDate}}</time>
</a>
</div>
<Avatar account={{originalAccount}} className="status-sidebar"/>
@ -214,6 +214,15 @@
},
computed: {
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) => {
mark('compute relativeDate')
let res = relativeFormat.format(new Date(createdAtDate))

View file

@ -1,4 +1,4 @@
<Status status="{{virtualProps}}" />
<Status status="{{virtualProps}}" index="{{virtualIndex}}" length="{{virtualLength}}"/>
<script>
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}}"
items="{{keyedStatuses}}"
on:scrollToBottom="onScrollToBottom()" />
@ -36,7 +36,8 @@
props: status,
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,
components: {

View file

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

View file

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

View file

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