WebSVN – Moodle – Diff – /theme/universe/amd/src/aria.js

  * @module     theme_universe/aria
  * @copyright  2018 Damyon Wiese <damyon@moodle.com>
  * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  */
-import $ from 'jquery';
+import Tab from 'theme_universe/bootstrap/tab';
+import Pending from 'core/pending';
-import Pending from 'core/pending';
+import * as FocusLockManager from 'core/local/aria/focuslock';
 /**
  * Drop downs from bootstrap don't support keyboard accessibility by default.
         // Fix the focus on the menu items when the menu is opened.
         const menu = e.target.parentElement.querySelector('[role="menu"]');
         let menuItems = false;
-        let foundMenuItem = false;
-        let textInput = false;
+        let foundMenuItem = false;
-        if (menu) {
-            menuItems = menu.querySelectorAll('[role="menuitem"]');
+        if (menu) {
-            textInput = e.target.parentElement.querySelector('[data-action="search"]');
             menuItems = menu.querySelectorAll('[role="menuitem"]');
+        }
         if (menuItems && menuItems.length > 0) {
             // Up key opens the menu at the end.
             if (trigger === 'ArrowUp') {
                 // The first menu entry, pretty reasonable.
                 foundMenuItem = menuItems[0];
+            }
+        }
-        if (textInput) {
-            shiftFocus(textInput);
-        }
-        if (foundMenuItem && textInput === null) {
+        if (foundMenuItem) {
             shiftFocus(foundMenuItem);
+        }
     };
     // Search for menu items by finding the first item that has
     // text starting with the typed character (case insensitive).
     document.addEventListener('keypress', e => {
-        if (e.target.matches('.dropdown [role="menu"] [role="menuitem"]')) {
+        if (e.target.matches('[role="menu"] [role="menuitem"]')) {
             const menu = e.target.closest('[role="menu"]');
             if (!menu) {
                 return;
     // Keyboard navigation for arrow keys, home and end keys.
     document.addEventListener('keydown', e => {
         // We only want to set focus when users access the dropdown via keyboard as per
         // guidelines defined in w3 aria practices 1.1 menu-button.
-        if (e.target.matches('[data-toggle="dropdown"]')) {
+        if (e.target.matches('[data-bs-toggle="dropdown"]')) {
             handleMenuButton(e);
         }
-        if (e.target.matches('.dropdown [role="menu"] [role="menuitem"]')) {
+        if (e.target.matches('[role="menu"] [role="menuitem"]')) {
             const trigger = e.key;
             let next = false;
+            }
             return;
+        }
     });
+    // Trap focus if the dropdown is a dialog.
+    document.addEventListener('shown.bs.dropdown', e => {
+        const dialog = e.target.querySelector('.dropdown-menu[role="dialog"]');
+        if (dialog) {
+            // Use setTimeout to make sure the dialog is positioned correctly to prevent random scrolling.
+            setTimeout(() => {
+                FocusLockManager.trapFocus(dialog);
+            });
+        }
+    });
+    // Untrap focus when the dialog dropdown is closed.
+    document.addEventListener('hidden.bs.dropdown', e => {
+        const dialog = e.target.querySelector('.dropdown-menu[role="dialog"]');
+        if (dialog) {
+            FocusLockManager.untrapFocus();
+        }
     $('.dropdown').on('hidden.bs.dropdown', e => {
         // We need to focus on the menu trigger.
+        const trigger = e.target.querySelector('[data-bs-toggle="dropdown"]');
-        const trigger = e.target.querySelector('[data-toggle="dropdown"]');
+        // If it's a click event, then no element is focused because the clicked element is inside a closed dropdown.
-        const focused = document.activeElement != document.body ? document.activeElement : null;
+        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) {
                     // If the focus is currently on the body, then we can safely assume that the focus needs to be updated.
 /**
  * A lot of Bootstrap's out of the box features don't work if dropdown items are not focusable.
  */
 const comboboxFix = () => {
-    $(document).on('show.bs.dropdown', e => {
+    document.addEventListener('show.bs.dropdown', e => {
         if (e.relatedTarget.matches('[role="combobox"]')) {
             const combobox = e.relatedTarget;
             const listbox = document.querySelector(`#${combobox.getAttribute('aria-controls')}[role="listbox"]`);
                 }, 0);
+            }
+        }
     });
-    $(document).on('hidden.bs.dropdown', e => {
+    document.addEventListener('hidden.bs.dropdown', e => {
         if (e.relatedTarget.matches('[role="combobox"]')) {
             const combobox = e.relatedTarget;
             const listbox = document.querySelector(`#${combobox.getAttribute('aria-controls')}[role="listbox"]`);
+                        }
+                    }
                     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();
                     selectOption(combobox, activeOption);
                 } else if (!editable) {
         const option = e.target.closest('[role="listbox"] [role="option"]');
         if (option) {
             const listbox = option.closest('[role="listbox"]');
             const combobox = document.querySelector(`[role="combobox"][aria-controls="${listbox.id}"]`);
             if (combobox) {
-                combobox.focus();
                 selectOption(combobox, option);
+            }
+        }
     });
+            }
             option.setAttribute('aria-selected', 'true');
+        }
         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 {
+            const selectedOptionContainer = combobox.querySelector('[data-selected-option]');
+            if (selectedOptionContainer) {
+                selectedOptionContainer.textContent = option.dataset.shortText || option.textContent;
-        } else {
+            } else {
+                combobox.textContent = option.dataset.shortText || option.textContent;
             combobox.textContent = option.textContent;
+        }
         if (combobox.dataset.inputElement) {
         });
     });
 };
 /**
+ * Changes the focus to the correct element based on the key that is pressed.
- * Changes the focus to the correct tab based on the key that is pressed.
+ * @param {NodeList} elements A NodeList of focusable elements to navigate between.
+ * @param {KeyboardEvent} e The keyboard event that triggers the roving focus.
+ * @param {boolean} vertical Whether the navigation is vertical.
- * @param {KeyboardEvent} e
+ * @param {boolean} updateTabIndex Whether to update the tabIndex of the elements.
- */
-const updateTabFocus = e => {
-    const tabList = e.target.closest('[role="tablist"]');
+ */
-    const vertical = tabList.getAttribute('aria-orientation') == 'vertical';
+const rovingFocus = (elements, e, vertical, updateTabIndex) => {
     const rtl = window.right_to_left();
     const arrowNext = vertical ? 'ArrowDown' : (rtl ? 'ArrowLeft' : 'ArrowRight');
     const arrowPrevious = vertical ? 'ArrowUp' : (rtl ? 'ArrowRight' : 'ArrowLeft');
-    const tabs = Array.prototype.filter.call(
-        tabList.querySelectorAll('[role="tab"]'),
-        tab => !!tab.offsetHeight); // We only work with the visible tabs.
+    const keys = [arrowNext, arrowPrevious, 'Home', 'End'];
-    for (let i = 0; i < tabs.length; i++) {
+    if (!keys.includes(e.key)) {
+        return;
+    }
+    const focusElement = index => {
+        elements[index].focus();
+        if (updateTabIndex) {
+            elements.forEach((element, i) => element.setAttribute('tabindex', i === index ? '0' : '-1'));
+        }
+    };
-        tabs[i].index = i;
+    const currentIndex = Array.prototype.indexOf.call(elements, e.target);
     let nextIndex;
     switch (e.key) {
-        case arrowNext:
-            e.preventDefault();
-            if (e.target.index !== undefined && tabs[e.target.index + 1]) {
+        case arrowNext:
-                tabs[e.target.index + 1].focus();
-            } else {
+            e.preventDefault();
-                tabs[0].focus();
+            nextIndex = (currentIndex + 1 < elements.length) ? currentIndex + 1 : 0;
             focusElement(nextIndex);
             break;
         case arrowPrevious:
-            e.preventDefault();
-            if (e.target.index !== undefined && tabs[e.target.index - 1]) {
-                tabs[e.target.index - 1].focus();
-            } else {
+            e.preventDefault();
-                tabs[tabs.length - 1].focus();
+            nextIndex = (currentIndex - 1 >= 0) ? currentIndex - 1 : elements.length - 1;
             focusElement(nextIndex);
             break;
         case 'Home':
             e.preventDefault();
-            tabs[0].focus();
+            focusElement(0);
             break;
         case 'End':
             e.preventDefault();
-            tabs[tabs.length - 1].focus();
+            focusElement(elements.length - 1);
+    }
 };
 /**
  * Fix accessibility issues regarding tab elements focus and their tab order in Bootstrap navs.
  */
+const tabElementFix = () => {
+    document.addEventListener('keydown', e => {
+        if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(e.key)) {
-const tabElementFix = () => {
+            if (e.target.matches('[role="tablist"] [role="tab"]')) {
+                const tabList = e.target.closest('[role="tablist"]');
+                const tabs = Array.prototype.filter.call(
+                    tabList.querySelectorAll('[role="tab"]'),
+                    tab => !!tab.offsetHeight
-    document.addEventListener('keydown', e => {
+                ); // We only work with the visible tabs.
-        if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(e.key)) {
+                const vertical = tabList.getAttribute('aria-orientation') == 'vertical';
             if (e.target.matches('[role="tablist"] [role="tab"]')) {
-                updateTabFocus(e);
+                rovingFocus(tabs, e, vertical, false);
             }
         }
     });
     document.addEventListener('click', e => {
-        if (e.target.matches('[role="tablist"] [data-toggle="tab"], [role="tablist"] [data-toggle="pill"]')) {
+        if (e.target.matches('[role="tablist"] [data-bs-toggle="tab"], [role="tablist"] [data-bs-toggle="pill"]')) {
-            const tabs = e.target.closest('[role="tablist"]').querySelectorAll('[data-toggle="tab"], [data-toggle="pill"]');
+            const tabs = e.target.closest('[role="tablist"]').querySelectorAll('[data-bs-toggle="tab"], [data-bs-toggle="pill"]');
             e.preventDefault();
-            $(e.target).tab('show');
+            Tab.getOrCreateInstance(e.target).show();
+ *
  * @see {@link https://www.w3.org/TR/wai-aria-practices-1.1/#disclosure|WAI-ARIA Authoring Practices 1.1 - Disclosure (Show/Hide)}
  */
 const collapseFix = () => {
     document.addEventListener('keydown', e => {
-        if (e.target.matches('[data-toggle="collapse"]')) {
+        if (e.target.matches('[data-bs-toggle="collapse"]')) {
             // Pressing space should toggle expand/collapse.
             if (e.key === ' ') {
                 e.preventDefault();
                 e.target.click();
+            }
+        }
     });
 };
+/**
+ * Fix accessibility issues
+ */
+const toolbarFix = () => {
+    document.addEventListener('keydown', e => {
+        if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(e.key)) {
+            if (e.target.matches('[role="toolbar"] button')) {
+                const buttons = e.target.closest('[role="toolbar"]').querySelectorAll('button');
+                rovingFocus(buttons, e, false, true);
+            }
+        }
+    });
+};
 export const init = () => {
     dropdownFix();
     comboboxFix();
     autoFocus();
     tabElementFix();
+    collapseFix();
-    collapseFix();
+    toolbarFix();

Proyectos de Subversion Moodle

(root)/theme/universe/amd/src/aria.js – Rev 1 → 1441