选项卡( )
npm i @accessible/tabbable
返回包含节点内所有 * 可制表的 DOM 节点的数组 。 (*"通"有所必备之戒,从下所读取之
以下内容可选取:
<button><input><select><textarea><a>与href或者说xlink:href属性<audio>财务报告和审定财务报表<videos>与controls属性[contenteditable]要素- 任何非阴性的东西
tabindex
以上任何一项 没有 但是,如果下列任何一种情况也属实,则视为可制表:
- 负数
tabindex disabled- 无论是节点本身 或它的祖先 隐藏通过
display: none或者说visibility: hidden - 这是一个
<input type="radio">另一台电台是checked
如果您认为应该将节点包含在您的可制表符中 不过不是,你只需要添加 tabindex="0" 故意将它包含在内. (或者,如果它是在你的阵列 但你不希望它,你可以添加 tabindex="-1" 故意将其排除在外。 ) 这也将导致更一致的交叉浏览器行为. 以了解您的特别节点为何可能 没有 包含,参见 "更多细节"页:1.
API 密码
tabbable(rootNode: HTMLElement, includeRootNode: boolean = false): HTMLElement[]
在 rootNode。 。 。 .
订购原则摘要:
- 首先包括任何带正数的节点
tabindex属性(1或更高),由升序命令tabindex和源头命令. - 然后包括任何带零的节点
tabindex和默认获得焦点(上列)且无正数的元素tabindex设置,按源顺序排列.
更多细节
- Tabbable试图识别在浏览器(而不是死)上可可靠地tabbable的元素. 浏览器在行为上是愚蠢地不一致的,但是——尤其是对于边缘的元素,比如:
<object>财务报告和审定财务报表<iframe>所以这意味着 有点 元素为您 能够 选项卡到 有点 浏览器将被排除在结果之外。 (为了更多地了解这种愚蠢的不一致现象,请见此) 令人惊叹的桌子) (中文(简体) ). 使浏览器之间更加一致,并确保您的元素 请求 在你的标签列表 显示在那里, 尝试添加tabindex="0"到可标签忽略的边框元素。 。 。 . - (说明以上:) 表格的可选性
<iframe>, (中文(简体) ),<embed>, (中文(简体) ),<object>, (中文(简体) ),<summary>,以及<svg>实值 浏览器之间不一致,所以如果你需要准确读取其中之一,你应该尝试给它一个tabindex.(你还需要注意focusableiE & Edge 中的 SVGs 属性。) 但你也会 没有 能够得到准确的阅读——所以你应该避免依赖它. - 无线电组有一些边缘的病例, 你可以避免,总是有一个
checked每组一个 (这也是你通常应该做的). 如果没有checked电台在广播组, 全部 将被认为是可制表的。 (有些浏览器这样做,否则就不行——没有一致性. ) - 虽然Tabbable试图处理正标签索引, 您不应该使用正标签索引无障碍问题专家似乎对此有一致和明确的同意:依赖文件中要素的顺序.
- Mac OS X 上的 Safari 不标签为
<a>默认元素:要获得标准行为,必须更改设置。 Tabbable不知道你是否改变了这个设置,所以它包括<a>列表中的元素.
为什么是叉子?
创造者正在寻找一个新的维护者 @accessibile 软件包不需要一些功能
在原版中,这样我就可以用 TypeScript 类型制作一个较小的包,用叉:P
信贷
这间图书馆是从 选项卡
自由主义
麻省理工学院