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

  * @module     theme_boost/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_boost/bootstrap/tab';
 import Pending from 'core/pending';
 import * as FocusLockManager from 'core/local/aria/focuslock';
     };
     // 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.
-    $('.dropdown').on('shown.bs.dropdown', e => {
+    document.addEventListener('shown.bs.dropdown', e => {
-        const dialog = e.target.querySelector(`#${e.relatedTarget.getAttribute('aria-controls')}[role="dialog"]`);
+        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.
-    $('.dropdown').on('hidden.bs.dropdown', e => {
+    document.addEventListener('hidden.bs.dropdown', e => {
-        const dialog = e.target.querySelector(`#${e.relatedTarget.getAttribute('aria-controls')}[role="dialog"]`);
+        const dialog = e.target.querySelector('.dropdown-menu[role="dialog"]');
         if (dialog) {
             FocusLockManager.untrapFocus();
         }
         // We need to focus on the menu trigger.
-        const trigger = e.target.querySelector('[data-toggle="dropdown"]');
+        const trigger = e.target.querySelector('[data-bs-toggle="dropdown"]');
         // 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);
 /**
  * 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"]`);
                     combobox.setAttribute('aria-activedescendant', next.id);
                     next.scrollIntoView({block: 'nearest'});
+                }
+            }
+        }
-    });
+    }, true);
     document.addEventListener('click', e => {
         const option = e.target.closest('[role="listbox"] [role="option"]');
         if (option) {
+        }
         if (combobox.hasAttribute('value')) {
             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.dataset.shortText || 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/boost/amd/src/aria.js – Rev 1 → 1441