From e5ea4af089c11cfd5ec63e73d373c26474953bd1 Mon Sep 17 00:00:00 2001
From: NGPixel <github@ngpixel.com>
Date: Tue, 7 Jul 2020 23:01:44 -0400
Subject: [PATCH] fix: missing aria-label on page view (#2154)

---
 client/components/comments.vue                |  4 ++
 client/components/common/nav-header.vue       | 42 +++++++++++++++----
 .../themes/default/components/nav-sidebar.vue | 24 +++++++++--
 client/themes/default/components/page.vue     | 27 ++++++++----
 4 files changed, 77 insertions(+), 20 deletions(-)

diff --git a/client/components/comments.vue b/client/components/comments.vue
index 42ac58bd..fd2f1ccc 100644
--- a/client/components/comments.vue
+++ b/client/components/comments.vue
@@ -12,6 +12,7 @@
       color='blue-grey darken-2'
       :background-color='$vuetify.theme.dark ? `grey darken-5` : `white`'
       v-if='permissions.write'
+      :aria-label='$t(`common:comments.fieldContent`)'
     )
     v-row.mt-2(dense, v-if='!isAuthenticated && permissions.write')
       v-col(cols='12', lg='6')
@@ -24,6 +25,7 @@
           dense
           autocomplete='name'
           v-model='guestName'
+          :aria-label='$t(`common:comments.fieldName`)'
         )
       v-col(cols='12', lg='6')
         v-text-field(
@@ -36,6 +38,7 @@
           dense
           autocomplete='email'
           v-model='guestEmail'
+          :aria-label='$t(`common:comments.fieldEmail`)'
         )
     .d-flex.align-center.pt-3(v-if='permissions.write')
       v-icon.mr-1(color='blue-grey') mdi-language-markdown-outline
@@ -49,6 +52,7 @@
         color='blue-grey darken-2'
         @click='postComment'
         depressed
+        :aria-label='$t(`common:comments.postComment`)'
         )
         v-icon(left) mdi-comment
         span.text-none {{$t('common:comments.postComment')}}
diff --git a/client/components/common/nav-header.vue b/client/components/common/nav-header.vue
index 5ad14a81..0c608ae1 100644
--- a/client/components/common/nav-header.vue
+++ b/client/components/common/nav-header.vue
@@ -72,7 +72,7 @@
               )
             v-tooltip(bottom)
               template(v-slot:activator='{ on }')
-                v-btn.ml-2.mr-0(icon, v-on='on', href='/t')
+                v-btn.ml-2.mr-0(icon, v-on='on', href='/t', :aria-label='$t(`common:header.browseTags`)')
                   v-icon(color='grey') mdi-tag-multiple
               span {{$t('common:header.browseTags')}}
       v-flex(xs7, md4)
@@ -96,10 +96,18 @@
 
           template(v-if='mode === `view` && locales.length > 0')
             v-menu(offset-y, bottom, transition='slide-y-transition', max-height='320px', min-width='210px', left)
-              template(v-slot:activator='{ on: menu }')
+              template(v-slot:activator='{ on: menu, attrs }')
                 v-tooltip(bottom)
                   template(v-slot:activator='{ on: tooltip }')
-                    v-btn(icon, v-on='{ ...menu, ...tooltip }', :class='$vuetify.rtl ? `ml-3` : ``', tile, height='64')
+                    v-btn(
+                      icon
+                      v-bind='attrs'
+                      v-on='{ ...menu, ...tooltip }'
+                      :class='$vuetify.rtl ? `ml-3` : ``'
+                      tile
+                      height='64'
+                      :aria-label='$t(`common:header.language`)'
+                      )
                       v-icon(color='grey') mdi-web
                   span {{$t('common:header.language')}}
               v-list(nav)
@@ -113,10 +121,18 @@
 
           template(v-if='hasAnyPagePermissions && path && mode !== `edit`')
             v-menu(offset-y, bottom, transition='slide-y-transition', left)
-              template(v-slot:activator='{ on: menu }')
+              template(v-slot:activator='{ on: menu, attrs }')
                 v-tooltip(bottom)
                   template(v-slot:activator='{ on: tooltip }')
-                    v-btn(icon, v-on='{ ...menu, ...tooltip }', :class='$vuetify.rtl ? `ml-3` : ``', tile, height='64')
+                    v-btn(
+                      icon
+                      v-bind='attrs'
+                      v-on='{ ...menu, ...tooltip }'
+                      :class='$vuetify.rtl ? `ml-3` : ``'
+                      tile
+                      height='64'
+                      :aria-label='$t(`common:header.pageActions`)'
+                      )
                       v-icon(color='grey') mdi-file-document-edit-outline
                   span {{$t('common:header.pageActions')}}
               v-list(nav, :light='!$vuetify.theme.dark', :dark='$vuetify.theme.dark', :class='$vuetify.theme.dark ? `grey darken-4` : ``')
@@ -151,7 +167,7 @@
           template(v-if='hasNewPagePermission && path && mode !== `edit`')
             v-tooltip(bottom)
               template(v-slot:activator='{ on }')
-                v-btn(icon, tile, height='64', v-on='on', @click='pageNew')
+                v-btn(icon, tile, height='64', v-on='on', @click='pageNew', :aria-label='$t(`common:header.newPage`)')
                   v-icon(color='grey') mdi-text-box-plus-outline
               span {{$t('common:header.newPage')}}
             v-divider(vertical)
@@ -159,10 +175,18 @@
           //- ACCOUNT
 
           v-menu(v-if='isAuthenticated', offset-y, bottom, min-width='300', transition='slide-y-transition', left)
-            template(v-slot:activator='{ on: menu }')
+            template(v-slot:activator='{ on: menu, attrs }')
               v-tooltip(bottom)
                 template(v-slot:activator='{ on: tooltip }')
-                  v-btn(icon, v-on='{ ...menu, ...tooltip }', :class='$vuetify.rtl ? `ml-0` : ``', tile, height='64')
+                  v-btn(
+                    icon
+                    v-bind='attrs'
+                    v-on='{ ...menu, ...tooltip }'
+                    :class='$vuetify.rtl ? `ml-0` : ``'
+                    tile
+                    height='64'
+                    :aria-label='$t(`common:header.account`)'
+                    )
                     v-icon(v-if='picture.kind === `initials`', color='grey') mdi-account-circle
                     v-avatar(v-else-if='picture.kind === `image`', :size='34')
                       v-img(:src='picture.url')
@@ -195,7 +219,7 @@
 
           v-tooltip(v-else, left)
             template(v-slot:activator='{ on }')
-              v-btn(icon, v-on='on', color='grey darken-3', href='/login')
+              v-btn(icon, v-on='on', color='grey darken-3', href='/login', :aria-label='$t(`common:header.login`)')
                 v-icon(color='grey') mdi-account-circle
             span {{$t('common:header.login')}}
 
diff --git a/client/themes/default/components/nav-sidebar.vue b/client/themes/default/components/nav-sidebar.vue
index 761d464b..cb5ec0b8 100644
--- a/client/themes/default/components/nav-sidebar.vue
+++ b/client/themes/default/components/nav-sidebar.vue
@@ -1,12 +1,30 @@
 <template lang="pug">
   div
     .pa-3.d-flex(v-if='navMode === `MIXED`', :class='$vuetify.theme.dark ? `grey darken-5` : `blue darken-3`')
-      v-btn(depressed, :color='$vuetify.theme.dark ? `grey darken-4` : `blue darken-2`', style='min-width:0;', @click='goHome')
+      v-btn(
+        depressed
+        :color='$vuetify.theme.dark ? `grey darken-4` : `blue darken-2`'
+        style='min-width:0;'
+        @click='goHome'
+        :aria-label='$t(`common:header.home`)'
+        )
         v-icon(size='20') mdi-home
-      v-btn.ml-3(v-if='currentMode === `custom`', depressed, :color='$vuetify.theme.dark ? `grey darken-4` : `blue darken-2`', style='flex: 1 1 100%;', @click='switchMode(`browse`)')
+      v-btn.ml-3(
+        v-if='currentMode === `custom`'
+        depressed
+        :color='$vuetify.theme.dark ? `grey darken-4` : `blue darken-2`'
+        style='flex: 1 1 100%;'
+        @click='switchMode(`browse`)'
+        )
         v-icon(left) mdi-file-tree
         .body-2.text-none {{$t('common:sidebar.browse')}}
-      v-btn.ml-3(v-else-if='currentMode === `browse`', depressed, :color='$vuetify.theme.dark ? `grey darken-4` : `blue darken-2`', style='flex: 1 1 100%;', @click='switchMode(`custom`)')
+      v-btn.ml-3(
+        v-else-if='currentMode === `browse`'
+        depressed
+        :color='$vuetify.theme.dark ? `grey darken-4` : `blue darken-2`'
+        style='flex: 1 1 100%;'
+        @click='switchMode(`custom`)'
+        )
         v-icon(left) mdi-navigation
         .body-2.text-none {{$t('common:sidebar.mainMenu')}}
     v-divider
diff --git a/client/themes/default/components/page.vue b/client/themes/default/components/page.vue
index 1ab54e15..8d5b222d 100644
--- a/client/themes/default/components/page.vue
+++ b/client/themes/default/components/page.vue
@@ -73,7 +73,7 @@
 
             v-card.mb-5(v-if='tags.length > 0')
               .pa-5
-                .overline.teal--text.pb-2(:class='$vuetify.theme.dark ? `text--lighten-3` : ``') Tags
+                .overline.teal--text.pb-2(:class='$vuetify.theme.dark ? `text--lighten-3` : ``') {{$t('common:page.tags')}}
                 v-chip.mr-1.mb-1(
                   label
                   :color='$vuetify.theme.dark ? `teal darken-1` : `teal lighten-5`'
@@ -87,13 +87,14 @@
                   label
                   :color='$vuetify.theme.dark ? `teal darken-1` : `teal lighten-5`'
                   :href='`/t/` + tags.map(t => t.tag).join(`/`)'
+                  :aria-label='$t(`common:page.tagsMatching`)'
                   )
                   v-icon(:color='$vuetify.theme.dark ? `teal lighten-3` : `teal`', size='20') mdi-tag-multiple
 
             v-card.mb-5(v-if='commentsEnabled && commentsPerms.read')
               .pa-5
                 .overline.pb-2.blue-grey--text.d-flex.align-center(:class='$vuetify.theme.dark ? `text--lighten-3` : `text--darken-2`')
-                  span Talk
+                  span {{$t('common:comments.sdTitle')}}
                   //- v-spacer
                   //- v-chip.text-center(
                   //-   v-if='!commentsExternal'
@@ -112,7 +113,7 @@
                     style='flex: 1 1 100%;'
                     small
                     )
-                    span.blue-grey--text(:class='$vuetify.theme.dark ? `text--lighten-1` : `text--darken-2`') View Discussion
+                    span.blue-grey--text(:class='$vuetify.theme.dark ? `text--lighten-1` : `text--darken-2`') {{$t('common:comments.viewDiscussion')}}
                   v-tooltip(right, v-if='commentsPerms.write')
                     template(v-slot:activator='{ on }')
                       v-btn.ml-2(
@@ -121,9 +122,10 @@
                         outlined
                         small
                         :color='$vuetify.theme.dark ? `blue-grey` : `blue-grey darken-2`'
+                        :aria-label='$t(`common:comments.newComment`)'
                         )
                         v-icon(:color='$vuetify.theme.dark ? `blue-grey lighten-1` : `blue-grey darken-2`', dense) mdi-comment-plus
-                    span New Comment
+                    span {{$t('common:comments.newComment')}}
 
             v-card.mb-5
               .pa-5
@@ -132,7 +134,14 @@
                   v-spacer
                   v-tooltip(right, v-if='isAuthenticated')
                     template(v-slot:activator='{ on }')
-                      v-btn.btn-animate-edit(icon, :href='"/h/" + locale + "/" + path', v-on='on', x-small, v-if="hasReadHistoryPermission")
+                      v-btn.btn-animate-edit(
+                        icon
+                        :href='"/h/" + locale + "/" + path'
+                        v-on='on'
+                        x-small
+                        v-if='hasReadHistoryPermission'
+                        :aria-label='$t(`common:header.history`)'
+                        )
                         v-icon(color='indigo', dense) mdi-history
                     span {{$t('common:header.history')}}
                 .body-2.grey--text(:class='$vuetify.theme.dark ? `` : `text--darken-3`') {{ authorName }}
@@ -156,13 +165,13 @@
                 v-spacer
                 v-tooltip(bottom)
                   template(v-slot:activator='{ on }')
-                    v-btn(icon, tile, v-on='on'): v-icon(color='grey') mdi-bookmark
+                    v-btn(icon, tile, v-on='on', :aria-label='$t(`common:page.bookmark`)'): v-icon(color='grey') mdi-bookmark
                   span {{$t('common:page.bookmark')}}
                 v-menu(offset-y, bottom, min-width='300')
                   template(v-slot:activator='{ on: menu }')
                     v-tooltip(bottom)
                       template(v-slot:activator='{ on: tooltip }')
-                        v-btn(icon, tile, v-on='{ ...menu, ...tooltip }'): v-icon(color='grey') mdi-share-variant
+                        v-btn(icon, tile, v-on='{ ...menu, ...tooltip }', :aria-label='$t(`common:page.share`)'): v-icon(color='grey') mdi-share-variant
                       span {{$t('common:page.share')}}
                   social-sharing(
                     :url='pageUrl'
@@ -171,7 +180,7 @@
                   )
                 v-tooltip(bottom)
                   template(v-slot:activator='{ on }')
-                    v-btn(icon, tile, v-on='on', @click='print')
+                    v-btn(icon, tile, v-on='on', @click='print', :aria-label='$t(`common:page.printFormat`)')
                       v-icon(:color='printView ? `primary` : `grey`') mdi-printer
                   span {{$t('common:page.printFormat')}}
                 v-spacer
@@ -198,6 +207,7 @@
                       @click='pageEdit'
                       v-on='onEditActivator'
                       :disabled='!hasWritePagesPermission'
+                      :aria-label='$t(`common:page.editPage`)'
                       )
                       v-icon mdi-pencil
                   v-tooltip(:right='$vuetify.rtl', :left='!$vuetify.rtl', v-if='hasReadHistoryPermission')
@@ -288,6 +298,7 @@
         color='primary'
         dark
         :style='upBtnPosition'
+        :aria-label='$t(`common:actions.returnToTop`)'
         )
         v-icon mdi-arrow-up
 </template>