fix: correct the tabindex value (#18)

Co-authored-by: kkmch <[email protected]>
diplodoc-platform · Sep 20, 2023 · 8b47bb2 · 8b47bb2
1 parent 201cdac
commit 8b47bb2
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 6 deletions.
diff --git a/src/common.ts b/src/common.ts
@@ -9,7 +9,7 @@ export const ACTIVE_CLASSNAME = 'active';
 export const GROUP_DATA_KEY = 'data-diplodoc-group';
 export const TAB_DATA_KEY = 'data-diplodoc-key';
 export const TAB_DATA_ID = 'data-diplodoc-id';
-export const TAB_ACTIVA_KEY = 'data-diplodoc-is-active';
+export const TAB_ACTIVE_KEY = 'data-diplodoc-is-active';
 
 export const DEFAULT_TABS_GROUP_PREFIX = 'defaultTabsGroup-';
 

diff --git a/src/plugin/transform.ts b/src/plugin/transform.ts
@@ -10,7 +10,7 @@ import {
     ACTIVE_CLASSNAME,
     DEFAULT_TABS_GROUP_PREFIX,
     GROUP_DATA_KEY,
-    TAB_ACTIVA_KEY,
+    TAB_ACTIVE_KEY,
     TABS_CLASSNAME,
     TABS_LIST_CLASSNAME,
     TAB_CLASSNAME,
@@ -186,12 +186,12 @@ function insertTabs(
         tabPanelClose.block = true;
         tabOpen.attrSet(TAB_DATA_ID, tabId);
         tabOpen.attrSet(TAB_DATA_KEY, tabKey);
-        tabOpen.attrSet(TAB_ACTIVA_KEY, i === 0 ? 'true' : 'false');
+        tabOpen.attrSet(TAB_ACTIVE_KEY, i === 0 ? 'true' : 'false');
         tabOpen.attrSet('class', TAB_CLASSNAME);
         tabOpen.attrSet('role', 'tab');
         tabOpen.attrSet('aria-controls', tabPanelId);
         tabOpen.attrSet('aria-selected', 'false');
-        tabOpen.attrSet('tabindex', '-1');
+        tabOpen.attrSet('tabindex', i === 0 ? '-1' : '0');
         tabPanelOpen.attrSet('id', tabPanelId);
         tabPanelOpen.attrSet('class', TAB_PANEL_CLASSNAME);
         tabPanelOpen.attrSet('role', 'tabpanel');
@@ -201,7 +201,6 @@ function insertTabs(
         if (i === 0) {
             tabOpen.attrJoin('class', ACTIVE_CLASSNAME);
             tabOpen.attrSet('aria-selected', 'true');
-            tabOpen.attrSet('tabindex', '0');
             tabPanelOpen.attrJoin('class', ACTIVE_CLASSNAME);
         }
 

diff --git a/src/runtime/TabsController.ts b/src/runtime/TabsController.ts
@@ -139,7 +139,7 @@ export class TabsController {
 
                 tab.classList.toggle(ACTIVE_CLASSNAME, isTargetTab);
                 tab.setAttribute('aria-selected', isTargetTab.toString());
-                tab.setAttribute('tabindex', isTargetTab ? '0' : '-1');
+                tab.setAttribute('tabindex', isTargetTab ? '-1' : '0');
                 panel.classList.toggle(ACTIVE_CLASSNAME, isTargetTab);
             });
         });

diff --git a/test/plugin.test.ts b/test/plugin.test.ts
@@ -74,6 +74,7 @@ describe('plugin', () => {
             expect(Object.keys(attrsObject)).toEqual(attrs);
             expect(attrsObject['class']).toEqual(`yfm-tab${i === 0 ? ' active' : ''}`);
             expect(attrsObject['role']).toEqual('tab');
+            expect(attrsObject['tabindex']).toEqual(i === 0 ? '-1' : '0');
         });
     });