Skip to content

Commit 23a5494

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 244c906 commit 23a5494

File tree

3 files changed

+449
-215
lines changed

3 files changed

+449
-215
lines changed

src/lib/select/select.html

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,15 +38,18 @@
3838
(detach)="close()">
3939

4040
<div
41+
#panel
4142
class="mat-select-panel {{ 'mat-' + color }}"
4243
[ngClass]="panelClass"
4344
[@transformPanel]="multiple ? 'showing-multiple' : 'showing'"
4445
(@transformPanel.done)="_onPanelDone()"
45-
(keydown)="_handlePanelKeydown($event)"
4646
[style.transformOrigin]="_transformOrigin"
4747
[class.mat-select-panel-done-animating]="_panelDoneAnimating">
4848

49-
<div class="mat-select-content" [@fadeInContent]="'showing'" (@fadeInContent.done)="_onFadeInDone()">
49+
<div
50+
class="mat-select-content"
51+
[@fadeInContent]="'showing'"
52+
(@fadeInContent.done)="_onFadeInDone()">
5053
<ng-content></ng-content>
5154
</div>
5255
</div>

0 commit comments

Comments
 (0)