"Content should be contained in a landmark region" violation on dialog element

[matt-diehl]

Running aXe on a page with an open modal reports the violation "Content should be contained in a landmark region."

This can be reproduced here, using the Chrome aXe extension, after opening the dialog: https://dequeuniversity.com/library/aria/popups-dialogs/sf-modal-dialog

I have also reproduced this using the npm package with version 3.0.3.

My expectation is that this would not be considered a violation for elements with role="dialog" specified. This error goes away if the modal is contained in a <div role="complementary">, but I suspect that is not the correct approach.

[marcysutton]

We got similar feedback about a live region element today. I personally think both of these use cases should be exempt from the landmark requirement (with an exception).

For dialogs, focus management should get a screen reader user to the right place in DOM; the background should also be inert, making landmarks sorta useless in that context. Even though developers get that pattern wrong quite often, exempting dialog content seems fine to me. A user wouldn't likely navigate to a dialog from a landmarks list, either.

For live regions, the typical pattern is to put a live region offscreen/clipped somewhere on the page and a user wouldn't navigate to it directly. However, I have seen live regions wrapping actual page content including headings, links and images, a sort-of single-page app technique in lieu of focus management. We'd have to check out some display properties and children of a live region before I'd feel comfortable excepting it.

@WilcoFiers what do you think?

[WilcoFiers]

I'm okay with both of these as exceptions to this rule.

[martinbethann]

Similarly role="status" is also flagged. These landmarks are typically top level, like dialogs and may be used for loading graphics and info bars.

[promiselaoliu]

Should "alertdialog" also be included?

return explicitRole === 'dialog' || landmarkRoles.includes(explicitRole);