Merge branch 'MDL-69390-39' of git://github.com/bmbrands/moodle into MDL-69390-39-test

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>

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>

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>

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

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

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>

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>

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}}

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 {
+.dropdown-item {
+    a {
         display: block;
         width: 100%;
         color: $body-color;
-}
+    }
-.dropdown-item:active a {
+    &: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 {

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: $border-width solid $input-border-color;
-    border-radius: 3px;
     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;
-}
+    &:hover,
-
+    &:focus,
-.form-autocomplete-suggestions li:hover {
+    &[aria-selected="true"] {
-    background-color: lighten($dropdown-link-active-bg, 15%);
+        background-color: $dropdown-link-active-bg;
         color: $dropdown-link-active-color;
-}
+    }
-
-.form-autocomplete-suggestions li[aria-selected=true] {
-    background-color: darken($dropdown-bg, 5%);
-    color: $gray;
 }
 
 .form-autocomplete-downarrow {

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((

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,9 +11503,28 @@ ul {
   width: 100%;
   color: #212529; }
 
-.dropdown-item:active a {
+.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,31 +16462,24 @@ fieldset.coursesearchbox label {
 .form-autocomplete-suggestions {
   position: absolute;
   background-color: white;
-  border: 2px solid #dee2e6;
+  border: 1px solid #8f959e;
-  border-radius: 3px;
   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, .form-autocomplete-suggestions li:focus, .form-autocomplete-suggestions li[aria-selected="true"] {
-.form-autocomplete-suggestions li:hover {
+    background-color: #0f6fc5;
-  background-color: #3195ef;
     color: #fff; }
 
-.form-autocomplete-suggestions li[aria-selected=true] {
-  background-color: #f2f2f2;
-  color: #495057; }
-
 .form-autocomplete-downarrow {
   color: #212529;
   top: 0.2rem;

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((

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,9 +11714,28 @@ ul {
   width: 100%;
   color: #212529; }
 
-.dropdown-item:active a {
+.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,31 +16689,24 @@ fieldset.coursesearchbox label {
 .form-autocomplete-suggestions {
   position: absolute;
   background-color: white;
-  border: 2px solid #dee2e6;
+  border: 1px solid #8f959e;
-  border-radius: 3px;
   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, .form-autocomplete-suggestions li:focus, .form-autocomplete-suggestions li[aria-selected="true"] {
-.form-autocomplete-suggestions li:hover {
+    background-color: #0f6fc5;
-  background-color: #3195ef;
     color: #fff; }
 
-.form-autocomplete-suggestions li[aria-selected=true] {
-  background-color: #f2f2f2;
-  color: #495057; }
-
 .form-autocomplete-downarrow {
   color: #212529;
   top: 0.2rem;