BC-8549 - Improve change-role-option single/batch action (#3550)

This PR improves the change-role option on the room members page. It also improves accessibility of all menus that use KebabMenu/KebabMenuList, by focussing the first menu item when opening the menu via keyboard/screenreader. *small translation adjustments for all languages, using "room permissions" instead of just "permission" *change spanish language keys to use "autorización" instead of "permisos" * focus first element in kebab menu * focus first item board menu * focus first item in multi action menu * fix action menu on display sizes<600px for extra small displays
hpi-schul-cloud · Feb 24, 2025 · 4fec300 · 4fec300
1 parent 8f4b56a
commit 4fec300
Show file tree

Hide file tree

Showing 15 changed files with 441 additions and 260 deletions.
diff --git a/src/locales/de.ts b/src/locales/de.ts
@@ -1827,7 +1827,7 @@ export default {
 		"Aktionsmenü für {memberFullName}",
 	"pages.rooms.members.changePermission": "Raumberechtigungen ändern",
 	"pages.rooms.members.changePermission.ariaLabel":
-		"Berechtigung für {memberFullName} ändern",
+		"Raumberechtigungen für {memberFullName} ändern",
 	"pages.rooms.members.manage": "Raum-Mitglieder",
 	"pages.rooms.members.remove.ariaLabel": "{memberFullName} aus Raum entfernen",
 	"pages.rooms.members.resetSelection.ariaLabel":

diff --git a/src/locales/en.ts b/src/locales/en.ts
@@ -1793,9 +1793,9 @@ export default {
 	"pages.rooms.members.add": "Add members",
 	"pages.rooms.members.actionMenu.ariaLabel":
 		"Action menu for {memberFullName}",
-	"pages.rooms.members.changePermission": "Change permissions",
+	"pages.rooms.members.changePermission": "Change room permissions",
 	"pages.rooms.members.changePermission.ariaLabel":
-		"Change permissions for {memberFullName}",
+		"Change room permissions for {memberFullName}",
 	"pages.rooms.members.manage": "Room members",
 	"pages.rooms.members.remove.ariaLabel":
 		"Remove {memberFullName} from the room",

diff --git a/src/locales/es.ts b/src/locales/es.ts
@@ -1842,9 +1842,10 @@ export default {
 	"pages.rooms.members.add": "Añadir miembros",
 	"pages.rooms.members.actionMenu.ariaLabel":
 		"Menú de acciones para {memberFullName}",
-	"pages.rooms.members.changePermission": "Cambiar permisos",
+	"pages.rooms.members.changePermission":
+		"Cambiar las autorizaciones en la sala",
 	"pages.rooms.members.changePermission.ariaLabel":
-		"Cambiar el permiso para {memberFullName}",
+		"Cambiar autorizaciones de sala para {memberFullName}",
 	"pages.rooms.members.manage": "Miembros de la sala",
 	"pages.rooms.members.remove.ariaLabel":
 		"Eliminar {memberFullName} de la sala",
@@ -1862,31 +1863,31 @@ export default {
 	"pages.rooms.members.roomPermissions.owner": "Propietario",
 	"pages.rooms.members.roomPermissions.editor": "Editar",
 	"pages.rooms.members.roomPermissions.viewer": "Leer",
-	"pages.rooms.members.tableHeader.roomRole": "Permisos de la sala",
+	"pages.rooms.members.tableHeader.roomRole": "Autorizaciones de sala",
 	"pages.rooms.members.tableHeader.schoolRole": "Rol en la escuela",
 	"pages.rooms.members.tableHeader.actions": "Acciones",
 	"pages.rooms.members.roleChange.subTitle":
-		"{memberFullName} recibe los siguientes permisos de sala en “{roomName}”:",
+		"{memberFullName} recibe las siguientes autorizaciones en la sala “{roomName}”:",
 	"pages.rooms.members.roleChange.multipleUser.subTitle":
-		"Los miembros seleccionados recibirán los siguientes permisos de sala en “{roomName}”:",
+		"Los miembros seleccionados reciben las siguientes autorizaciones en la sala “{roomName}”:",
 	"pages.rooms.members.roleChange.Roomviewer.label":
 		"Accede a los tableros de la sala y visualiza el contenido",
 	"pages.rooms.members.roleChange.Roomeditor.label": "Crear y editar contenido",
 	"pages.rooms.members.roleChange.Roomadmin.label":
-		'Los mismos permisos que "Editar", además de agregar y eliminar otros miembros, cambiar sus permisos de sala y editar la sala',
+		'Las mismas autorizaciones que en "Editar", además de añadir y eliminar otros miembros, cambiar sus autorizaciones de sala y editar salas.',
 	"pages.rooms.members.roleChange.Roomowner.label":
 		"Las mismas autorizaciones que «Administrar», además de eliminar la sala",
 	"pages.rooms.members.roleChange.dialogTitle.handOver":
-		"¿El permiso de habitación realmente se transfiere como “propiedad”?",
+		"¿Realmente se transfieren las autorizaciones de “Propietario” de salas?",
 	"pages.rooms.members.roleChange.Roomowner.label.subText":
 		"Atención: ¡Solo una persona en la sala puede recibir esto!",
 	"pages.rooms.members.roleChange.handOverBtn.text": "Transferir propiedad",
 	"pages.rooms.members.handOverAlert.label":
-		"Los permisos de esta sala se están transfiriendo a {memberFullName}.",
+		"Esta autorización de sala se transfiere a {memberFullName}.",
 	"pages.rooms.members.handOverAlert.label.subText":
-		"{currentUserFullName} pierde los permisos «Propietario» y recibe el permiso «Administrar».",
+		"{currentUserFullName} pierde la autorización «Propietario» y gana la autorización «Administrar».",
 	"pages.rooms.members.handOverAlert.confirm.label":
-		"Si este permiso se transfiere a {memberFullName}, {currentUserFullName} pierde el derecho a eliminar la sala.",
+		"Si esta autorización se transfiere a {memberFullName}, {currentUserFullName} pierde el derecho a eliminar la sala.",
 	"pages.rooms.members.handOverAlert.confirm.label.subText":
 		"Esta acción sólo puede ser deshecha por {memberFullName}.",
 	"pages.rooms.title": "Salas",

diff --git a/src/locales/uk.ts b/src/locales/uk.ts
@@ -1820,9 +1820,9 @@ export default {
 	"pages.rooms.members.label": "Учасники",
 	"pages.rooms.members.add": "Додайте члени",
 	"pages.rooms.members.actionMenu.ariaLabel": "Меню дій для {memberFullName}",
-	"pages.rooms.members.changePermission": "Змінити дозволи",
+	"pages.rooms.members.changePermission": "Змінити дозволи кімнат",
 	"pages.rooms.members.changePermission.ariaLabel":
-		"Змінити дозвіл для {memberFullName}",
+		"Змінити дозвіл кімнат для {memberFullName}",
 	"pages.rooms.members.manage": "Учасник кімнати",
 	"pages.rooms.members.remove.ariaLabel": "Видалити {memberFullName} з кімнати",
 	"pages.rooms.members.resetSelection.ariaLabel":

diff --git a/src/modules/feature/room/RoomMembers/ActionMenu.vue b/src/modules/feature/room/RoomMembers/ActionMenu.vue
@@ -1,13 +1,13 @@
 <template>
-	<div class="mr-2 pa-0 pl-4" data-testid="multi-action-menu">
-		<span class="d-inline-flex selected-count">
+	<div class="pa-0 pl-4" data-testid="multi-action-menu">
+		<span class="d-inline-flex selected-count text-no-wrap">
 			{{ selectedIds.length }}
 			{{ t("pages.administration.selected") }}
 		</span>
 
-		<v-menu>
+		<VMenu>
 			<template v-slot:activator="{ props }">
-				<v-btn
+				<VBtn
 					v-bind="props"
 					color="primary"
 					class="ml-4"
@@ -16,19 +16,19 @@
 					data-testid="action-menu-button"
 				>
 					{{ t("pages.rooms.members.tableHeader.actions") }}
-				</v-btn>
+				</VBtn>
 			</template>
 
-			<v-list>
+			<KebabMenuList>
 				<KebabMenuActionChangePermission
 					v-if="isVisibleChangeRoleButton"
 					@click="onRoleChange"
 				/>
 				<KebabMenuActionRemoveMember @click="onRemove" />
-			</v-list>
-		</v-menu>
+			</KebabMenuList>
+		</VMenu>
 
-		<v-btn
+		<VBtn
 			ref="resetSelectedMembers"
 			class="ml-2 mr-2"
 			size="x-small"
@@ -44,6 +44,7 @@
 import {
 	KebabMenuActionChangePermission,
 	KebabMenuActionRemoveMember,
+	KebabMenuList,
 } from "@ui-kebab-menu";
 import { mdiClose } from "@icons/material";
 import { useI18n } from "vue-i18n";