Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(docs-infra): improve accessibility of aio-select component (#46013)
improve the accessibility of the aio-select component so that it is clear for screen reader users its functionality (currently it is presented as a simple button), following the WAI-ARIA authoring practices (see: https://www.w3.org/TR/wai-aria-practices/#combobox) A first attempt in improving the accessibility of the component has been tried in PR #45937 by replacing it with the material select component, such implementation has however been scrapped since the increase of payload sizes has proven prohibitively large (also note that given native select elements haven't been used given the lack of syling options for such elements) PR Close #46013
- Loading branch information
1 parent
4b3baf2
commit 974da3f
Showing
7 changed files
with
204 additions
and
50 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,16 +1,33 @@ | ||
<div class="form-select-menu"> | ||
<button class="form-select-button" (click)="toggleOptions()" [disabled]="disabled"> | ||
<span><strong>{{label}}</strong></span><span *ngIf="showSymbol" class="symbol {{selected?.value}}"></span><span>{{selected?.title}}</span> | ||
</button> | ||
<ul class="form-select-dropdown" *ngIf="showOptions"> | ||
<div class="form-select-button" | ||
role="combobox" | ||
[attr.aria-controls]="listBoxId" | ||
aria-haspopup="listbox" | ||
(click)="toggleOptions()" | ||
(keydown)="handleKeydown($event)" | ||
[attr.aria-expanded]="showOptions" | ||
[attr.aria-activedescendant]="currentOptionIdx > -1 && showOptions ? listBoxId + '-option-' + currentOptionIdx : null" | ||
[attr.aria-label]="label + (selected?.title ?? '')" | ||
[class.disabled]="disabled" | ||
tabindex="0" | ||
> | ||
<div aria-hidden="true"> | ||
<ng-container *ngTemplateOutlet="optionTemplate; context: { showLabel: true, value: selected?.value, title: selected?.title }"></ng-container> | ||
</div> | ||
</div> | ||
<ul class="form-select-dropdown" *ngIf="showOptions" [id]="listBoxId" role="listbox" tabIndex="-1" #listBox> | ||
<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -- the key events are handled in the ts class --> | ||
<li *ngFor="let option of options; index as i" | ||
role="option" | ||
[class.selected]="option === selected" | ||
role="button" | ||
tabindex="0" | ||
(click)="select(option, i)" | ||
(keydown.enter)="select(option, i)" | ||
(keydown.space)="select(option, i); $event.preventDefault()"> | ||
<span *ngIf="showSymbol" class="symbol {{option.value}}"></span><span>{{option.title}}</span> | ||
[attr.aria-selected]="option === selected" | ||
[class.current]="currentOptionIdx === i" | ||
[id]="listBoxId + '-option-' + i" | ||
(click)="select(i)"> | ||
<ng-container *ngTemplateOutlet="optionTemplate; context: { showLabel: false, value: option.value, title: option.title }"></ng-container> | ||
</li> | ||
</ul> | ||
</div> | ||
<ng-template #optionTemplate let-showLabel="showLabel" let-value="value" let-title="title"> | ||
<span *ngIf="showLabel"><strong>{{label}}</strong></span><span *ngIf="showSymbol" class="symbol {{value}}"></span><span>{{title}}</span> | ||
</ng-template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.