MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

aria-hide icons in navbar

This commit is contained in:
mchouliara 2024-09-25 14:40:19 +03:00
parent 4170a63dbf
commit 114b197c89
1 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/app/ui/navbar/navbar.component.html
View File

@ -20,7 +20,7 @@
<ul class="horizontal-list justify-content-end" id="navigation"> <ul class="horizontal-list justify-content-end" id="navigation">
<li class="navbar-item-sm ml-auto"> <li class="navbar-item-sm ml-auto">
<button mat-icon-button [matMenuTriggerFor]="toggleMenu" [attr.aria-label]="'ALT-TEXT.USER-OPTIONS' | translate"> <button mat-icon-button [matMenuTriggerFor]="toggleMenu" [attr.aria-label]="'ALT-TEXT.USER-OPTIONS' | translate">
<mat-icon>more_horiz</mat-icon> <mat-icon aria-hidden>more_horiz</mat-icon>
</button> </button>
</li> </li>
@ -33,16 +33,16 @@
[matTooltip]="toggleFontSizeTooltip" [matTooltip]="toggleFontSizeTooltip"
[attr.aria-label]="toggleFontSizeTooltip" [attr.aria-label]="toggleFontSizeTooltip"
> >
<mat-icon>format_size</mat-icon> <mat-icon aria-hidden>format_size</mat-icon>
</button> </button>
</li> </li>
<li class="navbar-item-lg" *ngIf="!(isAuthenticated() && onInvalidUrl())"> <li class="navbar-item-lg" *ngIf="!(isAuthenticated() && onInvalidUrl())">
<button mat-button class="faq-title" (click)="openFaqDialog()">{{ 'FAQ.TITLE' | translate }}</button> <button mat-button class="faq-title" (click)="openFaqDialog()">{{ 'FAQ.TITLE' | translate }}</button>
</li> </li>
<li class="navbar-item-lg" *ngIf="!(isAuthenticated() && onInvalidUrl())"> <li class="navbar-item-lg" *ngIf="!(isAuthenticated() && onInvalidUrl())">
<button mat-button [matMenuTriggerFor]="languageMenu" class="lang"> <button mat-button [matMenuTriggerFor]="languageMenu" class="lang" [attr.aria-label]="'ALT-TEXT.LANGUAGE-SELECT' | translate">
<mat-icon aria-hidden>language</mat-icon><span class="text-uppercase" style="font-weight: 500;">{{selectedLanguage}}</span> <mat-icon aria-hidden>language</mat-icon><span class="text-uppercase" style="font-weight: 500;">{{selectedLanguage}}</span>
<mat-icon iconPositionEnd alt="{{'ALT-TEXT.LANGUAGE-SELECT' | translate}}">arrow_drop_down</mat-icon> <mat-icon iconPositionEnd aria-hidden>arrow_drop_down</mat-icon>
</button> </button>
<mat-menu #languageMenu="matMenu" class="nav-mat-menu"> <mat-menu #languageMenu="matMenu" class="nav-mat-menu">
<app-language (languageChange)="getLanguage($event)" class="d-lg-block d-none"></app-language> <app-language (languageChange)="getLanguage($event)" class="d-lg-block d-none"></app-language>
@ -50,8 +50,8 @@
</li> </li>
<li class="navbar-item-lg" *ngIf="isAuthenticated()"> <li class="navbar-item-lg" *ngIf="isAuthenticated()">
<button mat-button [matMenuTriggerFor]="tenantMenu" class="p-0 lang" [attr.aria-label]="'ALT-TEXT.TENANT-SELECT' | translate"> <button mat-button [matMenuTriggerFor]="tenantMenu" class="p-0 lang" [attr.aria-label]="'ALT-TEXT.TENANT-SELECT' | translate">
<mat-icon class="m-0 material-symbols-outlined">tenancy</mat-icon> <mat-icon aria-hidden class="m-0 material-symbols-outlined">tenancy</mat-icon>
<mat-icon class="m-0">arrow_drop_down</mat-icon> <mat-icon aria-hidden class="m-0">arrow_drop_down</mat-icon>
</button> </button>
<mat-menu #tenantMenu="matMenu" class="nav-mat-menu"> <mat-menu #tenantMenu="matMenu" class="nav-mat-menu">
<app-tenant-switch class="d-lg-block d-none"></app-tenant-switch> <app-tenant-switch class="d-lg-block d-none"></app-tenant-switch>
@ -88,16 +88,16 @@
<li class="ml-3 d-flex justify-content-around align-items-center" (click)="$event.stopPropagation()" tabindex="0"> <li class="ml-3 d-flex justify-content-around align-items-center" (click)="$event.stopPropagation()" tabindex="0">
<button mat-button class="faq-title" (click)="openFaqDialog()" [attr.aria-label]="'FAQ.TITLE' | translate">{{ 'FAQ.TITLE' | translate }}</button> <button mat-button class="faq-title" (click)="openFaqDialog()" [attr.aria-label]="'FAQ.TITLE' | translate">{{ 'FAQ.TITLE' | translate }}</button>
<button mat-button [matMenuTriggerFor]="languageMenu" class="lang" [attr.aria-label]="'ALT-TEXT.LANGUAGE-SELECT' | translate" (click)="$event.stopPropagation();"> <button mat-button [matMenuTriggerFor]="languageMenu" class="lang" [attr.aria-label]="'ALT-TEXT.LANGUAGE-SELECT' | translate" (click)="$event.stopPropagation();">
<mat-icon>language</mat-icon><span class="text-uppercase" style="font-weight: 500;">{{selectedLanguage}}</span> <mat-icon aria-hidden>language</mat-icon><span class="text-uppercase" style="font-weight: 500;">{{selectedLanguage}}</span>
<mat-icon iconPositionEnd>arrow_drop_down</mat-icon> <mat-icon aria-hidden iconPositionEnd>arrow_drop_down</mat-icon>
</button> </button>
<mat-menu #languageMenu="matMenu" class="nav-mat-menu"> <mat-menu #languageMenu="matMenu" class="nav-mat-menu">
<app-language (languageChange)="getLanguage($event)"></app-language> <app-language (languageChange)="getLanguage($event)"></app-language>
</mat-menu> </mat-menu>
<ng-container *ngIf="isAuthenticated()"> <ng-container *ngIf="isAuthenticated()">
<button mat-button [matMenuTriggerFor]="tenantMenu" class="p-0" [attr.aria-label]="'ALT-TEXT.TENANT-SELECT' | translate"> <button mat-button [matMenuTriggerFor]="tenantMenu" class="p-0" [attr.aria-label]="'ALT-TEXT.TENANT-SELECT' | translate">
<mat-icon class="m-0 material-symbols-outlined">tenancy</mat-icon> <mat-icon aria-hidden class="m-0 material-symbols-outlined">tenancy</mat-icon>
<mat-icon class="m-0">arrow_drop_down</mat-icon> <mat-icon aria-hidden class="m-0">arrow_drop_down</mat-icon>
</button> </button>
<mat-menu #tenantMenu="matMenu" class="nav-mat-menu"> <mat-menu #tenantMenu="matMenu" class="nav-mat-menu">
<app-tenant-switch></app-tenant-switch> <app-tenant-switch></app-tenant-switch>