Mastodon/Whalebird-desktop-client-mac-linux-windows
1
0
Fork 0
mirror of https://github.com/h3poteto/whalebird-desktop synced 2025-02-09 16:28:45 +01:00
Code Issues Releases Wiki Activity

Add role and alt tag for accessibility

Browse Source
This commit is contained in:
AkiraFukushima 2018-10-21 11:17:59 +09:00
parent c18408ab53
commit ee49a3dfe9
13 changed files with 62 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package-lock.json generated
View File

@ -210,7 +210,7 @@
}, },
"@types/events": { "@types/events": {
"version": "1.2.0", "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==" "integrity": "sha512-KEIlhXnIutzKwRbQkGWb/I4HFqBuUykAdHgDED6xqwXJfONCjF5VoE0cXEiurh3XauygxzeDzgtXUqvLkxFzzA=="
}, },
"@types/form-data": { "@types/form-data": {

3
src/main/index.js
View File

@ -215,6 +215,9 @@ async function createWindow () {
// Do not lower the rendering priority of Chromium when background // Do not lower the rendering priority of Chromium when background
app.commandLine.appendSwitch('disable-renderer-backgrounding') app.commandLine.appendSwitch('disable-renderer-backgrounding')
// Enable accessibility
app.setAccessibilitySupportEnabled(true)
app.on('ready', createWindow) app.on('ready', createWindow)
app.on('window-all-closed', () => { app.on('window-all-closed', () => {

7
src/renderer/components/GlobalHeader.vue
View File

@ -7,13 +7,14 @@
:router="true" :router="true"
:background-color="themeColor" :background-color="themeColor"
text-color="#909399" text-color="#909399"
active-text-color="#ffffff"> active-text-color="#ffffff"
<el-menu-item :index="`/${account._id}/home`" v-for="(account, index) in accounts" v-bind:key="account._id"> 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> <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" /> <img v-else :src="account.avatar" class="avatar" :title="account.username + '@' + account.domain" />
<span slot="title">{{ account.domain }}</span> <span slot="title">{{ account.domain }}</span>
</el-menu-item> </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> <i class="el-icon-plus"></i>
<span slot="new">New</span> <span slot="new">New</span>
</el-menu-item> </el-menu-item>

10
src/renderer/components/TimelineSpace/Contents/Cards/Notification/Favourite.vue
View File

@ -6,6 +6,8 @@
@shortkey="handleStatusControl" @shortkey="handleStatusControl"
ref="status" ref="status"
@click="$emit('select')" @click="$emit('select')"
role="article"
aria-label="favourited toot"
> >
<div v-show="filtered(message)" class="filtered"> <div v-show="filtered(message)" class="filtered">
Filtered Filtered
@ -19,13 +21,13 @@
<span class="bold" @click="openUser(message.account)">{{ username(message.account) }}</span> favourited your status <span class="bold" @click="openUser(message.account)">{{ username(message.account) }}</span> favourited your status
</div> </div>
<div class="action-icon"> <div class="action-icon">
<img :src="message.account.avatar" /> <img :src="message.account.avatar" :alt="`Avatar of ${message.account.username}`" />
</div> </div>
</div> </div>
<div class="clearfix"></div> <div class="clearfix"></div>
<div class="target" v-on:dblclick="openDetail(message.status)"> <div class="target" v-on:dblclick="openDetail(message.status)">
<div class="icon" @click="openUser(message.status.account)"> <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>
<div class="detail"> <div class="detail">
<div class="toot-header"> <div class="toot-header">
@ -54,11 +56,11 @@
{{ $t('cards.toot.sensitive') }} {{ $t('cards.toot.sensitive') }}
</el-button> </el-button>
<div v-show="isShowAttachments(message.status)"> <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> <icon name="eye" class="hide"></icon>
</el-button> </el-button>
<div class="media" v-for="media in mediaAttachments(message.status)"> <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> </div>
<div class="clearfix"></div> <div class="clearfix"></div>

2
src/renderer/components/TimelineSpace/Contents/Cards/Notification/Follow.vue
View File

@ -6,6 +6,8 @@
@shortkey="handleStatusControl" @shortkey="handleStatusControl"
ref="status" ref="status"
@click="$emit('select')" @click="$emit('select')"
role="article"
aria-label="follow event"
> >
<div class="action"> <div class="action">
<div class="action-mark"> <div class="action-mark">

10
src/renderer/components/TimelineSpace/Contents/Cards/Notification/Reblog.vue
View File

@ -6,6 +6,8 @@
@shortkey="handleStatusControl" @shortkey="handleStatusControl"
ref="status" ref="status"
@click="$emit('select')" @click="$emit('select')"
role="article"
aria-label="reblogged toot"
> >
<div v-show="filtered(message)" class="filtered"> <div v-show="filtered(message)" class="filtered">
Filtered Filtered
@ -19,13 +21,13 @@
<span class="bold" @click="openUser(message.account)">{{ username(message.account) }}</span> boosted your status <span class="bold" @click="openUser(message.account)">{{ username(message.account) }}</span> boosted your status
</div> </div>
<div class="action-icon"> <div class="action-icon">
<img :src="message.account.avatar" /> <img :src="message.account.avatar" :alt="`Avatar of ${message.account.username}`" />
</div> </div>
</div> </div>
<div class="clearfix"></div> <div class="clearfix"></div>
<div class="target" v-on:dblclick="openDetail(message.status)"> <div class="target" v-on:dblclick="openDetail(message.status)">
<div class="icon" @click="openUser(message.status.account)"> <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>
<div class="detail"> <div class="detail">
<div class="toot-header"> <div class="toot-header">
@ -54,11 +56,11 @@
{{ $t('cards.toot.sensitive') }} {{ $t('cards.toot.sensitive') }}
</el-button> </el-button>
<div v-show="isShowAttachments(message.status)"> <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> <icon name="eye" class="hide"></icon>
</el-button> </el-button>
<div class="media" v-for="media in mediaAttachments(message.status)"> <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> </div>
<div class="clearfix"></div> <div class="clearfix"></div>

16
src/renderer/components/TimelineSpace/Contents/Cards/Toot.vue
View File

@ -6,13 +6,20 @@
@shortkey="handleTootControl" @shortkey="handleTootControl"
ref="status" ref="status"
@click="$emit('selectToot')" @click="$emit('selectToot')"
role="article"
aria-label="toot"
> >
<div v-show="filtered(message)" class="filtered"> <div v-show="filtered(message)" class="filtered">
Filtered Filtered
</div> </div>
<div v-show="!filtered(message)" class="toot"> <div v-show="!filtered(message)" class="toot">
<div class="icon"> <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>
<div class="detail" v-on:dblclick="openDetail(message)"> <div class="detail" v-on:dblclick="openDetail(message)">
<div class="toot-header"> <div class="toot-header">
@ -46,7 +53,7 @@
<icon name="eye" class="hide"></icon> <icon name="eye" class="hide"></icon>
</el-button> </el-button>
<div class="media" v-for="media in mediaAttachments(message)"> <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> </div>
<div class="clearfix"></div> <div class="clearfix"></div>
@ -54,9 +61,10 @@
<div class="reblogger" v-show="message.reblog !== null"> <div class="reblogger" v-show="message.reblog !== null">
<icon name="retweet"></icon> <icon name="retweet"></icon>
<span class="reblogger-icon" @click="openUser(message.account)"> <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>
<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) }} {{ username(message.account) }}
</span> </span>
</div> </div>

4
src/renderer/components/TimelineSpace/Contents/Cards/User.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="user" @click="openUser(user)"> <div class="user" @click="openUser(user)" aria-label="user">
<div class="icon"> <div class="icon">
<img :src="user.avatar" /> <img :src="user.avatar" :alt="`Avatar of ${user.username}`" />
</div> </div>
<div class="name"> <div class="name">
<div class="username"> <div class="username">

6
src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile.vue
View File

@ -3,7 +3,9 @@
v-loading="loading" v-loading="loading"
:element-loading-text="$t('message.loading')" :element-loading-text="$t('message.loading')"
element-loading-spinner="el-icon-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-background" v-bind:style="{ backgroundImage: 'url(' + account.header + ')' }">
<div class="header"> <div class="header">
<div class="follow-follower" v-if="relationship !== null && relationship !== '' && account.username!==user.username"> <div class="follow-follower" v-if="relationship !== null && relationship !== '' && account.username!==user.username">
@ -44,7 +46,7 @@
</popper> </popper>
</div> </div>
<div class="icon"> <div class="icon">
<img :src="account.avatar" /> <img :src="account.avatar" :alt="`Avatar of ${account.username}`" />
</div> </div>
<div class="follow-status" v-if="relationship !== null && relationship !== '' && account.username!==user.username"> <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')"> <div v-if="relationship.following" class="unfollow" @click="unfollow(account)" :title="$t('side_bar.account_profile.unfollow')">

10
src/renderer/components/TimelineSpace/HeaderMenu.vue
View File

@ -15,10 +15,16 @@
trigger="click" trigger="click"
v-model="filterVisible"> v-model="filterVisible">
<div> <div>
<el-form> <el-form role="form">
<el-form-item :label="$t('header_menu.filter.title')"> <el-form-item :label="$t('header_menu.filter.title')">
<div class="input-wrapper"> <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> </div>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>

2
src/renderer/components/TimelineSpace/Modals/NewToot.vue
View File

@ -5,7 +5,7 @@
:before-close="closeConfirm" :before-close="closeConfirm"
width="400px" width="400px"
class="new-toot-modal"> 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"> <div class="spoiler" v-show="showContentWarning">
<el-input :placeholder="$t('modals.new_toot.cw')" v-model="spoiler"></el-input> <el-input :placeholder="$t('modals.new_toot.cw')" v-model="spoiler"></el-input>
</div> </div>

1
src/renderer/components/TimelineSpace/Modals/NewToot/Status.vue
View File

@ -8,6 +8,7 @@
@paste="onPaste" @paste="onPaste"
v-on:input="startSuggest" v-on:input="startSuggest"
:placeholder="$t('modals.new_toot.status')" :placeholder="$t('modals.new_toot.status')"
role="textbox"
autofocus> autofocus>
</textarea> </textarea>
<el-popover <el-popover

23
src/renderer/components/TimelineSpace/SideMenu.vue
View File

@ -34,52 +34,53 @@
:collapse="collapse" :collapse="collapse"
active-text-color="#ffffff" active-text-color="#ffffff"
:router="true" :router="true"
:class="collapse ? 'el-menu-vertical timeline-menu narrow-menu':'el-menu-vertical timeline-menu'"> :class="collapse ? 'el-menu-vertical timeline-menu narrow-menu':'el-menu-vertical timeline-menu'"
<el-menu-item :index="`/${id()}/home`"> role="menu">
<el-menu-item :index="`/${id()}/home`" role="menuitem">
<icon name="home"></icon> <icon name="home"></icon>
<span>{{ $t("side_menu.home") }}</span> <span>{{ $t("side_menu.home") }}</span>
<el-badge is-dot :hidden="!unreadHomeTimeline"> <el-badge is-dot :hidden="!unreadHomeTimeline">
</el-badge> </el-badge>
</el-menu-item> </el-menu-item>
<el-menu-item :index="`/${id()}/notifications`"> <el-menu-item :index="`/${id()}/notifications`" role="menuitem">
<icon name="bell"></icon> <icon name="bell"></icon>
<span>{{ $t("side_menu.notification") }}</span> <span>{{ $t("side_menu.notification") }}</span>
<el-badge is-dot :hidden="!unreadNotifications"> <el-badge is-dot :hidden="!unreadNotifications">
</el-badge> </el-badge>
</el-menu-item> </el-menu-item>
<el-menu-item :index="`/${id()}/favourites`"> <el-menu-item :index="`/${id()}/favourites`" role="menuitem">
<icon name="star"></icon> <icon name="star"></icon>
<span>{{ $t("side_menu.favourite") }}</span> <span>{{ $t("side_menu.favourite") }}</span>
</el-menu-item> </el-menu-item>
<el-menu-item :index="`/${id()}/local`"> <el-menu-item :index="`/${id()}/local`" role="menuitem">
<icon name="users"></icon> <icon name="users"></icon>
<span>{{ $t("side_menu.local") }}</span> <span>{{ $t("side_menu.local") }}</span>
<el-badge is-dot :hidden="!unreadLocalTimeline"> <el-badge is-dot :hidden="!unreadLocalTimeline">
</el-badge> </el-badge>
</el-menu-item> </el-menu-item>
<el-menu-item :index="`/${id()}/public`"> <el-menu-item :index="`/${id()}/public`" role="menuitem">
<icon name="globe"></icon> <icon name="globe"></icon>
<span>{{ $t("side_menu.public") }}</span> <span>{{ $t("side_menu.public") }}</span>
</el-menu-item> </el-menu-item>
<el-menu-item :index="`/${id()}/search`"> <el-menu-item :index="`/${id()}/search`" role="menuitem">
<icon name="search"></icon> <icon name="search"></icon>
<span>{{ $t("side_menu.search") }}</span> <span>{{ $t("side_menu.search") }}</span>
</el-menu-item> </el-menu-item>
<el-menu-item :index="`/${id()}/hashtag`"> <el-menu-item :index="`/${id()}/hashtag`" role="menuitem">
<icon name="hashtag"></icon> <icon name="hashtag"></icon>
<span>{{ $t("side_menu.hashtag") }}</span> <span>{{ $t("side_menu.hashtag") }}</span>
</el-menu-item> </el-menu-item>
<template v-for="tag in tags"> <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> <span>#{{ tag.tagName }}</span>
</el-menu-item> </el-menu-item>
</template> </template>
<el-menu-item :index="`/${id()}/lists`"> <el-menu-item :index="`/${id()}/lists`" role="menuitem">
<icon name="list-ul"></icon> <icon name="list-ul"></icon>
<span>{{ $t("side_menu.lists") }}</span> <span>{{ $t("side_menu.lists") }}</span>
</el-menu-item> </el-menu-item>
<template v-for="list in lists"> <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> <span>#{{ list.title }}</span>
</el-menu-item> </el-menu-item>
</template> </template>