From 5d9500bdfdd02b3b1d91df2be86b1723f517fc52 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Fri, 6 May 2022 04:26:15 +0200 Subject: Handle disabled focused tabs with tab JavaScript plugin (#36169) * Handle disabled tabs * Fix after feedback * Update js/src/tab.js Co-authored-by: GeoSot * Update js/src/tab.js Co-authored-by: GeoSot * Commit suggestions via GitHub broke the thing * Add some unit tests * Remove temp doc modification * Add tests for left arrow * Add disabled tabs in JavaScript Behavior section * Compact 4 tests to 2 tests * Compact 4 tests to 2 tests * Add 'disabled' attribute for all buttons * Change the disabled pane position only for the vertical version * Change ids for the confusing first example in JavaScript behavior * Use disabled attribute instead of the class for buttons in tabs Co-authored-by: GeoSot --- site/content/docs/5.1/components/navs-tabs.md | 64 ++++++++++++++++++++------- 1 file changed, 48 insertions(+), 16 deletions(-) (limited to 'site') diff --git a/site/content/docs/5.1/components/navs-tabs.md b/site/content/docs/5.1/components/navs-tabs.md index d43058b33..b3d306750 100644 --- a/site/content/docs/5.1/components/navs-tabs.md +++ b/site/content/docs/5.1/components/navs-tabs.md @@ -335,44 +335,54 @@ Use the tab JavaScript plugin—include it individually or through the compiled
-
+

This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

-
+

This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

-
+

This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

+
+

This is some placeholder content the Disabled tab's associated content.

+
```html
-
...
-
...
-
...
+
...
+
...
+
...
+
...
``` @@ -384,6 +394,7 @@ To help fit your needs, this works with `
    `-based markup, as shown above, or +
@@ -396,6 +407,9 @@ To help fit your needs, this works with `
    `-based markup, as shown above, or +
@@ -405,12 +419,14 @@ To help fit your needs, this works with `
    `-based markup, as shown above, or +
+
``` @@ -427,6 +443,9 @@ The tabs plugin also works with pills. +
@@ -438,6 +457,9 @@ The tabs plugin also works with pills.

This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

+
+

This is some placeholder content the Disabled tab's associated content.

+
@@ -452,11 +474,15 @@ The tabs plugin also works with pills. +
...
...
...
+
...
``` @@ -467,21 +493,25 @@ And with vertical pills. Ideally, for vertical tabs, you should also add `aria-o
-

This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

+

This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

-

This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

+

This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

+
+
+

This is some placeholder content the Disabled tab's associated content.

-

This is some placeholder content the Messages tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

+

This is some placeholder content the Messages tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

-

This is some placeholder content the Settings tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

+

This is some placeholder content the Settings tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

@@ -492,12 +522,14 @@ And with vertical pills. Ideally, for vertical tabs, you should also add `aria-o
...
...
+
...
...
...
-- cgit v1.2.3