tom/forkjo - Forgejo: git.ar21.de

tom/forkjo

2 lines

39 B

Text

Raw Normal View History

a11y: Improve accessibility of dropdown menus (#8638) * js: Import Semantic-UI's dropdown.js (version 2.3.1) * js: Set tabindex=-1 on dropdown items Setting tabindex=-1 on focusable elements within dropdown menus allows the user to treat dropdown menus as a single focusable item with its own internal navigation using arrow keys. * js: Don't use jQuery to click menu items Menu items are often <a> elements, which jQuery refuses to trigger click events on. Instead it just bubbles up to the menu. Using HTMLElement's click method fixes this and makes menu items clickable from the keyboard using dropdown menus. * js: Set correct ARIA 1.1 roles on dropdown menus Setting role= makes assistive technology aware there is a widget here. In this case, Orca will now exit browse mode and allow us to capture keydown events when focused on a dropdown menu. It will also inform the user that there's a menu focused. Since dropdowns can be used in multiple elements each with different ARIA roles, a guessRole method is used to find the correct role. All roles I consider possible are listed, but only menu is implemented. * js: Set aria-expanded when dropdown menus show and hide This is deliberately done before the transition finishes so that screen readers get immediate feedback. * js: Set aria-label or aria-labelledby on dropdown menus This makes dropdown menu buttons screen reader accessible. aria-labelledby refers to an element using an ID, so the chosen labels are now assigned a unique ID- This ID is not stable, do not refer to it with user scripts. * js: Set aria-activedescendant on dropdown menus As the menus grab focus and navigate by tracking a 'selected' div class, assistive technology has no idea that what the current selection is. Assign IDs to each menu item and set aria-activedescendant to the ID of the currently selected menu item. When the menu is unfocused, remove aria-activedescendant- This isn't neccessary but in my experience it triggers Orca to remind the user of their current selection when re-focusing the menu. * Makefile: Make eslint ignore semantic.dropdown.js This file is taken from Semantic UI which isn't linted upstream. Ignore it as we won't fix these issues. * js: Add version note to semantic.dropdown.js * Add Md5 AppVer to templates/base/footer.tmpl Co-Authored-By: guillep2k <18600385+guillep2k@users.noreply.github.com> * Add Md5 AppVer to templates/pwa/serviceworker_js.tmpl Co-Authored-By: guillep2k <18600385+guillep2k@users.noreply.github.com> * semantic.dropdown.js -> semantic.dropdown.custom.js * Use eslintignore * remove bogus submodule

2019-11-08 18:33:21 +01:00

/public/js/semantic.dropdown.custom.js