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);