diff options
Diffstat (limited to 'web_src/js/features/aria.js')
| -rw-r--r-- | web_src/js/features/aria.js | 163 |
1 files changed, 112 insertions, 51 deletions
diff --git a/web_src/js/features/aria.js b/web_src/js/features/aria.js index 46944336ad..676f4cd56c 100644 --- a/web_src/js/features/aria.js +++ b/web_src/js/features/aria.js @@ -6,42 +6,16 @@ function generateAriaId() { return `_aria_auto_id_${ariaIdCounter++}`; } -// make the item has role=option, and add an id if there wasn't one yet. -function prepareMenuItem($item) { - if (!$item.attr('id')) $item.attr('id', generateAriaId()); - $item.attr({'role': 'menuitem', 'tabindex': '-1'}); - $item.find('a').attr('tabindex', '-1'); // as above, the elements inside the dropdown menu item should not be focusable, the focus should always be on the dropdown primary element. -} - -// when the menu items are loaded from AJAX requests, the items are created dynamically -const defaultCreateDynamicMenu = $.fn.dropdown.settings.templates.menu; -$.fn.dropdown.settings.templates.menu = function(response, fields, preserveHTML, className) { - const ret = defaultCreateDynamicMenu(response, fields, preserveHTML, className); - const $wrapper = $('<div>').append(ret); - const $items = $wrapper.find('> .item'); - $items.each((_, item) => { - prepareMenuItem($(item)); - }); - return $wrapper.html(); -}; - function attachOneDropdownAria($dropdown) { - if ($dropdown.attr('data-aria-attached')) return; + if ($dropdown.attr('data-aria-attached') || $dropdown.hasClass('custom')) return; $dropdown.attr('data-aria-attached', 1); - const $textSearch = $dropdown.find('input.search').eq(0); - const $focusable = $textSearch.length ? $textSearch : $dropdown; // see comment below - if (!$focusable.length) return; - - // prepare menu list - const $menu = $dropdown.find('> .menu'); - if (!$menu.attr('id')) $menu.attr('id', generateAriaId()); - - // dropdown has 2 different focusing behaviors - // * with search input: the input is focused, and it works perfectly with aria-activedescendant pointing another sibling element. + // 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: + // 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 @@ -51,31 +25,83 @@ function attachOneDropdownAria($dropdown) { // TODO: multiple selection is not supported yet. - $focusable.attr({ - 'role': 'menu', - 'aria-haspopup': 'menu', - 'aria-controls': $menu.attr('id'), - 'aria-expanded': 'false', - }); + 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; - if ($dropdown.attr('data-content') && !$dropdown.attr('aria-label')) { + // 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 = $('<div>').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); - // update aria attributes according to current active/selected item - const refreshAria = () => { - const isMenuVisible = !$menu.is('.hidden') && !$menu.is('.animating.out'); - $focusable.attr('aria-expanded', isMenuVisible ? 'true' : 'false'); + // 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', + }); - let $active = $menu.find('> .item.active'); - if (!$active.length) $active = $menu.find('> .item.selected'); // it's strange that we need this fallback at the moment + // 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'); - // if there is an active item, use its id. if no active item, then the empty string is set - $focusable.attr('aria-activedescendant', $active.attr('id')); + // 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) => { @@ -85,16 +111,51 @@ function attachOneDropdownAria($dropdown) { 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.is('.js-aria-clickable'))) $item[0].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) - const deferredRefreshAria = () => { setTimeout(refreshAria, 0) }; // do not return any value, jQuery has return-value related behaviors. - $focusable.on('focus', deferredRefreshAria); - $focusable.on('mouseup', deferredRefreshAria); - $focusable.on('blur', deferredRefreshAria); + // 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) { |