From ae28569cf58153191a4d3eb3ff38349e7dd1a701 Mon Sep 17 00:00:00 2001
From: Vincent Petry <vincent@nextcloud.com>
Date: Thu, 19 Nov 2020 15:47:09 +0100
Subject: [PATCH 01/12] Define region roles for easier access

Defined specific region roles for easier access to:
- conversation settings: navigation role define by the component itself,
  we use a custom label here.
- conversation messages
- new message form

Note: so far the call button and conversation settings are part of the
main content, not the messages list. This could be tweaked further
later on.

The right sidebar is already recognized as "complementary".

Signed-off-by: Vincent Petry <vincent@nextcloud.com>
---
 src/components/ChatView.vue                | 6 +++++-
 src/components/LeftSidebar/LeftSidebar.vue | 4 +++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/ChatView.vue b/src/components/ChatView.vue
index c25c9271314..299bc791652 100644
--- a/src/components/ChatView.vue
+++ b/src/components/ChatView.vue
@@ -43,8 +43,12 @@
 			</div>
 		</transition>
 		<MessagesList
+			role="region"
+			:aria-label="t('spreed', 'Conversation messages')"
 			:token="token" />
-		<NewMessageForm />
+		<NewMessageForm
+			role="region"
+			:aria-label="t('spreed', 'Post message')" />
 	</div>
 </template>
 
diff --git a/src/components/LeftSidebar/LeftSidebar.vue b/src/components/LeftSidebar/LeftSidebar.vue
index 1bbdb54203b..8f4aee7464d 100644
--- a/src/components/LeftSidebar/LeftSidebar.vue
+++ b/src/components/LeftSidebar/LeftSidebar.vue
@@ -20,7 +20,9 @@
 -->
 
 <template>
-	<AppNavigation>
+	<AppNavigation
+		:aria-label="t('spreed', 'Conversation list')"
+		:toggle-aria-label="t('spreed', 'Toggle conversations list')">
 		<div class="new-conversation">
 			<SearchBox
 				v-model="searchText"

From 83e18208916c928361661f8420cb44294e4e21f1 Mon Sep 17 00:00:00 2001
From: Vincent Petry <vincent@nextcloud.com>
Date: Thu, 19 Nov 2020 15:50:55 +0100
Subject: [PATCH 02/12] Add missing or clarify aria labels in lists

Added missing aria labels on some buttons.
Improved aria labels for list items and list buttons to be uniquely
identified by including the conversation or participant name.
The click event for participant search is now optional, this prevents
screen readers to say "clickable" when it's not.

Signed-off-by: Vincent Petry <vincent@nextcloud.com>
---
 .../AppContentListItem/AppContentListItem.vue | 11 ++++++++--
 .../Participant/Participant.vue               | 20 ++++++++++++++-----
 src/components/TopBar/TopBar.vue              |  1 +
 3 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/src/components/LeftSidebar/ConversationsList/AppContentListItem/AppContentListItem.vue b/src/components/LeftSidebar/ConversationsList/AppContentListItem/AppContentListItem.vue
index 4d6edd53b09..89ee8f8ac49 100644
--- a/src/components/LeftSidebar/ConversationsList/AppContentListItem/AppContentListItem.vue
+++ b/src/components/LeftSidebar/ConversationsList/AppContentListItem/AppContentListItem.vue
@@ -28,7 +28,7 @@
 			:class="{ 'active' : isActive }"
 			href="#"
 			class="acli"
-			:aria-label="t('spreed', 'Conversation, ') + title"
+			:aria-label="conversationLinkAriaLabel"
 			@click="onClick">
 			<!-- default slot for avatar or icon -->
 			<slot name="icon" />
@@ -57,7 +57,7 @@
 		<Actions
 			v-if="hasActions"
 			menu-align="right"
-			:aria-label="t('spreed', 'Conversation settings')"
+			:aria-label="conversationSettingsAriaLabel"
 			class="actions">
 			<slot name="actions" />
 		</Actions>
@@ -138,6 +138,13 @@ export default {
 			}
 		},
 
+		conversationLinkAriaLabel() {
+			return t('spreed', 'Conversation "{conversationName}"', { conversationName: this.title })
+		},
+
+		conversationSettingsAriaLabel() {
+			return t('spreed', 'Settings for conversation "{conversationName}"', { conversationName: this.title })
+		},
 	},
 	methods: {
 		// forward click event
diff --git a/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.vue b/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.vue
index 2255817a172..70721488c62 100644
--- a/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.vue
+++ b/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.vue
@@ -28,7 +28,8 @@
 			'guestUser': isGuest,
 			'isSearched': isSearched,
 			'selected': isSelected }"
-		@click="handleClick">
+		:aria-label="participantAriaLabel"
+		v-on="isSearched ? { click: handleClick } : {}">
 		<AvatarWrapper
 			:id="computedId"
 			:disable-tooltip="true"
@@ -79,7 +80,7 @@
 		</div>
 		<Actions
 			v-if="canModerate && !isSearched"
-			:aria-label="t('spreed', 'Participant settings')"
+			:aria-label="participantSettingsAriaLabel"
 			class="participant-row__actions">
 			<ActionButton v-if="canBeDemoted"
 				icon="icon-rename"
@@ -158,6 +159,17 @@ export default {
 	},
 
 	computed: {
+		participantSettingsAriaLabel() {
+			return t('spreed', 'Settings for participant "{user}"', { user: this.computedName })
+		},
+		participantAriaLabel() {
+			if (this.isSearched) {
+				return t('spreed', 'Add participant {user}', { user: this.computedName })
+			} else {
+				return t('spreed', 'Participant, {user}.', { user: this.computedName })
+			}
+		},
+
 		userTooltipText() {
 			if (!this.isUserNameTooltipVisible) {
 				return false
@@ -327,9 +339,7 @@ export default {
 		},
 		// Used to allow selecting participants in a search.
 		handleClick() {
-			if (this.isSearched) {
-				this.$emit('clickParticipant', this.participant)
-			}
+			this.$emit('clickParticipant', this.participant)
 		},
 		participantTypeIsModerator(participantType) {
 			return [PARTICIPANT.TYPE.OWNER, PARTICIPANT.TYPE.MODERATOR, PARTICIPANT.TYPE.GUEST_MODERATOR].indexOf(participantType) !== -1
diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index 23eaa94d175..4832354305f 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -56,6 +56,7 @@
 			v-shortkey="['f']"
 			class="top-bar__button"
 			menu-align="right"
+			:aria-label="t('spreed', 'Conversation actions')"
 			@shortkey.native="toggleFullscreen">
 			<ActionButton
 				:icon="iconFullscreen"

From 20cabbfd876da024806a97102d903559a1b83090 Mon Sep 17 00:00:00 2001
From: Vincent Petry <vincent@nextcloud.com>
Date: Thu, 19 Nov 2020 16:12:08 +0100
Subject: [PATCH 03/12] Hide redundant elements from screen readers

Hide an extra "li" that was read as "one list item".
Prevent saying "heading level 6" for h6 elements.
Hide the already hidden file input dialog so one cannot tab to it.

Signed-off-by: Vincent Petry <vincent@nextcloud.com>
---
 src/components/LeftSidebar/LeftSidebar.vue                 | 2 +-
 .../MessagesList/MessagesGroup/Message/Message.vue         | 7 +++++--
 src/components/NewMessageForm/NewMessageForm.vue           | 2 ++
 src/components/Quote.vue                                   | 2 +-
 4 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/LeftSidebar/LeftSidebar.vue b/src/components/LeftSidebar/LeftSidebar.vue
index 8f4aee7464d..70e1ebb474b 100644
--- a/src/components/LeftSidebar/LeftSidebar.vue
+++ b/src/components/LeftSidebar/LeftSidebar.vue
@@ -37,7 +37,7 @@
 		<template #list class="left-sidebar__list">
 			<Caption v-if="isSearching"
 				:title="t('spreed', 'Conversations')" />
-			<li>
+			<li role="presentation">
 				<ConversationsList
 					:conversations-list="conversationsList"
 					:initialised-conversations="initialisedConversations"
diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue
index 7265abf92c1..ab144fbb59b 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue
@@ -33,7 +33,9 @@ the main body of the message as well as a quote.
 		@mouseover="showActions=true"
 		@mouseleave="showActions=false">
 		<div v-if="isFirstMessage && showAuthor" class="message__author">
-			<h6>{{ actorDisplayName }}</h6>
+			<h6 role="presentation" aria-hidden="true">
+				{{ actorDisplayName }}
+			</h6>
 		</div>
 		<div
 			ref="messageMain"
@@ -56,7 +58,8 @@ the main body of the message as well as a quote.
 			<div class="message__main__right">
 				<div v-if="isTemporary && !isTemporaryUpload" class="icon-loading-small" />
 				<h6 v-if="hasDate"
-					v-tooltip.auto="messageDate">
+					v-tooltip.auto="messageDate"
+					role="presentation">
 					{{ messageTime }}
 				</h6>
 				<Actions
diff --git a/src/components/NewMessageForm/NewMessageForm.vue b/src/components/NewMessageForm/NewMessageForm.vue
index 21e72bfceed..dff0c481260 100644
--- a/src/components/NewMessageForm/NewMessageForm.vue
+++ b/src/components/NewMessageForm/NewMessageForm.vue
@@ -27,6 +27,8 @@
 			ref="fileUploadInput"
 			multiple
 			type="file"
+			tabindex="-1"
+			aria-hidden="true"
 			class="hidden-visually"
 			@change="handleFileInput">
 		<div
diff --git a/src/components/Quote.vue b/src/components/Quote.vue
index 5d5fd433c41..af2bc1ebcbf 100644
--- a/src/components/Quote.vue
+++ b/src/components/Quote.vue
@@ -30,7 +30,7 @@ components.
 		@click.prevent="handleQuoteClick">
 		<div class="quote__main">
 			<div class="quote__main__author">
-				<h6>{{ getDisplayName }}</h6>
+				<h6 role="presentation">{{ getDisplayName }}</h6>
 			</div>
 			<div v-if="isFileShareMessage"
 				class="quote__main__text">

From 5881be73516fe77caf60981fa1bf6dbbb1f7dff2 Mon Sep 17 00:00:00 2001
From: Vincent Petry <vincent@nextcloud.com>
Date: Thu, 19 Nov 2020 16:15:06 +0100
Subject: [PATCH 04/12] Message groups are now lists

The screen reader now identifies those as lists and announces how many
rows they contain.

Signed-off-by: Vincent Petry <vincent@nextcloud.com>
---
 src/components/MessagesList/MessagesGroup/Message/Message.vue | 4 ++--
 src/components/MessagesList/MessagesGroup/MessagesGroup.vue   | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue
index ab144fbb59b..11afb950a9c 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue
@@ -25,7 +25,7 @@ the main body of the message as well as a quote.
 </docs>
 
 <template>
-	<div
+	<li
 		:id="`message_${id}`"
 		ref="message"
 		class="message"
@@ -75,7 +75,7 @@ the main body of the message as well as a quote.
 				</Actions>
 			</div>
 		</div>
-	</div>
+	</li>
 </template>
 
 <script>
diff --git a/src/components/MessagesList/MessagesGroup/MessagesGroup.vue b/src/components/MessagesList/MessagesGroup/MessagesGroup.vue
index 4f851563c3e..ca3c2b53cb0 100644
--- a/src/components/MessagesList/MessagesGroup/MessagesGroup.vue
+++ b/src/components/MessagesList/MessagesGroup/MessagesGroup.vue
@@ -31,7 +31,7 @@
 					:author-id="actorId"
 					:display-name="actorDisplayName" />
 			</div>
-			<div class="messages">
+			<ul class="messages">
 				<Message
 					v-for="(message, index) of messages"
 					:key="message.id"
@@ -42,7 +42,7 @@
 					:actor-display-name="actorDisplayName"
 					:show-author="!isSystemMessage"
 					:is-temporary="message.timestamp === 0" />
-			</div>
+			</ul>
 		</div>
 	</div>
 </template>

From ba1d389ac52eb8764982e1e4e025eca367c372fd Mon Sep 17 00:00:00 2001
From: Vincent Petry <vincent@nextcloud.com>
Date: Thu, 19 Nov 2020 16:55:00 +0100
Subject: [PATCH 05/12] Give heading role to message group author and day
 separator

This way it makes it clearer that it's the message author.

Signed-off-by: Vincent Petry <vincent@nextcloud.com>
---
 src/components/MessagesList/MessagesGroup/Message/Message.vue | 2 +-
 src/components/MessagesList/MessagesGroup/MessagesGroup.vue   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue
index 11afb950a9c..a7452eed824 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue
@@ -33,7 +33,7 @@ the main body of the message as well as a quote.
 		@mouseover="showActions=true"
 		@mouseleave="showActions=false">
 		<div v-if="isFirstMessage && showAuthor" class="message__author">
-			<h6 role="presentation" aria-hidden="true">
+			<h6 role="heading" aria-level="2">
 				{{ actorDisplayName }}
 			</h6>
 		</div>
diff --git a/src/components/MessagesList/MessagesGroup/MessagesGroup.vue b/src/components/MessagesList/MessagesGroup/MessagesGroup.vue
index ca3c2b53cb0..e6e9b7576b0 100644
--- a/src/components/MessagesList/MessagesGroup/MessagesGroup.vue
+++ b/src/components/MessagesList/MessagesGroup/MessagesGroup.vue
@@ -22,7 +22,7 @@
 <template>
 	<div class="message-group">
 		<div v-if="dateSeparator" class="message-group__date-header">
-			<span class="date">{{ dateSeparator }}</span>
+			<span class="date" role="heading" aria-level="1">{{ dateSeparator }}</span>
 		</div>
 		<div class="wrapper">
 			<div class="messages__avatar">

From 4c66f59a71911172019fd36fe82d326d12bf92ac Mon Sep 17 00:00:00 2001
From: Vincent Petry <vincent@nextcloud.com>
Date: Thu, 19 Nov 2020 17:03:55 +0100
Subject: [PATCH 06/12] Caption is actually a heading

Screen reader will qualify them as such.

Signed-off-by: Vincent Petry <vincent@nextcloud.com>
---
 src/components/Caption.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Caption.vue b/src/components/Caption.vue
index 4d875b05537..fa991422380 100644
--- a/src/components/Caption.vue
+++ b/src/components/Caption.vue
@@ -20,7 +20,7 @@
 -->
 
 <template>
-	<li class="app-navigation-caption">
+	<li role="heading" class="app-navigation-caption">
 		{{ title }}
 	</li>
 </template>

From bdf9d0c09c725b7f1541bcdb59cb2867de91c667 Mon Sep 17 00:00:00 2001
From: Vincent Petry <vincent@nextcloud.com>
Date: Thu, 19 Nov 2020 18:28:01 +0100
Subject: [PATCH 07/12] Allow tabbing into participant search results

Makes it possible to select results by tabbing over them and hitting
enter.

Removed avatar menu from search results.

Signed-off-by: Vincent Petry <vincent@nextcloud.com>
---
 .../Participant/Participant.vue                | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.vue b/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.vue
index 70721488c62..df1633cab95 100644
--- a/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.vue
+++ b/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.vue
@@ -29,10 +29,14 @@
 			'isSearched': isSearched,
 			'selected': isSelected }"
 		:aria-label="participantAriaLabel"
-		v-on="isSearched ? { click: handleClick } : {}">
+		:role="isSearched ? 'listitem' : ''"
+		:tabindex="isSearched ? 0 : -1"
+		v-on="isSearched ? { click: handleClick, 'keydown.enter': handleClick } : {}"
+		@keydown.enter="handleClick">
 		<AvatarWrapper
 			:id="computedId"
 			:disable-tooltip="true"
+			:disable-menu="isSearched"
 			:size="44"
 			:show-user-status="showUserStatus && !isSearched"
 			:show-user-status-compact="false"
@@ -164,9 +168,9 @@ export default {
 		},
 		participantAriaLabel() {
 			if (this.isSearched) {
-				return t('spreed', 'Add participant {user}', { user: this.computedName })
+				return t('spreed', 'Add participant "{user}"', { user: this.computedName })
 			} else {
-				return t('spreed', 'Participant, {user}.', { user: this.computedName })
+				return t('spreed', 'Participant "{user}"', { user: this.computedName })
 			}
 		},
 
@@ -339,7 +343,9 @@ export default {
 		},
 		// Used to allow selecting participants in a search.
 		handleClick() {
-			this.$emit('clickParticipant', this.participant)
+			if (this.isSearched) {
+				this.$emit('clickParticipant', this.participant)
+			}
 		},
 		participantTypeIsModerator(participantType) {
 			return [PARTICIPANT.TYPE.OWNER, PARTICIPANT.TYPE.MODERATOR, PARTICIPANT.TYPE.GUEST_MODERATOR].indexOf(participantType) !== -1
@@ -386,6 +392,10 @@ export default {
 		cursor: pointer;
 	}
 
+	&:focus {
+		background-color: var(--color-background-hover);
+	}
+
 	&__user-wrapper {
 		margin-top: -4px;
 		margin-left: 12px;

From bf4c9a22910a1d2b5f416bbb369ea1c38115b236 Mon Sep 17 00:00:00 2001
From: Vincent Petry <vincent@nextcloud.com>
Date: Thu, 19 Nov 2020 10:01:00 +0100
Subject: [PATCH 08/12] Add missing aria label on new message form

Signed-off-by: Vincent Petry <vincent@nextcloud.com>
---
 .../NewMessageForm/AdvancedInput/AdvancedInput.vue          | 6 ++++++
 src/components/NewMessageForm/NewMessageForm.vue            | 1 +
 2 files changed, 7 insertions(+)

diff --git a/src/components/NewMessageForm/AdvancedInput/AdvancedInput.vue b/src/components/NewMessageForm/AdvancedInput/AdvancedInput.vue
index 55aaebf0ed0..63ac1fb2e4d 100644
--- a/src/components/NewMessageForm/AdvancedInput/AdvancedInput.vue
+++ b/src/components/NewMessageForm/AdvancedInput/AdvancedInput.vue
@@ -78,6 +78,7 @@
 			:contenteditable="activeInput"
 			:placeHolder="placeholderText"
 			role="textbox"
+			:aria-label="ariaLabel"
 			aria-multiline="true"
 			class="new-message-form__advancedinput"
 			@shortkey="focusInput"
@@ -178,6 +179,11 @@ export default {
 			default: '',
 		},
 
+		ariaLabel: {
+			type: String,
+			default: '',
+		},
+
 		/**
 		 * Determines if the input is active
 		 */
diff --git a/src/components/NewMessageForm/NewMessageForm.vue b/src/components/NewMessageForm/NewMessageForm.vue
index dff0c481260..5fe7d7f7bcb 100644
--- a/src/components/NewMessageForm/NewMessageForm.vue
+++ b/src/components/NewMessageForm/NewMessageForm.vue
@@ -86,6 +86,7 @@
 						:token="token"
 						:active-input="!isReadOnly"
 						:placeholder-text="placeholderText"
+						:aria-label="placeholderText"
 						@update:contentEditable="contentEditableToParsed"
 						@submit="handleSubmit"
 						@files-pasted="handlePastedFiles" />

From c6a845bee75e5ea46c90a1bb2eb7f9b2f3161066 Mon Sep 17 00:00:00 2001
From: Vincent Petry <vincent@nextcloud.com>
Date: Mon, 23 Nov 2020 20:35:43 +0100
Subject: [PATCH 09/12] Adjust headings in messages list to be more coherent

- h2 for the date which groups messages
- h3 for actor display name and quote actor
- replaced h6 with span for the date indicators on the right side

Signed-off-by: Vincent Petry <vincent@nextcloud.com>
---
 .../MessagesList/MessagesGroup/Message/Message.vue    | 11 +++++------
 src/components/Quote.vue                              |  2 +-
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue
index a7452eed824..2ae5208710d 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue
@@ -33,9 +33,9 @@ the main body of the message as well as a quote.
 		@mouseover="showActions=true"
 		@mouseleave="showActions=false">
 		<div v-if="isFirstMessage && showAuthor" class="message__author">
-			<h6 role="heading" aria-level="2">
+			<h3 role="heading">
 				{{ actorDisplayName }}
-			</h6>
+			</h3>
 		</div>
 		<div
 			ref="messageMain"
@@ -57,11 +57,10 @@ the main body of the message as well as a quote.
 			</div>
 			<div class="message__main__right">
 				<div v-if="isTemporary && !isTemporaryUpload" class="icon-loading-small" />
-				<h6 v-if="hasDate"
-					v-tooltip.auto="messageDate"
-					role="presentation">
+				<span v-if="hasDate"
+					  v-tooltip.auto="messageDate"/>
 					{{ messageTime }}
-				</h6>
+				</span>
 				<Actions
 					v-show="showActions && hasActions"
 					class="message__main__right__actions">
diff --git a/src/components/Quote.vue b/src/components/Quote.vue
index af2bc1ebcbf..8cdd843dc1d 100644
--- a/src/components/Quote.vue
+++ b/src/components/Quote.vue
@@ -30,7 +30,7 @@ components.
 		@click.prevent="handleQuoteClick">
 		<div class="quote__main">
 			<div class="quote__main__author">
-				<h6 role="presentation">{{ getDisplayName }}</h6>
+				<h3>{{ getDisplayName }}</h3>
 			</div>
 			<div v-if="isFileShareMessage"
 				class="quote__main__text">

From e067f641acca735a416fc3858402f14cecf356b1 Mon Sep 17 00:00:00 2001
From: Vincent Petry <vincent@nextcloud.com>
Date: Mon, 23 Nov 2020 20:47:32 +0100
Subject: [PATCH 10/12] Adjusted heading levels in messages list

Signed-off-by: Vincent Petry <vincent@nextcloud.com>
---
 .../MessagesList/MessagesGroup/Message/Message.vue | 14 ++++++--------
 .../MessagesList/MessagesGroup/MessagesGroup.vue   |  2 +-
 src/components/Quote.vue                           |  4 ++--
 3 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue
index 2ae5208710d..e7ba1a59b26 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue
@@ -32,10 +32,11 @@ the main body of the message as well as a quote.
 		:class="{'hover': showActions && !isSystemMessage, 'system' : isSystemMessage}"
 		@mouseover="showActions=true"
 		@mouseleave="showActions=false">
-		<div v-if="isFirstMessage && showAuthor" class="message__author">
-			<h3 role="heading">
-				{{ actorDisplayName }}
-			</h3>
+		<div v-if="isFirstMessage && showAuthor"
+			class="message__author"
+			role="heading"
+			aria-level="4">
+			{{ actorDisplayName }}
 		</div>
 		<div
 			ref="messageMain"
@@ -57,10 +58,7 @@ the main body of the message as well as a quote.
 			</div>
 			<div class="message__main__right">
 				<div v-if="isTemporary && !isTemporaryUpload" class="icon-loading-small" />
-				<span v-if="hasDate"
-					  v-tooltip.auto="messageDate"/>
-					{{ messageTime }}
-				</span>
+				<span v-if="hasDate" v-tooltip.auto="messageDate">{{ messageTime }}</span>
 				<Actions
 					v-show="showActions && hasActions"
 					class="message__main__right__actions">
diff --git a/src/components/MessagesList/MessagesGroup/MessagesGroup.vue b/src/components/MessagesList/MessagesGroup/MessagesGroup.vue
index e6e9b7576b0..eedb651540b 100644
--- a/src/components/MessagesList/MessagesGroup/MessagesGroup.vue
+++ b/src/components/MessagesList/MessagesGroup/MessagesGroup.vue
@@ -22,7 +22,7 @@
 <template>
 	<div class="message-group">
 		<div v-if="dateSeparator" class="message-group__date-header">
-			<span class="date" role="heading" aria-level="1">{{ dateSeparator }}</span>
+			<span class="date" role="heading" aria-level="3">{{ dateSeparator }}</span>
 		</div>
 		<div class="wrapper">
 			<div class="messages__avatar">
diff --git a/src/components/Quote.vue b/src/components/Quote.vue
index 8cdd843dc1d..b0a62242263 100644
--- a/src/components/Quote.vue
+++ b/src/components/Quote.vue
@@ -29,8 +29,8 @@ components.
 		class="quote"
 		@click.prevent="handleQuoteClick">
 		<div class="quote__main">
-			<div class="quote__main__author">
-				<h3>{{ getDisplayName }}</h3>
+			<div class="quote__main__author" role="heading" aria-level="4">
+				{{ getDisplayName }}
 			</div>
 			<div v-if="isFileShareMessage"
 				class="quote__main__text">

From 773be42dcc5642d9070820b8ba6d9a294a43112d Mon Sep 17 00:00:00 2001
From: Vincent Petry <vincent@nextcloud.com>
Date: Mon, 23 Nov 2020 20:53:31 +0100
Subject: [PATCH 11/12] Mark more li items as presentation in left sidebar

These lis are used as containers for the actual list, so no need to have
the screen reader say "list with one item" every time.

Signed-off-by: Vincent Petry <vincent@nextcloud.com>
---
 src/components/LeftSidebar/LeftSidebar.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/LeftSidebar/LeftSidebar.vue b/src/components/LeftSidebar/LeftSidebar.vue
index 70e1ebb474b..b66c359c3f6 100644
--- a/src/components/LeftSidebar/LeftSidebar.vue
+++ b/src/components/LeftSidebar/LeftSidebar.vue
@@ -49,7 +49,7 @@
 				<template v-if="searchResultsUsers.length !== 0">
 					<Caption
 						:title="t('spreed', 'Users')" />
-					<li v-if="searchResultsUsers.length !== 0">
+					<li v-if="searchResultsUsers.length !== 0" role="presentation">
 						<ConversationsOptionsList
 							:items="searchResultsUsers"
 							@click="createAndJoinConversation" />
@@ -66,7 +66,7 @@
 				<template v-if="searchResultsGroups.length !== 0">
 					<Caption
 						:title="t('spreed', 'Groups')" />
-					<li v-if="searchResultsGroups.length !== 0">
+					<li v-if="searchResultsGroups.length !== 0" role="presentation">
 						<ConversationsOptionsList
 							:items="searchResultsGroups"
 							@click="createAndJoinConversation" />
@@ -76,7 +76,7 @@
 				<template v-if="searchResultsCircles.length !== 0">
 					<Caption
 						:title="t('spreed', 'Circles')" />
-					<li v-if="searchResultsCircles.length !== 0">
+					<li v-if="searchResultsCircles.length !== 0" role="presentation">
 						<ConversationsOptionsList
 							:items="searchResultsCircles"
 							@click="createAndJoinConversation" />

From 063fe168fbe4f8486c3d514ef115e78aec9a8cee Mon Sep 17 00:00:00 2001
From: Vincent Petry <vincent@nextcloud.com>
Date: Mon, 23 Nov 2020 20:55:50 +0100
Subject: [PATCH 12/12] Only set aria label to match nextcloud-vue definition

Signed-off-by: Vincent Petry <vincent@nextcloud.com>
---
 src/components/LeftSidebar/LeftSidebar.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/LeftSidebar/LeftSidebar.vue b/src/components/LeftSidebar/LeftSidebar.vue
index b66c359c3f6..0ad10eb9920 100644
--- a/src/components/LeftSidebar/LeftSidebar.vue
+++ b/src/components/LeftSidebar/LeftSidebar.vue
@@ -20,9 +20,7 @@
 -->
 
 <template>
-	<AppNavigation
-		:aria-label="t('spreed', 'Conversation list')"
-		:toggle-aria-label="t('spreed', 'Toggle conversations list')">
+	<AppNavigation :aria-label="t('spreed', 'Conversation list')">
 		<div class="new-conversation">
 			<SearchBox
 				v-model="searchText"