richard
/
wiki
mirror of https://github.com/Requarks/wiki.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

fix: missing aria-label on page view (#2154)

pull/2163/head
NGPixel 4 years ago
parent
1ced9649c7
commit
e5ea4af089
4 changed files with 77 additions and 20 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      client/components/comments.vue
  2. 42
      client/components/common/nav-header.vue
  3. 24
      client/themes/default/components/nav-sidebar.vue
  4. 27
      client/themes/default/components/page.vue

4
client/components/comments.vue
View File

@ -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')}}

42
client/components/common/nav-header.vue
View File

@ -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')}}

24
client/themes/default/components/nav-sidebar.vue
View File

@ -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

27
client/themes/default/components/page.vue
View File

@ -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>

Write Preview
Loading…
Cancel
Save