From e6b274a5424e4d9b7f32ffd167e882a262f79542 Mon Sep 17 00:00:00 2001
From: Bas Brands <bas@moodle.com>
Date: Thu, 1 Oct 2020 13:37:47 +0200
Subject: [PATCH] MDL-69390 theme_boost: dropdown menu accessibility

- display a dot before the active element
- use the active colour for the hover colour
---
 .../templates/nav-display-selector.mustache   |  4 +-
 .../templates/nav-grouping-selector.mustache  | 20 +++---
 .../templates/nav-sort-selector.mustache      |  8 +--
 blocks/timeline/amd/build/view_nav.min.js     |  2 +-
 blocks/timeline/amd/build/view_nav.min.js.map |  2 +-
 blocks/timeline/amd/src/view_nav.js           |  6 +-
 .../templates/nav-day-filter.mustache         | 24 ++++----
 .../templates/nav-view-selector.mustache      |  8 +--
 .../paged_content_paging_bar.mustache         |  1 +
 theme/boost/scss/moodle/core.scss             | 49 ++++++++-------
 theme/boost/scss/moodle/forms.scss            | 24 +++-----
 theme/boost/scss/preset/default.scss          |  3 +
 theme/boost/style/moodle.css                  | 61 +++++++++----------
 theme/classic/scss/preset/default.scss        |  3 +
 theme/classic/style/moodle.css                | 61 +++++++++----------
 15 files changed, 140 insertions(+), 136 deletions(-)

diff --git a/blocks/myoverview/templates/nav-display-selector.mustache b/blocks/myoverview/templates/nav-display-selector.mustache
index 8a1cb325a30..8c5cc4c46c0 100644
--- a/blocks/myoverview/templates/nav-display-selector.mustache
+++ b/blocks/myoverview/templates/nav-display-selector.mustache
@@ -36,10 +36,10 @@
             {{#summary}}{{#str}} summary, block_myoverview {{/str}}{{/summary}}
         </span>
     </button>
-    <ul class="dropdown-menu" data-show-active-item aria-labelledby="displaydropdown">
+    <ul class="dropdown-menu" role="menu" data-show-active-item data-skip-active-class="true" aria-labelledby="displaydropdown">
     {{#layouts}}
             <li>
-                <a class="dropdown-item {{#active}}active{{/active}}" href="#" data-display-option="display" data-value="{{id}}" data-pref="{{id}}" aria-label="{{arialabel}}" aria-controls="courses-view-{{uniqid}}">
+                <a class="dropdown-item" href="#" data-display-option="display" data-value="{{id}}" data-pref="{{id}}" aria-label="{{arialabel}}" aria-controls="courses-view-{{uniqid}}" role="menuitem" {{#active}}aria-current="true"{{/active}}>
                     {{name}}
                 </a>
             </li>
diff --git a/blocks/myoverview/templates/nav-grouping-selector.mustache b/blocks/myoverview/templates/nav-grouping-selector.mustache
index ed38dc99773..c7ce41b53b6 100644
--- a/blocks/myoverview/templates/nav-grouping-selector.mustache
+++ b/blocks/myoverview/templates/nav-grouping-selector.mustache
@@ -53,10 +53,10 @@
             {{selectedcustomfield}}
         </span>
     </button>
-    <ul class="dropdown-menu" data-show-active-item data-active-item-text aria-labelledby="groupingdropdown">
+    <ul class="dropdown-menu" role="menu" data-show-active-item data-skip-active-class="true" data-active-item-text aria-labelledby="groupingdropdown">
         {{#displaygroupingallincludinghidden}}
         <li>
-            <a class="dropdown-item {{#allincludinghidden}}active{{/allincludinghidden}}" href="#" data-filter="grouping" data-value="allincludinghidden" data-pref="allincludinghidden" aria-label="{{#str}} aria:allcoursesincludinghidden, block_myoverview {{/str}}" aria-controls="courses-view-{{uniqid}}">
+            <a class="dropdown-item" href="#" data-filter="grouping" data-value="allincludinghidden" data-pref="allincludinghidden" aria-label="{{#str}} aria:allcoursesincludinghidden, block_myoverview {{/str}}" aria-controls="courses-view-{{uniqid}}" role="menuitem" {{#allincludinghidden}}aria-current="true"{{/allincludinghidden}}>
                 {{#str}} allincludinghidden, block_myoverview {{/str}}
             </a>
         </li>
@@ -66,7 +66,7 @@
             <span class="filler">&nbsp;</span>
         </li>
         <li>
-            <a class="dropdown-item {{#all}}active{{/all}}" href="#" data-filter="grouping" data-value="all" data-pref="all" aria-label="{{#str}} aria:allcourses, block_myoverview {{/str}}" aria-controls="courses-view-{{uniqid}}">
+            <a class="dropdown-item" href="#" data-filter="grouping" data-value="all" data-pref="all" aria-label="{{#str}} aria:allcourses, block_myoverview {{/str}}" aria-controls="courses-view-{{uniqid}}" role="menuitem" {{#all}}aria-current="true"{{/all}}>
                 {{#str}} all, block_myoverview {{/str}}
             </a>
         </li>
@@ -76,7 +76,7 @@
             <span class="filler">&nbsp;</span>
         </li>
         <li>
-            <a class="dropdown-item {{#inprogress}}active{{/inprogress}}" href="#" data-filter="grouping" data-value="inprogress" data-pref="inprogress" aria-label="{{#str}} aria:inprogress, block_myoverview {{/str}}" aria-controls="courses-view-{{uniqid}}">
+            <a class="dropdown-item" href="#" data-filter="grouping" data-value="inprogress" data-pref="inprogress" aria-label="{{#str}} aria:inprogress, block_myoverview {{/str}}" aria-controls="courses-view-{{uniqid}}" role="menuitem" {{#inprogress}}aria-current="true"{{/inprogress}}>
                 {{#str}} inprogress, block_myoverview {{/str}}
             </a>
         </li>
@@ -88,7 +88,7 @@
             </li>
             {{/displaygroupinginprogress}}
         <li>
-            <a class="dropdown-item {{#future}}active{{/future}}" href="#" data-filter="grouping" data-value="future" data-pref="future" aria-label="{{#str}} aria:future, block_myoverview {{/str}}" aria-controls="courses-view-{{uniqid}}">
+            <a class="dropdown-item" href="#" data-filter="grouping" data-value="future" data-pref="future" aria-label="{{#str}} aria:future, block_myoverview {{/str}}" aria-controls="courses-view-{{uniqid}}" role="menuitem" {{#future}}aria-current="true"{{/future}}>
                 {{#str}} future, block_myoverview {{/str}}
             </a>
         </li>
@@ -102,7 +102,7 @@
                 {{/displaygroupingfuture}}
             {{/displaygroupinginprogress}}
         <li>
-            <a class="dropdown-item {{#past}}active{{/past}}" href="#" data-filter="grouping" data-value="past" data-pref="past" aria-label="{{#str}} aria:past, block_myoverview {{/str}}" aria-controls="courses-view-{{uniqid}}">
+            <a class="dropdown-item" href="#" data-filter="grouping" data-value="past" data-pref="past" aria-label="{{#str}} aria:past, block_myoverview {{/str}}" aria-controls="courses-view-{{uniqid}}" role="menuitem" {{#past}}aria-current="true"{{/past}}>
                 {{#str}} past, block_myoverview {{/str}}
             </a>
         </li>
@@ -113,10 +113,10 @@
             </li>
             {{#customfieldvalues}}
                 <li>
-                    <a class="dropdown-item {{#active}}active{{/active}}" href="#" data-filter="grouping"
+                    <a class="dropdown-item" href="#" data-filter="grouping"
                        data-value="customfield" data-pref="customfield" data-customfieldvalue="{{value}}"
                        aria-label="{{#str}}aria:customfield, block_myoverview, {{name}}{{/str}}"
-                       aria-controls="courses-view-{{uniqid}}">
+                       aria-controls="courses-view-{{uniqid}}" role="menuitem" {{#active}}aria-current="true"{{/active}}>
                         {{name}}
                     </a>
                 </li>
@@ -127,7 +127,7 @@
             <span class="filler">&nbsp;</span>
         </li>
         <li>
-            <a class="dropdown-item {{#favourites}}active{{/favourites}}" href="#" data-filter="grouping" data-value="favourites"  data-pref="favourites" aria-label="{{#str}} aria:favourites, block_myoverview {{/str}}" aria-controls="courses-view-{{uniqid}}">
+            <a class="dropdown-item" href="#" data-filter="grouping" data-value="favourites"  data-pref="favourites" aria-label="{{#str}} aria:favourites, block_myoverview {{/str}}" aria-controls="courses-view-{{uniqid}}" role="menuitem" {{#favourites}}aria-current="true"{{/favourites}}>
                 {{#str}} favourites, block_myoverview {{/str}}
             </a>
         {{/displaygroupingfavourites}}
@@ -136,7 +136,7 @@
             <span class="filler">&nbsp;</span>
         </li>
         <li>
-            <a class="dropdown-item {{#hidden}}active{{/hidden}}" href="#" data-filter="grouping" data-value="hidden"  data-pref="hidden" aria-label="{{#str}} aria:hiddencourses, block_myoverview {{/str}}" aria-controls="courses-view-{{uniqid}}">
+            <a class="dropdown-item" href="#" data-filter="grouping" data-value="hidden"  data-pref="hidden" aria-label="{{#str}} aria:hiddencourses, block_myoverview {{/str}}" aria-controls="courses-view-{{uniqid}}" role="menuitem" {{#hidden}}aria-current="true"{{/hidden}}>
                 {{#str}} hiddencourses, block_myoverview {{/str}}
             </a>
         </li>
diff --git a/blocks/myoverview/templates/nav-sort-selector.mustache b/blocks/myoverview/templates/nav-sort-selector.mustache
index 55a425dddc6..4dde517c2d8 100644
--- a/blocks/myoverview/templates/nav-sort-selector.mustache
+++ b/blocks/myoverview/templates/nav-sort-selector.mustache
@@ -36,21 +36,21 @@
                 {{#shortname}}{{#str}} shortname, block_myoverview {{/str}}{{/shortname}}
             </span>
         </button>
-        <ul class="dropdown-menu" data-show-active-item aria-labelledby="sortingdropdown">
+        <ul class="dropdown-menu" role="menu" data-show-active-item data-skip-active-class="true" aria-labelledby="sortingdropdown">
             <li>
-                <a class="dropdown-item {{#title}}active{{/title}}" href="#" data-filter="sort" data-pref="title" data-value="fullname" aria-label="{{#str}} aria:title, block_myoverview {{/str}}" aria-controls="courses-view-{{uniqid}}">
+                <a class="dropdown-item" href="#" data-filter="sort" data-pref="title" data-value="fullname" aria-label="{{#str}} aria:title, block_myoverview {{/str}}" aria-controls="courses-view-{{uniqid}}" role="menuitem" {{#title}}aria-current="true"{{/title}}>
                     {{#str}} title, block_myoverview {{/str}}
                 </a>
             </li>
             {{#showsortbyshortname}}
             <li>
-                <a class="dropdown-item {{#shortname}}active{{/shortname}}" href="#" data-filter="sort" data-pref="shortname" data-value="shortname" aria-label="{{#str}} aria:shortname, block_myoverview {{/str}}" aria-controls="courses-view-{{uniqid}}">
+                <a class="dropdown-item" href="#" data-filter="sort" data-pref="shortname" data-value="shortname" aria-label="{{#str}} aria:shortname, block_myoverview {{/str}}" aria-controls="courses-view-{{uniqid}}" role="menuitem" {{#shortname}}aria-current="true"{{/shortname}}>
                     {{#str}} shortname, block_myoverview {{/str}}
                 </a>
             </li>
              {{/showsortbyshortname}}
             <li>
-                <a class="dropdown-item {{#lastaccessed}}active{{/lastaccessed}}" href="#" data-filter="sort" data-pref="lastaccessed" data-value="ul.timeaccess desc" aria-label="{{#str}} aria:lastaccessed, block_myoverview {{/str}}" aria-controls="courses-view-{{uniqid}}">
+                <a class="dropdown-item" href="#" data-filter="sort" data-pref="lastaccessed" data-value="ul.timeaccess desc" aria-label="{{#str}} aria:lastaccessed, block_myoverview {{/str}}" aria-controls="courses-view-{{uniqid}}" role="menuitem" {{#lastaccessed}}aria-current="true"{{/lastaccessed}}>
                     {{#str}} lastaccessed, block_myoverview {{/str}}
                 </a>
             </li>
diff --git a/blocks/timeline/amd/build/view_nav.min.js b/blocks/timeline/amd/build/view_nav.min.js
index cb794f92eb1..0ed7161ac8c 100644
--- a/blocks/timeline/amd/build/view_nav.min.js
+++ b/blocks/timeline/amd/build/view_nav.min.js
@@ -1,2 +1,2 @@
-define ("block_timeline/view_nav",["jquery","core/custom_interaction_events","block_timeline/view","core/ajax","core/notification"],function(a,b,c,d,e){var f={TIMELINE_DAY_FILTER:"[data-region=\"day-filter\"]",TIMELINE_DAY_FILTER_OPTION:"[data-from]",TIMELINE_VIEW_SELECTOR:"[data-region=\"view-selector\"]",DATA_DAYS_OFFSET:"[data-days-offset]",DATA_DAYS_LIMIT:"[data-days-limit]"},g=function(a,b){d.call([{methodname:"core_user_update_user_preferences",args:{preferences:[{type:a,value:b}]}}])[0].fail(e.exception)},h=function(d,h){var i=d.find(f.TIMELINE_DAY_FILTER);b.define(i,[b.events.activate]);i.on(b.events.activate,f.TIMELINE_DAY_FILTER_OPTION,function(b,e){var i=a(b.currentTarget).data("filtername");g("block_timeline_user_filter_preference",i);var j=a(b.target).closest(f.TIMELINE_DAY_FILTER_OPTION);if(j.hasClass("active")){return}var k=j.attr("data-from"),l=j.attr("data-to"),m=d.find(f.DATA_DAYS_OFFSET);m.attr("data-days-offset",k);if(l!=void 0){m.attr("data-days-limit",l)}else{m.removeAttr("data-days-limit")}c.reset(h);e.originalEvent.preventDefault()})},i=function(d,e){var h=d.find(f.TIMELINE_VIEW_SELECTOR);h.on("shown shown.bs.tab",function(){c.shown(e)});b.define(h,[b.events.activate]);h.on(b.events.activate,"[data-toggle='tab']",function(b){var c=a(b.currentTarget).data("filtername");g("block_timeline_user_sort_preference",c)})};return{init:function init(b,c){b=a(b);h(b,c);i(b,c)}}});
+define ("block_timeline/view_nav",["jquery","core/custom_interaction_events","block_timeline/view","core/ajax","core/notification"],function(a,b,c,d,e){var f={TIMELINE_DAY_FILTER:"[data-region=\"day-filter\"]",TIMELINE_DAY_FILTER_OPTION:"[data-from]",TIMELINE_VIEW_SELECTOR:"[data-region=\"view-selector\"]",DATA_DAYS_OFFSET:"[data-days-offset]",DATA_DAYS_LIMIT:"[data-days-limit]"},g=function(a,b){d.call([{methodname:"core_user_update_user_preferences",args:{preferences:[{type:a,value:b}]}}])[0].fail(e.exception)},h=function(d,h){var i=d.find(f.TIMELINE_DAY_FILTER);b.define(i,[b.events.activate]);i.on(b.events.activate,f.TIMELINE_DAY_FILTER_OPTION,function(b,e){var i=a(b.currentTarget).data("filtername");g("block_timeline_user_filter_preference",i);var j=a(b.target).closest(f.TIMELINE_DAY_FILTER_OPTION);if("true"==j.attr("aria-current")){return}var k=j.attr("data-from"),l=j.attr("data-to"),m=d.find(f.DATA_DAYS_OFFSET);m.attr("data-days-offset",k);if(l!=void 0){m.attr("data-days-limit",l)}else{m.removeAttr("data-days-limit")}c.reset(h);e.originalEvent.preventDefault()})},i=function(d,h){var i=d.find(f.TIMELINE_VIEW_SELECTOR);i.on("shown shown.bs.tab",function(b){c.shown(h);a(b.target).removeClass("active")});b.define(i,[b.events.activate]);i.on(b.events.activate,"[data-toggle='tab']",function(b){var c=a(b.currentTarget).data("filtername");g("block_timeline_user_sort_preference",c)})};return{init:function init(b,c){b=a(b);h(b,c);i(b,c)}}});
 //# sourceMappingURL=view_nav.min.js.map
diff --git a/blocks/timeline/amd/build/view_nav.min.js.map b/blocks/timeline/amd/build/view_nav.min.js.map
index 1e2b36fb0fd..2b6c8424f93 100644
--- a/blocks/timeline/amd/build/view_nav.min.js.map
+++ b/blocks/timeline/amd/build/view_nav.min.js.map
@@ -1 +1 @@
-{"version":3,"sources":["../src/view_nav.js"],"names":["define","$","CustomEvents","View","Ajax","Notification","SELECTORS","TIMELINE_DAY_FILTER","TIMELINE_DAY_FILTER_OPTION","TIMELINE_VIEW_SELECTOR","DATA_DAYS_OFFSET","DATA_DAYS_LIMIT","updateUserPreferences","type","value","call","methodname","args","preferences","fail","exception","registerTimelineDaySelector","root","timelineViewRoot","timelineDaySelectorContainer","find","events","activate","on","e","data","filtername","currentTarget","option","target","closest","hasClass","daysOffset","attr","daysLimit","elementsWithDaysOffset","removeAttr","reset","originalEvent","preventDefault","registerViewSelector","viewSelector","shown","init"],"mappings":"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","sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.\n\n/**\n * Manage the timeline view navigation for the timeline block.\n *\n * @package    block_timeline\n * @copyright  2018 Ryan Wyllie <ryan@moodle.com>\n * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\ndefine(\n[\n    'jquery',\n    'core/custom_interaction_events',\n    'block_timeline/view',\n    'core/ajax',\n    'core/notification'\n],\nfunction(\n    $,\n    CustomEvents,\n    View,\n    Ajax,\n    Notification\n) {\n\n    var SELECTORS = {\n        TIMELINE_DAY_FILTER: '[data-region=\"day-filter\"]',\n        TIMELINE_DAY_FILTER_OPTION: '[data-from]',\n        TIMELINE_VIEW_SELECTOR: '[data-region=\"view-selector\"]',\n        DATA_DAYS_OFFSET: '[data-days-offset]',\n        DATA_DAYS_LIMIT: '[data-days-limit]',\n    };\n\n    /**\n     * Generic handler to persist user preferences\n     *\n     * @param {string} type The name of the attribute you're updating\n     * @param {string} value The value of the attribute you're updating\n     */\n    var updateUserPreferences = function(type, value) {\n        var request = {\n            methodname: 'core_user_update_user_preferences',\n            args: {\n                preferences: [\n                    {\n                        type: type,\n                        value: value\n                    }\n                ]\n            }\n        };\n\n        Ajax.call([request])[0]\n            .fail(Notification.exception);\n    };\n\n    /**\n     * Event listener for the day selector (\"Next 7 days\", \"Next 30 days\", etc).\n     *\n     * @param {object} root The root element for the timeline block\n     * @param {object} timelineViewRoot The root element for the timeline view\n     */\n    var registerTimelineDaySelector = function(root, timelineViewRoot) {\n        var timelineDaySelectorContainer = root.find(SELECTORS.TIMELINE_DAY_FILTER);\n\n        CustomEvents.define(timelineDaySelectorContainer, [CustomEvents.events.activate]);\n        timelineDaySelectorContainer.on(\n            CustomEvents.events.activate,\n            SELECTORS.TIMELINE_DAY_FILTER_OPTION,\n            function(e, data) {\n                // Update the user preference\n                var filtername = $(e.currentTarget).data('filtername');\n                var type = 'block_timeline_user_filter_preference';\n                updateUserPreferences(type, filtername);\n\n                var option = $(e.target).closest(SELECTORS.TIMELINE_DAY_FILTER_OPTION);\n\n                if (option.hasClass('active')) {\n                    // If it's already active then we don't need to do anything.\n                    return;\n                }\n\n                var daysOffset = option.attr('data-from');\n                var daysLimit = option.attr('data-to');\n                var elementsWithDaysOffset = root.find(SELECTORS.DATA_DAYS_OFFSET);\n\n                elementsWithDaysOffset.attr('data-days-offset', daysOffset);\n\n                if (daysLimit != undefined) {\n                    elementsWithDaysOffset.attr('data-days-limit', daysLimit);\n                } else {\n                    elementsWithDaysOffset.removeAttr('data-days-limit');\n                }\n\n                // Reset the views to reinitialise the event lists now that we've\n                // updated the day limits.\n                View.reset(timelineViewRoot);\n\n                data.originalEvent.preventDefault();\n            }\n        );\n    };\n\n    /**\n     * Event listener for the \"sort\" button in the timeline navigation that allows for\n     * changing between the timeline dates and courses views.\n     *\n     * On a view change we tell the timeline view module that the view has been shown\n     * so that it can handle how to display the appropriate view.\n     *\n     * @param {object} root The root element for the timeline block\n     * @param {object} timelineViewRoot The root element for the timeline view\n     */\n    var registerViewSelector = function(root, timelineViewRoot) {\n        var viewSelector = root.find(SELECTORS.TIMELINE_VIEW_SELECTOR);\n\n        // Listen for when the user changes tab so that we can show the first set of courses\n        // and load their events when they request the sort by courses view for the first time.\n        viewSelector.on('shown shown.bs.tab', function() {\n            View.shown(timelineViewRoot);\n        });\n\n        // Event selector for user_sort\n        CustomEvents.define(viewSelector, [CustomEvents.events.activate]);\n        viewSelector.on(CustomEvents.events.activate, \"[data-toggle='tab']\", function(e) {\n            var filtername = $(e.currentTarget).data('filtername');\n            var type = 'block_timeline_user_sort_preference';\n            updateUserPreferences(type, filtername);\n        });\n    };\n\n    /**\n     * Initialise the timeline view navigation by adding event listeners to\n     * the navigation elements.\n     *\n     * @param {object} root The root element for the timeline block\n     * @param {object} timelineViewRoot The root element for the timeline view\n     */\n    var init = function(root, timelineViewRoot) {\n        root = $(root);\n        registerTimelineDaySelector(root, timelineViewRoot);\n        registerViewSelector(root, timelineViewRoot);\n    };\n\n    return {\n        init: init\n    };\n});\n"],"file":"view_nav.min.js"}
\ No newline at end of file
+{"version":3,"sources":["../src/view_nav.js"],"names":["define","$","CustomEvents","View","Ajax","Notification","SELECTORS","TIMELINE_DAY_FILTER","TIMELINE_DAY_FILTER_OPTION","TIMELINE_VIEW_SELECTOR","DATA_DAYS_OFFSET","DATA_DAYS_LIMIT","updateUserPreferences","type","value","call","methodname","args","preferences","fail","exception","registerTimelineDaySelector","root","timelineViewRoot","timelineDaySelectorContainer","find","events","activate","on","e","data","filtername","currentTarget","option","target","closest","attr","daysOffset","daysLimit","elementsWithDaysOffset","removeAttr","reset","originalEvent","preventDefault","registerViewSelector","viewSelector","shown","removeClass","init"],"mappings":"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","sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.\n\n/**\n * Manage the timeline view navigation for the timeline block.\n *\n * @package    block_timeline\n * @copyright  2018 Ryan Wyllie <ryan@moodle.com>\n * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\ndefine(\n[\n    'jquery',\n    'core/custom_interaction_events',\n    'block_timeline/view',\n    'core/ajax',\n    'core/notification'\n],\nfunction(\n    $,\n    CustomEvents,\n    View,\n    Ajax,\n    Notification\n) {\n\n    var SELECTORS = {\n        TIMELINE_DAY_FILTER: '[data-region=\"day-filter\"]',\n        TIMELINE_DAY_FILTER_OPTION: '[data-from]',\n        TIMELINE_VIEW_SELECTOR: '[data-region=\"view-selector\"]',\n        DATA_DAYS_OFFSET: '[data-days-offset]',\n        DATA_DAYS_LIMIT: '[data-days-limit]',\n    };\n\n    /**\n     * Generic handler to persist user preferences\n     *\n     * @param {string} type The name of the attribute you're updating\n     * @param {string} value The value of the attribute you're updating\n     */\n    var updateUserPreferences = function(type, value) {\n        var request = {\n            methodname: 'core_user_update_user_preferences',\n            args: {\n                preferences: [\n                    {\n                        type: type,\n                        value: value\n                    }\n                ]\n            }\n        };\n\n        Ajax.call([request])[0]\n            .fail(Notification.exception);\n    };\n\n    /**\n     * Event listener for the day selector (\"Next 7 days\", \"Next 30 days\", etc).\n     *\n     * @param {object} root The root element for the timeline block\n     * @param {object} timelineViewRoot The root element for the timeline view\n     */\n    var registerTimelineDaySelector = function(root, timelineViewRoot) {\n        var timelineDaySelectorContainer = root.find(SELECTORS.TIMELINE_DAY_FILTER);\n\n        CustomEvents.define(timelineDaySelectorContainer, [CustomEvents.events.activate]);\n        timelineDaySelectorContainer.on(\n            CustomEvents.events.activate,\n            SELECTORS.TIMELINE_DAY_FILTER_OPTION,\n            function(e, data) {\n                // Update the user preference\n                var filtername = $(e.currentTarget).data('filtername');\n                var type = 'block_timeline_user_filter_preference';\n                updateUserPreferences(type, filtername);\n\n                var option = $(e.target).closest(SELECTORS.TIMELINE_DAY_FILTER_OPTION);\n\n                if (option.attr('aria-current') == 'true') {\n                    // If it's already active then we don't need to do anything.\n                    return;\n                }\n\n                var daysOffset = option.attr('data-from');\n                var daysLimit = option.attr('data-to');\n                var elementsWithDaysOffset = root.find(SELECTORS.DATA_DAYS_OFFSET);\n\n                elementsWithDaysOffset.attr('data-days-offset', daysOffset);\n\n                if (daysLimit != undefined) {\n                    elementsWithDaysOffset.attr('data-days-limit', daysLimit);\n                } else {\n                    elementsWithDaysOffset.removeAttr('data-days-limit');\n                }\n\n                // Reset the views to reinitialise the event lists now that we've\n                // updated the day limits.\n                View.reset(timelineViewRoot);\n\n                data.originalEvent.preventDefault();\n            }\n        );\n    };\n\n    /**\n     * Event listener for the \"sort\" button in the timeline navigation that allows for\n     * changing between the timeline dates and courses views.\n     *\n     * On a view change we tell the timeline view module that the view has been shown\n     * so that it can handle how to display the appropriate view.\n     *\n     * @param {object} root The root element for the timeline block\n     * @param {object} timelineViewRoot The root element for the timeline view\n     */\n    var registerViewSelector = function(root, timelineViewRoot) {\n        var viewSelector = root.find(SELECTORS.TIMELINE_VIEW_SELECTOR);\n\n        // Listen for when the user changes tab so that we can show the first set of courses\n        // and load their events when they request the sort by courses view for the first time.\n        viewSelector.on('shown shown.bs.tab', function(e) {\n            View.shown(timelineViewRoot);\n            $(e.target).removeClass('active');\n        });\n\n\n        // Event selector for user_sort\n        CustomEvents.define(viewSelector, [CustomEvents.events.activate]);\n        viewSelector.on(CustomEvents.events.activate, \"[data-toggle='tab']\", function(e) {\n            var filtername = $(e.currentTarget).data('filtername');\n            var type = 'block_timeline_user_sort_preference';\n            updateUserPreferences(type, filtername);\n        });\n    };\n\n    /**\n     * Initialise the timeline view navigation by adding event listeners to\n     * the navigation elements.\n     *\n     * @param {object} root The root element for the timeline block\n     * @param {object} timelineViewRoot The root element for the timeline view\n     */\n    var init = function(root, timelineViewRoot) {\n        root = $(root);\n        registerTimelineDaySelector(root, timelineViewRoot);\n        registerViewSelector(root, timelineViewRoot);\n    };\n\n    return {\n        init: init\n    };\n});\n"],"file":"view_nav.min.js"}
\ No newline at end of file
diff --git a/blocks/timeline/amd/src/view_nav.js b/blocks/timeline/amd/src/view_nav.js
index 6fd32a6f7e4..596c75b669e 100644
--- a/blocks/timeline/amd/src/view_nav.js
+++ b/blocks/timeline/amd/src/view_nav.js
@@ -89,7 +89,7 @@ function(
 
                 var option = $(e.target).closest(SELECTORS.TIMELINE_DAY_FILTER_OPTION);
 
-                if (option.hasClass('active')) {
+                if (option.attr('aria-current') == 'true') {
                     // If it's already active then we don't need to do anything.
                     return;
                 }
@@ -130,10 +130,12 @@ function(
 
         // Listen for when the user changes tab so that we can show the first set of courses
         // and load their events when they request the sort by courses view for the first time.
-        viewSelector.on('shown shown.bs.tab', function() {
+        viewSelector.on('shown shown.bs.tab', function(e) {
             View.shown(timelineViewRoot);
+            $(e.target).removeClass('active');
         });
 
+
         // Event selector for user_sort
         CustomEvents.define(viewSelector, [CustomEvents.events.activate]);
         viewSelector.on(CustomEvents.events.activate, "[data-toggle='tab']", function(e) {
diff --git a/blocks/timeline/templates/nav-day-filter.mustache b/blocks/timeline/templates/nav-day-filter.mustache
index 52d92a6854b..980afd541dc 100644
--- a/blocks/timeline/templates/nav-day-filter.mustache
+++ b/blocks/timeline/templates/nav-day-filter.mustache
@@ -35,65 +35,65 @@
             {{#next6months}} {{#str}}next6months, block_timeline {{/str}} {{/next6months}}
         </span>
     </button>
-    <div id="menudayfilter" role="menu" class="dropdown-menu" data-show-active-item>
+    <div id="menudayfilter" role="menu" class="dropdown-menu" data-show-active-item data-skip-active-class="true">
         <a
-            class="dropdown-item {{#all}} active {{/all}}"
+            class="dropdown-item"
             href="#"
             data-from="-14"
             data-filtername="all"
+            {{#all}}aria-current="true"{{/all}}
             aria-label="{{#str}} ariadayfilteroption, block_timeline, {{#str}} all, core {{/str}}{{/str}}"
             role="menuitem"
-            {{#all}}aria-current="true"{{/all}}
         >
             {{#str}} all, core {{/str}}
         </a>
         <a
-            class="dropdown-item {{#overdue}} active {{/overdue}}"
+            class="dropdown-item"
             href="#"
             data-from="-14"
             data-to="0"
             data-filtername="overdue"
+            {{#overdue}}aria-current="true"{{/overdue}}
             aria-label="{{#str}} ariadayfilteroption, block_timeline, {{#str}} overdue, block_timeline {{/str}}{{/str}}"
             role="menuitem"
-            {{#overdue}}aria-current="true"{{/overdue}}
         >
             {{#str}} overdue, block_timeline {{/str}}
         </a>
         <div class="dropdown-divider" role="separator"></div>
         <h6 class="dropdown-header">{{#str}} duedate, block_timeline {{/str}}</h6>
         <a
-            class="dropdown-item {{#next7days}} active {{/next7days}}"
+            class="dropdown-item"
             href="#"
             data-from="0"
             data-to="7"
             data-filtername="next7days"
+            {{#next7days}}aria-current="true"{{/next7days}}
             aria-label="{{#str}} ariadayfilteroption, block_timeline, {{#str}} next7days, block_timeline {{/str}}{{/str}}"
             role="menuitem"
-            {{#next7days}}aria-current="true"{{/next7days}}
         >
             {{#str}} next7days, block_timeline {{/str}}
         </a>
         <a
-            class="dropdown-item {{#next30days}} active {{/next30days}}"
+            class="dropdown-item"
             href="#"
             data-from="0"
             data-to="30"
             data-filtername="next30days"
+            {{#next30days}}aria-current="true"{{/next30days}}
             aria-label="{{#str}} ariadayfilteroption, block_timeline, {{#str}} next30days, block_timeline {{/str}}{{/str}}"
             role="menuitem"
-            {{#next30days}}aria-current="true"{{/next30days}}
         >
             {{#str}} next30days, block_timeline {{/str}}
         </a>
         <a
-            class="dropdown-item {{#next3months}} active {{/next3months}}"
+            class="dropdown-item"
             href="#"
             data-from="0"
             data-to="90"
             data-filtername="next3months"
+            {{#next3months}}aria-current="true"{{/next3months}}
             aria-label="{{#str}} ariadayfilteroption, block_timeline, {{#str}} next3months, block_timeline {{/str}}{{/str}}"
             role="menuitem"
-            {{#next3months}}aria-current="true"{{/next3months}}
         >
             {{#str}} next3months, block_timeline {{/str}}
         </a>
@@ -103,9 +103,9 @@
             data-from="0"
             data-to="180"
             data-filtername="next6months"
+            {{#next6months}}aria-current="true"{{/next6months}}
             aria-label="{{#str}} ariadayfilteroption, block_timeline, {{#str}} next6months, block_timeline {{/str}}{{/str}}"
             role="menuitem"
-            {{#next6months}}aria-current="true"{{/next6months}}
         >
             {{#str}} next6months, block_timeline {{/str}}
         </a>
diff --git a/blocks/timeline/templates/nav-view-selector.mustache b/blocks/timeline/templates/nav-view-selector.mustache
index 106bf7543e2..913f43c2dcd 100644
--- a/blocks/timeline/templates/nav-view-selector.mustache
+++ b/blocks/timeline/templates/nav-view-selector.mustache
@@ -33,24 +33,24 @@
     </button>
     <div id="menusortby" role="menu" class="dropdown-menu dropdown-menu-right list-group hidden" data-show-active-item data-skip-active-class="true">
         <a
-            class="dropdown-item {{#sorttimelinedates}}active{{/sorttimelinedates}}"
+            class="dropdown-item"
             href="#view_dates_{{uniqid}}"
             data-toggle="tab"
             data-filtername="sortbydates"
+            {{#sorttimelinedates}}aria-current="true"{{/sorttimelinedates}}
             aria-label="{{#str}} ariaviewselectoroption, block_timeline, {{#str}} sortbydates, block_timeline {{/str}}{{/str}}"
             role="menuitem"
-            {{#sorttimelinedates}}aria-current="true"{{/sorttimelinedates}}
         >
             {{#str}} sortbydates, block_timeline {{/str}}
         </a>
         <a
-            class="dropdown-item {{#sorttimelinecourses}}active{{/sorttimelinecourses}}"
+            class="dropdown-item"
             href="#view_courses_{{uniqid}}"
             data-toggle="tab"
             data-filtername="sortbycourses"
+            {{#sorttimelinecourses}}aria-current="true"{{/sorttimelinecourses}}
             aria-label="{{#str}} ariaviewselectoroption, block_timeline, {{#str}} sortbycourses, block_timeline {{/str}}{{/str}}"
             role="menuitem"
-            {{#sorttimelinecourses}}aria-current="true"{{/sorttimelinecourses}}
         >
             {{#str}} sortbycourses, block_timeline {{/str}}
         </a>
diff --git a/lib/templates/paged_content_paging_bar.mustache b/lib/templates/paged_content_paging_bar.mustache
index f8af3579499..f1b3e79d830 100644
--- a/lib/templates/paged_content_paging_bar.mustache
+++ b/lib/templates/paged_content_paging_bar.mustache
@@ -83,6 +83,7 @@
                     role="menu"
                     class="dropdown-menu"
                     data-show-active-item
+                    data-skip-active-class="true"
                     {{#arialabels.itemsperpagecomponents}}
                         data-active-item-button-aria-label-components="{{.}}"
                     {{/arialabels.itemsperpagecomponents}}
diff --git a/theme/boost/scss/moodle/core.scss b/theme/boost/scss/moodle/core.scss
index cfd13ee1399..d152382a556 100644
--- a/theme/boost/scss/moodle/core.scss
+++ b/theme/boost/scss/moodle/core.scss
@@ -164,7 +164,6 @@ input[type="radio"],
 input[type="file"],
 input[type="image"],
 .sr-only-focusable,
-a.dropdown-item,
 a.dropdown-toggle,
 .modal-dialog[tabindex="0"],
 .moodle-dialogue-base .closebutton,
@@ -190,19 +189,6 @@ button.close {
     }
 }
 
-.usermenu,
-div.dropdown-item {
-    a,
-    a[role="button"] {
-        outline: 0;
-        box-shadow: none;
-    }
-    &:focus-within {
-        outline: 0;
-        box-shadow: $input-btn-focus-box-shadow;
-    }
-}
-
 .unlist,
 .unlist li,
 .inline-list,
@@ -2327,13 +2313,34 @@ $footer-link-color: $bg-inverse-link-color !default;
 }
 
 // Make links in a menu clickable anywhere in the row.
-.dropdown-item a {
-    display: block;
-    width: 100%;
-    color: $body-color;
-}
-.dropdown-item:active a {
-    color: $dropdown-link-active-color;
+.dropdown-item {
+    a {
+        display: block;
+        width: 100%;
+        color: $body-color;
+    }
+    &:active,
+    &:hover,
+    &:focus,
+    &:focus-within {
+        outline: 0;
+        background-color: $dropdown-link-hover-bg;
+        a {
+            color: $dropdown-link-active-color;
+        }
+    }
+    &[aria-current="true"] {
+        position: relative;
+        display: flex;
+        align-items: center;
+        &:before {
+            @include fa-icon();
+            content: $fa-var-circle;
+            position: absolute;
+            left: 0.4rem;
+            font-size: 0.7rem;
+        }
+    }
 }
 
 .competency-tree {
diff --git a/theme/boost/scss/moodle/forms.scss b/theme/boost/scss/moodle/forms.scss
index 6c34dff0699..94c7dea8681 100644
--- a/theme/boost/scss/moodle/forms.scss
+++ b/theme/boost/scss/moodle/forms.scss
@@ -287,33 +287,27 @@ fieldset.coursesearchbox label {
 .form-autocomplete-suggestions {
     position: absolute;
     background-color: white;
-    border: 2px solid $gray-lighter;
-    border-radius: 3px;
+    border: $border-width solid $input-border-color;
     min-width: 206px;
     max-height: 20em;
     overflow: auto;
-    margin: 0;
     padding: 0;
-    margin-top: 0.4em;
+    margin: 2px 0 0 0;
     z-index: 1;
 }
 
 .form-autocomplete-suggestions li {
     list-style-type: none;
-    padding: 0.2em;
+    padding: $dropdown-item-padding-y $dropdown-item-padding-x;
     margin: 0;
     cursor: pointer;
     color: $body-color;
-}
-
-.form-autocomplete-suggestions li:hover {
-    background-color: lighten($dropdown-link-active-bg, 15%);
-    color: $dropdown-link-active-color;
-}
-
-.form-autocomplete-suggestions li[aria-selected=true] {
-    background-color: darken($dropdown-bg, 5%);
-    color: $gray;
+    &:hover,
+    &:focus,
+    &[aria-selected="true"] {
+        background-color: $dropdown-link-active-bg;
+        color: $dropdown-link-active-color;
+    }
 }
 
 .form-autocomplete-downarrow {
diff --git a/theme/boost/scss/preset/default.scss b/theme/boost/scss/preset/default.scss
index 743d067e116..b5284de0fe3 100644
--- a/theme/boost/scss/preset/default.scss
+++ b/theme/boost/scss/preset/default.scss
@@ -73,6 +73,9 @@ $input-btn-focus-color: rgba($primary, .75) !default;
 
 $input-border-color: $gray-500 !default;
 
+$dropdown-link-hover-color: $white;
+$dropdown-link-hover-bg: $primary;
+
 // stylelint-disable
 $theme-colors: () !default;
 $theme-colors: map-merge((
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index e559091ac8a..09c5ecc62aa 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -4775,9 +4775,9 @@ input[type="button"].btn-block {
   background-color: transparent;
   border: 0; }
   .dropdown-item:hover, .dropdown-item:focus {
-    color: #16181b;
+    color: #fff;
     text-decoration: none;
-    background-color: #f8f9fa; }
+    background-color: #0f6fc5; }
   .dropdown-item.active, .dropdown-item:active {
     color: #fff;
     text-decoration: none;
@@ -9776,8 +9776,6 @@ input[type="image"].focus,
 input[type="image"]:focus,
 .sr-only-focusable.focus,
 .sr-only-focusable:focus,
-a.dropdown-item.focus,
-a.dropdown-item:focus,
 a.dropdown-toggle.focus,
 a.dropdown-toggle:focus,
 .modal-dialog[tabindex="0"].focus,
@@ -9800,7 +9798,6 @@ input[type="radio"]:focus:hover,
 input[type="file"]:focus:hover,
 input[type="image"]:focus:hover,
 .sr-only-focusable:focus:hover,
-a.dropdown-item:focus:hover,
 a.dropdown-toggle:focus:hover,
 .modal-dialog[tabindex="0"]:focus:hover,
 .moodle-dialogue-base .closebutton:focus:hover,
@@ -9812,18 +9809,6 @@ button.close:focus:hover {
 .safari input[type="radio"]:focus {
   outline: auto; }
 
-.usermenu a,
-.usermenu a[role="button"],
-div.dropdown-item a,
-div.dropdown-item a[role="button"] {
-  outline: 0;
-  box-shadow: none; }
-
-.usermenu:focus-within,
-div.dropdown-item:focus-within {
-  outline: 0;
-  box-shadow: 0 0 0 0.2rem rgba(15, 111, 197, 0.75); }
-
 .unlist,
 .unlist li,
 .inline-list,
@@ -11518,8 +11503,27 @@ ul {
   width: 100%;
   color: #212529; }
 
-.dropdown-item:active a {
-  color: #fff; }
+.dropdown-item:active, .dropdown-item:hover, .dropdown-item:focus, .dropdown-item:focus-within {
+  outline: 0;
+  background-color: #0f6fc5; }
+  .dropdown-item:active a, .dropdown-item:hover a, .dropdown-item:focus a, .dropdown-item:focus-within a {
+    color: #fff; }
+
+.dropdown-item[aria-current="true"] {
+  position: relative;
+  display: flex;
+  align-items: center; }
+  .dropdown-item[aria-current="true"]:before {
+    display: inline-block;
+    font: normal normal normal 14px/1 FontAwesome;
+    font-size: inherit;
+    text-rendering: auto;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    content: "";
+    position: absolute;
+    left: 0.4rem;
+    font-size: 0.7rem; }
 
 .competency-tree ul {
   padding-left: 1.5rem; }
@@ -16458,30 +16462,23 @@ fieldset.coursesearchbox label {
 .form-autocomplete-suggestions {
   position: absolute;
   background-color: white;
-  border: 2px solid #dee2e6;
-  border-radius: 3px;
+  border: 1px solid #8f959e;
   min-width: 206px;
   max-height: 20em;
   overflow: auto;
-  margin: 0;
   padding: 0;
-  margin-top: 0.4em;
+  margin: 2px 0 0 0;
   z-index: 1; }
 
 .form-autocomplete-suggestions li {
   list-style-type: none;
-  padding: 0.2em;
+  padding: 0.25rem 1.5rem;
   margin: 0;
   cursor: pointer;
   color: #212529; }
-
-.form-autocomplete-suggestions li:hover {
-  background-color: #3195ef;
-  color: #fff; }
-
-.form-autocomplete-suggestions li[aria-selected=true] {
-  background-color: #f2f2f2;
-  color: #495057; }
+  .form-autocomplete-suggestions li:hover, .form-autocomplete-suggestions li:focus, .form-autocomplete-suggestions li[aria-selected="true"] {
+    background-color: #0f6fc5;
+    color: #fff; }
 
 .form-autocomplete-downarrow {
   color: #212529;
diff --git a/theme/classic/scss/preset/default.scss b/theme/classic/scss/preset/default.scss
index 86eaa2e31c9..6facd302da7 100644
--- a/theme/classic/scss/preset/default.scss
+++ b/theme/classic/scss/preset/default.scss
@@ -67,6 +67,9 @@ $input-btn-focus-color: rgba($primary, .75) !default;
 
 $input-border-color: $gray-500 !default;
 
+$dropdown-link-hover-color: $white;
+$dropdown-link-hover-bg: $primary;
+
 // stylelint-disable
 $theme-colors: () !default;
 $theme-colors: map-merge((
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index cf1144dd026..81b330c35a6 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -4782,9 +4782,9 @@ input[type="button"].btn-block {
   background-color: transparent;
   border: 0; }
   .dropdown-item:hover, .dropdown-item:focus {
-    color: #16181b;
+    color: #fff;
     text-decoration: none;
-    background-color: #f8f9fa; }
+    background-color: #0f6fc5; }
   .dropdown-item.active, .dropdown-item:active {
     color: #fff;
     text-decoration: none;
@@ -9981,8 +9981,6 @@ input[type="image"].focus,
 input[type="image"]:focus,
 .sr-only-focusable.focus,
 .sr-only-focusable:focus,
-a.dropdown-item.focus,
-a.dropdown-item:focus,
 a.dropdown-toggle.focus,
 a.dropdown-toggle:focus,
 .modal-dialog[tabindex="0"].focus,
@@ -10005,7 +10003,6 @@ input[type="radio"]:focus:hover,
 input[type="file"]:focus:hover,
 input[type="image"]:focus:hover,
 .sr-only-focusable:focus:hover,
-a.dropdown-item:focus:hover,
 a.dropdown-toggle:focus:hover,
 .modal-dialog[tabindex="0"]:focus:hover,
 .moodle-dialogue-base .closebutton:focus:hover,
@@ -10017,18 +10014,6 @@ button.close:focus:hover {
 .safari input[type="radio"]:focus {
   outline: auto; }
 
-.usermenu a,
-.usermenu a[role="button"],
-div.dropdown-item a,
-div.dropdown-item a[role="button"] {
-  outline: 0;
-  box-shadow: none; }
-
-.usermenu:focus-within,
-div.dropdown-item:focus-within {
-  outline: 0;
-  box-shadow: 0 0 0 0.2rem rgba(15, 111, 197, 0.75); }
-
 .unlist,
 .unlist li,
 .inline-list,
@@ -11729,8 +11714,27 @@ ul {
   width: 100%;
   color: #212529; }
 
-.dropdown-item:active a {
-  color: #fff; }
+.dropdown-item:active, .dropdown-item:hover, .dropdown-item:focus, .dropdown-item:focus-within {
+  outline: 0;
+  background-color: #0f6fc5; }
+  .dropdown-item:active a, .dropdown-item:hover a, .dropdown-item:focus a, .dropdown-item:focus-within a {
+    color: #fff; }
+
+.dropdown-item[aria-current="true"] {
+  position: relative;
+  display: flex;
+  align-items: center; }
+  .dropdown-item[aria-current="true"]:before {
+    display: inline-block;
+    font: normal normal normal 14px/1 FontAwesome;
+    font-size: inherit;
+    text-rendering: auto;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    content: "";
+    position: absolute;
+    left: 0.4rem;
+    font-size: 0.7rem; }
 
 .competency-tree ul {
   padding-left: 1.5rem; }
@@ -16685,30 +16689,23 @@ fieldset.coursesearchbox label {
 .form-autocomplete-suggestions {
   position: absolute;
   background-color: white;
-  border: 2px solid #dee2e6;
-  border-radius: 3px;
+  border: 1px solid #8f959e;
   min-width: 206px;
   max-height: 20em;
   overflow: auto;
-  margin: 0;
   padding: 0;
-  margin-top: 0.4em;
+  margin: 2px 0 0 0;
   z-index: 1; }
 
 .form-autocomplete-suggestions li {
   list-style-type: none;
-  padding: 0.2em;
+  padding: 0.25rem 1.5rem;
   margin: 0;
   cursor: pointer;
   color: #212529; }
-
-.form-autocomplete-suggestions li:hover {
-  background-color: #3195ef;
-  color: #fff; }
-
-.form-autocomplete-suggestions li[aria-selected=true] {
-  background-color: #f2f2f2;
-  color: #495057; }
+  .form-autocomplete-suggestions li:hover, .form-autocomplete-suggestions li:focus, .form-autocomplete-suggestions li[aria-selected="true"] {
+    background-color: #0f6fc5;
+    color: #fff; }
 
 .form-autocomplete-downarrow {
   color: #212529;