Improve sidenav focus

[PowerKiKi]

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

[PowerKiKi]

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

[PowerKiKi]

See partially related: angular/components#22653

[PowerKiKi]

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

[PowerKiKi]

Not happening anymore