mirror of
https://github.com/h3poteto/whalebird-desktop
synced 2025-02-03 18:57:43 +01:00
Add role and alt tag for accessibility
This commit is contained in:
parent
c18408ab53
commit
ee49a3dfe9
package-lock.json
src
2
package-lock.json
generated
2
package-lock.json
generated
@ -210,7 +210,7 @@
|
||||
},
|
||||
"@types/events": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "http://registry.npmjs.org/@types/events/-/events-1.2.0.tgz",
|
||||
"resolved": "https://registry.npmjs.org/@types/events/-/events-1.2.0.tgz",
|
||||
"integrity": "sha512-KEIlhXnIutzKwRbQkGWb/I4HFqBuUykAdHgDED6xqwXJfONCjF5VoE0cXEiurh3XauygxzeDzgtXUqvLkxFzzA=="
|
||||
},
|
||||
"@types/form-data": {
|
||||
|
@ -215,6 +215,9 @@ async function createWindow () {
|
||||
// Do not lower the rendering priority of Chromium when background
|
||||
app.commandLine.appendSwitch('disable-renderer-backgrounding')
|
||||
|
||||
// Enable accessibility
|
||||
app.setAccessibilitySupportEnabled(true)
|
||||
|
||||
app.on('ready', createWindow)
|
||||
|
||||
app.on('window-all-closed', () => {
|
||||
|
@ -7,13 +7,14 @@
|
||||
:router="true"
|
||||
:background-color="themeColor"
|
||||
text-color="#909399"
|
||||
active-text-color="#ffffff">
|
||||
<el-menu-item :index="`/${account._id}/home`" v-for="(account, index) in accounts" v-bind:key="account._id">
|
||||
active-text-color="#ffffff"
|
||||
role="menubar">
|
||||
<el-menu-item :index="`/${account._id}/home`" v-for="(account, index) in accounts" v-bind:key="account._id" role="menuitem">
|
||||
<i v-if="account.avatar === undefined || account.avatar === null || account.avatar === ''" class="el-icon-menu"></i>
|
||||
<img v-else :src="account.avatar" class="avatar" :title="account.username + '@' + account.domain" />
|
||||
<span slot="title">{{ account.domain }}</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="/login" :title="$t('global_header.add_new_account')">
|
||||
<el-menu-item index="/login" :title="$t('global_header.add_new_account')" role="menuitem">
|
||||
<i class="el-icon-plus"></i>
|
||||
<span slot="new">New</span>
|
||||
</el-menu-item>
|
||||
|
@ -6,6 +6,8 @@
|
||||
@shortkey="handleStatusControl"
|
||||
ref="status"
|
||||
@click="$emit('select')"
|
||||
role="article"
|
||||
aria-label="favourited toot"
|
||||
>
|
||||
<div v-show="filtered(message)" class="filtered">
|
||||
Filtered
|
||||
@ -19,13 +21,13 @@
|
||||
<span class="bold" @click="openUser(message.account)">{{ username(message.account) }}</span> favourited your status
|
||||
</div>
|
||||
<div class="action-icon">
|
||||
<img :src="message.account.avatar" />
|
||||
<img :src="message.account.avatar" :alt="`Avatar of ${message.account.username}`" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
<div class="target" v-on:dblclick="openDetail(message.status)">
|
||||
<div class="icon" @click="openUser(message.status.account)">
|
||||
<img :src="message.status.account.avatar" />
|
||||
<img :src="message.status.account.avatar" :alt="`Avatar of ${message.status.account.username}`" />
|
||||
</div>
|
||||
<div class="detail">
|
||||
<div class="toot-header">
|
||||
@ -54,11 +56,11 @@
|
||||
{{ $t('cards.toot.sensitive') }}
|
||||
</el-button>
|
||||
<div v-show="isShowAttachments(message.status)">
|
||||
<el-button v-show="sensitive(message.status) && isShowAttachments(message.status)" class="hide-sensitive" type="text" @click="showAttachments = false">
|
||||
<el-button v-show="sensitive(message.status) && isShowAttachments(message.status)" class="hide-sensitive" type="text" @click="showAttachments = false" :title="$t('cards.toot.hide')">
|
||||
<icon name="eye" class="hide"></icon>
|
||||
</el-button>
|
||||
<div class="media" v-for="media in mediaAttachments(message.status)">
|
||||
<img :src="media.preview_url" />
|
||||
<img :src="media.preview_url" alt="attached media" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
|
@ -6,6 +6,8 @@
|
||||
@shortkey="handleStatusControl"
|
||||
ref="status"
|
||||
@click="$emit('select')"
|
||||
role="article"
|
||||
aria-label="follow event"
|
||||
>
|
||||
<div class="action">
|
||||
<div class="action-mark">
|
||||
|
@ -6,6 +6,8 @@
|
||||
@shortkey="handleStatusControl"
|
||||
ref="status"
|
||||
@click="$emit('select')"
|
||||
role="article"
|
||||
aria-label="reblogged toot"
|
||||
>
|
||||
<div v-show="filtered(message)" class="filtered">
|
||||
Filtered
|
||||
@ -19,13 +21,13 @@
|
||||
<span class="bold" @click="openUser(message.account)">{{ username(message.account) }}</span> boosted your status
|
||||
</div>
|
||||
<div class="action-icon">
|
||||
<img :src="message.account.avatar" />
|
||||
<img :src="message.account.avatar" :alt="`Avatar of ${message.account.username}`" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
<div class="target" v-on:dblclick="openDetail(message.status)">
|
||||
<div class="icon" @click="openUser(message.status.account)">
|
||||
<img :src="message.status.account.avatar" />
|
||||
<img :src="message.status.account.avatar" :alt="`Avatar of ${message.status.account.username}`" />
|
||||
</div>
|
||||
<div class="detail">
|
||||
<div class="toot-header">
|
||||
@ -54,11 +56,11 @@
|
||||
{{ $t('cards.toot.sensitive') }}
|
||||
</el-button>
|
||||
<div v-show="isShowAttachments(message.status)">
|
||||
<el-button v-show="sensitive(message.status) && isShowAttachments(message.status)" class="hide-sensitive" type="text" @click="showAttachments = false">
|
||||
<el-button v-show="sensitive(message.status) && isShowAttachments(message.status)" class="hide-sensitive" type="text" @click="showAttachments = false" :title="$t('cards.toot.hide')">
|
||||
<icon name="eye" class="hide"></icon>
|
||||
</el-button>
|
||||
<div class="media" v-for="media in mediaAttachments(message.status)">
|
||||
<img :src="media.preview_url" />
|
||||
<img :src="media.preview_url" alt="attached media" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
|
@ -6,13 +6,20 @@
|
||||
@shortkey="handleTootControl"
|
||||
ref="status"
|
||||
@click="$emit('selectToot')"
|
||||
role="article"
|
||||
aria-label="toot"
|
||||
>
|
||||
<div v-show="filtered(message)" class="filtered">
|
||||
Filtered
|
||||
</div>
|
||||
<div v-show="!filtered(message)" class="toot">
|
||||
<div class="icon">
|
||||
<img :src="originalMessage(message).account.avatar" @click="openUser(originalMessage(message).account)"/>
|
||||
<img
|
||||
:src="originalMessage(message).account.avatar"
|
||||
@click="openUser(originalMessage(message).account)"
|
||||
role="img"
|
||||
:alt="`Avatar of ${originalMessage(message).account.username}`"
|
||||
/>
|
||||
</div>
|
||||
<div class="detail" v-on:dblclick="openDetail(message)">
|
||||
<div class="toot-header">
|
||||
@ -46,7 +53,7 @@
|
||||
<icon name="eye" class="hide"></icon>
|
||||
</el-button>
|
||||
<div class="media" v-for="media in mediaAttachments(message)">
|
||||
<img :src="media.preview_url" @click="openImage(media.url, mediaAttachments(message))"/>
|
||||
<img :src="media.preview_url" @click="openImage(media.url, mediaAttachments(message))" alt="Attached media" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
@ -54,9 +61,10 @@
|
||||
<div class="reblogger" v-show="message.reblog !== null">
|
||||
<icon name="retweet"></icon>
|
||||
<span class="reblogger-icon" @click="openUser(message.account)">
|
||||
<img :src="message.account.avatar" />
|
||||
<img :src="message.account.avatar"
|
||||
:alt="`Avatar of ${message.account.username}`" />
|
||||
</span>
|
||||
<span class="reblogger-name" @click="openUser(message.account)">
|
||||
<span class="reblogger-name" @click="openUser(message.account)" :title="`Reblogged by ${username(message.account)}`">
|
||||
{{ username(message.account) }}
|
||||
</span>
|
||||
</div>
|
||||
|
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="user" @click="openUser(user)">
|
||||
<div class="user" @click="openUser(user)" aria-label="user">
|
||||
<div class="icon">
|
||||
<img :src="user.avatar" />
|
||||
<img :src="user.avatar" :alt="`Avatar of ${user.username}`" />
|
||||
</div>
|
||||
<div class="name">
|
||||
<div class="username">
|
||||
|
@ -3,7 +3,9 @@
|
||||
v-loading="loading"
|
||||
:element-loading-text="$t('message.loading')"
|
||||
element-loading-spinner="el-icon-loading"
|
||||
element-loading-background="rgba(0, 0, 0, 0.8)">
|
||||
element-loading-background="rgba(0, 0, 0, 0.8)"
|
||||
role="article"
|
||||
aria-label="account profile">
|
||||
<div class="header-background" v-bind:style="{ backgroundImage: 'url(' + account.header + ')' }">
|
||||
<div class="header">
|
||||
<div class="follow-follower" v-if="relationship !== null && relationship !== '' && account.username!==user.username">
|
||||
@ -44,7 +46,7 @@
|
||||
</popper>
|
||||
</div>
|
||||
<div class="icon">
|
||||
<img :src="account.avatar" />
|
||||
<img :src="account.avatar" :alt="`Avatar of ${account.username}`" />
|
||||
</div>
|
||||
<div class="follow-status" v-if="relationship !== null && relationship !== '' && account.username!==user.username">
|
||||
<div v-if="relationship.following" class="unfollow" @click="unfollow(account)" :title="$t('side_bar.account_profile.unfollow')">
|
||||
|
@ -15,10 +15,16 @@
|
||||
trigger="click"
|
||||
v-model="filterVisible">
|
||||
<div>
|
||||
<el-form>
|
||||
<el-form role="form">
|
||||
<el-form-item :label="$t('header_menu.filter.title')">
|
||||
<div class="input-wrapper">
|
||||
<input v-model="filter" :placeholder="$t('header_menu.filter.placeholder')" v-shortkey.avoid v-on:keyup.enter="applyFilter(filter)"></input>
|
||||
<input
|
||||
v-model="filter"
|
||||
:placeholder="$t('header_menu.filter.placeholder')"
|
||||
v-shortkey.avoid
|
||||
aria-label="filter words"
|
||||
tilte="filter"
|
||||
></input>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
|
@ -5,7 +5,7 @@
|
||||
:before-close="closeConfirm"
|
||||
width="400px"
|
||||
class="new-toot-modal">
|
||||
<el-form v-on:submit.prevent="toot">
|
||||
<el-form v-on:submit.prevent="toot" role="form">
|
||||
<div class="spoiler" v-show="showContentWarning">
|
||||
<el-input :placeholder="$t('modals.new_toot.cw')" v-model="spoiler"></el-input>
|
||||
</div>
|
||||
|
@ -8,6 +8,7 @@
|
||||
@paste="onPaste"
|
||||
v-on:input="startSuggest"
|
||||
:placeholder="$t('modals.new_toot.status')"
|
||||
role="textbox"
|
||||
autofocus>
|
||||
</textarea>
|
||||
<el-popover
|
||||
|
@ -34,52 +34,53 @@
|
||||
:collapse="collapse"
|
||||
active-text-color="#ffffff"
|
||||
:router="true"
|
||||
:class="collapse ? 'el-menu-vertical timeline-menu narrow-menu':'el-menu-vertical timeline-menu'">
|
||||
<el-menu-item :index="`/${id()}/home`">
|
||||
:class="collapse ? 'el-menu-vertical timeline-menu narrow-menu':'el-menu-vertical timeline-menu'"
|
||||
role="menu">
|
||||
<el-menu-item :index="`/${id()}/home`" role="menuitem">
|
||||
<icon name="home"></icon>
|
||||
<span>{{ $t("side_menu.home") }}</span>
|
||||
<el-badge is-dot :hidden="!unreadHomeTimeline">
|
||||
</el-badge>
|
||||
</el-menu-item>
|
||||
<el-menu-item :index="`/${id()}/notifications`">
|
||||
<el-menu-item :index="`/${id()}/notifications`" role="menuitem">
|
||||
<icon name="bell"></icon>
|
||||
<span>{{ $t("side_menu.notification") }}</span>
|
||||
<el-badge is-dot :hidden="!unreadNotifications">
|
||||
</el-badge>
|
||||
</el-menu-item>
|
||||
<el-menu-item :index="`/${id()}/favourites`">
|
||||
<el-menu-item :index="`/${id()}/favourites`" role="menuitem">
|
||||
<icon name="star"></icon>
|
||||
<span>{{ $t("side_menu.favourite") }}</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item :index="`/${id()}/local`">
|
||||
<el-menu-item :index="`/${id()}/local`" role="menuitem">
|
||||
<icon name="users"></icon>
|
||||
<span>{{ $t("side_menu.local") }}</span>
|
||||
<el-badge is-dot :hidden="!unreadLocalTimeline">
|
||||
</el-badge>
|
||||
</el-menu-item>
|
||||
<el-menu-item :index="`/${id()}/public`">
|
||||
<el-menu-item :index="`/${id()}/public`" role="menuitem">
|
||||
<icon name="globe"></icon>
|
||||
<span>{{ $t("side_menu.public") }}</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item :index="`/${id()}/search`">
|
||||
<el-menu-item :index="`/${id()}/search`" role="menuitem">
|
||||
<icon name="search"></icon>
|
||||
<span>{{ $t("side_menu.search") }}</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item :index="`/${id()}/hashtag`">
|
||||
<el-menu-item :index="`/${id()}/hashtag`" role="menuitem">
|
||||
<icon name="hashtag"></icon>
|
||||
<span>{{ $t("side_menu.hashtag") }}</span>
|
||||
</el-menu-item>
|
||||
<template v-for="tag in tags">
|
||||
<el-menu-item :index="`/${id()}/hashtag/${tag.tagName}`" class="sub-menu" :key="tag.tagName">
|
||||
<el-menu-item :index="`/${id()}/hashtag/${tag.tagName}`" class="sub-menu" :key="tag.tagName" role="menuitem">
|
||||
<span>#{{ tag.tagName }}</span>
|
||||
</el-menu-item>
|
||||
</template>
|
||||
<el-menu-item :index="`/${id()}/lists`">
|
||||
<el-menu-item :index="`/${id()}/lists`" role="menuitem">
|
||||
<icon name="list-ul"></icon>
|
||||
<span>{{ $t("side_menu.lists") }}</span>
|
||||
</el-menu-item>
|
||||
<template v-for="list in lists">
|
||||
<el-menu-item :index="`/${id()}/lists/${list.id}`" class="sub-menu" :key="list.id">
|
||||
<el-menu-item :index="`/${id()}/lists/${list.id}`" class="sub-menu" :key="list.id" role="menuitem">
|
||||
<span>#{{ list.title }}</span>
|
||||
</el-menu-item>
|
||||
</template>
|
||||
|
Loading…
x
Reference in New Issue
Block a user