Improve sidenav focus

[Adrien Crivelli]

When menu is hidden, it is possible to TAB through the invisible menu and select invisible link. This should not be possible to avoid accessibility issues.

Related, the burger menu should not become focused when after navigation when in mobile mode. And the first menu should not be auto-focused when opening the menu in mobile mode.

Those two behaviors are not present in native mat-sidenav as can be seen there: https://stackblitz.com/angular/vobbrkxolqv. So we should be able to find a way to keep our features while preventing those bugs.

first seen on: https://support.ecodev.ch/issues/7101

[Adrien Crivelli]

Maybe part of solution, from here, could look like:

import { Component, AfterViewInit } from '@angular/core';
import { FocusMonitor } from '@angular/cdk/a11y';

@Component({
    selector   : 'test-component',
    templateUrl: 'test-component.template.html',
})

export class TestComponent implements AfterViewInit {
    constructor(private _focusMonitor: FocusMonitor) {}

    ngAfterViewInit() {
        this._focusMonitor.stopMonitoring(document.getElementById('navButton_1'));
    }
}

[Adrien Crivelli]

See partially related: angular/components#22653

[Adrien Crivelli]

Not sure at all, but could this might help us when it lands ?angular/components@769996e

[Adrien Crivelli]

Not happening anymore