Inert exemption for global live areas

[joppekroon]

Our application uses a custom element on the root level to post audio announcements (for screen readers), like a notification that the network is lost.

When a dialog is opened, the overlay manager sets aria-hidden (and inert) on all siblings of the root node (body) (inert-siblings.js #setSiblingsInert). This also sets aria-hidden on the global live area, thereby preventing all announcements coming through.

It would be really nice if we could make a pinky-swear that our global live area is not going to contain non-inert stuff. For example by setting a 'no-inert' attribute (or something) that #setSiblingsInert could check and skip.

[tlouisse]

Hi, I think it makes sense to consider such a thing.

Maybe we could go for:

import { overlays } from '@lion/overlays';

overlays.addNonInertElement(document.getElementByid('myLiveRegion'));

Inside inert-siblings.js we could do smth like

nonInertElements.forEach((nonInertEl) => {
  if (!deepContains(inertCandidate, nonInertEl)) {
    // make inert
  } else {
    // loop over children of inertCandidate and repeat
  }
});

@jorenbroekema, since you had a case where this might also be applicable: any suggestions?