import $ from 'jquery'; import {generateAriaId} from './base.js'; const ariaPatchKey = '_giteaAriaPatchDropdown'; const fomanticDropdownFn = $.fn.dropdown; // use our own `$().dropdown` function to patch Fomantic's dropdown module export function initAriaDropdownPatch() { if ($.fn.dropdown === ariaDropdownFn) throw new Error('initAriaDropdownPatch could only be called once'); $.fn.dropdown = ariaDropdownFn; ariaDropdownFn.settings = fomanticDropdownFn.settings; } // the patched `$.fn.dropdown` function, it passes the arguments to Fomantic's `$.fn.dropdown` function, and: // * it does the one-time attaching on the first call // * it delegates the `onLabelCreate` to the patched `onLabelCreate` to add necessary aria attributes function ariaDropdownFn(...args) { const ret = fomanticDropdownFn.apply(this, args); // if the `$().dropdown()` call is without arguments, or it has non-string (object) argument, // it means that this call will reset the dropdown internal settings, then we need to re-delegate the callbacks. const needDelegate = (!args.length || typeof args[0] !== 'string'); for (const el of this) { const $dropdown = $(el); if (!el[ariaPatchKey]) { attachInit($dropdown); } if (needDelegate) { delegateOne($dropdown); } } return ret; } // make the item has role=option/menuitem, add an id if there wasn't one yet, make items as non-focusable // the elements inside the dropdown menu item should not be focusable, the focus should always be on the dropdown primary element. function updateMenuItem(dropdown, item) { if (!item.id) item.id = generateAriaId(); item.setAttribute('role', dropdown[ariaPatchKey].listItemRole); item.setAttribute('tabindex', '-1'); for (const a of item.querySelectorAll('a')) a.setAttribute('tabindex', '-1'); } // make the label item and its "delete icon" has correct aria attributes function updateSelectionLabel($label) { // the "label" is like this: "<a|div class="ui label" data-value="1">the-label-name <i|svg class="delete icon"/></a>" if (!$label.attr('id')) $label.attr('id', generateAriaId()); $label.attr('tabindex', '-1'); $label.find('.delete.icon').attr({ 'aria-hidden': 'false', 'aria-label': window.config.i18n.remove_label_str.replace('%s', $label.attr('data-value')), 'role': 'button', }); } // delegate the dropdown's template functions and callback functions to add aria attributes. function delegateOne($dropdown) { const dropdownCall = fomanticDropdownFn.bind($dropdown); // If there is a "search input" in the "menu", Fomantic will only "focus the input" but not "toggle the menu" when the "dropdown icon" is clicked. // Actually, Fomantic UI doesn't support such layout/usage. It needs to patch the "focusSearch" / "blurSearch" functions to make sure it toggles the menu. const oldFocusSearch = dropdownCall('internal', 'focusSearch'); const oldBlurSearch = dropdownCall('internal', 'blurSearch'); // * If the "dropdown icon" is clicked, Fomantic calls "focusSearch", so show the menu dropdownCall('internal', 'focusSearch', function () { dropdownCall('show'); oldFocusSearch.call(this) }); // * If the "dropdown icon" is clicked again when the menu is visible, Fomantic calls "blurSearch", so hide the menu dropdownCall('internal', 'blurSearch', function () { oldBlurSearch.call(this); dropdownCall('hide') }); // the "template" functions are used for dynamic creation (eg: AJAX) const dropdownTemplates = {...dropdownCall('setting', 'templates'), t: performance.now()}; const dropdownTemplatesMenuOld = dropdownTemplates.menu; dropdownTemplates.menu = function(response, fields, preserveHTML, className) { // when the dropdown menu items are loaded from AJAX requests, the items are created dynamically const menuItems = dropdownTemplatesMenuOld(response, fields, preserveHTML, className); const $wrapper = $('<div>').append(menuItems); const $items = $wrapper.find('> .item'); $items.each((_, item) => updateMenuItem($dropdown[0], item)); $dropdown[0][ariaPatchKey].deferredRefreshAriaActiveItem(); return $wrapper.html(); }; dropdownCall('setting', 'templates', dropdownTemplates); // the `onLabelCreate` is used to add necessary aria attributes for dynamically created selection labels const dropdownOnLabelCreateOld = dropdownCall('setting', 'onLabelCreate'); dropdownCall('setting', 'onLabelCreate', function(value, text) { const $label = dropdownOnLabelCreateOld.call(this, value, text); updateSelectionLabel($label); return $label; }); } // for static dropdown elements (generated by server-side template), prepare them with necessary aria attributes function attachStaticElements($dropdown, $focusable, $menu) { const dropdown = $dropdown[0]; // prepare static dropdown menu list popup if (!$menu.attr('id')) $menu.attr('id', generateAriaId()); $menu.find('> .item').each((_, item) => updateMenuItem(dropdown, item)); // this role could only be changed after its content is ready, otherwise some browsers+readers (like Chrome+AppleVoice) crash $menu.attr('role', dropdown[ariaPatchKey].listPopupRole); // prepare selection label items $dropdown.find('.ui.label').each((_, label) => updateSelectionLabel($(label))); // make the primary element (focusable) aria-friendly $focusable.attr({ 'role': $focusable.attr('role') ?? dropdown[ariaPatchKey].focusableRole, 'aria-haspopup': dropdown[ariaPatchKey].listPopupRole, 'aria-controls': $menu.attr('id'), 'aria-expanded': 'false', }); // use tooltip's content as aria-label if there is no aria-label const tooltipContent = $dropdown.attr('data-tooltip-content'); if (tooltipContent && !$dropdown.attr('aria-label')) { $dropdown.attr('aria-label', tooltipContent); } } function attachInit($dropdown) { const dropdown = $dropdown[0]; dropdown[ariaPatchKey] = {}; if ($dropdown.hasClass('custom')) return; // Dropdown has 2 different focusing behaviors // * with search input: the input is focused, and it works with aria-activedescendant pointing another sibling element. // * without search input (but the readonly text), the dropdown itself is focused. then the aria-activedescendant points to the element inside dropdown // Some desktop screen readers may change the focus, but dropdown requires that the focus must be on its primary element, then they don't work well. // Expected user interactions for dropdown with aria support: // * user can use Tab to focus in the dropdown, then the dropdown menu (list) will be shown // * user presses Tab on the focused dropdown to move focus to next sibling focusable element (but not the menu item) // * user can use arrow key Up/Down to navigate between menu items // * when user presses Enter: // - if the menu item is clickable (eg: <a>), then trigger the click event // - otherwise, the dropdown control (low-level code) handles the Enter event, hides the dropdown menu // TODO: multiple selection is only partially supported. Check and test them one by one in the future. const $textSearch = $dropdown.find('input.search').eq(0); const $focusable = $textSearch.length ? $textSearch : $dropdown; // the primary element for focus, see comment above if (!$focusable.length) return; // as a combobox, the input should not have autocomplete by default if ($textSearch.length && !$textSearch.attr('autocomplete')) { $textSearch.attr('autocomplete', 'off'); } let $menu = $dropdown.find('> .menu'); if (!$menu.length) { // some "multiple selection" dropdowns don't have a static menu element in HTML, we need to pre-create it to make it have correct aria attributes $menu = $('<div class="menu"></div>').appendTo($dropdown); } // There are 2 possible solutions about the role: combobox or menu. // The idea is that if there is an input, then it's a combobox, otherwise it's a menu. // Since #19861 we have prepared the "combobox" solution, but didn't get enough time to put it into practice and test before. const isComboBox = $dropdown.find('input').length > 0; dropdown[ariaPatchKey].focusableRole = isComboBox ? 'combobox' : 'menu'; dropdown[ariaPatchKey].listPopupRole = isComboBox ? 'listbox' : ''; dropdown[ariaPatchKey].listItemRole = isComboBox ? 'option' : 'menuitem'; attachDomEvents($dropdown, $focusable, $menu); attachStaticElements($dropdown, $focusable, $menu); } function attachDomEvents($dropdown, $focusable, $menu) { const dropdown = $dropdown[0]; // when showing, it has class: ".animating.in" // when hiding, it has class: ".visible.animating.out" const isMenuVisible = () => ($menu.hasClass('visible') && !$menu.hasClass('out')) || $menu.hasClass('in'); // update aria attributes according to current active/selected item const refreshAriaActiveItem = () => { const menuVisible = isMenuVisible(); $focusable.attr('aria-expanded', menuVisible ? 'true' : 'false'); // if there is an active item, use it (the user is navigating between items) // otherwise use the "selected" for combobox (for the last selected item) const $active = $menu.find('> .item.active, > .item.selected'); // if the popup is visible and has an active/selected item, use its id as aria-activedescendant if (menuVisible) { $focusable.attr('aria-activedescendant', $active.attr('id')); } else if (dropdown[ariaPatchKey].listPopupRole === 'menu') { // for menu, when the popup is hidden, no need to keep the aria-activedescendant, and clear the active/selected item $focusable.removeAttr('aria-activedescendant'); $active.removeClass('active').removeClass('selected'); } }; $dropdown.on('keydown', (e) => { // here it must use keydown event before dropdown's keyup handler, otherwise there is no Enter event in our keyup handler if (e.key === 'Enter') { const dropdownCall = fomanticDropdownFn.bind($dropdown); let $item = dropdownCall('get item', dropdownCall('get value')); if (!$item) $item = $menu.find('> .item.selected'); // when dropdown filters items by input, there is no "value", so query the "selected" item // if the selected item is clickable, then trigger the click event. // we can not click any item without check, because Fomantic code might also handle the Enter event. that would result in double click. if ($item && ($item.is('a') || $item.hasClass('js-aria-clickable'))) $item[0].click(); } }); // use setTimeout to run the refreshAria in next tick (to make sure the Fomantic UI code has finished its work) // do not return any value, jQuery has return-value related behaviors. // when the popup is hiding, it's better to have a small "delay", because there is a Fomantic UI animation // without the delay for hiding, the UI will be somewhat laggy and sometimes may get stuck in the animation. const deferredRefreshAriaActiveItem = (delay = 0) => { setTimeout(refreshAriaActiveItem, delay) }; dropdown[ariaPatchKey].deferredRefreshAriaActiveItem = deferredRefreshAriaActiveItem; $dropdown.on('keyup', (e) => { if (e.key.startsWith('Arrow')) deferredRefreshAriaActiveItem(); }); // if the dropdown has been opened by focus, do not trigger the next click event again. // otherwise the dropdown will be closed immediately, especially on Android with TalkBack // * desktop event sequence: mousedown -> focus -> mouseup -> click // * mobile event sequence: focus -> mousedown -> mouseup -> click // Fomantic may stop propagation of blur event, use capture to make sure we can still get the event let ignoreClickPreEvents = 0, ignoreClickPreVisible = 0; dropdown.addEventListener('mousedown', () => { ignoreClickPreVisible += isMenuVisible() ? 1 : 0; ignoreClickPreEvents++; }, true); dropdown.addEventListener('focus', () => { ignoreClickPreVisible += isMenuVisible() ? 1 : 0; ignoreClickPreEvents++; deferredRefreshAriaActiveItem(); }, true); dropdown.addEventListener('blur', () => { ignoreClickPreVisible = ignoreClickPreEvents = 0; deferredRefreshAriaActiveItem(100); }, true); dropdown.addEventListener('mouseup', () => { setTimeout(() => { ignoreClickPreVisible = ignoreClickPreEvents = 0; deferredRefreshAriaActiveItem(100); }, 0); }, true); dropdown.addEventListener('click', (e) => { if (isMenuVisible() && ignoreClickPreVisible !== 2 && // dropdown is switch from invisible to visible ignoreClickPreEvents === 2 // the click event is related to mousedown+focus ) { e.stopPropagation(); // if the dropdown menu has been opened by focus, do not trigger the next click event again } ignoreClickPreEvents = ignoreClickPreVisible = 0; }, true); }