From 6a09d91c03a4c249ee19d4189428da0de71e9652 Mon Sep 17 00:00:00 2001
From: Elblinator <lelble@intevation.de>
Date: Mon, 13 Jul 2026 08:10:54 +0200
Subject: [PATCH 1/4] Add Tooltips and aria-labels to list views

---
 .../components/banner/banner.component.html   |  1 +
 .../agenda-item-list.component.html           |  8 ++++---
 .../assignment-list.component.html            |  6 ++---
 .../motion-list/motion-list.component.html    |  8 ++++---
 .../participant-list.component.html           | 24 +++++++++++++++----
 .../file-list/file-list.component.html        |  4 ++--
 6 files changed, 35 insertions(+), 16 deletions(-)

diff --git a/client/src/app/site/modules/site-wrapper/components/banner/banner.component.html b/client/src/app/site/modules/site-wrapper/components/banner/banner.component.html
index b72a27c864..100084c2b2 100644
--- a/client/src/app/site/modules/site-wrapper/components/banner/banner.component.html
+++ b/client/src/app/site/modules/site-wrapper/components/banner/banner.component.html
@@ -2,6 +2,7 @@
     @for (banner of activeBanners | async; track banner) {
         <div
             class="banner flex-center background-accent"
+            role="banner"
             [ngClass]="[banner.class ? banner.class : '', banner.largerOnMobileView ? 'larger-on-mobile' : '']"
         >
             @if (banner.component) {
diff --git a/client/src/app/site/pages/meetings/pages/agenda/pages/agenda-item-list/components/agenda-item-list/agenda-item-list.component.html b/client/src/app/site/pages/meetings/pages/agenda/pages/agenda-item-list/components/agenda-item-list/agenda-item-list.component.html
index 5c47bdb342..93df5ceeca 100644
--- a/client/src/app/site/pages/meetings/pages/agenda/pages/agenda-item-list/components/agenda-item-list/agenda-item-list.component.html
+++ b/client/src/app/site/pages/meetings/pages/agenda/pages/agenda-item-list/components/agenda-item-list/agenda-item-list.component.html
@@ -85,7 +85,7 @@ <h1 class="mock-h2" translate>Agenda</h1>
             <!-- Tags -->
             @if (item.tags && item.tags.length) {
                 <div>
-                    <os-icon-container icon="local_offer">
+                    <os-icon-container icon="local_offer" [attr.aria-label]="'Tags' | translate">
                         <os-comma-separated-listing [list]="item.tags">
                             <ng-template let-tag>{{ tag.getTitle() }}</ng-template>
                         </os-comma-separated-listing>
@@ -95,13 +95,15 @@ <h1 class="mock-h2" translate>Agenda</h1>
 
             <!-- Visibility (Internal, Public, Hidden) -->
             <div *osPerms="permission.agendaItemCanManage; and: item.verboseType" class="spacer-top-5">
-                <os-icon-container icon="visibility">{{ item.verboseType | translate }}</os-icon-container>
+                <os-icon-container icon="visibility" [attr.aria-label]="'Visibility' | translate">
+                    {{ item.verboseType | translate }}
+                </os-icon-container>
             </div>
 
             <!-- Duration -->
             @if (item.duration) {
                 <div class="spacer-top-5">
-                    <os-icon-container icon="access_time">
+                    <os-icon-container icon="access_time" [attr.aria-label]="'Duration' | translate">
                         {{ durationService.durationToString(item.duration, 'h') }}
                     </os-icon-container>
                 </div>
diff --git a/client/src/app/site/pages/meetings/pages/assignments/pages/assignment-list/components/assignment-list/assignment-list.component.html b/client/src/app/site/pages/meetings/pages/assignments/pages/assignment-list/components/assignment-list/assignment-list.component.html
index a5b850851d..e3b2c4a21f 100644
--- a/client/src/app/site/pages/meetings/pages/assignments/pages/assignment-list/components/assignment-list/assignment-list.component.html
+++ b/client/src/app/site/pages/meetings/pages/assignments/pages/assignment-list/components/assignment-list/assignment-list.component.html
@@ -41,7 +41,7 @@ <h1 class="mock-h2" translate>Elections</h1>
                 {{ assignment.getListTitle() }}
             </div>
             @if (vp.isMobile) {
-                <mat-basic-chip class="bg-primary ellipsis-overflow">
+                <mat-basic-chip class="bg-primary ellipsis-overflow" [matTooltip]="'Phase' | translate">
                     {{ assignment.phaseString | translate }}
                 </mat-basic-chip>
             }
@@ -53,14 +53,14 @@ <h1 class="mock-h2" translate>Elections</h1>
         *osScrollingTableCell="'phase'; row as assignment; config: { width: 180 }"
         class="cell-slot fill mat-chip-wrapper"
     >
-        <mat-basic-chip class="bg-primary">
+        <mat-basic-chip class="bg-primary" [matTooltip]="'Phase' | translate">
             {{ assignment.phaseString | translate }}
         </mat-basic-chip>
     </div>
 
     <!-- Candidates -->
     <div *osScrollingTableCell="'candidates'; row as assignment; config: { width: 40 }" class="cell-slot fill">
-        <mat-basic-chip class="bg-accent" matTooltip="{{ 'Number of candidates' | translate }}">
+        <mat-basic-chip class="bg-accent" [matTooltip]="'Number of candidates' | translate">
             {{ getCandidateAmount(assignment) }}
         </mat-basic-chip>
     </div>
diff --git a/client/src/app/site/pages/meetings/pages/motions/pages/motion-list/components/motion-list/motion-list.component.html b/client/src/app/site/pages/meetings/pages/motions/pages/motion-list/components/motion-list/motion-list.component.html
index eca3ab2bd8..17d4e09704 100644
--- a/client/src/app/site/pages/meetings/pages/motions/pages/motion-list/components/motion-list/motion-list.component.html
+++ b/client/src/app/site/pages/meetings/pages/motions/pages/motion-list/components/motion-list/motion-list.component.html
@@ -219,7 +219,7 @@ <h1 class="title-line ellipsis-overflow" [attr.aria-label]="getAriaLabel(motion)
                     <!-- Category -->
                     @if (motion.category) {
                         <div class="ellipsis-overflow">
-                            <os-icon-container icon="category">
+                            <os-icon-container icon="category" [attr.aria-label]="'Category' | translate">
                                 @if (motion.category.parent) {
                                     <div class="ellipsis-overflow">
                                         {{ motion.category.parent.toString() }}
@@ -232,13 +232,15 @@ <h1 class="title-line ellipsis-overflow" [attr.aria-label]="getAriaLabel(motion)
                     <!-- Motion Block -->
                     @if (motion.block) {
                         <div class="ellipsis-overflow spacer-top-5">
-                            <os-icon-container icon="widgets">{{ motion.block.title }}</os-icon-container>
+                            <os-icon-container icon="widgets" [attr.aria-label]="'Motion block' | translate">
+                                {{ motion.block.title }}
+                            </os-icon-container>
                         </div>
                     }
                     <!-- Tags -->
                     @if (motion.tags && motion.tags.length) {
                         <div class="ellipsis-overflow spacer-top-5">
-                            <os-icon-container icon="local_offer">
+                            <os-icon-container icon="local_offer" [attr.aria-label]="'Tags' | translate">
                                 <os-comma-separated-listing [list]="motion.tags">
                                     <ng-template let-tag>{{ tag.getTitle() }}</ng-template>
                                 </os-comma-separated-listing>
diff --git a/client/src/app/site/pages/meetings/pages/participants/pages/participant-list/components/participant-list/participant-list.component.html b/client/src/app/site/pages/meetings/pages/participants/pages/participant-list/components/participant-list/participant-list.component.html
index 5c5fafdbff..3a14a5b244 100644
--- a/client/src/app/site/pages/meetings/pages/participants/pages/participant-list/components/participant-list/participant-list.component.html
+++ b/client/src/app/site/pages/meetings/pages/participants/pages/participant-list/components/participant-list/participant-list.component.html
@@ -129,7 +129,7 @@ <h1 class="mock-h2" translate>Participants</h1>
         <div class="groupsCell">
             @if (user.groups()?.length) {
                 <div>
-                    <os-icon-container icon="people" [noWrap]="true">
+                    <os-icon-container icon="people" [attr.aria-label]="'Groups' | translate" [noWrap]="true">
                         <os-comma-separated-listing [list]="user.groups()">
                             <ng-template let-group>{{ group.getTitle() }}</ng-template>
                         </os-comma-separated-listing>
@@ -138,12 +138,16 @@ <h1 class="mock-h2" translate>Participants</h1>
             }
             @if (user.structure_levels()?.length) {
                 <div class="spacer-top-5">
-                    <os-icon-container icon="flag">{{ user.structure_levels() }}</os-icon-container>
+                    <os-icon-container icon="flag" [attr.aria-label]="'Stucture level' | translate">
+                        {{ user.structure_levels() }}
+                    </os-icon-container>
                 </div>
             }
             @if (user.number()) {
                 <div class="spacer-top-5">
-                    <os-icon-container icon="perm_identity">{{ user.number() }}</os-icon-container>
+                    <os-icon-container icon="perm_identity" [attr.aria-label]="'Participants number' | translate">
+                        {{ user.number() }}
+                    </os-icon-container>
                 </div>
             }
             @if (user.vote_delegated_to() && voteDelegationEnabled) {
@@ -152,7 +156,13 @@ <h1 class="mock-h2" translate>Participants</h1>
                     matTooltip="{{ 'Voting right delegated to (proxy)' | translate }}"
                     matTooltipPosition="left"
                 >
-                    <os-icon-container icon="forward" [noWrap]="true">{{ user.vote_delegated_to() }}</os-icon-container>
+                    <os-icon-container
+                        icon="forward"
+                        [attr.aria-label]="'Voting right delegated to (proxy)' | translate"
+                        [noWrap]="true"
+                    >
+                        {{ user.vote_delegated_to() }}
+                    </os-icon-container>
                 </div>
             }
             @if (user.vote_delegations_from_ids()?.length && voteDelegationEnabled) {
@@ -161,7 +171,11 @@ <h1 class="mock-h2" translate>Participants</h1>
                     matTooltip="{{ 'Voting right received from (principals)' | translate }}"
                     matTooltipPosition="left"
                 >
-                    <os-icon-container icon="work" [noWrap]="true">
+                    <os-icon-container
+                        icon="work"
+                        [attr.aria-label]="'Voting right received from (principals)' | translate"
+                        [noWrap]="true"
+                    >
                         <span>{{ user.vote_delegations_from().length }}:</span>
                         {{ user.vote_delegations_from() }}
                     </os-icon-container>
diff --git a/client/src/app/ui/modules/file-list/file-list.component.html b/client/src/app/ui/modules/file-list/file-list.component.html
index a2a1e6f45a..ee91a4f68e 100644
--- a/client/src/app/ui/modules/file-list/file-list.component.html
+++ b/client/src/app/ui/modules/file-list/file-list.component.html
@@ -126,14 +126,14 @@
                 (keydown.enter)="onEditFile(mediafile, fileEditDialog)"
             >
                 @if (isInMeeting) {
-                    <os-icon-container icon="group">
+                    <os-icon-container icon="group" [attr.aria-label]="'Groups' | translate">
                         <os-comma-separated-listing [list]="getGroups(mediafile)" [showElementsAmount]="3">
                             <ng-template let-group>{{ $any(group).getTitle() }}</ng-template>
                         </os-comma-separated-listing>
                     </os-icon-container>
                 }
                 @if (!isInMeeting) {
-                    <os-icon-container icon="edit"></os-icon-container>
+                    <os-icon-container icon="edit" [attr.aria-label]="'Edit' | translate"></os-icon-container>
                 }
             </div>
         }

From 915010f90ec034899d3c5af9b6114644d429e9df Mon Sep 17 00:00:00 2001
From: Elblinator <lelble@intevation.de>
Date: Wed, 22 Jul 2026 14:33:04 +0200
Subject: [PATCH 2/4] Add more detail to aria-labels

---
 .../agenda-item-list/agenda-item-list.component.html   |  6 +++---
 .../assignment-list/assignment-list.component.html     |  6 +++---
 .../components/motion-list/motion-list.component.html  |  6 +++---
 .../participant-list/participant-list.component.html   | 10 +++++-----
 .../app/ui/modules/file-list/file-list.component.html  |  2 +-
 5 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/client/src/app/site/pages/meetings/pages/agenda/pages/agenda-item-list/components/agenda-item-list/agenda-item-list.component.html b/client/src/app/site/pages/meetings/pages/agenda/pages/agenda-item-list/components/agenda-item-list/agenda-item-list.component.html
index 93df5ceeca..e726e7d273 100644
--- a/client/src/app/site/pages/meetings/pages/agenda/pages/agenda-item-list/components/agenda-item-list/agenda-item-list.component.html
+++ b/client/src/app/site/pages/meetings/pages/agenda/pages/agenda-item-list/components/agenda-item-list/agenda-item-list.component.html
@@ -85,7 +85,7 @@ <h1 class="mock-h2" translate>Agenda</h1>
             <!-- Tags -->
             @if (item.tags && item.tags.length) {
                 <div>
-                    <os-icon-container icon="local_offer" [attr.aria-label]="'Tags' | translate">
+                    <os-icon-container icon="local_offer" [attr.aria-label]="('Tags' | translate) + ' ' + item.tags">
                         <os-comma-separated-listing [list]="item.tags">
                             <ng-template let-tag>{{ tag.getTitle() }}</ng-template>
                         </os-comma-separated-listing>
@@ -95,7 +95,7 @@ <h1 class="mock-h2" translate>Agenda</h1>
 
             <!-- Visibility (Internal, Public, Hidden) -->
             <div *osPerms="permission.agendaItemCanManage; and: item.verboseType" class="spacer-top-5">
-                <os-icon-container icon="visibility" [attr.aria-label]="'Visibility' | translate">
+                <os-icon-container icon="visibility" [attr.aria-label]="('Visibility' | translate) + ' ' + item.verboseType">
                     {{ item.verboseType | translate }}
                 </os-icon-container>
             </div>
@@ -103,7 +103,7 @@ <h1 class="mock-h2" translate>Agenda</h1>
             <!-- Duration -->
             @if (item.duration) {
                 <div class="spacer-top-5">
-                    <os-icon-container icon="access_time" [attr.aria-label]="'Duration' | translate">
+                    <os-icon-container icon="access_time" [attr.aria-label]="('Duration' | translate) + ' ' + durationService.durationToString(item.duration, 'h')">
                         {{ durationService.durationToString(item.duration, 'h') }}
                     </os-icon-container>
                 </div>
diff --git a/client/src/app/site/pages/meetings/pages/assignments/pages/assignment-list/components/assignment-list/assignment-list.component.html b/client/src/app/site/pages/meetings/pages/assignments/pages/assignment-list/components/assignment-list/assignment-list.component.html
index e3b2c4a21f..40bcc2e881 100644
--- a/client/src/app/site/pages/meetings/pages/assignments/pages/assignment-list/components/assignment-list/assignment-list.component.html
+++ b/client/src/app/site/pages/meetings/pages/assignments/pages/assignment-list/components/assignment-list/assignment-list.component.html
@@ -41,7 +41,7 @@ <h1 class="mock-h2" translate>Elections</h1>
                 {{ assignment.getListTitle() }}
             </div>
             @if (vp.isMobile) {
-                <mat-basic-chip class="bg-primary ellipsis-overflow" [matTooltip]="'Phase' | translate">
+                <mat-basic-chip class="bg-primary ellipsis-overflow" [matTooltip]="('Phase' | translate) + ' ' + assignment.phaseString">
                     {{ assignment.phaseString | translate }}
                 </mat-basic-chip>
             }
@@ -53,14 +53,14 @@ <h1 class="mock-h2" translate>Elections</h1>
         *osScrollingTableCell="'phase'; row as assignment; config: { width: 180 }"
         class="cell-slot fill mat-chip-wrapper"
     >
-        <mat-basic-chip class="bg-primary" [matTooltip]="'Phase' | translate">
+        <mat-basic-chip class="bg-primary" [matTooltip]="('Phase' | translate) + ' ' + assignment.phaseString">
             {{ assignment.phaseString | translate }}
         </mat-basic-chip>
     </div>
 
     <!-- Candidates -->
     <div *osScrollingTableCell="'candidates'; row as assignment; config: { width: 40 }" class="cell-slot fill">
-        <mat-basic-chip class="bg-accent" [matTooltip]="'Number of candidates' | translate">
+        <mat-basic-chip class="bg-accent" [matTooltip]="('Number of candidates' | translate) + ' ' + getCandidateAmount(assignment)">
             {{ getCandidateAmount(assignment) }}
         </mat-basic-chip>
     </div>
diff --git a/client/src/app/site/pages/meetings/pages/motions/pages/motion-list/components/motion-list/motion-list.component.html b/client/src/app/site/pages/meetings/pages/motions/pages/motion-list/components/motion-list/motion-list.component.html
index 17d4e09704..e20c872be6 100644
--- a/client/src/app/site/pages/meetings/pages/motions/pages/motion-list/components/motion-list/motion-list.component.html
+++ b/client/src/app/site/pages/meetings/pages/motions/pages/motion-list/components/motion-list/motion-list.component.html
@@ -219,7 +219,7 @@ <h1 class="title-line ellipsis-overflow" [attr.aria-label]="getAriaLabel(motion)
                     <!-- Category -->
                     @if (motion.category) {
                         <div class="ellipsis-overflow">
-                            <os-icon-container icon="category" [attr.aria-label]="'Category' | translate">
+                            <os-icon-container icon="category" [attr.aria-label]="('Category' | translate) + ' ' + (motion.category.parent ? motion.category.parent.toString() + ' ' : '') + motion.category.toString()">
                                 @if (motion.category.parent) {
                                     <div class="ellipsis-overflow">
                                         {{ motion.category.parent.toString() }}
@@ -232,7 +232,7 @@ <h1 class="title-line ellipsis-overflow" [attr.aria-label]="getAriaLabel(motion)
                     <!-- Motion Block -->
                     @if (motion.block) {
                         <div class="ellipsis-overflow spacer-top-5">
-                            <os-icon-container icon="widgets" [attr.aria-label]="'Motion block' | translate">
+                            <os-icon-container icon="widgets" [attr.aria-label]="('Motion block' | translate) + ' ' + motion.block.title">
                                 {{ motion.block.title }}
                             </os-icon-container>
                         </div>
@@ -240,7 +240,7 @@ <h1 class="title-line ellipsis-overflow" [attr.aria-label]="getAriaLabel(motion)
                     <!-- Tags -->
                     @if (motion.tags && motion.tags.length) {
                         <div class="ellipsis-overflow spacer-top-5">
-                            <os-icon-container icon="local_offer" [attr.aria-label]="'Tags' | translate">
+                            <os-icon-container icon="local_offer" [attr.aria-label]="('Tags' | translate) + ' ' + motion.tags">
                                 <os-comma-separated-listing [list]="motion.tags">
                                     <ng-template let-tag>{{ tag.getTitle() }}</ng-template>
                                 </os-comma-separated-listing>
diff --git a/client/src/app/site/pages/meetings/pages/participants/pages/participant-list/components/participant-list/participant-list.component.html b/client/src/app/site/pages/meetings/pages/participants/pages/participant-list/components/participant-list/participant-list.component.html
index 3a14a5b244..5940ac3026 100644
--- a/client/src/app/site/pages/meetings/pages/participants/pages/participant-list/components/participant-list/participant-list.component.html
+++ b/client/src/app/site/pages/meetings/pages/participants/pages/participant-list/components/participant-list/participant-list.component.html
@@ -129,7 +129,7 @@ <h1 class="mock-h2" translate>Participants</h1>
         <div class="groupsCell">
             @if (user.groups()?.length) {
                 <div>
-                    <os-icon-container icon="people" [attr.aria-label]="'Groups' | translate" [noWrap]="true">
+                    <os-icon-container icon="people" [attr.aria-label]="('Groups' | translate) + ' ' + user.groups()" [noWrap]="true">
                         <os-comma-separated-listing [list]="user.groups()">
                             <ng-template let-group>{{ group.getTitle() }}</ng-template>
                         </os-comma-separated-listing>
@@ -138,14 +138,14 @@ <h1 class="mock-h2" translate>Participants</h1>
             }
             @if (user.structure_levels()?.length) {
                 <div class="spacer-top-5">
-                    <os-icon-container icon="flag" [attr.aria-label]="'Stucture level' | translate">
+                    <os-icon-container icon="flag" [attr.aria-label]="('Stucture level' | translate) + ' ' + user.structure_levels()">
                         {{ user.structure_levels() }}
                     </os-icon-container>
                 </div>
             }
             @if (user.number()) {
                 <div class="spacer-top-5">
-                    <os-icon-container icon="perm_identity" [attr.aria-label]="'Participants number' | translate">
+                    <os-icon-container icon="perm_identity" [attr.aria-label]="('Participants number' | translate) + ' ' + user.number()">
                         {{ user.number() }}
                     </os-icon-container>
                 </div>
@@ -158,7 +158,7 @@ <h1 class="mock-h2" translate>Participants</h1>
                 >
                     <os-icon-container
                         icon="forward"
-                        [attr.aria-label]="'Voting right delegated to (proxy)' | translate"
+                        [attr.aria-label]="('Voting right delegated to (proxy)' | translate) + ' ' + user.vote_delegated_to()"
                         [noWrap]="true"
                     >
                         {{ user.vote_delegated_to() }}
@@ -173,7 +173,7 @@ <h1 class="mock-h2" translate>Participants</h1>
                 >
                     <os-icon-container
                         icon="work"
-                        [attr.aria-label]="'Voting right received from (principals)' | translate"
+                        [attr.aria-label]="('Voting right received from (principals)' | translate) + ' ' + user.vote_delegations_from()"
                         [noWrap]="true"
                     >
                         <span>{{ user.vote_delegations_from().length }}:</span>
diff --git a/client/src/app/ui/modules/file-list/file-list.component.html b/client/src/app/ui/modules/file-list/file-list.component.html
index ee91a4f68e..b053b06b07 100644
--- a/client/src/app/ui/modules/file-list/file-list.component.html
+++ b/client/src/app/ui/modules/file-list/file-list.component.html
@@ -126,7 +126,7 @@
                 (keydown.enter)="onEditFile(mediafile, fileEditDialog)"
             >
                 @if (isInMeeting) {
-                    <os-icon-container icon="group" [attr.aria-label]="'Groups' | translate">
+                    <os-icon-container icon="group" [attr.aria-label]="('Groups' | translate) + ' ' + getGroups(mediafile)">
                         <os-comma-separated-listing [list]="getGroups(mediafile)" [showElementsAmount]="3">
                             <ng-template let-group>{{ $any(group).getTitle() }}</ng-template>
                         </os-comma-separated-listing>

From b868b844326c10efd80ce522c0a8905cfa1d5bca Mon Sep 17 00:00:00 2001
From: Elblinator <lelble@intevation.de>
Date: Wed, 22 Jul 2026 14:52:28 +0200
Subject: [PATCH 3/4] lint

---
 .../agenda-item-list.component.html           | 12 ++++++++--
 .../assignment-list.component.html            | 10 ++++++--
 .../motion-list/motion-list.component.html    | 20 +++++++++++++---
 .../participant-list.component.html           | 24 +++++++++++++++----
 .../file-list/file-list.component.html        |  5 +++-
 5 files changed, 58 insertions(+), 13 deletions(-)

diff --git a/client/src/app/site/pages/meetings/pages/agenda/pages/agenda-item-list/components/agenda-item-list/agenda-item-list.component.html b/client/src/app/site/pages/meetings/pages/agenda/pages/agenda-item-list/components/agenda-item-list/agenda-item-list.component.html
index e726e7d273..27ff5098fd 100644
--- a/client/src/app/site/pages/meetings/pages/agenda/pages/agenda-item-list/components/agenda-item-list/agenda-item-list.component.html
+++ b/client/src/app/site/pages/meetings/pages/agenda/pages/agenda-item-list/components/agenda-item-list/agenda-item-list.component.html
@@ -95,7 +95,10 @@ <h1 class="mock-h2" translate>Agenda</h1>
 
             <!-- Visibility (Internal, Public, Hidden) -->
             <div *osPerms="permission.agendaItemCanManage; and: item.verboseType" class="spacer-top-5">
-                <os-icon-container icon="visibility" [attr.aria-label]="('Visibility' | translate) + ' ' + item.verboseType">
+                <os-icon-container
+                    icon="visibility"
+                    [attr.aria-label]="('Visibility' | translate) + ' ' + item.verboseType"
+                >
                     {{ item.verboseType | translate }}
                 </os-icon-container>
             </div>
@@ -103,7 +106,12 @@ <h1 class="mock-h2" translate>Agenda</h1>
             <!-- Duration -->
             @if (item.duration) {
                 <div class="spacer-top-5">
-                    <os-icon-container icon="access_time" [attr.aria-label]="('Duration' | translate) + ' ' + durationService.durationToString(item.duration, 'h')">
+                    <os-icon-container
+                        icon="access_time"
+                        [attr.aria-label]="
+                            ('Duration' | translate) + ' ' + durationService.durationToString(item.duration, 'h')
+                        "
+                    >
                         {{ durationService.durationToString(item.duration, 'h') }}
                     </os-icon-container>
                 </div>
diff --git a/client/src/app/site/pages/meetings/pages/assignments/pages/assignment-list/components/assignment-list/assignment-list.component.html b/client/src/app/site/pages/meetings/pages/assignments/pages/assignment-list/components/assignment-list/assignment-list.component.html
index 40bcc2e881..6483216f40 100644
--- a/client/src/app/site/pages/meetings/pages/assignments/pages/assignment-list/components/assignment-list/assignment-list.component.html
+++ b/client/src/app/site/pages/meetings/pages/assignments/pages/assignment-list/components/assignment-list/assignment-list.component.html
@@ -41,7 +41,10 @@ <h1 class="mock-h2" translate>Elections</h1>
                 {{ assignment.getListTitle() }}
             </div>
             @if (vp.isMobile) {
-                <mat-basic-chip class="bg-primary ellipsis-overflow" [matTooltip]="('Phase' | translate) + ' ' + assignment.phaseString">
+                <mat-basic-chip
+                    class="bg-primary ellipsis-overflow"
+                    [matTooltip]="('Phase' | translate) + ' ' + assignment.phaseString"
+                >
                     {{ assignment.phaseString | translate }}
                 </mat-basic-chip>
             }
@@ -60,7 +63,10 @@ <h1 class="mock-h2" translate>Elections</h1>
 
     <!-- Candidates -->
     <div *osScrollingTableCell="'candidates'; row as assignment; config: { width: 40 }" class="cell-slot fill">
-        <mat-basic-chip class="bg-accent" [matTooltip]="('Number of candidates' | translate) + ' ' + getCandidateAmount(assignment)">
+        <mat-basic-chip
+            class="bg-accent"
+            [matTooltip]="('Number of candidates' | translate) + ' ' + getCandidateAmount(assignment)"
+        >
             {{ getCandidateAmount(assignment) }}
         </mat-basic-chip>
     </div>
diff --git a/client/src/app/site/pages/meetings/pages/motions/pages/motion-list/components/motion-list/motion-list.component.html b/client/src/app/site/pages/meetings/pages/motions/pages/motion-list/components/motion-list/motion-list.component.html
index e20c872be6..bf67adfedd 100644
--- a/client/src/app/site/pages/meetings/pages/motions/pages/motion-list/components/motion-list/motion-list.component.html
+++ b/client/src/app/site/pages/meetings/pages/motions/pages/motion-list/components/motion-list/motion-list.component.html
@@ -219,7 +219,15 @@ <h1 class="title-line ellipsis-overflow" [attr.aria-label]="getAriaLabel(motion)
                     <!-- Category -->
                     @if (motion.category) {
                         <div class="ellipsis-overflow">
-                            <os-icon-container icon="category" [attr.aria-label]="('Category' | translate) + ' ' + (motion.category.parent ? motion.category.parent.toString() + ' ' : '') + motion.category.toString()">
+                            <os-icon-container
+                                icon="category"
+                                [attr.aria-label]="
+                                    ('Category' | translate) +
+                                    ' ' +
+                                    (motion.category.parent ? motion.category.parent.toString() + ' ' : '') +
+                                    motion.category.toString()
+                                "
+                            >
                                 @if (motion.category.parent) {
                                     <div class="ellipsis-overflow">
                                         {{ motion.category.parent.toString() }}
@@ -232,7 +240,10 @@ <h1 class="title-line ellipsis-overflow" [attr.aria-label]="getAriaLabel(motion)
                     <!-- Motion Block -->
                     @if (motion.block) {
                         <div class="ellipsis-overflow spacer-top-5">
-                            <os-icon-container icon="widgets" [attr.aria-label]="('Motion block' | translate) + ' ' + motion.block.title">
+                            <os-icon-container
+                                icon="widgets"
+                                [attr.aria-label]="('Motion block' | translate) + ' ' + motion.block.title"
+                            >
                                 {{ motion.block.title }}
                             </os-icon-container>
                         </div>
@@ -240,7 +251,10 @@ <h1 class="title-line ellipsis-overflow" [attr.aria-label]="getAriaLabel(motion)
                     <!-- Tags -->
                     @if (motion.tags && motion.tags.length) {
                         <div class="ellipsis-overflow spacer-top-5">
-                            <os-icon-container icon="local_offer" [attr.aria-label]="('Tags' | translate) + ' ' + motion.tags">
+                            <os-icon-container
+                                icon="local_offer"
+                                [attr.aria-label]="('Tags' | translate) + ' ' + motion.tags"
+                            >
                                 <os-comma-separated-listing [list]="motion.tags">
                                     <ng-template let-tag>{{ tag.getTitle() }}</ng-template>
                                 </os-comma-separated-listing>
diff --git a/client/src/app/site/pages/meetings/pages/participants/pages/participant-list/components/participant-list/participant-list.component.html b/client/src/app/site/pages/meetings/pages/participants/pages/participant-list/components/participant-list/participant-list.component.html
index 5940ac3026..439ff40877 100644
--- a/client/src/app/site/pages/meetings/pages/participants/pages/participant-list/components/participant-list/participant-list.component.html
+++ b/client/src/app/site/pages/meetings/pages/participants/pages/participant-list/components/participant-list/participant-list.component.html
@@ -129,7 +129,11 @@ <h1 class="mock-h2" translate>Participants</h1>
         <div class="groupsCell">
             @if (user.groups()?.length) {
                 <div>
-                    <os-icon-container icon="people" [attr.aria-label]="('Groups' | translate) + ' ' + user.groups()" [noWrap]="true">
+                    <os-icon-container
+                        icon="people"
+                        [attr.aria-label]="('Groups' | translate) + ' ' + user.groups()"
+                        [noWrap]="true"
+                    >
                         <os-comma-separated-listing [list]="user.groups()">
                             <ng-template let-group>{{ group.getTitle() }}</ng-template>
                         </os-comma-separated-listing>
@@ -138,14 +142,20 @@ <h1 class="mock-h2" translate>Participants</h1>
             }
             @if (user.structure_levels()?.length) {
                 <div class="spacer-top-5">
-                    <os-icon-container icon="flag" [attr.aria-label]="('Stucture level' | translate) + ' ' + user.structure_levels()">
+                    <os-icon-container
+                        icon="flag"
+                        [attr.aria-label]="('Stucture level' | translate) + ' ' + user.structure_levels()"
+                    >
                         {{ user.structure_levels() }}
                     </os-icon-container>
                 </div>
             }
             @if (user.number()) {
                 <div class="spacer-top-5">
-                    <os-icon-container icon="perm_identity" [attr.aria-label]="('Participants number' | translate) + ' ' + user.number()">
+                    <os-icon-container
+                        icon="perm_identity"
+                        [attr.aria-label]="('Participants number' | translate) + ' ' + user.number()"
+                    >
                         {{ user.number() }}
                     </os-icon-container>
                 </div>
@@ -158,7 +168,9 @@ <h1 class="mock-h2" translate>Participants</h1>
                 >
                     <os-icon-container
                         icon="forward"
-                        [attr.aria-label]="('Voting right delegated to (proxy)' | translate) + ' ' + user.vote_delegated_to()"
+                        [attr.aria-label]="
+                            ('Voting right delegated to (proxy)' | translate) + ' ' + user.vote_delegated_to()
+                        "
                         [noWrap]="true"
                     >
                         {{ user.vote_delegated_to() }}
@@ -173,7 +185,9 @@ <h1 class="mock-h2" translate>Participants</h1>
                 >
                     <os-icon-container
                         icon="work"
-                        [attr.aria-label]="('Voting right received from (principals)' | translate) + ' ' + user.vote_delegations_from()"
+                        [attr.aria-label]="
+                            ('Voting right received from (principals)' | translate) + ' ' + user.vote_delegations_from()
+                        "
                         [noWrap]="true"
                     >
                         <span>{{ user.vote_delegations_from().length }}:</span>
diff --git a/client/src/app/ui/modules/file-list/file-list.component.html b/client/src/app/ui/modules/file-list/file-list.component.html
index b053b06b07..783a6a84b5 100644
--- a/client/src/app/ui/modules/file-list/file-list.component.html
+++ b/client/src/app/ui/modules/file-list/file-list.component.html
@@ -126,7 +126,10 @@
                 (keydown.enter)="onEditFile(mediafile, fileEditDialog)"
             >
                 @if (isInMeeting) {
-                    <os-icon-container icon="group" [attr.aria-label]="('Groups' | translate) + ' ' + getGroups(mediafile)">
+                    <os-icon-container
+                        icon="group"
+                        [attr.aria-label]="('Groups' | translate) + ' ' + getGroups(mediafile)"
+                    >
                         <os-comma-separated-listing [list]="getGroups(mediafile)" [showElementsAmount]="3">
                             <ng-template let-group>{{ $any(group).getTitle() }}</ng-template>
                         </os-comma-separated-listing>

From 17c9c6c3845d507c5d9077f8236351974df16cf1 Mon Sep 17 00:00:00 2001
From: Elblinator <lelble@intevation.de>
Date: Thu, 23 Jul 2026 10:37:12 +0200
Subject: [PATCH 4/4] Translate visibility and phase

---
 .../agenda-item-list/agenda-item-list.component.html         | 2 +-
 .../assignment-list/assignment-list.component.html           | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/client/src/app/site/pages/meetings/pages/agenda/pages/agenda-item-list/components/agenda-item-list/agenda-item-list.component.html b/client/src/app/site/pages/meetings/pages/agenda/pages/agenda-item-list/components/agenda-item-list/agenda-item-list.component.html
index 27ff5098fd..22414c10f8 100644
--- a/client/src/app/site/pages/meetings/pages/agenda/pages/agenda-item-list/components/agenda-item-list/agenda-item-list.component.html
+++ b/client/src/app/site/pages/meetings/pages/agenda/pages/agenda-item-list/components/agenda-item-list/agenda-item-list.component.html
@@ -97,7 +97,7 @@ <h1 class="mock-h2" translate>Agenda</h1>
             <div *osPerms="permission.agendaItemCanManage; and: item.verboseType" class="spacer-top-5">
                 <os-icon-container
                     icon="visibility"
-                    [attr.aria-label]="('Visibility' | translate) + ' ' + item.verboseType"
+                    [attr.aria-label]="('Visibility' | translate) + ' ' + (item.verboseType | translate)"
                 >
                     {{ item.verboseType | translate }}
                 </os-icon-container>
diff --git a/client/src/app/site/pages/meetings/pages/assignments/pages/assignment-list/components/assignment-list/assignment-list.component.html b/client/src/app/site/pages/meetings/pages/assignments/pages/assignment-list/components/assignment-list/assignment-list.component.html
index 6483216f40..36e5db1359 100644
--- a/client/src/app/site/pages/meetings/pages/assignments/pages/assignment-list/components/assignment-list/assignment-list.component.html
+++ b/client/src/app/site/pages/meetings/pages/assignments/pages/assignment-list/components/assignment-list/assignment-list.component.html
@@ -56,7 +56,10 @@ <h1 class="mock-h2" translate>Elections</h1>
         *osScrollingTableCell="'phase'; row as assignment; config: { width: 180 }"
         class="cell-slot fill mat-chip-wrapper"
     >
-        <mat-basic-chip class="bg-primary" [matTooltip]="('Phase' | translate) + ' ' + assignment.phaseString">
+        <mat-basic-chip
+            class="bg-primary"
+            [matTooltip]="('Phase' | translate) + ' ' + (assignment.phaseString | translate)"
+        >
             {{ assignment.phaseString | translate }}
         </mat-basic-chip>
     </div>