mirror_php/moodle
1
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-04-14 13:02:07 +02:00
Code Issues Projects Releases Wiki Activity

MDL-68167 theme_boost: make focus outline accessible for autocompletes

Browse Source
This commit is contained in:
Shamim Rezaie 2020-07-27 16:26:11 +10:00
parent b643c88682
commit 29ad80e4ff
5 changed files with 40 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
mod/forum/tests/behat/advanced_search.feature
View 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"

9
theme/boost/scss/moodle/core.scss
View 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"],

11
theme/boost/scss/moodle/forms.scss
View 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;

21
theme/boost/style/moodle.css
View 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;

21
theme/classic/style/moodle.css
View 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;