import $ from 'jquery'; let ariaIdCounter = 0; function generateAriaId() { return `_aria_auto_id_${ariaIdCounter++}`; } function attachOneDropdownAria($dropdown) { if ($dropdown.attr('data-aria-attached') || $dropdown.hasClass('custom')) return; $dropdown.attr('data-aria-attached', 1); // 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: ), then trigger the click event // - otherwise, the dropdown control (low-level code) handles the Enter event, hides the dropdown menu // TODO: multiple selection is not supported yet. 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; // 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; const focusableRole = isComboBox ? 'combobox' : 'button'; const listPopupRole = isComboBox ? 'listbox' : 'menu'; const listItemRole = isComboBox ? 'option' : 'menuitem'; // 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 prepareMenuItem($item) { if (!$item.attr('id')) $item.attr('id', generateAriaId()); $item.attr({'role': listItemRole, 'tabindex': '-1'}); $item.find('a').attr('tabindex', '-1'); } // delegate the dropdown's template function to add aria attributes. // the "template" functions are used for dynamic creation (eg: AJAX) const dropdownTemplates = {...$dropdown.dropdown('setting', 'templates')}; 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 = $('
').append(menuItems); const $items = $wrapper.find('> .item'); $items.each((_, item) => prepareMenuItem($(item))); return $wrapper.html(); }; $dropdown.dropdown('setting', 'templates', dropdownTemplates); // use tooltip's content as aria-label if there is no aria-label if ($dropdown.hasClass('tooltip') && $dropdown.attr('data-content') && !$dropdown.attr('aria-label')) { $dropdown.attr('aria-label', $dropdown.attr('data-content')); } // prepare dropdown menu list popup const $menu = $dropdown.find('> .menu'); if (!$menu.attr('id')) $menu.attr('id', generateAriaId()); $menu.find('> .item').each((_, item) => { prepareMenuItem($(item)); }); // this role could only be changed after its content is ready, otherwise some browsers+readers (like Chrome+AppleVoice) crash $menu.attr('role', listPopupRole); // make the primary element (focusable) aria-friendly $focusable.attr({ 'role': $focusable.attr('role') ?? focusableRole, 'aria-haspopup': listPopupRole, 'aria-controls': $menu.attr('id'), 'aria-expanded': 'false', }); // 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 refreshAria = () => { 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 (!isComboBox) { // 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') { let $item = $dropdown.dropdown('get item', $dropdown.dropdown('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 deferredRefreshAria = (delay = 0) => { setTimeout(refreshAria, delay) }; $dropdown.on('keyup', (e) => { if (e.key.startsWith('Arrow')) deferredRefreshAria(); }); // 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[0].addEventListener('mousedown', () => { ignoreClickPreVisible += isMenuVisible() ? 1 : 0; ignoreClickPreEvents++; }, true); $dropdown[0].addEventListener('focus', () => { ignoreClickPreVisible += isMenuVisible() ? 1 : 0; ignoreClickPreEvents++; deferredRefreshAria(); }, true); $dropdown[0].addEventListener('blur', () => { ignoreClickPreVisible = ignoreClickPreEvents = 0; deferredRefreshAria(100); }, true); $dropdown[0].addEventListener('mouseup', () => { setTimeout(() => { ignoreClickPreVisible = ignoreClickPreEvents = 0; deferredRefreshAria(100); }, 0); }, true); $dropdown[0].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); } export function attachDropdownAria($dropdowns) { $dropdowns.each((_, e) => attachOneDropdownAria($(e))); } export function attachCheckboxAria($checkboxes) { $checkboxes.checkbox(); // Fomantic UI checkbox needs to be something like:
// It doesn't work well with // To make it work with aria, the "id"/"for" attributes are necessary, so add them automatically if missing. // In the future, refactor to use native checkbox directly, then this patch could be removed. for (const el of $checkboxes) { const label = el.querySelector('label'); const input = el.querySelector('input'); if (!label || !input || input.getAttribute('id')) continue; const id = generateAriaId(); input.setAttribute('id', id); label.setAttribute('for', id); } }