我如何使mat自动完成不关闭标签上的508可访问性?

Question

所以我有一个mat自动完成，但在下拉菜单内的设计师想要一些链接到不同的页面，如一个小标题下拉。我只是把它们添加到垫子自动完成，它工作得很好，但我遇到了很多508问题。当我按tab键时，自动补全功能关闭，所以键盘用户无法获得这些按钮。任何建议吗?

class="base-form-field dense no-label"
appearance="outlined"
>
<input
#searchBar
type="text"
placeholder="Search"
matInput
[formControl]="fc"
[matAutocomplete]="auto"
/>
<mat-autocomplete
#auto="matAutocomplete"
>
<div class="bar">
<div>Search for:</div>
<a routerLink="Search Records"
>Records</a
>

…

</div>
<div class="grid-title semi-bold gray--text">Top Results</div>
<mat-option
*ngFor="let option of filteredOptions | async"
[value]="option.title"
>

等等……

Answer 1

好吧，我想出了一个肮脏的方法。如果你有更干净的方法，请回答。

所以我只是听keydown，如果它是tab，下拉菜单当前是打开的，我检测变化，然后手动重新打开它。它似乎直接关注我在标题中的第一个按钮，所以它的工作原理…我不喜欢这种方法，但508家伙现在很高兴....

@ViewChild(MatAutocompleteTrigger) trigger!: MatAutocompleteTrigger;
@HostListener('document:keydown', ['$event'])
onkeyDown(event: KeyboardEvent): void {
if (this._isOpen && event.key === 'Tab') {
this.cd.detectChanges();
this.trigger.openPanel();
}
}
constructor(private cd: ChangeDetectorRef) {}

Answer 2

我只是找到了一个变通方法，但不是很确定。这个想法是覆盖MatAutoComplete的_keyManager的onKeydown函数。所以在ngOnInit中我们可以这样写

@ViewChild('auto',{static:true})auto:MatAutocomplete;
ngOnInit() {
this.filteredOptions = this.myControl.valueChanges.pipe(
startWith(''),
map(value => this._filter(value))
);
setTimeout(()=>{
this.auto._keyManager.onKeydown=(event: KeyboardEvent)=>{
switch (event.keyCode) {
case TAB:
if (this.auto.isOpen)
event.preventDefault();
else
this.auto._keyManager.tabOut.next();
break
case DOWN_ARROW:
this.auto._keyManager.setNextItemActive();
break;

case UP_ARROW:
this.auto._keyManager.setPreviousItemActive();
break;
}
}

})
}

你可以看到在这个stackblitz