aboutsummaryrefslogtreecommitdiff
path: root/site/content
diff options
context:
space:
mode:
authorKyle Tsang <[email protected]>2023-07-23 12:06:14 -0700
committerGitHub <[email protected]>2023-07-23 22:06:14 +0300
commitd45cc7ef516de676bfaa2b97fe10b71e98ff6f3e (patch)
treeebaf63d2ffa2fa1f5eea6b6487ace1389a270a72 /site/content
parent8fcfce1ebd988fd4e5ed2f51acaa5c49e6b301c9 (diff)
downloadbootstrap-d45cc7ef516de676bfaa2b97fe10b71e98ff6f3e.tar.xz
bootstrap-d45cc7ef516de676bfaa2b97fe10b71e98ff6f3e.zip
Support `Home` and `End` keys in tabs (#38498)
* Support `Home` and `End` keys in tabs * Update tab.js * simplify tests * Update navs-tabs.md * Update .bundlewatch.config.json --------- Co-authored-by: Patrick H. Lauke <[email protected]> Co-authored-by: XhmikosR <[email protected]> Co-authored-by: Mark Otto <[email protected]>
Diffstat (limited to 'site/content')
-rw-r--r--site/content/docs/5.3/components/navs-tabs.md2
1 files changed, 1 insertions, 1 deletions
diff --git a/site/content/docs/5.3/components/navs-tabs.md b/site/content/docs/5.3/components/navs-tabs.md
index 0a99e34f8..5cf75e145 100644
--- a/site/content/docs/5.3/components/navs-tabs.md
+++ b/site/content/docs/5.3/components/navs-tabs.md
@@ -567,7 +567,7 @@ And with vertical pills. Ideally, for vertical tabs, you should also add `aria-o
Dynamic tabbed interfaces, as described in the [ARIA Authoring Practices Guide tabs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/), require `role="tablist"`, `role="tab"`, `role="tabpanel"`, and additional `aria-` attributes in order to convey their structure, functionality, and current state to users of assistive technologies (such as screen readers). As a best practice, we recommend using `<button>` elements for the tabs, as these are controls that trigger a dynamic change, rather than links that navigate to a new page or location.
-In line with the ARIA Authoring Practices pattern, only the currently active tab receives keyboard focus. When the JavaScript plugin is initialized, it will set `tabindex="-1"` on all inactive tab controls. Once the currently active tab has focus, the cursor keys activate the previous/next tab, with the plugin changing the [roving `tabindex`](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/) accordingly. However, note that the JavaScript plugin does not distinguish between horizontal and vertical tab lists when it comes to cursor key interactions: regardless of the tab list's orientation, both the up *and* left cursor go to the previous tab, and down *and* right cursor go to the next tab.
+In line with the ARIA Authoring Practices pattern, only the currently active tab receives keyboard focus. When the JavaScript plugin is initialized, it will set `tabindex="-1"` on all inactive tab controls. Once the currently active tab has focus, the cursor keys activate the previous/next tab. The <kbd>Home</kbd> and <kbd>End</kbd> keys activate the first and last tabs, respectively. The plugin will change the [roving `tabindex`](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/) accordingly. However, note that the JavaScript plugin does not distinguish between horizontal and vertical tab lists when it comes to cursor key interactions: regardless of the tab list's orientation, both the up *and* left cursor go to the previous tab, and down *and* right cursor go to the next tab.
{{< callout warning >}}
In general, to facilitate keyboard navigation, it's recommended to make the tab panels themselves focusable as well, unless the first element containing meaningful content inside the tab panel is already focusable. The JavaScript plugin does not try to handle this aspect—where appropriate, you'll need to explicitly make your tab panels focusable by adding `tabindex="0"` in your markup.