How do I make the mat autocomplete not close on tab for 508 accessibility?

Question

So I have a mat autocomplete but inside the dropdown menu the designers want some links to different pages like a tiny header in the dropdown. I just added them into the mat autocomplete and it works great but I'm running into a lot of 508 issues. When I hit tab, the mat autocomplete closes, so there is no way keyboard users can get to these buttons. Any advice?

            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"
                >

etc...

Answer 1

Ok I figured out a dirty way to do it. Ill post it but please answer if you have a cleaner method.

So I literally just listen for keydown, if it is tab and the dropdown is currently open, I detect changes and then manually re-open it. It seems to focus directly on the first button I had in the header so it works... I do not like this approach but the 508 guy is happy now....

 @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

I just find a work-around, but not pretty sure. The idea is override the onKeydown function of the _keyManager of the MatAutoComplete. So in a ngOnInit we can do some like

  @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;
        }
      }
  
    })
  }

You can see in this stackblitz