From 51b2335b968beb0ed2cadcb0439edd1041f08962 Mon Sep 17 00:00:00 2001
From: Quincy Morgan <quincy.morgan@icloud.com>
Date: Thu, 11 Oct 2018 19:04:01 -0700
Subject: [PATCH] Corrects CSS for focused preset list item button Fixes arrow
 key navigation for right-to-left layouts

---
 css/80_app.css            | 3 ++-
 modules/ui/preset_list.js | 8 ++++----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/css/80_app.css b/css/80_app.css
index 427022792..a8e255a0e 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -1129,7 +1129,8 @@ a.hide-toggle {
     border-radius: 3px 0 0 3px;
 }
 
-.preset-list-button:hover .label {
+.preset-list-button:hover .label,
+.preset-list-button:focus .label {
     background-color: #ececec;
 }
 
diff --git a/modules/ui/preset_list.js b/modules/ui/preset_list.js
index 2d83c045e..1242e2fe2 100644
--- a/modules/ui/preset_list.js
+++ b/modules/ui/preset_list.js
@@ -235,7 +235,7 @@ export function uiPresetList(context) {
             }
         }
         // arrow left, move focus to the parent item if there is one
-        else if (d3_event.keyCode === d3_keybinding.keyCodes['←']) {
+        else if (d3_event.keyCode === d3_keybinding.keyCodes[(textDirection === 'rtl') ? '→' : '←']) {
             d3_event.preventDefault();
             d3_event.stopPropagation();
 
@@ -246,7 +246,7 @@ export function uiPresetList(context) {
             }
         }
         // arrow right, choose this item
-        else if (d3_event.keyCode === d3_keybinding.keyCodes['→']) {
+        else if (d3_event.keyCode === d3_keybinding.keyCodes[(textDirection === 'rtl') ? '←' : '→']) {
             d3_event.preventDefault();
             d3_event.stopPropagation();
             item.datum().choose();
@@ -282,7 +282,7 @@ export function uiPresetList(context) {
                 .on('click', click)
                 .on('keydown', function() {
                     // right arrow, expand the focused item
-                    if (d3_event.keyCode === d3_keybinding.keyCodes['→']) {
+                    if (d3_event.keyCode === d3_keybinding.keyCodes[(textDirection === 'rtl') ? '←' : '→']) {
                         d3_event.preventDefault();
                         d3_event.stopPropagation();
                         // if the item isn't expanded
@@ -291,7 +291,7 @@ export function uiPresetList(context) {
                             click.call(this);
                         }
                     // left arrow, collapse the focused item
-                    } else if (d3_event.keyCode === d3_keybinding.keyCodes['←']) {
+                    } else if (d3_event.keyCode === d3_keybinding.keyCodes[(textDirection === 'rtl') ? '→' : '←']) {
                         d3_event.preventDefault();
                         d3_event.stopPropagation();
                         // if the item is expanded