Merge pull request #671 from h3poteto/accessibility

Add role and alt tag for accessibility
h3poteto · Oct 21, 2018 · 93b1808 · 93b1808
2 parents c18408a + ee49a3d
commit 93b1808
Show file tree

Hide file tree

Showing 13 changed files with 62 additions and 34 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/main/index.js b/src/main/index.js
@@ -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', () => {

diff --git a/src/renderer/components/GlobalHeader.vue b/src/renderer/components/GlobalHeader.vue
@@ -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>

diff --git a/src/renderer/components/TimelineSpace/Contents/Cards/Notification/Favourite.vue b/src/renderer/components/TimelineSpace/Contents/Cards/Notification/Favourite.vue
@@ -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>

diff --git a/src/renderer/components/TimelineSpace/Contents/Cards/Notification/Follow.vue b/src/renderer/components/TimelineSpace/Contents/Cards/Notification/Follow.vue
@@ -6,6 +6,8 @@
   @shortkey="handleStatusControl"
   ref="status"
   @click="$emit('select')"
+  role="article"
+  aria-label="follow event"
   >
   <div class="action">
     <div class="action-mark">

diff --git a/src/renderer/components/TimelineSpace/Contents/Cards/Notification/Reblog.vue b/src/renderer/components/TimelineSpace/Contents/Cards/Notification/Reblog.vue
@@ -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>

diff --git a/src/renderer/components/TimelineSpace/Contents/Cards/Toot.vue b/src/renderer/components/TimelineSpace/Contents/Cards/Toot.vue
@@ -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,17 +53,18 @@
             <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>
       </div>
       <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>

diff --git a/src/renderer/components/TimelineSpace/Contents/Cards/User.vue b/src/renderer/components/TimelineSpace/Contents/Cards/User.vue
@@ -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">

diff --git a/src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile.vue b/src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile.vue
@@ -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')">

diff --git a/src/renderer/components/TimelineSpace/HeaderMenu.vue b/src/renderer/components/TimelineSpace/HeaderMenu.vue
@@ -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>

diff --git a/src/renderer/components/TimelineSpace/Modals/NewToot.vue b/src/renderer/components/TimelineSpace/Modals/NewToot.vue
@@ -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>

diff --git a/src/renderer/components/TimelineSpace/Modals/NewToot/Status.vue b/src/renderer/components/TimelineSpace/Modals/NewToot/Status.vue
@@ -8,6 +8,7 @@
     @paste="onPaste"
     v-on:input="startSuggest"
     :placeholder="$t('modals.new_toot.status')"
+    role="textbox"
     autofocus>
   </textarea>
   <el-popover

diff --git a/src/renderer/components/TimelineSpace/SideMenu.vue b/src/renderer/components/TimelineSpace/SideMenu.vue
@@ -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>