Improve accessibly of room dashboard

lang/en/rooms.php

@@ -101,7 +101,9 @@
     ],
     'favorites' => [
         'add' => 'Add to favorites',
+        'add_for' => 'Add to favorites: :room',
         'remove' => 'Remove from favorites',
+        'remove_for' => 'Remove from favorites: :room',
     ],
     'feature_disabled_roomtype' => 'This feature is disabled for this room type. Try selecting a different room type or contact the administrator.',
     'feature_disabled_system' => ':name is disabled. Please contact the administrator.',
@@ -162,8 +164,12 @@
             'last_ran_till' => 'Last run until :date',
             'never_started' => 'Never started before',
             'open' => 'Open',
+            'owner' => 'Owner',
+            'room_type' => 'Room type',
             'running_since' => 'Running since :date',
+            'short_description' => 'Short description',
             'show_details' => 'Show room details',
+            'show_details_for' => 'Show details for room ":room"',
         ],
         'show_all' => 'All rooms',
         'show_own' => 'Own rooms',

resources/css/app/_room.css

@@ -167,3 +167,15 @@
         background-color: var(--p-amber-500);
     }
 }
+
+.room-card:focus-within {
+    @apply ring;
+}
+
+.room-card:focus-within a:focus {
+    outline: none;
+}
+
+.room-card:has(button:focus) {
+    @apply ring-0;
+}

resources/js/components/RoomCard.vue

@@ -1,59 +1,53 @@
 <template>
-  <div class="h-full">
-    <!-- room card-->
-    <div
-      tabindex="0"
-      data-test="room-card"
-      class="room-card relative h-full rounded-border border border-surface shadow-none hover:bg-emphasis"
-      @click="open"
-      @keyup.enter="open"
-    >
-      <span v-if="running" class="absolute -top-1.5 -right-1.5 flex h-3 w-3">
-        <span
-          class="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75"
-        ></span>
-        <span
-          class="relative inline-flex h-3 w-3 rounded-full bg-green-500"
-        ></span>
-      </span>
-      <div class="p-4">
-        <div class="flex flex-col">
-          <div class="grow">
-            <div class="flex items-start justify-between">
-              <RoomTypeBadge :room-type="props.room.type" />
-              <div class="relative z-10 flex shrink-0 gap-2">
-                <Button
-                  v-if="props.room.short_description != null"
-                  v-tooltip="$t('rooms.index.room_component.show_details')"
-                  severity="secondary"
-                  class="room-card-button h-8 w-8 p-0 text-sm"
-                  icon="fa-solid fa-info"
-                  data-test="room-info-button"
-                  :aria-label="$t('rooms.index.room_component.show_details')"
-                  @click.stop="modalVisible = true"
-                />
-                <RoomFavoriteButton
-                  :room="props.room"
-                  class="room-card-button h-8 w-8 p-0 text-sm"
-                  @favorites-changed="$emit('favoritesChanged')"
-                />
-              </div>
-            </div>
-            <p
-              class="text-break mt-2 mb-4 font-bold text-color"
-              style="width: 100%"
-            >
-              {{ props.room.name }}
-            </p>
+  <!-- room card-->
+  <li
+    data-test="room-card"
+    class="room-card relative h-full rounded-border border border-surface shadow-none hover:bg-emphasis"
+  >
+    <span v-if="running" class="absolute -top-1.5 -right-1.5 flex h-3 w-3">
+      <span
+        class="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75"
+      ></span>
+      <span
+        class="relative inline-flex h-3 w-3 rounded-full bg-green-500"
+      ></span>
+    </span>
+    <div class="p-4">
+      <div class="flex grow flex-col">
+        <router-link class="stretched-link order-1" :to="link">
+          <h2
+            class="text-break mt-2 mb-4 font-bold text-color"
+            style="width: 100%"
+          >
+            {{ props.room.name }}
+          </h2>
+        </router-link>
+        <RoomTypeBadge class="sr-only" :room-type="props.room.type" />
+        <RoomDetailsList class="order-2" :room="props.room" />
+        <div class="order-0 flex items-start justify-between">
+          <RoomTypeBadge aria-hidden="true" :room-type="props.room.type" />
+          <div class="relative z-10 flex shrink-0 gap-2">
+            <Button
+              v-if="props.room.short_description != null"
+              v-tooltip="$t('rooms.index.room_component.show_details')"
+              severity="secondary"
+              class="room-card-button h-8 w-8 p-0 text-sm"
+              icon="fa-solid fa-info"
+              data-test="room-info-button"
+              :aria-label="
+                $t('rooms.index.room_component.show_details_for', {
+                  room: props.room.name,
+                })
+              "
+              @click.stop="modalVisible = true"
+            />
+            <RoomFavoriteButton
+              :room="props.room"
+              class="room-card-button h-8 w-8 p-0 text-sm"
+              @favorites-changed="$emit('favoritesChanged')"
+            />
           </div>
-          <RoomDetailsList :room="props.room" />
         </div>
-        <router-link
-          tabindex="-1"
-          class="stretched-link"
-          :to="link"
-          aria-hidden="true"
-        />
       </div>
     </div>
 
@@ -97,7 +91,7 @@
         </div>
       </template>
     </Dialog>
-  </div>
+  </li>
 </template>
 <script setup>
 import { useRouter } from "vue-router";
@@ -138,10 +132,6 @@ const running = computed(() => {
  */
 const modalVisible = ref(false);
 
-function open() {
-  router.push(link.value);
-}
-
 function handleCancel() {
   modalVisible.value = false;
 }

resources/js/components/RoomDetailsList.vue

@@ -5,10 +5,13 @@
   >
     <!--owner name-->
     <div v-if="props.room.owner" class="flex">
-      <div class="room-details__icon">
+      <div class="room-details__icon" aria-hidden="true">
         <i class="fa-solid fa-user" />
       </div>
       <div class="room-details__text">
+        <span class="sr-only"
+          >{{ $t("rooms.index.room_component.owner") }}<raw-text>:</raw-text>
+        </span>
         <span>{{ props.room.owner.name }}</span>
       </div>
     </div>
@@ -17,18 +20,22 @@
       v-if="props.room.short_description && props.showDescription"
       class="flex"
     >
-      <div class="room-details__icon">
+      <div class="room-details__icon" aria-hidden="true">
         <i class="fa-solid fa-info-circle" />
       </div>
       <div class="room-details__text">
+        <span class="sr-only"
+          >{{ $t("rooms.index.room_component.short_description")
+          }}<raw-text>:</raw-text>
+        </span>
         <span style="word-break: break-word"
           >{{ props.room.short_description }}
         </span>
       </div>
     </div>
     <!--last meeting info (never started, last ran till, running since)-->
     <div class="flex">
-      <div class="room-details__icon">
+      <div class="room-details__icon" aria-hidden="true">
         <i class="fa-solid fa-clock" />
       </div>
       <div class="room-details__text">
@@ -78,6 +85,8 @@
   </div>
 </template>
 <script setup>
+import RawText from "./RawText.vue";
+
 const props = defineProps({
   room: {
     type: Object,

resources/js/components/RoomFavoriteButton.vue

@@ -9,8 +9,8 @@
     :severity="props.room.is_favorite ? 'contrast' : 'secondary'"
     :aria-label="
       props.room.is_favorite
-        ? $t('rooms.favorites.remove')
-        : $t('rooms.favorites.add')
+        ? $t('rooms.favorites.remove_for', { room: props.room.name })
+        : $t('rooms.favorites.add_for', { room: props.room.name })
     "
     :icon="isLoading ? 'pi pi-spin pi-spinner' : 'fa-solid fa-star'"
     :disabled="isLoading"

resources/js/components/RoomTypeBadge.vue

@@ -7,11 +7,16 @@
     }"
     data-test="room-type-badge"
   >
-    {{ roomType.name }}
+    <span class="sr-only"
+      >{{ $t("rooms.index.room_component.room_type") }}<raw-text>:</raw-text>
+    </span>
+    <span>{{ roomType.name }}</span>
   </Tag>
 </template>
 
 <script setup>
+import RawText from "./RawText.vue";
+
 defineProps({
   roomType: {
     type: Object,

resources/js/views/RoomsIndex.vue

@@ -304,18 +304,18 @@
             </template>
 
             <template #list="slotProps">
-              <div
+              <ul
                 v-if="!loadingRooms && !loadingRoomsError"
                 class="grid grid-cols-12 gap-4 py-1"
               >
-                <div
+                <RoomCard
                   v-for="(room, index) in slotProps.items"
                   :key="index"
+                  :room="room"
                   class="col-span-12 md:col-span-6 lg:col-span-4 2xl:col-span-3"
-                >
-                  <RoomCard :room="room" @favorites-changed="loadRooms()" />
-                </div>
-              </div>
+                  @favorites-changed="loadRooms()"
+                />
+              </ul>
             </template>
           </DataView>
         </OverlayComponent>