Improves keyboard navigation for segment editor (#14757)

* Make it possible to open segments or adding one by pressing enter when element is focued

* Allow tabbing to all visits segment

* Improve style of tab focused segments

2 files changed, 23 insertions, 4 deletions

diff --git a/plugins/SegmentEditor/javascripts/Segmentation.js b/plugins/SegmentEditor/javascripts/Segmentation.js
index f406e37d05..ffa2ea9aa2 100644
--- a/plugins/SegmentEditor/javascripts/Segmentation.js
+++ b/plugins/SegmentEditor/javascripts/Segmentation.js
@@ -147,8 +147,8 @@ Segmentation = (function($) {
             var html = self.editorTemplate.find("> .listHtml").clone();
             var segment, injClass;
             var listHtml = '<li data-idsegment="" ' +
-                (self.currentSegmentStr == "" ? " class='segmentSelected' tabindex='4' " : "")
-                + ' data-definition=""><span class="segname">' + self.translations['SegmentEditor_DefaultAllVisits']
+                (self.currentSegmentStr == "" ? " class='segmentSelected'" : "")
+                + ' data-definition=""><span class="segname" tabindex="4">' + self.translations['SegmentEditor_DefaultAllVisits']
                 + ' ' + self.translations['General_DefaultAppended']
                 + '</span></li> ';
 
@@ -414,6 +414,14 @@ Segmentation = (function($) {
                 showAddNewSegmentForm();
             });
 
+            // emulate a click when pressing enter on one of the segments or the add button
+            self.target.on("keyup", ".segmentList li, .add_new_segment", function (event) {
+                var keycode = (event.keyCode ? event.keyCode : (event.which ? event.which : event.key));
+                if(keycode == '13'){
+                    $(this).trigger('click');
+                }
+            });
+
             // attach event that will clear segment list filtering input after clicking x
             self.target.on('click', ".segmentFilterContainer span", function (e) {
                 $(e.target).parent().find(".segmentFilter").val(self.translations['General_Search']).trigger('keyup');
diff --git a/plugins/SegmentEditor/stylesheets/segmentation.less b/plugins/SegmentEditor/stylesheets/segmentation.less
index 8f3d973f93..cd6b7632a7 100644
--- a/plugins/SegmentEditor/stylesheets/segmentation.less
+++ b/plugins/SegmentEditor/stylesheets/segmentation.less
@@ -206,9 +206,16 @@ div.scrollable {
     cursor: pointer;
 }
 
-.segmentationContainer .submenu ul li:hover {
+.segmentationContainer .submenu ul li:hover,
+.segmentationContainer .submenu ul li:focus,
+.segmentationContainer .submenu ul li:focus-within {
     color: #255792;
     background: @color-silver-l95;
+    outline: none;
+
+    > * {
+        outline: none;
+    }
 }
 
 .segmentationContainer ul.submenu {
@@ -384,7 +391,11 @@ a.metric_category {
     margin: 8px;
 }
 
-.segmentSelected, .segmentSelected:hover, .segmentEditorPanel .segmentationContainer .submenu li .segmentSelected {
+.segmentSelected,
+.segmentSelected:hover,
+.segmentEditorPanel .segmentationContainer .submenu li .segmentSelected,
+.segmentEditorPanel .segmentationContainer .submenu li:focus,
+.segmentEditorPanel .segmentationContainer .submenu li:focus-within {
     font-weight: bold;
 }