fix(user_status): Use native radio buttons for online status selection

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

1 files changed, 52 insertions, 42 deletions

diff --git a/apps/user_status/src/components/PredefinedStatus.vue b/apps/user_status/src/components/PredefinedStatus.vue
index 8f5dd92374d..69cf108c7ad 100644
--- a/apps/user_status/src/components/PredefinedStatus.vue
+++ b/apps/user_status/src/components/PredefinedStatus.vue
@@ -19,22 +19,24 @@
   -
   -->
 <template>
-	<li class="predefined-status"
-		tabindex="0"
-		role="radio"
-		:aria-checked="`${selected}`"
-		@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>
+	<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>
 
@@ -70,6 +72,11 @@ export default {
 			default: false,
 		},
 	},
+	computed: {
+		id() {
+			return `user-status-predefined-status-${this.messageId}`
+		},
+	},
 	methods: {
 		/**
 		 * Emits an event when the user clicks the row
@@ -83,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>