隐藏的线条
隐藏 ARIA 除提供节点外的一切.
帮助隔离模式对话框和重点任务 - 内容将无法使用 可用的工具.
现在用 HTML 惯性 支助
API 密码
打电话 hideOthers 和DOM节点 你想保持, 它会 隐藏 其他的都一样.
targetNode 它的兄弟姐妹会被藏起来 但它和它的父母.
"隐藏"的术语或
aria-hidden
import { hideOthers } from 'aria-hidden';
const undo = hideOthers(exceptThisDOMnode);
// everything else is "aria-hidden"
// undo changes
undo();
您也可以通过提供作为第二个参数的顶级节点来限制效果扩展
// keep only `anotherNode` node visible in #app
// the rest of document will be untouched
hideOthers(anotherNode, document.getElementById('app'));
parentNode默认为文档. body
惰性
虽然 aria-hidden 过去发挥重要作用,今后将发挥
用例总是围绕着隔离内容,使元素"透明",不仅为了aria,而且为了
用户互动.
这就是为什么你可能会考虑使用 inertOthers
import { hideOthers, inertOthers, supportsInert } from 'aria-hidden';
// focus on element mean "hide others". Ideally disable interactions
const focusOnElement = (node) => (supportsInert() ? inertOthers(node) : hideOthers(node));
相同的功能已被压缩并导出为
import { suppressOthers } from 'aria-hidden';
suppressOthers([keepThisNode, andThis]);
QQ 注 - 惰性 将禁用任何交互 与 压制 要点
无惰性地制止相互作用
一个可以 marker,第三个参数为函数,以标记隐藏的元素.
以后可以创建匹配给定标记的样式来应用 pointer-events:none
[hidden-node] {
pointer-events: none;
}
hideOthers(notThisOne, undefined /*parent = document*/, 'hidden-node');
一般而言,通过解决 [aria-hidden] 节点,但是
并非所有 aria-hidden 节点预计为非交互.
因此,最好把问题分开.
灵感
依据 平滑动 模式对话框 .
另见
- 惰性 - HTML属性/财产来将DOM树的部分标记为"惰".
- 反应 - 焦点- 锁定 将焦点锁定在模式内.
- 反应- 滚动- 锁定 在打开模式时禁用页滚动.
大小
代码为30行长
许可证
麻省理工学院