slight modification of proposed changes - change js to ts file and reallow right and left arrow keys

wherehows-web/app/components/ivy-tabs-tablist.js

@@ -1,12 +0,0 @@
-import IvyTabsTablistComponent from 'ivy-tabs/components/ivy-tabs-tablist';
-
-export default IvyTabsTablistComponent.extend({
-  /**
-   * Overwrites the original ivy-tabs-tablist component's keyDown method, which lets the user
-   * navigate through the tabs using the arrow keys. As we don't want that functionality, this
-   * empty function replaces the event handler and does nothing instead
-   */
-  keyDown() {
-    // Do nothing
-  }
-});

wherehows-web/app/components/ivy-tabs-tablist.ts

@@ -0,0 +1,37 @@
+import IvyTabsTablistComponent from 'ivy-tabs/components/ivy-tabs-tablist';
+import noop from 'wherehows-web/utils/noop';
+import { scheduleOnce } from '@ember/runloop';
+
+const LEFT_ARROW = 37;
+const RIGHT_ARROW = 39;
+
+export default IvyTabsTablistComponent.extend({
+  /**
+   * Overwrites the ofiginal ivy-tabs-tablist component's on('keydown') method, which lets the
+   * user navigate through the tabs using the arrow keys. As we don't want up and down arrows
+   * to interfere with page scroll, we change this to a noop function.
+   */
+  navigateOnKeyDown: noop,
+
+  /**
+   * Using the more modern approach to handling component events, we include the functionality
+   * to scroll between tabs with the left and right arrow keys. This way, the user can scroll
+   * between tabs with the left/right keys and use the up/down keys to scroll the page, without
+   * interruption
+   */
+  keyDown(event: KeyboardEvent) {
+    switch (event.keyCode) {
+      case LEFT_ARROW:
+        this.selectPreviousTab();
+        break;
+      case RIGHT_ARROW:
+        this.selectNextTab();
+        break;
+      default:
+        return;
+    }
+
+    event.preventDefault();
+    scheduleOnce('afterRender', this, this.focusSelectedTab);
+  }
+});

wherehows-web/app/typings/untyped-js-module.d.ts

@@ -5,6 +5,15 @@ declare module 'ember-simple-auth/mixins/authenticated-route-mixin' {
   export default Mixin;
 }
 
+declare module 'ivy-tabs/components/ivy-tabs-tablist' {
+  import Component from '@ember/component';
+  export default class IvyTabsTablistComponent extends Component {
+    focusSelectedTab: () => void;
+    selectPreviousTab: () => void;
+    selectNextTab: () => void;
+  }
+}
+
 declare module 'ember-simple-auth/authenticators/base' {
   import EmberObject from '@ember/object';
   export default EmberObject;