Merge branch 'MDL-78885-main' of https://github.com/rezaies/moodle

theme/boost/amd/src/aria.js

@@ -23,6 +23,7 @@
 
 import $ from 'jquery';
 import Pending from 'core/pending';
+import * as FocusLockManager from 'core/local/aria/focuslock';
 
 /**
  * Drop downs from bootstrap don't support keyboard accessibility by default.
@@ -78,13 +79,10 @@ const dropdownFix = () => {
         const menu = e.target.parentElement.querySelector('[role="menu"]');
         let menuItems = false;
         let foundMenuItem = false;
-        let textInput = false;
 
         if (menu) {
             menuItems = menu.querySelectorAll('[role="menuitem"]');
-            textInput = e.target.parentElement.querySelector('[data-action="search"]');
         }
-
         if (menuItems && menuItems.length > 0) {
             // Up key opens the menu at the end.
             if (trigger === 'ArrowUp') {
@@ -101,10 +99,7 @@ const dropdownFix = () => {
             }
         }
 
-        if (textInput) {
-            shiftFocus(textInput);
-        }
-        if (foundMenuItem && textInput === null) {
+        if (foundMenuItem) {
             shiftFocus(foundMenuItem);
         }
     };
@@ -198,10 +193,26 @@ const dropdownFix = () => {
         }
     });
 
+    $('.dropdown').on('shown.bs.dropdown', e => {
+        const dialog = e.target.querySelector(`#${e.relatedTarget.getAttribute('aria-controls')}[role="dialog"]`);
+        if (dialog) {
+            // Use setTimeout to make sure the dialog is positioned correctly to prevent random scrolling.
+            setTimeout(() => {
+                FocusLockManager.trapFocus(dialog);
+            });
+        }
+    });
+
     $('.dropdown').on('hidden.bs.dropdown', e => {
+        const dialog = e.target.querySelector(`#${e.relatedTarget.getAttribute('aria-controls')}[role="dialog"]`);
+        if (dialog) {
+            FocusLockManager.untrapFocus();
+        }
+
         // We need to focus on the menu trigger.
         const trigger = e.target.querySelector('[data-toggle="dropdown"]');
-        const focused = document.activeElement != document.body ? document.activeElement : null;
+        // If it's a click event, then no element is focused because the clicked element is inside a closed dropdown.
+        const focused = e.clickEvent?.target || (document.activeElement !== document.body ? document.activeElement : null);
         if (trigger && focused && e.target.contains(focused)) {
             shiftFocus(trigger, () => {
                 if (document.activeElement === document.body) {
@@ -297,9 +308,9 @@ const comboboxFix = () => {
                     if (editable && !next) {
                         next = options[options.length - 1];
                     }
-                } else if (trigger == 'Home') {
+                } else if (trigger == 'Home' && !editable) {
                     next = options[0];
-                } else if (trigger == 'End') {
+                } else if (trigger == 'End' && !editable) {
                     next = options[options.length - 1];
                 } else if ((trigger == ' ' && !editable) || trigger == 'Enter') {
                     e.preventDefault();
@@ -338,7 +349,6 @@ const comboboxFix = () => {
             const listbox = option.closest('[role="listbox"]');
             const combobox = document.querySelector(`[role="combobox"][aria-controls="${listbox.id}"]`);
             if (combobox) {
-                combobox.focus();
                 selectOption(combobox, option);
             }
         }
@@ -368,9 +378,9 @@ const comboboxFix = () => {
         }
 
         if (combobox.hasAttribute('value')) {
-            combobox.value = option.textContent.replace(/[\n\r]+|[\s]{2,}/g, ' ').trim();
+            combobox.value = option.dataset.shortText || option.textContent.replace(/[\n\r]+|[\s]{2,}/g, ' ').trim();
         } else {
-            combobox.textContent = option.textContent;
+            combobox.textContent = option.dataset.shortText || option.textContent;
         }
 
         if (combobox.dataset.inputElement) {

theme/boost/scss/moodle/core.scss

@@ -3121,14 +3121,16 @@ blockquote {
 .usersearchdropdown,
 .gradesearchdropdown,
 .groupsearchdropdown {
-    max-width: 350px;
-    .searchresultitemscontainer {
-        max-height: 170px;
-        overflow: auto;
-        /* stylelint-disable declaration-no-important */
-        img {
-            height: 48px !important;
-            width: 48px !important;
+    &.dropdown-menu {
+        width: 350px;
+        .searchresultitemscontainer {
+            max-height: 170px;
+            overflow: auto;
+            /* stylelint-disable declaration-no-important */
+            img {
+                height: 48px !important;
+                width: 48px !important;
+            }
         }
     }
 }

theme/boost/style/moodle.css

@@ -26026,21 +26026,21 @@ blockquote {
 }
 
 /* Combobox search dropdowns */
-.usersearchdropdown,
-.gradesearchdropdown,
-.groupsearchdropdown {
-  max-width: 350px;
+.usersearchdropdown.dropdown-menu,
+.gradesearchdropdown.dropdown-menu,
+.groupsearchdropdown.dropdown-menu {
+  width: 350px;
 }
-.usersearchdropdown .searchresultitemscontainer,
-.gradesearchdropdown .searchresultitemscontainer,
-.groupsearchdropdown .searchresultitemscontainer {
+.usersearchdropdown.dropdown-menu .searchresultitemscontainer,
+.gradesearchdropdown.dropdown-menu .searchresultitemscontainer,
+.groupsearchdropdown.dropdown-menu .searchresultitemscontainer {
   max-height: 170px;
   overflow: auto;
   /* stylelint-disable declaration-no-important */
 }
-.usersearchdropdown .searchresultitemscontainer img,
-.gradesearchdropdown .searchresultitemscontainer img,
-.groupsearchdropdown .searchresultitemscontainer img {
+.usersearchdropdown.dropdown-menu .searchresultitemscontainer img,
+.gradesearchdropdown.dropdown-menu .searchresultitemscontainer img,
+.groupsearchdropdown.dropdown-menu .searchresultitemscontainer img {
   height: 48px !important;
   width: 48px !important;
 }

theme/classic/style/moodle.css

@@ -26026,21 +26026,21 @@ blockquote {
 }
 
 /* Combobox search dropdowns */
-.usersearchdropdown,
-.gradesearchdropdown,
-.groupsearchdropdown {
-  max-width: 350px;
+.usersearchdropdown.dropdown-menu,
+.gradesearchdropdown.dropdown-menu,
+.groupsearchdropdown.dropdown-menu {
+  width: 350px;
 }
-.usersearchdropdown .searchresultitemscontainer,
-.gradesearchdropdown .searchresultitemscontainer,
-.groupsearchdropdown .searchresultitemscontainer {
+.usersearchdropdown.dropdown-menu .searchresultitemscontainer,
+.gradesearchdropdown.dropdown-menu .searchresultitemscontainer,
+.groupsearchdropdown.dropdown-menu .searchresultitemscontainer {
   max-height: 170px;
   overflow: auto;
   /* stylelint-disable declaration-no-important */
 }
-.usersearchdropdown .searchresultitemscontainer img,
-.gradesearchdropdown .searchresultitemscontainer img,
-.groupsearchdropdown .searchresultitemscontainer img {
+.usersearchdropdown.dropdown-menu .searchresultitemscontainer img,
+.gradesearchdropdown.dropdown-menu .searchresultitemscontainer img,
+.groupsearchdropdown.dropdown-menu .searchresultitemscontainer img {
   height: 48px !important;
   width: 48px !important;
 }