Merge pull request #2715 from nextcloud/fix/add-missing-aria-labels

Add missing aria labels
nextcloud · Jul 19, 2022 · 56374b7 · 56374b7
2 parents b0cccb6 + c02c24c
commit 56374b7
Show file tree

Hide file tree

Showing 20 changed files with 42 additions and 24 deletions.
diff --git a/js/editor-rich.js b/js/editor-rich.js
diff --git a/js/editor-rich.js.map b/js/editor-rich.js.map
diff --git a/js/editor.js b/js/editor.js
diff --git a/js/editor.js.map b/js/editor.js.map
diff --git a/js/files-modal.js b/js/files-modal.js
diff --git a/js/files-modal.js.map b/js/files-modal.js.map
diff --git a/js/text-files.js b/js/text-files.js
diff --git a/js/text-files.js.map b/js/text-files.js.map
diff --git a/js/text-public.js b/js/text-public.js
diff --git a/js/text-public.js.map b/js/text-public.js.map
diff --git a/js/text-text.js b/js/text-text.js
diff --git a/js/text-text.js.map b/js/text-text.js.map
diff --git a/js/text-viewer.js b/js/text-viewer.js
diff --git a/js/text-viewer.js.map b/js/text-viewer.js.map
diff --git a/src/components/EditorWrapper.vue b/src/components/EditorWrapper.vue
@@ -54,10 +54,13 @@
 					:autohide="autohide"
 					:loaded.sync="menubarLoaded">
 					<div class="text-editor__session-list">
-						<div v-if="isMobile" v-tooltip="lastSavedStatusTooltip" :class="saveStatusClass" />
+						<div v-if="isMobile"
+							v-tooltip="lastSavedStatusTooltip"
+							:class="saveStatusClass" />
 						<div v-else
 							v-tooltip="lastSavedStatusTooltip"
 							class="save-status"
+							:aria-label="t('text', 'Document save status')"
 							:class="lastSavedStatusClass">
 							{{ lastSavedStatus }}
 						</div>
@@ -78,6 +81,8 @@
 						:content-wrapper="contentWrapper"
 						:file-path="relativePath" />
 					<EditorContent v-show="contentLoaded"
+						tabindex="0"
+						role="document"
 						class="editor__content text-editor__content"
 						:editor="$editor" />
 				</div>
@@ -658,7 +663,9 @@ export default {
 			if (state.initialLoading && !this.contentLoaded) {
 				this.contentLoaded = true
 				if (this.autofocus && !this.readOnly) {
-					this.$editor.commands.focus()
+					this.$nextTick(() => {
+						this.$editor.commands.focus()
+					})
 				}
 				this.$emit('ready')
 				// TODO: remove $parent access

diff --git a/src/components/Menu/ActionImageUpload.vue b/src/components/Menu/ActionImageUpload.vue
@@ -24,6 +24,7 @@
 		:data-text-action-entry="actionEntry.key"
 		:title="actionEntry.label"
 		:aria-label="actionEntry.label"
+		role="menu"
 		aria-haspopup>
 		<template #icon>
 			<component :is="icon"

diff --git a/src/components/Menu/ActionList.vue b/src/components/Menu/ActionList.vue
@@ -23,7 +23,9 @@
 <template>
 	<Actions v-tooltip="tooltip"
 		class="entry-list-action entry-action"
+		role="menu"
 		v-bind="state"
+		:aria-label="actionEntry.label"
 		:title="actionEntry.label"
 		:data-text-action-entry="actionEntry.key"
 		:data-text-action-active="activeKey">

diff --git a/src/components/Menu/ActionSingle.vue b/src/components/Menu/ActionSingle.vue
@@ -118,6 +118,7 @@ export default {
 			attrs: {
 				title,
 				type: 'tertiary',
+				role: 'menuitem',
 				'data-text-action-entry': actionEntry.key,
 				...attrs,
 			},

diff --git a/src/components/Menu/EmojiPickerAction.vue b/src/components/Menu/EmojiPickerAction.vue
@@ -25,6 +25,7 @@
 		@selectData="addEmoji">
 		<Button v-tooltip="actionEntry.label"
 			class="entry-action__button"
+			role="menu"
 			:title="actionEntry.label"
 			:aria-label="actionEntry.label"
 			:aria-haspopup="true">

diff --git a/src/components/Menu/MenuBar.vue b/src/components/Menu/MenuBar.vue
@@ -24,6 +24,8 @@
 <template>
 	<div class="text-menubar"
 		data-text-el="menubar"
+		role="menubar"
+		:aria-label="t('text', 'Formatting menubar')"
 		:class="{
 			'text-menubar--ready': isReady,
 			'text-menubar--show': isVisible,
@@ -32,7 +34,11 @@
 		}">
 		<HelpModal v-if="displayHelp" @close="hideHelp" />
 
-		<div v-if="$isRichEditor" ref="menubar" class="text-menubar__entries">
+		<div v-if="$isRichEditor"
+			ref="menubar"
+			role="group"
+			class="text-menubar__entries"
+			:aria-label="t('text', 'Editor actions')">
 			<ActionEntry v-for="actionEntry of visibleEntries"
 				v-bind="{ actionEntry }"
 				:key="`text-action--${actionEntry.key}`"