L-electron-Rare/moodle
1
0
Fork 0
Code Issues Pull Requests Actions Packages 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-11-04 14:17:35 +11:00
parent 6e5c04f6c5
commit ced90c8a18
3 changed files with 43 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
theme/boost/scss/moodle/core.scss
+17 -1
View File
@@ -170,7 +170,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;
@@ -181,6 +182,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;
theme/boost/style/moodle.css
+13 -2
View File
@@ -9809,7 +9809,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); }
@@ -9828,9 +9830,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); }
theme/classic/style/moodle.css
+13 -2
View File
@@ -10021,7 +10021,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); }
@@ -10040,9 +10042,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); }