BC-8216 - Test & fix a11y on room pages (#3432)

* adding aria-checked property for color buttons * adding detailed voice over for time period in rooms
hpi-schul-cloud · Nov 4, 2024 · ba4b411 · ba4b411
1 parent a8fe354
commit ba4b411
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 3 deletions.
diff --git a/src/locales/de.ts b/src/locales/de.ts
@@ -804,6 +804,8 @@ export default {
 	"components.organisms.TasksDashboardMain.tab.open": "Offen",
 	"components.roomForm.labels.roomName": "Name des Raumes",
 	"components.roomForm.labels.timePeriod": "Zeitraum",
+	"components.roomForm.labels.timePeriod.from": "Zeitraum von",
+	"components.roomForm.labels.timePeriod.to": "Zeitraum bis",
 	"components.timePicker.validation.format": "Bitte Format HH:MM verwenden.",
 	"components.timePicker.validation.required": "Bitte Uhrzeit angeben.",
 	"error.400": "400 – Fehlerhafte Anfrage",

diff --git a/src/locales/en.ts b/src/locales/en.ts
@@ -796,6 +796,8 @@ export default {
 	"components.organisms.TasksDashboardMain.tab.open": "Open",
 	"components.roomForm.labels.roomName": "Name of the room",
 	"components.roomForm.labels.timePeriod": "Time period",
+	"components.roomForm.labels.timePeriod.from": "Time period from",
+	"components.roomForm.labels.timePeriod.to": "Time period to",
 	"components.timePicker.validation.format": "Please use format HH:MM",
 	"components.timePicker.validation.required": "Please enter a time.",
 	"error.400": "401 – Bad Request",

diff --git a/src/locales/es.ts b/src/locales/es.ts
@@ -816,6 +816,8 @@ export default {
 	"components.organisms.TasksDashboardMain.tab.open": "Abrir",
 	"components.roomForm.labels.roomName": "Nombre de la sala",
 	"components.roomForm.labels.timePeriod": "Periodo de tiempo",
+	"components.roomForm.labels.timePeriod.from": "Periodo de tiempo desde",
+	"components.roomForm.labels.timePeriod.to": "Periodo de tiempo hasta",
 	"components.timePicker.validation.format":
 		"Por favor utilice el formato HH:MM",
 	"components.timePicker.validation.required": "Por favor ingrese un tiempo.",

diff --git a/src/locales/uk.ts b/src/locales/uk.ts
@@ -810,6 +810,8 @@ export default {
 	"components.organisms.TasksDashboardMain.tab.open": "Відкрити",
 	"components.roomForm.labels.roomName": "Назва кімнати",
 	"components.roomForm.labels.timePeriod": "Період часу",
+	"components.roomForm.labels.timePeriod.from": "Період від",
+	"components.roomForm.labels.timePeriod.to": "Період до",
 	"components.timePicker.validation.format": "Використовуйте формат ГГ:ХХ",
 	"components.timePicker.validation.required": "Будь ласка, введіть час.",
 	"error.400": "400 – Неприпустимий запит",

diff --git a/src/modules/feature/room/RoomColorPicker/RoomColorPickerSwatch.vue b/src/modules/feature/room/RoomColorPicker/RoomColorPickerSwatch.vue
@@ -5,6 +5,7 @@
 		:data-testid="`color-swatch-${color}`"
 		role="radio"
 		:aria-label="ariaLabel"
+		:aria-checked="isSelected"
 		@click="() => $emit('update:color', color)"
 	>
 		<VIcon v-if="isSelected" :icon="mdiCheckCircleOutline" color="white" />

diff --git a/src/modules/feature/room/RoomForm.vue b/src/modules/feature/room/RoomForm.vue
@@ -17,22 +17,22 @@
 				/>
 			</div>
 			<div class="mb-8">
-				<label id="time-period-label" class="d-flex mb-2">
+				<label class="d-flex mb-2">
 					{{ $t("components.roomForm.labels.timePeriod") }}
 				</label>
 				<div class="d-flex">
 					<DatePicker
 						:date="roomData.startDate"
 						class="w-50 mr-4"
 						data-testid="room-start-date-input"
-						aria-labelledby="time-period-label"
+						:aria-label="$t('components.roomForm.labels.timePeriod.from')"
 						@update:date="onUpdateStartDate"
 					/>
 					<DatePicker
 						:date="roomData.endDate"
 						class="w-50 ml-4"
 						data-testid="room-end-date-input"
-						aria-labelledby="time-period-label"
+						:aria-label="$t('components.roomForm.labels.timePeriod.to')"
 						@update:date="onUpdateEndDate"
 					/>
 				</div>