fix(tabs): add behaviour of keys arrow

ovh · Jan 16, 2024 · b44b79e · b44b79e
1 parent e4fdb6c
commit b44b79e
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 2 deletions.
diff --git a/packages/components/src/tabs/src/components/osds-tabs/core/controller.ts b/packages/components/src/tabs/src/components/osds-tabs/core/controller.ts
@@ -33,6 +33,24 @@ class OdsTabsController {
     }
   }
 
+  handleArrowKey(event: KeyboardEvent): void {
+    const currentSelectedTabIndex = this.component.getTabItems().findIndex((tab) => tab.hasAttribute('active'))
+    if(currentSelectedTabIndex === 0 && event.code === 'ArrowLeft' ) {
+      return;
+    }
+    if(currentSelectedTabIndex === this.component.getTabItems().length - 1 && event.code === 'ArrowRight' ) {
+      return;
+    }
+
+    if(event.code === 'ArrowLeft') {
+      const previousPanel = this.component.getTabItems()[currentSelectedTabIndex - 1].getAttribute('panel');
+      this.changeActivePanel(previousPanel!);
+    } else {
+      const nextPanel = this.component.getTabItems()[currentSelectedTabIndex + 1].getAttribute('panel');
+      this.changeActivePanel(nextPanel!);
+    }
+  }
+
   propagateContrastedToItems(contrasted: boolean) {
     this.component.getTabItems().forEach((item) => item.contrasted = contrasted);
   }
@@ -49,4 +67,4 @@ class OdsTabsController {
 
 export {
   OdsTabsController,
-};
+};
diff --git a/packages/components/src/tabs/src/components/osds-tabs/osds-tabs.tsx b/packages/components/src/tabs/src/components/osds-tabs/osds-tabs.tsx
@@ -79,6 +79,13 @@ export class OsdsTabs implements OdsTabsAttribute, OdsTabsEvent {
     return this.controller.getTabPanels('osds-tab-panel');
   }
 
+  handleArrowKey(event: KeyboardEvent): void {
+    if (event.code === 'ArrowLeft' || event.code === 'ArrowRight') {
+      event.stopPropagation();
+      this.controller.handleArrowKey(event);
+    }
+  }
+
   /**
    * when panel property changes, it will change the active panel
    * @see OdsTabsBehavior.onPanelPropChange
@@ -104,7 +111,9 @@ export class OsdsTabs implements OdsTabsAttribute, OdsTabsEvent {
   render() {
     return (
       <Host>
-        <div class="tabs-nav-wrap">
+        <div class="tabs-nav-wrap"
+             onKeyDown={ this.handleArrowKey.bind(this) }
+        >
           <slot name='top' />
         </div>
         <slot />