Skip to content

Add Tooltips and aria-labels to list views #6391

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Elblinator wants to merge 5 commits into
base: main
Choose a base branch
from
+83 −16
Open

Add Tooltips and aria-labels to list views #6391

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6a09d91
Add Tooltips and aria-labels to list views
Elblinator Jul 13, 2026
915010f
Add more detail to aria-labels
Elblinator Jul 22, 2026
8614011
Merge remote-tracking branch 'origin/main' into 6370-aria-labels
Elblinator Jul 22, 2026
b868b84
lint
Elblinator Jul 22, 2026
17c9c6c
Translate visibility and phase
Elblinator Jul 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions client/src/app/site/modules/site-wrapper/components/banner/banner.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
16 changes: 13 additions & 3 deletions ...agenda/pages/agenda-item-list/components/agenda-item-list/agenda-item-list.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) + ' ' + item.tags">
<os-comma-separated-listing [list]="item.tags">
<ng-template let-tag>{{ tag.getTitle() }}</ng-template>
</os-comma-separated-listing>
Expand All @@ -95,13 +95,23 @@ <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)"
>
{{ 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')
"
>
{{ durationService.durationToString(item.duration, 'h') }}
</os-icon-container>
</div>
Expand Down
15 changes: 12 additions & 3 deletions ...signments/pages/assignment-list/components/assignment-list/assignment-list.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
<mat-basic-chip
class="bg-primary ellipsis-overflow"
[matTooltip]="('Phase' | translate) + ' ' + assignment.phaseString"
>
{{ assignment.phaseString | translate }}
</mat-basic-chip>
}
Expand All @@ -53,14 +56,20 @@ <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)"
>
{{ 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>
Expand Down
22 changes: 19 additions & 3 deletions ...eetings/pages/motions/pages/motion-list/components/motion-list/motion-list.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
<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() }}
Expand All @@ -232,13 +240,21 @@ <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"
>
{{ 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) + ' ' + motion.tags"
>
<os-comma-separated-listing [list]="motion.tags">
<ng-template let-tag>{{ tag.getTitle() }}</ng-template>
</os-comma-separated-listing>
Expand Down
38 changes: 33 additions & 5 deletions ...ipants/pages/participant-list/components/participant-list/participant-list.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,11 @@ <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) + ' ' + user.groups()"
[noWrap]="true"
>
<os-comma-separated-listing [list]="user.groups()">
<ng-template let-group>{{ group.getTitle() }}</ng-template>
</os-comma-separated-listing>
Expand All @@ -138,12 +142,22 @@ <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()"
>
{{ 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()"
>
{{ user.number() }}
</os-icon-container>
</div>
}
@if (user.vote_delegated_to() && voteDelegationEnabled) {
Expand All @@ -152,7 +166,15 @@ <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) + ' ' + user.vote_delegated_to()
"
[noWrap]="true"
>
{{ user.vote_delegated_to() }}
</os-icon-container>
</div>
}
@if (user.vote_delegations_from_ids()?.length && voteDelegationEnabled) {
Expand All @@ -161,7 +183,13 @@ <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) + ' ' + user.vote_delegations_from()
"
[noWrap]="true"
>
<span>{{ user.vote_delegations_from().length }}:</span>
{{ user.vote_delegations_from() }}
</os-icon-container>
Expand Down
7 changes: 5 additions & 2 deletions client/src/app/ui/modules/file-list/file-list.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,14 +126,17 @@
(keydown.enter)="onEditFile(mediafile, fileEditDialog)"
>
@if (isInMeeting) {
<os-icon-container icon="group">
<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>
</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>
}
Expand Down
Loading