Skip to content

Commit 26fd20e

Browse files
committed
refactor(select): use aria-activedescendant to manage focus
* Refactors the select to use `aria-activedescendant` to announce the highlighted item to screen readers. Previously we would this through focus, however using focus prevents us from being able to do things like #3211. * Fixes a hack that was used to get a hold of the panel element using `querySelector`. Now it properly uses a `ViewChild` query, however this meant some tests had to be updated. Relates to #3211. Fixes #6690.
1 parent 53c42a4 commit 26fd20e

File tree

3 files changed

+460
-216
lines changed

3 files changed

+460
-216
lines changed

src/lib/select/select.html

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,16 +34,19 @@
3434
(detach)="close()">
3535

3636
<div
37+
#panel
3738
class="mat-select-panel {{ 'mat-' + color }}"
3839
[ngClass]="panelClass"
3940
[@transformPanel]="multiple ? 'showing-multiple' : 'showing'"
4041
(@transformPanel.done)="_onPanelDone()"
41-
(keydown)="_handlePanelKeydown($event)"
4242
[style.transformOrigin]="_transformOrigin"
4343
[class.mat-select-panel-done-animating]="_panelDoneAnimating"
4444
[style.font-size.px]="_triggerFontSize">
4545

46-
<div class="mat-select-content" [@fadeInContent]="'showing'" (@fadeInContent.done)="_onFadeInDone()">
46+
<div
47+
class="mat-select-content"
48+
[@fadeInContent]="'showing'"
49+
(@fadeInContent.done)="_onFadeInDone()">
4750
<ng-content></ng-content>
4851
</div>
4952
</div>

0 commit comments

Comments
 (0)