Merge pull request #9376 from nextcloud/fix/noid/input-field-labels

Accessibility improvements for text fields and buttons

src/components/LeftSidebar/NewGroupConversation/SetContacts/SetContacts.vue

@@ -26,7 +26,7 @@
 			v-observe-visibility="visibilityChanged"
 			:value.sync="searchText"
 			type="text"
-			:placeholder="t('spreed', 'Search participants')"
+			:label="t('spreed', 'Search participants')"
 			@input="handleInput">
 			<Magnify :size="16" />
 		</NcTextField>

src/components/LeftSidebar/NewGroupConversation/SetConversationName/SetConversationName.vue

@@ -25,7 +25,7 @@
 			v-observe-visibility="visibilityChanged"
 			type="text"
 			:value="value"
-			:placeholder="t('spreed', 'Conversation name')"
+			:label="t('spreed', 'Conversation name')"
 			@input="handleInput"
 			@keydown.enter="handleKeydown" />
 	</div>

src/components/LeftSidebar/SearchBox/SearchBox.vue

@@ -23,7 +23,7 @@
 	<form @submit.prevent="handleSubmit">
 		<NcTextField ref="searchConversations"
 			:value.sync="localValue"
-			:placeholder="placeholderText"
+			:label="placeholderText"
 			:show-trailing-button="isSearching"
 			trailing-button-icon="close"
 			@trailing-button-click="abortSearch"

src/components/MessagesList/MessagesGroup/Message/MessagePart/PollVotersDetails.vue

@@ -23,6 +23,7 @@
 	<NcPopover class="poll-voters-details" trigger="hover">
 		<template #trigger>
 			<NcButton type="tertiary-no-background"
+				:aria-label="t('spreed','Voted participants')"
 				class="poll-voters-details__button">
 				<template #icon>
 					<AvatarWrapper v-for="(item, index) in details.slice(0, 8)"

src/components/NewMessageForm/SimplePollsEditor/PollOption.vue

@@ -25,11 +25,11 @@
 		<NcTextField class="poll-option__input" v-bind="$attrs" v-on="$listeners" />
 		<NcButton v-if="canDelete"
 			type="tertiary-no-background"
+			:aria-label="t('spreed', 'Delete poll option')"
 			@click="deleteOption">
-			<Close slot="icon"
-				decorative
-				title=""
-				:size="20" />
+			<template #icon>
+				<Close :size="20" />
+			</template>
 		</NcButton>
 	</form>
 </template>

src/components/NewMessageForm/SimplePollsEditor/SimplePollsEditor.vue

@@ -31,24 +31,26 @@
 			<p class="simple-polls-editor__caption">
 				{{ t('spreed', 'Question') }}
 			</p>
-			<NcTextField :value.sync="pollQuestion" :placeholder="t('spreed', 'Ask a question')" v-on="$listeners" />
+			<NcTextField :value.sync="pollQuestion" :label="t('spreed', 'Ask a question')" v-on="$listeners" />
 
 			<!-- Poll options -->
 			<p class="simple-polls-editor__caption">
 				{{ t('spreed', 'Answers') }}
 			</p>
-			<PollOption v-for="option, index in pollOptions"
+			<PollOption v-for="(option, index) in pollOptions"
 				:key="index"
 				:ref="`pollOption${index}`"
 				class="simple-polls-editor__option"
 				:value.sync="pollOptions[index]"
-				:placeholder="t('spreed', 'Answer {option}', {option: index + 1})"
+				:label="t('spreed', 'Answer {option}', {option: index + 1})"
 				:can-delete="pollOptions.length > 2"
 				@delete-option="deleteOption(index)" />
 
 			<!-- Add options -->
 			<NcButton class="simple-polls-editor__add-more" type="tertiary-no-background" @click="addOption">
-				<Plus slot="icon" />
+				<template #icon>
+					<Plus />
+				</template>
 				{{ t('spreed', 'Add answer') }}
 			</NcButton>
 

src/components/TopBar/TopBar.vue

@@ -117,6 +117,8 @@
 
 			<!-- in call: open chat tab -->
 			<NcButton v-else
+				:aria-label="t('spreed', 'Open chat')"
+				:title="t('spreed', 'Open chat')"
 				class="top-bar__button chat-button dark-hover"
 				type="tertiary"
 				@click="openSidebar('chat')">

src/views/RoomSelector.vue

@@ -35,6 +35,7 @@
 				<NcTextField :value.sync="searchText"
 					trailing-button-icon="close"
 					class="search-form"
+					:label="t('spreed', 'Search conversations or users')"
 					:show-trailing-button="searchText !==''"
 					@trailing-button-click="clearText">
 					<Magnify :size="16" />