Remove customized (unmaintained) dropdown, improve aria a11y for dropdown (#19861)
* Remove customized (unmaintained) dropdown, improve aria a11y for dropdown * fix repo permission * use action instead of onChange * re-order the CSS selector * fix dropdown behavior for repo permissions, make elements inside menu item non-focusable * use menu/menuitem instead of combobox/option. use tooltip(data-content) for aria-label, prevent from repeated attaching * click menu item when pressing Enter * code format * fix repo permission * repo setting: prevent from misleading users when error occurs * fine tune the repo collaboration access mode dropdown (in case the access mode is undefined in the template) Co-authored-by: zeripath <art27@cantab.net> Co-authored-by: techknowlogick <techknowlogick@gitea.io>tokarchuk/v1.17
wxiaoguang
3 years ago
committed by
GitHub
parent
1d04e8641d
commit
694441fec5
@ -0,0 +1,100 @@ |
||||
import $ from 'jquery'; |
||||
|
||||
let ariaIdCounter = 0; |
||||
|
||||
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; |
||||
$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.
|
||||
// * without search input (but the readonly text), the dropdown itself is focused. then the aria-activedescendant points to the element inside dropdown
|
||||
|
||||
// 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 not supported yet.
|
||||
|
||||
$focusable.attr({ |
||||
'role': 'menu', |
||||
'aria-haspopup': 'menu', |
||||
'aria-controls': $menu.attr('id'), |
||||
'aria-expanded': 'false', |
||||
}); |
||||
|
||||
if ($dropdown.attr('data-content') && !$dropdown.attr('aria-label')) { |
||||
$dropdown.attr('aria-label', $dropdown.attr('data-content')); |
||||
} |
||||
|
||||
$menu.find('> .item').each((_, item) => { |
||||
prepareMenuItem($(item)); |
||||
}); |
||||
|
||||
// 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'); |
||||
|
||||
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
|
||||
|
||||
// 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')); |
||||
}; |
||||
|
||||
$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 $item = $dropdown.dropdown('get item', $dropdown.dropdown('get value')); |
||||
// if the selected item is clickable, then trigger the click event. in the future there could be a special CSS class for it.
|
||||
if ($item && $item.is('a')) $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); |
||||
$dropdown.on('keyup', (e) => { if (e.key.startsWith('Arrow')) deferredRefreshAria(); }); |
||||
} |
||||
|
||||
export function attachDropdownAria($dropdowns) { |
||||
$dropdowns.each((_, e) => attachOneDropdownAria($(e))); |
||||
} |
||||
@ -0,0 +1,46 @@ |
||||
**This document is used as aria/a11y reference for future developers** |
||||
|
||||
## ARIA Dropdown |
||||
|
||||
There are different solutions: |
||||
* combobox + listbox + option |
||||
* menu + menuitem |
||||
|
||||
At the moment, `menu + menuitem` seems to work better with Fomantic UI Dropdown, so we only use it now. |
||||
|
||||
```html |
||||
<div> |
||||
<input role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="the-menu-listbox" aria-activedescendant="item-id-123456"> |
||||
<ul id="the-menu-listbox" role="listbox"> |
||||
<li role="option" id="item-id-123456" aria-selected="true"> |
||||
<a tabindex="-1" href="....">....</a> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
``` |
||||
|
||||
|
||||
## Fomantic UI Dropdown |
||||
|
||||
```html |
||||
<!-- read-only dropdown --> |
||||
<div class="ui dropdown"> <!-- focused here, then it's not perfect to use aria-activedescendant to point to the menu item --> |
||||
<input type="hidden" ...> |
||||
<div class="text">Default</div> |
||||
<div class="menu transition hidden" tabindex="-1"> |
||||
<div class="item active selected">Default</div> |
||||
<div class="item">...</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- search input dropdown --> |
||||
<div class="ui dropdown"> |
||||
<input type="hidden" ...> |
||||
<input class="search" autocomplete="off" tabindex="0"> <!-- focused here --> |
||||
<div class="text"></div> |
||||
<div class="menu transition visible" tabindex="-1"> |
||||
<div class="item selected">...</div> |
||||
<div class="item">...</div> |
||||
</div> |
||||
</div> |
||||
``` |
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue