fix(user_status): Use role=radio for predefined statuses in online status modal

* Instead of tabable DIVs properly assign the radio role
* Set role to radiogroup of list container to group the predefined statuses

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

3 files changed, 33 insertions, 6 deletions

diff --git a/apps/user_status/src/components/PredefinedStatus.vue b/apps/user_status/src/components/PredefinedStatus.vue
index 2775051439c..8f5dd92374d 100644
--- a/apps/user_status/src/components/PredefinedStatus.vue
+++ b/apps/user_status/src/components/PredefinedStatus.vue
@@ -19,8 +19,10 @@
   -
   -->
 <template>
-	<div class="predefined-status"
+	<li class="predefined-status"
 		tabindex="0"
+		role="radio"
+		:aria-checked="`${selected}`"
 		@keyup.enter="select"
 		@keyup.space="select"
 		@click="select">
@@ -33,7 +35,7 @@
 		<span class="predefined-status__clear-at">
 			{{ clearAt | clearAtFilter }}
 		</span>
-	</div>
+	</li>
 </template>
 
 <script>
@@ -62,6 +64,11 @@ export default {
 			required: false,
 			default: null,
 		},
+		selected: {
+			type: Boolean,
+			required: false,
+			default: false,
+		},
 	},
 	methods: {
 		/**
diff --git a/apps/user_status/src/components/PredefinedStatusesList.vue b/apps/user_status/src/components/PredefinedStatusesList.vue
index a3ac3c68677..65e8eabad82 100644
--- a/apps/user_status/src/components/PredefinedStatusesList.vue
+++ b/apps/user_status/src/components/PredefinedStatusesList.vue
@@ -20,16 +20,19 @@
   -->
 
 <template>
-	<div v-if="statusesHaveLoaded"
-		class="predefined-statuses-list">
+	<ul v-if="statusesHaveLoaded"
+		class="predefined-statuses-list"
+		role="radiogroup"
+		:aria-label="t('user_status', 'Predefined statuses')">
 		<PredefinedStatus v-for="status in predefinedStatuses"
 			:key="status.id"
 			:message-id="status.id"
 			:icon="status.icon"
 			:message="status.message"
 			:clear-at="status.clearAt"
+			:selected="!isCustomStatus && lastSelected === status.id"
 			@select="selectStatus(status)" />
-	</div>
+	</ul>
 	<div v-else
 		class="predefined-statuses-list">
 		<div class="icon icon-loading-small" />
@@ -45,6 +48,18 @@ export default {
 	components: {
 		PredefinedStatus,
 	},
+	props: {
+		/** If the current selected status is a custom one */
+		isCustomStatus: {
+			type: Boolean,
+			required: true,
+		},
+	},
+	data() {
+		return {
+			lastSelected: null,
+		}
+	},
 	computed: {
 		...mapState({
 			predefinedStatuses: state => state.predefinedStatuses.predefinedStatuses,
@@ -65,6 +80,7 @@ export default {
 		 * @param {object} status The selected status
 		 */
 		selectStatus(status) {
+			this.lastSelected = status.id
 			this.$emit('select-status', status)
 		},
 	},
diff --git a/apps/user_status/src/components/SetStatusModal.vue b/apps/user_status/src/components/SetStatusModal.vue
index 73e07573e5c..e3f2ea27c04 100644
--- a/apps/user_status/src/components/SetStatusModal.vue
+++ b/apps/user_status/src/components/SetStatusModal.vue
@@ -56,7 +56,7 @@
 				:icon="backupIcon"
 				:message="backupMessage"
 				@select="revertBackupFromServer" />
-			<PredefinedStatusesList @select-status="selectPredefinedMessage" />
+			<PredefinedStatusesList :is-custom-status="isCustomStatus" @select-status="selectPredefinedMessage" />
 			<ClearAtSelect :clear-at="clearAt"
 				@select-clear-at="setClearAt" />
 			<div class="status-buttons">
@@ -109,6 +109,7 @@ export default {
 		return {
 			clearAt: null,
 			editedMessage: '',
+			isCustomStatus: true,
 			isSavingStatus: false,
 			statuses: getAllStatusOptions(),
 		}
@@ -189,6 +190,7 @@ export default {
 		 * @param {string} icon The new icon
 		 */
 		setIcon(icon) {
+			this.isCustomStatus = true
 			this.$store.dispatch('setCustomMessage', {
 				message: this.message,
 				icon,
@@ -204,6 +206,7 @@ export default {
 		 * @param {string} message The new message
 		 */
 		setMessage(message) {
+			this.isCustomStatus = true
 			this.editedMessage = message
 		},
 		/**
@@ -220,6 +223,7 @@ export default {
 		 * @param {object} status The predefined status object
 		 */
 		selectPredefinedMessage(status) {
+			this.isCustomStatus = false
 			this.clearAt = status.clearAt
 			this.$store.dispatch('setPredefinedMessage', {
 				messageId: status.id,