MDL-69466 Autocomplete widget: Improve keyboard accessibility

lib/amd/src/form-autocomplete.js

@@ -36,7 +36,9 @@ function($, log, str, templates, notification, LoadingIcon, Aria) {
         SPACE: 32,
         ESCAPE: 27,
         COMMA: 44,
-        UP: 38
+        UP: 38,
+        LEFT: 37,
+        RIGHT: 39
     };
 
     var uniqueId = Date.now();
@@ -806,10 +808,24 @@ function($, log, str, templates, notification, LoadingIcon, Aria) {
             // Remove it from the selection.
             pendingPromise.resolve(deselectItem(options, state, $(e.currentTarget), originalSelect));
         });
+        // Remove the highlight of items when user tabs out the tag list.
+        selectionElement.on('blur', function(e) {
+            e.preventDefault();
+            $(this).children().attr('data-active-selection', false).attr('id', '');
+        });
+        // When tag list is focused, highlight the first item.
+        selectionElement.on('focus', function(e) {
+            e.preventDefault();
+            var element = $(this).children('[data-active-selection=true]');
+            if (element && element.length === 0) {
+                activateNextSelection(state);
+            }
+        });
         // Keyboard navigation for the selection list.
         selectionElement.on('keydown', function(e) {
             var pendingPromise = addPendingJSPromise('form-autocomplete-keydown-' + e.keyCode);
             switch (e.keyCode) {
+                case KEYS.RIGHT:
                 case KEYS.DOWN:
                     // We handled this event, so prevent it.
                     e.preventDefault();
@@ -817,6 +833,7 @@ function($, log, str, templates, notification, LoadingIcon, Aria) {
                     // Choose the next selection item.
                     pendingPromise.resolve(activateNextSelection(state));
                     return false;
+                case KEYS.LEFT:
                 case KEYS.UP:
                     // We handled this event, so prevent it.
                     e.preventDefault();

theme/boost/scss/moodle/forms.scss

@@ -333,7 +333,8 @@ fieldset.coursesearchbox label {
 }
 
 .form-autocomplete-selection:focus {
-    outline: none;
+    outline: 0;
+    box-shadow: $input-btn-focus-box-shadow;
 }
 /** Undo some bootstrap things */
 .form-autocomplete-selection + input.form-control {

theme/boost/style/moodle.css

@@ -16518,7 +16518,8 @@ fieldset.coursesearchbox label {
     background-color: #fff; }
 
 .form-autocomplete-selection:focus {
-  outline: none; }
+  outline: 0;
+  box-shadow: 0 0 0 0.2rem rgba(17, 119, 209, 0.75); }
 
 /** Undo some bootstrap things */
 .form-autocomplete-selection + input.form-control {

theme/classic/style/moodle.css

@@ -16744,7 +16744,8 @@ fieldset.coursesearchbox label {
     background-color: #fff; }
 
 .form-autocomplete-selection:focus {
-  outline: none; }
+  outline: 0;
+  box-shadow: 0 0 0 0.2rem rgba(17, 119, 209, 0.75); }
 
 /** Undo some bootstrap things */
 .form-autocomplete-selection + input.form-control {