liz/wikijs-fork
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
NGPixel
2020-07-07 23:01:44 -04:00
parent 1ced9649c7
commit e5ea4af089
4 changed files with 77 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
client/components/comments.vue
View File

@@ -12,6 +12,7 @@
color='blue-grey darken-2' color='blue-grey darken-2'
:background-color='$vuetify.theme.dark ? `grey darken-5` : `white`' :background-color='$vuetify.theme.dark ? `grey darken-5` : `white`'
v-if='permissions.write' v-if='permissions.write'
:aria-label='$t(`common:comments.fieldContent`)'
) )
v-row.mt-2(dense, v-if='!isAuthenticated && permissions.write') v-row.mt-2(dense, v-if='!isAuthenticated && permissions.write')
v-col(cols='12', lg='6') v-col(cols='12', lg='6')
@@ -24,6 +25,7 @@
dense dense
autocomplete='name' autocomplete='name'
v-model='guestName' v-model='guestName'
:aria-label='$t(`common:comments.fieldName`)'
) )
v-col(cols='12', lg='6') v-col(cols='12', lg='6')
v-text-field( v-text-field(
@@ -36,6 +38,7 @@
dense dense
autocomplete='email' autocomplete='email'
v-model='guestEmail' v-model='guestEmail'
:aria-label='$t(`common:comments.fieldEmail`)'
) )
.d-flex.align-center.pt-3(v-if='permissions.write') .d-flex.align-center.pt-3(v-if='permissions.write')
v-icon.mr-1(color='blue-grey') mdi-language-markdown-outline v-icon.mr-1(color='blue-grey') mdi-language-markdown-outline
@@ -49,6 +52,7 @@
color='blue-grey darken-2' color='blue-grey darken-2'
@click='postComment' @click='postComment'
depressed depressed
:aria-label='$t(`common:comments.postComment`)'
) )
v-icon(left) mdi-comment v-icon(left) mdi-comment
span.text-none {{$t('common:comments.postComment')}} span.text-none {{$t('common:comments.postComment')}}

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

@@ -72,7 +72,7 @@
) )
v-tooltip(bottom) v-tooltip(bottom)
template(v-slot:activator='{ on }') 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 v-icon(color='grey') mdi-tag-multiple
span {{$t('common:header.browseTags')}} span {{$t('common:header.browseTags')}}
v-flex(xs7, md4) v-flex(xs7, md4)
@@ -96,10 +96,18 @@
template(v-if='mode === `view` && locales.length > 0') template(v-if='mode === `view` && locales.length > 0')
v-menu(offset-y, bottom, transition='slide-y-transition', max-height='320px', min-width='210px', left) 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) v-tooltip(bottom)
template(v-slot:activator='{ on: tooltip }') 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 v-icon(color='grey') mdi-web
span {{$t('common:header.language')}} span {{$t('common:header.language')}}
v-list(nav) v-list(nav)
@@ -113,10 +121,18 @@
template(v-if='hasAnyPagePermissions && path && mode !== `edit`') template(v-if='hasAnyPagePermissions && path && mode !== `edit`')
v-menu(offset-y, bottom, transition='slide-y-transition', left) 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) v-tooltip(bottom)
template(v-slot:activator='{ on: tooltip }') 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 v-icon(color='grey') mdi-file-document-edit-outline
span {{$t('common:header.pageActions')}} span {{$t('common:header.pageActions')}}
v-list(nav, :light='!$vuetify.theme.dark', :dark='$vuetify.theme.dark', :class='$vuetify.theme.dark ? `grey darken-4` : ``') 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`') template(v-if='hasNewPagePermission && path && mode !== `edit`')
v-tooltip(bottom) v-tooltip(bottom)
template(v-slot:activator='{ on }') 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 v-icon(color='grey') mdi-text-box-plus-outline
span {{$t('common:header.newPage')}} span {{$t('common:header.newPage')}}
v-divider(vertical) v-divider(vertical)
@@ -159,10 +175,18 @@
//- ACCOUNT //- ACCOUNT
v-menu(v-if='isAuthenticated', offset-y, bottom, min-width='300', transition='slide-y-transition', left) 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) v-tooltip(bottom)
template(v-slot:activator='{ on: tooltip }') 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-icon(v-if='picture.kind === `initials`', color='grey') mdi-account-circle
v-avatar(v-else-if='picture.kind === `image`', :size='34') v-avatar(v-else-if='picture.kind === `image`', :size='34')
v-img(:src='picture.url') v-img(:src='picture.url')
@@ -195,7 +219,7 @@
v-tooltip(v-else, left) v-tooltip(v-else, left)
template(v-slot:activator='{ on }') 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 v-icon(color='grey') mdi-account-circle
span {{$t('common:header.login')}} span {{$t('common:header.login')}}

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

@@ -1,12 +1,30 @@
<template lang="pug"> <template lang="pug">
div div
.pa-3.d-flex(v-if='navMode === `MIXED`', :class='$vuetify.theme.dark ? `grey darken-5` : `blue darken-3`') .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-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 v-icon(left) mdi-file-tree
.body-2.text-none {{$t('common:sidebar.browse')}} .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 v-icon(left) mdi-navigation
.body-2.text-none {{$t('common:sidebar.mainMenu')}} .body-2.text-none {{$t('common:sidebar.mainMenu')}}
v-divider v-divider

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

@@ -73,7 +73,7 @@
v-card.mb-5(v-if='tags.length > 0') v-card.mb-5(v-if='tags.length > 0')
.pa-5 .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( v-chip.mr-1.mb-1(
label label
:color='$vuetify.theme.dark ? `teal darken-1` : `teal lighten-5`' :color='$vuetify.theme.dark ? `teal darken-1` : `teal lighten-5`'
@@ -87,13 +87,14 @@
label label
:color='$vuetify.theme.dark ? `teal darken-1` : `teal lighten-5`' :color='$vuetify.theme.dark ? `teal darken-1` : `teal lighten-5`'
:href='`/t/` + tags.map(t => t.tag).join(`/`)' :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-icon(:color='$vuetify.theme.dark ? `teal lighten-3` : `teal`', size='20') mdi-tag-multiple
v-card.mb-5(v-if='commentsEnabled && commentsPerms.read') v-card.mb-5(v-if='commentsEnabled && commentsPerms.read')
.pa-5 .pa-5
.overline.pb-2.blue-grey--text.d-flex.align-center(:class='$vuetify.theme.dark ? `text--lighten-3` : `text--darken-2`') .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-spacer
//- v-chip.text-center( //- v-chip.text-center(
//- v-if='!commentsExternal' //- v-if='!commentsExternal'
@@ -112,7 +113,7 @@
style='flex: 1 1 100%;' style='flex: 1 1 100%;'
small 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') v-tooltip(right, v-if='commentsPerms.write')
template(v-slot:activator='{ on }') template(v-slot:activator='{ on }')
v-btn.ml-2( v-btn.ml-2(
@@ -121,9 +122,10 @@
outlined outlined
small small
:color='$vuetify.theme.dark ? `blue-grey` : `blue-grey darken-2`' :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 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 v-card.mb-5
.pa-5 .pa-5
@@ -132,7 +134,14 @@
v-spacer v-spacer
v-tooltip(right, v-if='isAuthenticated') v-tooltip(right, v-if='isAuthenticated')
template(v-slot:activator='{ on }') 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 v-icon(color='indigo', dense) mdi-history
span {{$t('common:header.history')}} span {{$t('common:header.history')}}
.body-2.grey--text(:class='$vuetify.theme.dark ? `` : `text--darken-3`') {{ authorName }} .body-2.grey--text(:class='$vuetify.theme.dark ? `` : `text--darken-3`') {{ authorName }}
@@ -156,13 +165,13 @@
v-spacer v-spacer
v-tooltip(bottom) v-tooltip(bottom)
template(v-slot:activator='{ on }') 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')}} span {{$t('common:page.bookmark')}}
v-menu(offset-y, bottom, min-width='300') v-menu(offset-y, bottom, min-width='300')
template(v-slot:activator='{ on: menu }') template(v-slot:activator='{ on: menu }')
v-tooltip(bottom) v-tooltip(bottom)
template(v-slot:activator='{ on: tooltip }') 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')}} span {{$t('common:page.share')}}
social-sharing( social-sharing(
:url='pageUrl' :url='pageUrl'
@@ -171,7 +180,7 @@
) )
v-tooltip(bottom) v-tooltip(bottom)
template(v-slot:activator='{ on }') 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 v-icon(:color='printView ? `primary` : `grey`') mdi-printer
span {{$t('common:page.printFormat')}} span {{$t('common:page.printFormat')}}
v-spacer v-spacer
@@ -198,6 +207,7 @@
@click='pageEdit' @click='pageEdit'
v-on='onEditActivator' v-on='onEditActivator'
:disabled='!hasWritePagesPermission' :disabled='!hasWritePagesPermission'
:aria-label='$t(`common:page.editPage`)'
) )
v-icon mdi-pencil v-icon mdi-pencil
v-tooltip(:right='$vuetify.rtl', :left='!$vuetify.rtl', v-if='hasReadHistoryPermission') v-tooltip(:right='$vuetify.rtl', :left='!$vuetify.rtl', v-if='hasReadHistoryPermission')
@@ -288,6 +298,7 @@
color='primary' color='primary'
dark dark
:style='upBtnPosition' :style='upBtnPosition'
:aria-label='$t(`common:actions.returnToTop`)'
) )
v-icon mdi-arrow-up v-icon mdi-arrow-up
</template> </template>