BC-8426 - Improve A11y manage members page (#3455)

BC-8426 - Improve A11y manage members page --------- Co-authored-by: Murat Merdoglu <[email protected]>
hpi-schul-cloud · Nov 25, 2024 · 5328ecb · 5328ecb
1 parent ab393d6
commit 5328ecb
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 21 deletions.
diff --git a/src/components/templates/DefaultWireframe.vue b/src/components/templates/DefaultWireframe.vue
@@ -52,7 +52,7 @@
 					</speed-dial-menu>
 				</slot>
 			</div>
-			<v-divider v-if="showDivider" class="mx-n6" />
+			<v-divider v-if="showDivider" class="mx-n6" role="presentation" />
 		</div>
 		<v-container
 			:fluid="maxWidth !== 'nativ'"

diff --git a/src/locales/de.ts b/src/locales/de.ts
@@ -1675,14 +1675,15 @@ export default {
 		"Hinzufügen von Teilnehmenden fehlgeschlagen.",
 	"pages.rooms.members.error.remove":
 		"Löschen von Teilnehmenden fehlgeschlagen.",
-	"pages.rooms.members.remove.confirmation":
-		"{memberName} wirklich aus dem Raum entfernen?",
 	"pages.rooms.members.infoText":
-		'Füge Teilnehmende zum Raum hinzu. Lehrkräfte anderer Schulen können hinzugefügt werden, wenn sie in ihrem Profil die Sichtbarkeit im zentralen Verzeichnis aktiviert haben	(<a href="https://docs.dbildungscloud.de/display/SCDOK/Teameinladung+freigeben">weitere Informationen</a>).',
+		"Füge Teilnehmende zum Raum hinzu. Lehrkräfte anderer Schulen können hinzugefügt werden, wenn sie in ihrem Profil die Sichtbarkeit im zentralen Verzeichnis aktiviert haben	({0}).",
+	"pages.rooms.members.infoText.moreInformation": "weitere Informationen",
 	"pages.rooms.members.label": "Teilnehmende",
 	"pages.rooms.members.add": "Teilnehmende hinzufügen",
 	"pages.rooms.members.manage": "Teilnehmende verwalten",
-	"pages.rooms.members.remove": "Teilnehmende entfernen",
+	"pages.rooms.members.remove.ariaLabel": "{memberName} aus Raum entfernen",
+	"pages.rooms.members.remove.confirmation":
+		"{memberName} wirklich aus dem Raum entfernen?",
 	"pages.rooms.members.roles.editor": "Raumeditor",
 	"pages.rooms.members.roles.viewer": "Raumbetrachter",
 	"pages.rooms.title": "Räume",

diff --git a/src/locales/en.ts b/src/locales/en.ts
@@ -1644,14 +1644,15 @@ export default {
 	"pages.rooms.members.error.load": "The participant list could not be loaded.",
 	"pages.rooms.members.error.add": "Adding participants failed.",
 	"pages.rooms.members.error.remove": "Deleting participants failed.",
-	"pages.rooms.members.remove.confirmation":
-		"Remove {memberName} from the room?",
 	"pages.rooms.members.infoText":
-		'Add participants to the room. Teachers from other schools can be added if they have activated visibility in the central directory in their profile (<a href="https://docs.dbildungscloud.de/display/SCDOK/Teameinladung+freigeben">more information</a>).',
+		"Add participants to the room. Teachers from other schools can be added if they have activated visibility in the central directory in their profile ({0}).",
+	"pages.rooms.members.infoText.moreInformation": "more information",
 	"pages.rooms.members.label": "Participants",
 	"pages.rooms.members.add": "Add participants",
 	"pages.rooms.members.manage": "Manage participants",
-	"pages.rooms.members.remove": "Remove participants",
+	"pages.rooms.members.remove.ariaLabel": "Remove {memberName} from the room",
+	"pages.rooms.members.remove.confirmation":
+		"Remove {memberName} from the room?",
 	"pages.rooms.members.roles.editor": "Room editor",
 	"pages.rooms.members.roles.viewer": "Room viewer",
 	"pages.rooms.title": "Rooms",

diff --git a/src/locales/es.ts b/src/locales/es.ts
@@ -1689,14 +1689,15 @@ export default {
 		"No se pudo cargar la lista de participantes.",
 	"pages.rooms.members.error.add": "Error al agregar participantes.",
 	"pages.rooms.members.error.remove": "Error al eliminar participantes.",
-	"pages.rooms.members.remove.confirmation":
-		"¿Eliminar {memberName} de la sala?",
 	"pages.rooms.members.infoText":
-		'Añadir participantes a la sala. Se pueden añadir profesores de otros centros si tienen activada la visibilidad en el directorio central en su perfil (<a href="https://docs.dbildungscloud.de/display/SCDOK/Teameinladung+freigeben">más información</a>).',
+		"Añadir participantes a la sala. Se pueden añadir profesores de otros centros si tienen activada la visibilidad en el directorio central en su perfil ({0}).",
+	"pages.rooms.members.infoText.moreInformation": "más información",
 	"pages.rooms.members.label": "Participantes",
 	"pages.rooms.members.add": "Añadir participantes",
 	"pages.rooms.members.manage": "Administrar participantes",
-	"pages.rooms.members.remove": "Eliminar participante",
+	"pages.rooms.members.remove.ariaLabel": "Eliminar {memberName} de la sala",
+	"pages.rooms.members.remove.confirmation":
+		"¿Eliminar {memberName} de la sala?",
 	"pages.rooms.members.roles.editor": "Editor de salas",
 	"pages.rooms.members.roles.viewer": "Visor de salas",
 	"pages.rooms.title": "Salas",

diff --git a/src/locales/uk.ts b/src/locales/uk.ts
@@ -1666,14 +1666,15 @@ export default {
 	"pages.rooms.members.error.load": "Не вдалося завантажити список учасників.",
 	"pages.rooms.members.error.add": "Не вдалося додати учасників.",
 	"pages.rooms.members.error.remove": "Не вдалося видалити учасників.",
-	"pages.rooms.members.remove.confirmation":
-		"{memberName} буде видалено з цієї кімнати. Ви впевнені, що хочете видалити?",
 	"pages.rooms.members.infoText":
-		'Додайте учасників до кімнати. Вчителі з інших шкіл можуть бути додані, якщо вони активували видимість у центральному каталозі у своєму профілі (<a href="https://docs.dbildungscloud.de/display/SCDOK/Teameinladung+freigeben">більше інформації</a>).',
+		"Додайте учасників до кімнати. Вчителі з інших шкіл можуть бути додані, якщо вони активували видимість у центральному каталозі у своєму профілі ({0}).",
+	"pages.rooms.members.infoText.moreInformation": "більше інформації",
 	"pages.rooms.members.label": "Учасники",
 	"pages.rooms.members.add": "Додайте учасників",
 	"pages.rooms.members.manage": "Керувати учасниками",
-	"pages.rooms.members.remove": "Видалити учасника",
+	"pages.rooms.members.remove.ariaLabel": "Видалити {memberName} з кімнати",
+	"pages.rooms.members.remove.confirmation":
+		"{memberName} буде видалено з цієї кімнати. Ви впевнені, що хочете видалити?",
 	"pages.rooms.members.roles.editor": "Редактор кімнати",
 	"pages.rooms.members.roles.viewer": "Переглядач кімнати",
 	"pages.rooms.title": "Кімнати",

diff --git a/src/modules/feature/room/RoomMembers/MembersTable.vue b/src/modules/feature/room/RoomMembers/MembersTable.vue
@@ -16,7 +16,7 @@
 			/>
 		</v-card-title>
 
-		<v-divider />
+		<v-divider role="presentation" />
 		<v-data-table
 			v-model:search="search"
 			v-model="selectedMembers"
@@ -38,7 +38,7 @@
 					ref="removeMember"
 					variant="text"
 					:icon="mdiTrashCanOutline"
-					:aria-label="t('pages.rooms.members.remove')"
+					:aria-label="getRemoveAriaLabel(item)"
 					@click="onRemoveMember(item)"
 				/>
 			</template>
@@ -101,6 +101,11 @@ const tableHeader = [
 	{ title: t("common.words.mainSchool"), key: "schoolName" },
 	{ title: "", key: "actions", sortable: false, width: 50 },
 ];
+
+const getRemoveAriaLabel = (member: RoomMemberResponse) =>
+	t("pages.rooms.members.remove.ariaLabel", {
+		memberName: `${member.firstName} ${member.lastName}`,
+	});
 </script>
 
 <style lang="scss" scoped>

diff --git a/src/modules/page/room/RoomMembers.page.vue b/src/modules/page/room/RoomMembers.page.vue
@@ -12,7 +12,15 @@
 		</template>
 
 		<div class="mb-8 mt-12">
-			<RenderHTML :html="t('pages.rooms.members.infoText')" />
+			<i18n-t keypath="pages.rooms.members.infoText">
+				<a
+					href="https://docs.dbildungscloud.de/display/SCDOK/Teameinladung+freigeben"
+					target="_blank"
+					rel="noopener"
+					:ariaLabel="linkAriaLabel"
+					>{{ t("pages.rooms.members.infoText.moreInformation") }}</a
+				>
+			</i18n-t>
 		</div>
 		<div class="mb-12">
 			<MembersTable
@@ -58,7 +66,6 @@ import {
 	ConfirmationDialog,
 	useConfirmationDialog,
 } from "@ui-confirmation-dialog";
-import { RenderHTML } from "@feature-render-html";
 import { useDisplay } from "vuetify";
 
 const { fetchRoom } = useRoomDetailsStore();
@@ -152,4 +159,9 @@ const fabAction = {
 	ariaLabel: t("pages.rooms.members.add"),
 	dataTestId: "fab-add-members",
 };
+
+const linkAriaLabel = computed(
+	() =>
+		`${t("pages.rooms.members.infoText.moreInformation")}, ${t("common.ariaLabel.newTab")}`
+);
 </script>