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

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

diff --git a/apps/user_status/src/components/PredefinedStatus.vue b/apps/user_status/src/components/PredefinedStatus.vue
index 8f5dd92374d5e94fd9605dcf2a6e96f96f25e06c..69cf108c7adcf363a857efabb518055421d244d7 100644 (file)
--- 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>