MDL-68167 theme_boost: make focus outline accessible for autocompletes
authorShamim Rezaie <shamim@moodle.com>
Mon, 27 Jul 2020 06:26:11 +0000 (16:26 +1000)
committerShamim Rezaie <shamim@moodle.com>
Fri, 30 Oct 2020 03:52:52 +0000 (14:52 +1100)
mod/forum/tests/behat/advanced_search.feature
theme/boost/scss/moodle/core.scss
theme/boost/scss/moodle/forms.scss
theme/boost/style/moodle.css
theme/classic/style/moodle.css

index 95e2af4..3fe90ac 100644 (file)
@@ -131,6 +131,7 @@ Feature: The forum search allows users to perform advanced searches for forum po
     And I should see "Advanced search"
     And I set the field "Is tagged with" to "SearchedTag"
     And I click on "[data-value='SearchedTag']" "css_element"
+    And I press key "27" in the field "Is tagged with"
     When I press "Search forums"
     Then I should see "My subject"
     And I should not see "Your subjective"
index 5d9a952..bf6f07a 100644 (file)
@@ -169,7 +169,8 @@ input[type="image"],
 a.dropdown-toggle,
 .modal-dialog[tabindex="0"],
 .moodle-dialogue-base .closebutton,
-button.close {
+button.close,
+.form-autocomplete-selection {
     &.focus,
     &:focus {
         outline: 0;
@@ -180,6 +181,12 @@ button.close {
     }
 }
 
+// Accessible focus styling for autocomplete elements.
+.form-autocomplete-suggestions li[aria-selected=true] {
+    outline: 0;
+    box-shadow: $input-btn-focus-box-shadow;
+}
+
 // Safari does not allow custom styling of checkboxes.
 .safari {
     input[type="checkbox"],
index 5e915f7..186f3f4 100644 (file)
@@ -291,8 +291,8 @@ fieldset.coursesearchbox label {
     min-width: 206px;
     max-height: 20em;
     overflow: auto;
-    padding: 0;
-    margin: 2px 0 0 0;
+    margin: $dropdown-spacer 0 0;
+    padding: $dropdown-padding-y 0;
     z-index: 1;
 }
 
@@ -308,6 +308,9 @@ fieldset.coursesearchbox label {
         background-color: $dropdown-link-active-bg;
         color: $dropdown-link-active-color;
     }
+    &::before {
+        content: "\200B";
+    }
 }
 
 .form-autocomplete-downarrow {
@@ -323,10 +326,6 @@ fieldset.coursesearchbox label {
     }
 }
 
-.form-autocomplete-selection:focus {
-    outline: 0;
-    box-shadow: $input-btn-focus-box-shadow;
-}
 /** Undo some bootstrap things */
 .form-autocomplete-selection + input.form-control {
     width: auto;
index 73e6612..fcce58b 100644 (file)
@@ -9786,7 +9786,9 @@ a.dropdown-toggle:focus,
 .moodle-dialogue-base .closebutton.focus,
 .moodle-dialogue-base .closebutton:focus,
 button.close.focus,
-button.close:focus {
+button.close:focus,
+.form-autocomplete-selection.focus,
+.form-autocomplete-selection:focus {
   outline: 0;
   box-shadow: 0 0 0 0.2rem rgba(15, 111, 197, 0.75); }
 
@@ -9804,9 +9806,14 @@ input[type="image"]:focus:hover,
 a.dropdown-toggle:focus:hover,
 .modal-dialog[tabindex="0"]:focus:hover,
 .moodle-dialogue-base .closebutton:focus:hover,
-button.close:focus:hover {
+button.close:focus:hover,
+.form-autocomplete-selection:focus:hover {
   text-decoration: none; }
 
+.form-autocomplete-suggestions li[aria-selected=true] {
+  outline: 0;
+  box-shadow: 0 0 0 0.2rem rgba(15, 111, 197, 0.75); }
+
 .safari input[type="checkbox"].focus, .safari input[type="checkbox"]:focus,
 .safari input[type="radio"].focus,
 .safari input[type="radio"]:focus {
@@ -16536,8 +16543,8 @@ fieldset.coursesearchbox label {
   min-width: 206px;
   max-height: 20em;
   overflow: auto;
-  padding: 0;
-  margin: 2px 0 0 0;
+  margin: 0.125rem 0 0;
+  padding: 0.5rem 0;
   z-index: 1; }
 
 .form-autocomplete-suggestions li {
@@ -16549,6 +16556,8 @@ fieldset.coursesearchbox label {
   .form-autocomplete-suggestions li:hover, .form-autocomplete-suggestions li:focus, .form-autocomplete-suggestions li[aria-selected="true"] {
     background-color: #0f6fc5;
     color: #fff; }
+  .form-autocomplete-suggestions li::before {
+    content: "\200B"; }
 
 .form-autocomplete-downarrow {
   color: #212529;
@@ -16561,10 +16570,6 @@ fieldset.coursesearchbox label {
     left: 0;
     background-color: #fff; }
 
-.form-autocomplete-selection:focus {
-  outline: 0;
-  box-shadow: 0 0 0 0.2rem rgba(15, 111, 197, 0.75); }
-
 /** Undo some bootstrap things */
 .form-autocomplete-selection + input.form-control {
   width: auto;
index d88e466..a52cae5 100644 (file)
@@ -9990,7 +9990,9 @@ a.dropdown-toggle:focus,
 .moodle-dialogue-base .closebutton.focus,
 .moodle-dialogue-base .closebutton:focus,
 button.close.focus,
-button.close:focus {
+button.close:focus,
+.form-autocomplete-selection.focus,
+.form-autocomplete-selection:focus {
   outline: 0;
   box-shadow: 0 0 0 0.2rem rgba(15, 111, 197, 0.75); }
 
@@ -10008,9 +10010,14 @@ input[type="image"]:focus:hover,
 a.dropdown-toggle:focus:hover,
 .modal-dialog[tabindex="0"]:focus:hover,
 .moodle-dialogue-base .closebutton:focus:hover,
-button.close:focus:hover {
+button.close:focus:hover,
+.form-autocomplete-selection:focus:hover {
   text-decoration: none; }
 
+.form-autocomplete-suggestions li[aria-selected=true] {
+  outline: 0;
+  box-shadow: 0 0 0 0.2rem rgba(15, 111, 197, 0.75); }
+
 .safari input[type="checkbox"].focus, .safari input[type="checkbox"]:focus,
 .safari input[type="radio"].focus,
 .safari input[type="radio"]:focus {
@@ -16762,8 +16769,8 @@ fieldset.coursesearchbox label {
   min-width: 206px;
   max-height: 20em;
   overflow: auto;
-  padding: 0;
-  margin: 2px 0 0 0;
+  margin: 0.125rem 0 0;
+  padding: 0.5rem 0;
   z-index: 1; }
 
 .form-autocomplete-suggestions li {
@@ -16775,6 +16782,8 @@ fieldset.coursesearchbox label {
   .form-autocomplete-suggestions li:hover, .form-autocomplete-suggestions li:focus, .form-autocomplete-suggestions li[aria-selected="true"] {
     background-color: #0f6fc5;
     color: #fff; }
+  .form-autocomplete-suggestions li::before {
+    content: "\200B"; }
 
 .form-autocomplete-downarrow {
   color: #212529;
@@ -16787,10 +16796,6 @@ fieldset.coursesearchbox label {
     left: 0;
     background-color: #fff; }
 
-.form-autocomplete-selection:focus {
-  outline: 0;
-  box-shadow: 0 0 0 0.2rem rgba(15, 111, 197, 0.75); }
-
 /** Undo some bootstrap things */
 .form-autocomplete-selection + input.form-control {
   width: auto;