From a960fe4d6a717fa0ffd1276c31cf1a03d5282d3e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Sun, 9 Jan 2022 00:10:47 +0100
Subject: [PATCH] FilterBar: or actually implement it properly
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/components/filter_bar.js | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/app/soapbox/components/filter_bar.js b/app/soapbox/components/filter_bar.js
index e9eddfa30..cb00014a0 100644
--- a/app/soapbox/components/filter_bar.js
+++ b/app/soapbox/components/filter_bar.js
@@ -20,6 +20,7 @@ export default class FilterBar extends React.PureComponent {
   };
 
   componentDidMount() {
+    this.node.addEventListener('keydown', this.handleKeyDown, false);
     window.addEventListener('resize', this.handleResize, { passive: true });
 
     const { left, width } = this.getActiveTabIndicationSize();
@@ -27,6 +28,7 @@ export default class FilterBar extends React.PureComponent {
   }
 
   componentWillUnmount() {
+    this.node.removeEventListener('keydown', this.handleKeyDown, false);
     document.removeEventListener('resize', this.handleResize, false);
   }
 
@@ -50,6 +52,27 @@ export default class FilterBar extends React.PureComponent {
     this.focusedItem = c;
   }
 
+  handleKeyDown = e => {
+    const items = Array.from(this.node.getElementsByTagName('a'));
+    const index = items.indexOf(document.activeElement);
+    let element = null;
+
+    switch(e.key) {
+    case 'ArrowRight':
+      element = items[index+1] || items[0];
+      break;
+    case 'ArrowLeft':
+      element = items[index-1] || items[items.length-1];
+      break;
+    }
+
+    if (element) {
+      element.focus();
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  }
+
   handleItemKeyPress = e => {
     if (e.key === 'Enter' || e.key === ' ') {
       this.handleClick(e);