No Main Landmark when Mat Dialog is Open

[JacobMcSheffrey]

When running accessibility assessments I consistently face the "Document must have one main landmark" violation when a mat-dialog is open (despite there being a main landmark in the main shell of our app's markup). When dialogs are closed, there is no issue with this specific violation. I've tried adding a role="main" but this actually causes the accessibility engine to detect both main landmarks and thus reports "Can not have more than one main landmark". Adding role="dialog" to the top level div of the dialog container does not resolve the issue either, though it could be possible that this div level is too nested for a11y to detect the role. Could also be possible this is just an issue inherent in modern modal dialog rendering strategies, as I'm seeing the same violation on other sites such as Facebook and Trello. Curious to hear others' thoughts / assessments on this.

Note - I get the same results when testing with both axeDevTools and WAVE

[pavankalyan-codes]

I can work on this. Can you please assign this to me @crisbeto

[wallace41290]

What is the status on this? I see nothing for the past 5 months?

[ivareg]

As a workaround we can add via javascript the role and aria-label attributes to div.sdk-overlay-container

Solution 1 is in app.component.ts

import { OverlayContainer } from '@angular/cdk/overlay';
...

constructor(private overlayContainer: OverlayContainer) { }

ngOnInit(): void {
    const containerElement = this.overlayContainer.getContainerElement();
    containerElement.setAttribute('role', 'region');
    containerElement.setAttribute('aria-label', 'Overlay content');

}

Solution 2 - custom-overlay-container

// 1. create custom-overlay-container.service.ts
import { OverlayContainer } from '@angular/cdk/overlay';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class CustomOverlayContainer extends OverlayContainer {
  protected _createContainer(): void {
    super._createContainer();
    // Access the overlay container element
    const containerElement = this._containerElement;
    // Set custom attributes
    containerElement.setAttribute('role', 'region');
    containerElement.setAttribute('aria-label', 'Overlay content');
  }
}

// 2. in app.module.ts add in providers
import { OverlayContainer } from '@angular/cdk/overlay';
import { CustomOverlayContainer } from './custom-overlay-container.service';
...
  providers: [
    { provide: OverlayContainer, useClass: CustomOverlayContainer }
  ],
})