From 105cd1d7a0a6331dba6e920fa66ab259168aac07 Mon Sep 17 00:00:00 2001
From: Shamim Rezaie <shamim@moodle.com>
Date: Thu, 21 Oct 2021 05:35:26 +1100
Subject: [PATCH] MDL-72668 core: Highlight the focused tree item in a tree.

---
 theme/boost/scss/moodle/core.scss | 18 +++++++++++++++++-
 theme/boost/style/moodle.css      | 15 +++++++++++++--
 theme/classic/style/moodle.css    | 15 +++++++++++++--
 3 files changed, 43 insertions(+), 5 deletions(-)

diff --git a/theme/boost/scss/moodle/core.scss b/theme/boost/scss/moodle/core.scss
index 4bcf367cf59..e16f556ca0b 100644
--- a/theme/boost/scss/moodle/core.scss
+++ b/theme/boost/scss/moodle/core.scss
@@ -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;
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index 71cde53ffb7..585c54f8b30 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -9791,7 +9791,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); }
 
@@ -9810,9 +9812,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); }
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index 40a61d74268..5c9a06fc2a5 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -9995,7 +9995,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); }
 
@@ -10014,9 +10016,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); }