mirror of
https://github.com/nolanlawson/pinafore
synced 2024-12-11 09:45:24 +01:00
improve a11y
This commit is contained in:
parent
31244a5f8e
commit
1c354817a6
@ -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}}
|
||||||
|
@ -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>
|
||||||
|
@ -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))
|
||||||
|
@ -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'
|
||||||
|
|
||||||
|
@ -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: {
|
||||||
|
@ -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>
|
||||||
|
@ -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 {
|
||||||
|
@ -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
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user