Axe Coconut Issue: Content must have their visible text as part of their accessible name
Ensures that elements labelled through their content must have their visible text as part of their accessible name.
Text inside the element is not included in the accessible name
Normally it would be easy to fix this Issue. We just need to put the visible content of this button-
(Example: button[aria-labelledby="back"]
which is this:
<button mat-icon-button *ngIf="router.url !== '/home'" (click)="goBack()"
matTooltip="{{'header.back' | translate}}" aria-labelledby="back">
<mat-icon class="header-icons" aria-label="Go back">keyboard_arrow_left</mat-icon>
</button>
So "keyboard_arrow_left" would be the visible content.)
- in the accessible Text (either inside of the de/en.json or here: <div id="back">{{'header.a11Y-back' | translate}}</div>
BUT the screen reader would read aloud the words "keyboard_arrow_left" and putting an "<" in the Text does not fix the Axe Coconut Issue.
This is a rather simple example, it gets really hard when Axe Coconut wants us to fix this issue for example: button[aria-labelledby="meeting_room"]
which is this part of the code:
<button mat-button *ngIf="user && deviceType === 'desktop'" [matMenuTriggerFor]="userMenu" aria-labelledby="meeting_room">
<div class="label-icon">
<mat-icon *ngIf="!user.isGuest" class="header-icons">account_box</mat-icon>
<mat-icon *ngIf="user.isGuest" class="header-icons">meeting_room</mat-icon>
<h2 *ngIf="!user.isGuest">{{'header.my-account' | translate}}</h2>
<h2 *ngIf="user.isGuest">{{'header.my-guest-account' | translate}}</h2>
</div>
</button>
"meeting_room" is an Icon and Axe Coconut wants us to put this in the accessible text.
We also tried to fix this but putting: meeting_room, account_box and also these two texts {{'header.my-account' | translate}}
, {{'header.my-guest-account' | translate}}
(as code and also the english and german texts) as part of the accessible text, but it didn't fix the Axe Coconut Issue.
So we should discuss if we should:
- just ignore this Issue
- we trie to fix it with explaining how the Button (etc.) looks like but Ignore afterwards if the Axe Coconut Issue still appears or not
- OR we find an other way to fix this Issue