[user_status] Improve user online status modal

apps/user_status/src/components/CustomMessageInput.vue

@@ -19,9 +19,11 @@
   -
   -->
 <template>
-	<div class="custom-input">
+	<div class="custom-input" role="group">
 		<NcEmojiPicker container=".custom-input" @select="setIcon">
-			<NcButton class="custom-input__emoji-button" type="tertiary">
+			<NcButton type="tertiary"
+				class="custom-input__emoji-button"
+				:aria-label="t('user_status', 'Emoji for your status message')">
 				{{ visibleIcon }}
 			</NcButton>
 		</NcEmojiPicker>

apps/user_status/src/components/OnlineStatusSelect.vue

@@ -23,7 +23,7 @@
 	<div class="user-status-online-select">
 		<input :id="id"
 			:checked="checked"
-			class="user-status-online-select__input"
+			class="hidden-visually user-status-online-select__input"
 			type="radio"
 			name="user-status-online"
 			@change="onChange">
@@ -82,16 +82,6 @@ $icon-size: 24px;
 $label-padding: 8px;
 
 .user-status-online-select {
-	// Inputs are here for keyboard navigation, they are not visually visible
-	&__input {
-		position: absolute;
-		top: auto;
-		left: -10000px;
-		overflow: hidden;
-		width: 1px;
-		height: 1px;
-	}
-
 	&__label {
 		position: relative;
 		display: block;

apps/user_status/src/components/PredefinedStatus.vue

@@ -19,21 +19,25 @@
   -
   -->
 <template>
-	<div class="predefined-status"
-		tabindex="0"
-		@keyup.enter="select"
-		@keyup.space="select"
-		@click="select">
-		<span aria-hidden="true" class="predefined-status__icon">
-			{{ icon }}
-		</span>
-		<span class="predefined-status__message">
-			{{ message }}
-		</span>
-		<span class="predefined-status__clear-at">
-			{{ clearAt | clearAtFilter }}
-		</span>
-	</div>
+	<li class="predefined-status">
+		<input :id="id"
+			class="hidden-visually predefined-status__input"
+			type="radio"
+			name="predefined-status"
+			:checked="selected"
+			@change="select">
+		<label class="predefined-status__label" :for="id">
+			<span aria-hidden="true" class="predefined-status__label--icon">
+				{{ icon }}
+			</span>
+			<span class="predefined-status__label--message">
+				{{ message }}
+			</span>
+			<span class="predefined-status__label--clear-at">
+				{{ clearAt | clearAtFilter }}
+			</span>
+		</label>
+	</li>
 </template>
 
 <script>
@@ -62,6 +66,16 @@ export default {
 			required: false,
 			default: null,
 		},
+		selected: {
+			type: Boolean,
+			required: false,
+			default: false,
+		},
+	},
+	computed: {
+		id() {
+			return `user-status-predefined-status-${this.messageId}`
+		},
 	},
 	methods: {
 		/**
@@ -76,39 +90,42 @@ export default {
 
 <style lang="scss" scoped>
 .predefined-status {
-	display: flex;
-	flex-wrap: nowrap;
-	justify-content: flex-start;
-	flex-basis: 100%;
-	border-radius: var(--border-radius);
-	align-items: center;
-	min-height: 44px;
+	&__label {
+		display: flex;
+		flex-wrap: nowrap;
+		justify-content: flex-start;
+		flex-basis: 100%;
+		border-radius: var(--border-radius);
+		align-items: center;
+		min-height: 44px;
 
-	&:hover,
-	&:focus {
-		background-color: var(--color-background-hover);
-	}
+		&--icon {
+			flex-basis: 40px;
+			text-align: center;
+		}
 
-	&:active{
-		background-color: var(--color-background-dark);
-	}
+		&--message {
+			font-weight: bold;
+			padding: 0 6px;
+		}
 
-	&__icon {
-		flex-basis: 40px;
-		text-align: center;
-	}
+		&--clear-at {
+			color: var(--color-text-maxcontrast);
 
-	&__message {
-		font-weight: bold;
-		padding: 0 6px;
+			&::before {
+				content: ' – ';
+			}
+		}
 	}
 
-	&__clear-at {
-		color: var(--color-text-maxcontrast);
+	&__input:checked + &__label,
+	&__input:focus + &__label,
+	&__label:hover {
+		background-color: var(--color-background-hover);
+	}
 
-		&::before {
-			content: ' – ';
-		}
+	&__label:active {
+		background-color: var(--color-background-dark);
 	}
 }
 </style>

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)
 		},
 	},

apps/user_status/src/components/SetStatusModal.vue

@@ -28,7 +28,9 @@
 			<div class="set-status-modal__header">
 				<h2>{{ $t('user_status', 'Online status') }}</h2>
 			</div>
-			<div class="set-status-modal__online-status">
+			<div class="set-status-modal__online-status"
+				role="radiogroup"
+				:aria-label="$t('user_status', 'Online status')">
 				<OnlineStatusSelect v-for="status in statuses"
 					:key="status.type"
 					v-bind="status"
@@ -56,7 +58,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 +111,7 @@ export default {
 		return {
 			clearAt: null,
 			editedMessage: '',
+			isCustomStatus: true,
 			isSavingStatus: false,
 			statuses: getAllStatusOptions(),
 		}
@@ -189,6 +192,7 @@ export default {
 		 * @param {string} icon The new icon
 		 */
 		setIcon(icon) {
+			this.isCustomStatus = true
 			this.$store.dispatch('setCustomMessage', {
 				message: this.message,
 				icon,
@@ -204,6 +208,7 @@ export default {
 		 * @param {string} message The new message
 		 */
 		setMessage(message) {
+			this.isCustomStatus = true
 			this.editedMessage = message
 		},
 		/**
@@ -220,6 +225,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,