@accessible/tabbable 中文文档教程

发布于 4年前 浏览 17 项目主页 更新于 3年前


tabbable()

Bundlephobia 构建状态 NPM 版本 MIT 许可证

npm i @accessible/tabbable

返回一个包含节点内所有* tabbable DOM 节点的数组。 (*“全部”有一些必要的注意事项,您将通过阅读下文了解这些内容。)

以下被认为是可制表

  • <button>
  • <input>
  • <select>
  • <textarea>
  • <a> with href or xlink:href attributes
  • <audio> and <videos> with controls attributes
  • [contenteditable] elements
  • anything with a non-negative tabindex

的:以上任何一项都被认为是可制表的,但是,如果任何以下也是正确的:

  • negative tabindex
  • disabled
  • either the node itself or an ancestor of it is hidden via display: none or visibility: hidden
  • it's an <input type="radio"> and a different radio in its group is checked

如果您认为一个节点应该包含在您的 tabbable 数组中但它不是,您需要做的就是添加 tabindex="0"< /code> 故意包含它。(或者如果它在您的数组中但您不需要它,您可以添加 tabindex="-1" 以故意排除它。)这也将导致更一致的跨浏览器行为。 有关您的特殊节点可能的原因的信息,请参阅下面的“更多详细信息”

API

tabbable(rootNode: HTMLElement, includeRootNode: boolean = false): HTMLElement[]

返回 rootNode 中有序的 tabbable 节点数组。

排序原则总结:

  • First include any nodes with positive tabindex attributes (1 or higher), ordered by ascending tabindex and source order.
  • Then include any nodes with a zero tabindex and any element that by default receives focus (listed above) and does not have a positive tabindex set, in source order.

More details

  • Tabbable tries to identify elements that are reliably tabbable across (not dead) browsers. Browsers are stupidly inconsistent in their behavior, though — especially for edge-case elements like <object> and <iframe> — so this means some elements that you can tab to in some browsers will be left out of the results. (To learn more about that stupid inconsistency, see this amazing table). To provide better consistency across browsers and ensure the elements you want in your tabbables list show up there, try adding tabindex="0" to edge-case elements that Tabbable ignores.
  • (Exemplifying the above ^^:) The tabbability of <iframe>, <embed>, <object>, <summary>, and <svg> is inconsistent across browsers, so if you need an accurate read on one of these elements you should try giving it a tabindex. (You'll also need to pay attention to the focusable attribute on SVGs in IE & Edge.) But you also might not be able to get an accurate read — so you should avoid relying on it.
  • Radio groups have some edge cases, which you can avoid by always having a checked one in each group (and that is what you should usually do anyway). If there is no checked radio in the radio group, all of the radios will be considered tabbable. (Some browsers do this, otherwise don't — there's not consistency.)
  • Although Tabbable tries to deal with positive tabindexes, you should not use positive tabindexes. Accessibility experts seem to be in (rare) unanimous and clear consent about this: rely on the order of elements in the document.
  • Safari on Mac OS X does not Tab to <a> elements by default: you have to change a setting to get the standard behavior. Tabbable does not know whether you've changed that setting or not, so it will include <a> elements in its list.

Why fork?

创建者正在寻找新的维护者并且 @accessibile 包不需要某些功能 在原来的,所以我可以通过分叉来制作一个带有 TypeScript 类型的小包 :P

Credit

这个库是从 tabbable

LICENSE

MIT分叉出来的


tabbable()

Bundlephobia Build status NPM Version MIT License

npm i @accessible/tabbable

Returns an array of all* tabbable DOM nodes within a containing node. (* "all" has some necessary caveats, which you'll learn about by reading below.)

The following are considered tabbable:

  • <button>
  • <input>
  • <select>
  • <textarea>
  • <a> with href or xlink:href attributes
  • <audio> and <videos> with controls attributes
  • [contenteditable] elements
  • anything with a non-negative tabindex

Any of the above will not be considered tabbable, though, if any of the following are also true about it:

  • negative tabindex
  • disabled
  • either the node itself or an ancestor of it is hidden via display: none or visibility: hidden
  • it's an <input type="radio"> and a different radio in its group is checked

If you think a node should be included in your array of tabbables but it's not, all you need to do is add tabindex="0" to deliberately include it. (Or if it is in your array but you don't want it, you can add tabindex="-1" to deliberately exclude it.) This will also result in more consistent cross-browser behavior. For information about why your special node might not be included, see "More details", below.

API

tabbable(rootNode: HTMLElement, includeRootNode: boolean = false): HTMLElement[]

Returns an array of ordered tabbable node within the rootNode.

Summary of ordering principles:

  • First include any nodes with positive tabindex attributes (1 or higher), ordered by ascending tabindex and source order.
  • Then include any nodes with a zero tabindex and any element that by default receives focus (listed above) and does not have a positive tabindex set, in source order.

More details

  • Tabbable tries to identify elements that are reliably tabbable across (not dead) browsers. Browsers are stupidly inconsistent in their behavior, though — especially for edge-case elements like <object> and <iframe> — so this means some elements that you can tab to in some browsers will be left out of the results. (To learn more about that stupid inconsistency, see this amazing table). To provide better consistency across browsers and ensure the elements you want in your tabbables list show up there, try adding tabindex="0" to edge-case elements that Tabbable ignores.
  • (Exemplifying the above ^^:) The tabbability of <iframe>, <embed>, <object>, <summary>, and <svg> is inconsistent across browsers, so if you need an accurate read on one of these elements you should try giving it a tabindex. (You'll also need to pay attention to the focusable attribute on SVGs in IE & Edge.) But you also might not be able to get an accurate read — so you should avoid relying on it.
  • Radio groups have some edge cases, which you can avoid by always having a checked one in each group (and that is what you should usually do anyway). If there is no checked radio in the radio group, all of the radios will be considered tabbable. (Some browsers do this, otherwise don't — there's not consistency.)
  • Although Tabbable tries to deal with positive tabindexes, you should not use positive tabindexes. Accessibility experts seem to be in (rare) unanimous and clear consent about this: rely on the order of elements in the document.
  • Safari on Mac OS X does not Tab to <a> elements by default: you have to change a setting to get the standard behavior. Tabbable does not know whether you've changed that setting or not, so it will include <a> elements in its list.

Why fork?

The creator is looking for a new maintainer and @accessibile packages don't need some of the features in the original, so I can make a smaller package with TypeScript types by forking :P

Credit

This library is forked from tabbable

LICENSE

MIT

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文