Javascript 如何使此按钮ADA的下拉列表可访问

我认为你可以利用ANGLING的HostListener来监听键盘事件并操纵焦点.

将tabIndex添加到mat-复选框以使其可聚焦，并在组件中实现HostListener以侦听Keydown事件.

当按下箭头键时，相应地更改复选框的焦点.

超文本标记语言:

<mat-menu #settings="matMenu">
    <div *ngFor="let id of arraycolumns; let i = index">
        <div *ngIf="![‘Cashless', 'Borrower', 'options', 'isfavorite', 'Progress', 'Deal Name'].includes(id)" mat-menu-item>
            <mat-checkbox class="chkbx" #singleCheckbox [checked]='fieldcolumnsChecked.indexOf(id) >= 0' (change)="checkcolumnsChanged(id)" (click)="$event.stopPropagation();" [tabIndex]="i">
                {{id}} 
            </mat-checkbox>
        </div> 
    </div> 
</mat-menu>

Typescript :

import { HostListener, QueryList, ViewChildren } from '@angular/core';
import { MatCheckbox } from '@angular/material/checkbox';

// ... (other imports)

export class YourComponent {

    @ViewChildren("singleCheckbox") checkboxes!: QueryList<MatCheckbox>;

    currentFocusIndex = 0;

    // ...

    @HostListener('document:keydown', ['$event'])
    handleKeyboardEvent(event: KeyboardEvent) {
        if (this.checkboxes && this.checkboxes.length) {
            if (event.key === 'ArrowDown') {
                event.preventDefault();
                this.setFocus(true);
            } else if (event.key === 'ArrowUp') {
                event.preventDefault();
                this.setFocus(false);
            }
        }
    }

    setFocus(goDown: boolean) {
        if (goDown && this.currentFocusIndex < this.checkboxes.length - 1) {
            this.currentFocusIndex++;
        } else if (!goDown && this.currentFocusIndex > 0) {
            this.currentFocusIndex--;
        }
        const checkboxArray = this.checkboxes.toArray();
        checkboxArray[this.currentFocusIndex].focus();
    }

    // ... (rest of your code)
}