Package Exports
- aria-hidden
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (aria-hidden) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
aria-hidden
Hides from ARIA everything, except provided node. Helps to isolate modal dialogs and focused task - the content will be not accessible using accesible tools.
API
Just call hideOthers with DOM-node you want to keep, and it will hide everything else.
targetNode could be placed anywhere - its siblings would be hidden, but its parents - not.
import {hideOthers} from 'aria-hidden';
const undo = hideOthers(DOMnode);
// everything else is "aria-hidden"
undo();
// all changes undoneyou also may limit the effect by providing top level node as a second paramiter
hideOthers(targetNode, parentNode);
hideOthers(anotherNode, document.getElementById('app'));
// parentNode defaults to document.body Inspiration
Based on smooth-ui modal dialogs.
See also
- inert - The HTML attribute/property to mark parts of the DOM tree as "inert".
- react-focus-lock to lock Focus inside modal.
- react-scroll-lock to disable page scroll while modal is opened.
Size
Code is 30 lines long
Licence
MIT