fix: fix #tabs tabIndex vs content – fixes #779

dnbexperience · Mar 30, 2021 · 54f0f29 · 54f0f29
1 parent cd78bfc
commit 54f0f29
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 10 deletions.
diff --git a/packages/dnb-eufemia/src/components/tabs/Tabs.js b/packages/dnb-eufemia/src/components/tabs/Tabs.js
@@ -639,6 +639,19 @@ export default class Tabs extends React.PureComponent {
     ) // Delay so Chrome/Safari makes the transition / animation smooth
   }
 
+  onKeyDownHandler = (event) => {
+    switch (keycode(event)) {
+      case 'enter':
+        try {
+          const elem = document.getElementById(`${this._id}-content`)
+          elem.focus()
+        } catch (e) {
+          warn(e)
+        }
+        break
+    }
+  }
+
   onClickHandler = (event) => {
     let selected_key
     try {
@@ -1042,6 +1055,7 @@ Tip: Check out other solutions like <Tabs.Content id="unique">Your content, outs
                 isSelected && 'selected'
               )}
               onClick={this.onClickHandler}
+              onKeyUp={this.onKeyDownHandler}
               data-tab-key={key}
               {...itemParams}
             >

diff --git a/packages/dnb-eufemia/src/components/tabs/TabsContentWrapper.js b/packages/dnb-eufemia/src/components/tabs/TabsContentWrapper.js
@@ -93,7 +93,7 @@ export default class ContentWrapper extends React.PureComponent {
     return (
       <Element
         role="tabpanel"
-        tabIndex="0"
+        tabIndex="-1"
         id={`${id}-content`}
         spacing={content_style ? false : undefined}
         style_type={content_style ? content_style : undefined}

diff --git a/packages/dnb-eufemia/src/components/tabs/TabsController.js b/packages/dnb-eufemia/src/components/tabs/TabsController.js
@@ -45,15 +45,14 @@ class TabsController {
   }
 }
 
-const inst =
-  typeof window !== 'undefined'
-    ? window
-    : typeof global !== 'undefined'
-    ? global
-    : TabsController
+const inst = typeof window !== 'undefined' ? window : TabsController
 
 export default {
   use: (id) => {
-    return (inst[id] || (inst[id] = new TabsController(id))).init()
+    inst.__tabsController = inst.__tabsController || {}
+    return (
+      inst.__tabsController[id] ||
+      (inst.__tabsController[id] = new TabsController(id))
+    ).init()
   }
 }
diff --git a/packages/dnb-eufemia/src/components/tabs/__tests__/__snapshots__/Tabs.test.js.snap b/packages/dnb-eufemia/src/components/tabs/__tests__/__snapshots__/Tabs.test.js.snap
@@ -206,6 +206,7 @@ exports[`A single Tab component has to work with "Tabs.Content" from outside 1`]
                     data-tab-key="first"
                     id="linked-tab-first"
                     onClick={[Function]}
+                    onKeyUp={[Function]}
                     role="tab"
                     tabIndex="-1"
                     type="button"
@@ -236,6 +237,7 @@ exports[`A single Tab component has to work with "Tabs.Content" from outside 1`]
                     data-tab-key="second"
                     id="linked-tab-second"
                     onClick={[Function]}
+                    onKeyUp={[Function]}
                     role="tab"
                     tabIndex="-1"
                     type="button"
@@ -267,6 +269,7 @@ exports[`A single Tab component has to work with "Tabs.Content" from outside 1`]
                     data-tab-key="third"
                     id="linked-tab-third"
                     onClick={[Function]}
+                    onKeyUp={[Function]}
                     role="tab"
                     tabIndex="-1"
                     type="button"
@@ -460,7 +463,7 @@ exports[`A single Tab component has to work with "Tabs.Content" from outside 1`]
         className="dnb-tabs__content dnb-no-focus dnb-tabs__content--spacing"
         id="linked-content"
         role="tabpanel"
-        tabIndex="0"
+        tabIndex="-1"
       >
         third
       </div>
@@ -717,6 +720,7 @@ exports[`Tabs component have to match snapshot 1`] = `
                   data-tab-key="first"
                   id="id-tab-first"
                   onClick={[Function]}
+                  onKeyUp={[Function]}
                   role="tab"
                   tabIndex="-1"
                   type="button"
@@ -748,6 +752,7 @@ exports[`Tabs component have to match snapshot 1`] = `
                   data-tab-key="second"
                   id="id-tab-second"
                   onClick={[Function]}
+                  onKeyUp={[Function]}
                   role="tab"
                   tabIndex="-1"
                   type="button"
@@ -778,6 +783,7 @@ exports[`Tabs component have to match snapshot 1`] = `
                   data-tab-key="third"
                   id="id-tab-third"
                   onClick={[Function]}
+                  onKeyUp={[Function]}
                   role="tab"
                   tabIndex="-1"
                   type="button"
@@ -952,7 +958,7 @@ exports[`Tabs component have to match snapshot 1`] = `
             className="dnb-tabs__content dnb-no-focus dnb-tabs__content--spacing"
             id="id-content"
             role="tabpanel"
-            tabIndex="0"
+            tabIndex="-1"
           >
             <second>
               <h2>