mirror_php/moodle
1
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-04-12 03:52:16 +02:00
Code Issues Projects Releases Wiki Activity

MDL-72668 core: Highlight the focused tree item in a tree.

Browse Source
This commit is contained in:
Shamim Rezaie 2021-10-21 05:35:26 +11:00
parent ae2b100f55
commit b5c5455573
3 changed files with 43 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
theme/boost/scss/moodle/core.scss
View File

@ -149,7 +149,8 @@ a.dropdown-toggle,
.modal-dialog[tabindex="0"],
.moodle-dialogue-base .closebutton,
button.close,
.form-autocomplete-selection {
.form-autocomplete-selection,
[role="treeitem"]:not([aria-expanded="true"]) {
&.focus,
&:focus {
outline: 0;
@ -160,6 +161,21 @@ button.close,
}
}
// We don't want to highlight the whole li when it's expanded. Only the first child is highlighted.
[role="treeitem"][aria-expanded="true"] {
outline: 0;
&.focus,
&:focus {
> *:first-child {
outline: 0;
box-shadow: $input-btn-focus-box-shadow;
}
}
&:focus:hover {
text-decoration: none;
}
}
// Accessible focus styling for autocomplete elements.
.form-autocomplete-suggestions li[aria-selected=true] {
outline: 0;

15
theme/boost/style/moodle.css
View File

@ -10001,7 +10001,9 @@ a.dropdown-toggle:focus,
button.close.focus,
button.close:focus,
.form-autocomplete-selection.focus,
.form-autocomplete-selection:focus {
.form-autocomplete-selection:focus,
[role="treeitem"]:not([aria-expanded="true"]).focus,
[role="treeitem"]:not([aria-expanded="true"]):focus {
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(15, 111, 197, 0.75); }
@ -10021,9 +10023,18 @@ a.dropdown-toggle:focus:hover,
.modal-dialog[tabindex="0"]:focus:hover,
.moodle-dialogue-base .closebutton:focus:hover,
button.close:focus:hover,
.form-autocomplete-selection:focus:hover {
.form-autocomplete-selection:focus:hover,
[role="treeitem"]:not([aria-expanded="true"]):focus:hover {
text-decoration: none; }
[role="treeitem"][aria-expanded="true"] {
outline: 0; }
[role="treeitem"][aria-expanded="true"].focus > *:first-child, [role="treeitem"][aria-expanded="true"]:focus > *:first-child {
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(15, 111, 197, 0.75); }
[role="treeitem"][aria-expanded="true"]: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); }

15
theme/classic/style/moodle.css
View File

@ -10001,7 +10001,9 @@ a.dropdown-toggle:focus,
button.close.focus,
button.close:focus,
.form-autocomplete-selection.focus,
.form-autocomplete-selection:focus {
.form-autocomplete-selection:focus,
[role="treeitem"]:not([aria-expanded="true"]).focus,
[role="treeitem"]:not([aria-expanded="true"]):focus {
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(15, 111, 197, 0.75); }
@ -10021,9 +10023,18 @@ a.dropdown-toggle:focus:hover,
.modal-dialog[tabindex="0"]:focus:hover,
.moodle-dialogue-base .closebutton:focus:hover,
button.close:focus:hover,
.form-autocomplete-selection:focus:hover {
.form-autocomplete-selection:focus:hover,
[role="treeitem"]:not([aria-expanded="true"]):focus:hover {
text-decoration: none; }
[role="treeitem"][aria-expanded="true"] {
outline: 0; }
[role="treeitem"][aria-expanded="true"].focus > *:first-child, [role="treeitem"][aria-expanded="true"]:focus > *:first-child {
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(15, 111, 197, 0.75); }
[role="treeitem"][aria-expanded="true"]: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); }