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>
This commit is contained in:
wxiaoguang
GitHub
parent
1d04e8641d
commit
694441fec5
1
Makefile
1
Makefile
@ -703,7 +703,6 @@ fomantic:
|
||||
cd $(FOMANTIC_WORK_DIR) && npm install --no-save
|
||||
cp -f $(FOMANTIC_WORK_DIR)/theme.config.less $(FOMANTIC_WORK_DIR)/node_modules/fomantic-ui/src/theme.config
|
||||
cp -rf $(FOMANTIC_WORK_DIR)/_site $(FOMANTIC_WORK_DIR)/node_modules/fomantic-ui/src/
|
||||
cp -f web_src/js/vendor/dropdown.js $(FOMANTIC_WORK_DIR)/node_modules/fomantic-ui/src/definitions/modules
|
||||
cd $(FOMANTIC_WORK_DIR) && npx gulp -f node_modules/fomantic-ui/gulpfile.js build
|
||||
rm -f $(FOMANTIC_WORK_DIR)/build/*.min.*
|
||||
|
||||
|
||||
@ -19,13 +19,13 @@
|
||||
</div>
|
||||
<div class="ui eight wide column">
|
||||
{{svg "octicon-shield-lock"}}
|
||||
<div class="ui inline dropdown">
|
||||
<div class="ui inline dropdown access-mode" data-url="{{$.Link}}/access_mode" data-uid="{{.ID}}" data-last-value="{{printf "%d" .Collaboration.Mode}}">
|
||||
<div class="text">{{if eq .Collaboration.Mode 1}}{{$.i18n.Tr "repo.settings.collaboration.read"}}{{else if eq .Collaboration.Mode 2}}{{$.i18n.Tr "repo.settings.collaboration.write"}}{{else if eq .Collaboration.Mode 3}}{{$.i18n.Tr "repo.settings.collaboration.admin"}}{{else}}{{$.i18n.Tr "repo.settings.collaboration.undefined"}}{{end}}</div>
|
||||
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
|
||||
<div class="access-mode menu" data-url="{{$.Link}}/access_mode" data-uid="{{.ID}}">
|
||||
<div class="item" data-text="{{$.i18n.Tr "repo.settings.collaboration.admin"}}" data-value="3">{{$.i18n.Tr "repo.settings.collaboration.admin"}}</div>
|
||||
<div class="item" data-text="{{$.i18n.Tr "repo.settings.collaboration.write"}}" data-value="2">{{$.i18n.Tr "repo.settings.collaboration.write"}}</div>
|
||||
<div class="item" data-text="{{$.i18n.Tr "repo.settings.collaboration.read"}}" data-value="1">{{$.i18n.Tr "repo.settings.collaboration.read"}}</div>
|
||||
<div class="menu">
|
||||
<div class="item" data-text="{{$.i18n.Tr "repo.settings.collaboration.admin"}}" data-value="3">{{$.i18n.Tr "repo.settings.collaboration.admin"}}</div>
|
||||
<div class="item" data-text="{{$.i18n.Tr "repo.settings.collaboration.write"}}" data-value="2">{{$.i18n.Tr "repo.settings.collaboration.write"}}</div>
|
||||
<div class="item" data-text="{{$.i18n.Tr "repo.settings.collaboration.read"}}" data-value="1">{{$.i18n.Tr "repo.settings.collaboration.read"}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
104
web_src/fomantic/build/semantic.js
generated
104
web_src/fomantic/build/semantic.js
generated
@ -2827,13 +2827,6 @@ $.fn.dimmer.settings = {
|
||||
*
|
||||
*/
|
||||
|
||||
/*
|
||||
* Copyright 2019 The Gitea Authors
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
* This version has been modified by Gitea to improve accessibility.
|
||||
*/
|
||||
|
||||
;(function ($, window, document, undefined) {
|
||||
|
||||
'use strict';
|
||||
@ -2867,7 +2860,6 @@ $.fn.dropdown = function(parameters) {
|
||||
query = arguments[0],
|
||||
methodInvoked = (typeof query == 'string'),
|
||||
queryArguments = [].slice.call(arguments, 1),
|
||||
lastAriaID = 1,
|
||||
returnedValue
|
||||
;
|
||||
|
||||
@ -2960,8 +2952,6 @@ $.fn.dropdown = function(parameters) {
|
||||
|
||||
module.observeChanges();
|
||||
module.instantiate();
|
||||
|
||||
module.aria.setup();
|
||||
}
|
||||
|
||||
},
|
||||
@ -3162,86 +3152,6 @@ $.fn.dropdown = function(parameters) {
|
||||
}
|
||||
},
|
||||
|
||||
aria: {
|
||||
setup: function() {
|
||||
var role = module.aria.guessRole();
|
||||
if( role !== 'menu' ) {
|
||||
return;
|
||||
}
|
||||
$module.attr('aria-busy', 'true');
|
||||
$module.attr('role', 'menu');
|
||||
$module.attr('aria-haspopup', 'menu');
|
||||
$module.attr('aria-expanded', 'false');
|
||||
$menu.find('.divider').attr('role', 'separator');
|
||||
$item.attr('role', 'menuitem');
|
||||
$item.each(function (index, item) {
|
||||
if( !item.id ) {
|
||||
item.id = module.aria.nextID('menuitem');
|
||||
}
|
||||
});
|
||||
$text = $module
|
||||
.find('> .text')
|
||||
.eq(0)
|
||||
;
|
||||
if( $module.data('content') ) {
|
||||
$text.attr('aria-hidden');
|
||||
$module.attr('aria-label', $module.data('content'));
|
||||
}
|
||||
else {
|
||||
$text.attr('id', module.aria.nextID('menutext'));
|
||||
$module.attr('aria-labelledby', $text.attr('id'));
|
||||
}
|
||||
$module.attr('aria-busy', 'false');
|
||||
},
|
||||
nextID: function(prefix) {
|
||||
var nextID;
|
||||
do {
|
||||
nextID = prefix + '_' + lastAriaID++;
|
||||
} while( document.getElementById(nextID) );
|
||||
return nextID;
|
||||
},
|
||||
setExpanded: function(expanded) {
|
||||
if( $module.attr('aria-haspopup') ) {
|
||||
$module.attr('aria-expanded', expanded);
|
||||
}
|
||||
},
|
||||
refreshDescendant: function() {
|
||||
if( $module.attr('aria-haspopup') !== 'menu' ) {
|
||||
return;
|
||||
}
|
||||
var
|
||||
$currentlySelected = $item.not(selector.unselectable).filter('.' + className.selected).eq(0),
|
||||
$activeItem = $menu.children('.' + className.active).eq(0),
|
||||
$selectedItem = ($currentlySelected.length > 0)
|
||||
? $currentlySelected
|
||||
: $activeItem
|
||||
;
|
||||
if( $selectedItem ) {
|
||||
$module.attr('aria-activedescendant', $selectedItem.attr('id'));
|
||||
}
|
||||
else {
|
||||
module.aria.removeDescendant();
|
||||
}
|
||||
},
|
||||
removeDescendant: function() {
|
||||
if( $module.attr('aria-haspopup') == 'menu' ) {
|
||||
$module.removeAttr('aria-activedescendant');
|
||||
}
|
||||
},
|
||||
guessRole: function() {
|
||||
var
|
||||
isIcon = $module.hasClass('icon'),
|
||||
hasSearch = module.has.search(),
|
||||
hasInput = ($input.length > 0),
|
||||
isMultiple = module.is.multiple()
|
||||
;
|
||||
if ( !isIcon && !hasSearch && !hasInput && !isMultiple ) {
|
||||
return 'menu';
|
||||
}
|
||||
return 'unknown';
|
||||
}
|
||||
},
|
||||
|
||||
setup: {
|
||||
api: function() {
|
||||
var
|
||||
@ -3288,7 +3198,6 @@ $.fn.dropdown = function(parameters) {
|
||||
if(settings.allowTab) {
|
||||
module.set.tabbable();
|
||||
}
|
||||
$item.attr('tabindex', '-1');
|
||||
},
|
||||
select: function() {
|
||||
var
|
||||
@ -3435,8 +3344,6 @@ $.fn.dropdown = function(parameters) {
|
||||
return true;
|
||||
}
|
||||
if(settings.onShow.call(element) !== false) {
|
||||
module.aria.setExpanded(true);
|
||||
module.aria.refreshDescendant();
|
||||
module.animate.show(function() {
|
||||
if( module.can.click() ) {
|
||||
module.bind.intent();
|
||||
@ -3459,8 +3366,6 @@ $.fn.dropdown = function(parameters) {
|
||||
if( module.is.active() && !module.is.animatingOutward() ) {
|
||||
module.debug('Hiding dropdown');
|
||||
if(settings.onHide.call(element) !== false) {
|
||||
module.aria.setExpanded(false);
|
||||
module.aria.removeDescendant();
|
||||
module.animate.hide(function() {
|
||||
module.remove.visible();
|
||||
// hidding search focus
|
||||
@ -4414,7 +4319,7 @@ $.fn.dropdown = function(parameters) {
|
||||
// allow selection with menu closed
|
||||
if(isAdditionWithoutMenu) {
|
||||
module.verbose('Selecting item from keyboard shortcut', $selectedItem);
|
||||
$selectedItem[0].click();
|
||||
module.event.item.click.call($selectedItem, event);
|
||||
if(module.is.searchSelection()) {
|
||||
module.remove.searchTerm();
|
||||
}
|
||||
@ -4434,7 +4339,7 @@ $.fn.dropdown = function(parameters) {
|
||||
}
|
||||
else if(selectedIsSelectable) {
|
||||
module.verbose('Selecting item from keyboard shortcut', $selectedItem);
|
||||
$selectedItem[0].click();
|
||||
module.event.item.click.call($selectedItem, event);
|
||||
if(module.is.searchSelection()) {
|
||||
module.remove.searchTerm();
|
||||
if(module.is.multiple()) {
|
||||
@ -4462,7 +4367,6 @@ $.fn.dropdown = function(parameters) {
|
||||
.closest(selector.item)
|
||||
.addClass(className.selected)
|
||||
;
|
||||
module.aria.refreshDescendant();
|
||||
event.preventDefault();
|
||||
}
|
||||
}
|
||||
@ -4479,7 +4383,6 @@ $.fn.dropdown = function(parameters) {
|
||||
.find(selector.item).eq(0)
|
||||
.addClass(className.selected)
|
||||
;
|
||||
module.aria.refreshDescendant();
|
||||
event.preventDefault();
|
||||
}
|
||||
}
|
||||
@ -4504,7 +4407,6 @@ $.fn.dropdown = function(parameters) {
|
||||
$nextItem
|
||||
.addClass(className.selected)
|
||||
;
|
||||
module.aria.refreshDescendant();
|
||||
module.set.scrollPosition($nextItem);
|
||||
if(settings.selectOnKeydown && module.is.single()) {
|
||||
module.set.selectedItem($nextItem);
|
||||
@ -4532,7 +4434,6 @@ $.fn.dropdown = function(parameters) {
|
||||
$nextItem
|
||||
.addClass(className.selected)
|
||||
;
|
||||
module.aria.refreshDescendant();
|
||||
module.set.scrollPosition($nextItem);
|
||||
if(settings.selectOnKeydown && module.is.single()) {
|
||||
module.set.selectedItem($nextItem);
|
||||
@ -5502,7 +5403,6 @@ $.fn.dropdown = function(parameters) {
|
||||
module.set.scrollPosition($nextValue);
|
||||
$selectedItem.removeClass(className.selected);
|
||||
$nextValue.addClass(className.selected);
|
||||
module.aria.refreshDescendant();
|
||||
if(settings.selectOnKeydown && module.is.single()) {
|
||||
module.set.selectedItem($nextValue);
|
||||
}
|
||||
|
||||
100
web_src/js/features/aria.js
Normal file
100
web_src/js/features/aria.js
Normal file
@ -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)));
|
||||
}
|
||||
46
web_src/js/features/aria.md
Normal file
46
web_src/js/features/aria.md
Normal file
@ -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>
|
||||
```
|
||||
@ -4,6 +4,7 @@ import {mqBinarySearch} from '../utils.js';
|
||||
import createDropzone from './dropzone.js';
|
||||
import {initCompColorPicker} from './comp/ColorPicker.js';
|
||||
import {showGlobalErrorMessage} from '../bootstrap.js';
|
||||
import {attachDropdownAria} from './aria.js';
|
||||
|
||||
const {appUrl, csrfToken} = window.config;
|
||||
|
||||
@ -97,24 +98,27 @@ export function initGlobalCommon() {
|
||||
}
|
||||
|
||||
// Semantic UI modules.
|
||||
$('.dropdown:not(.custom)').dropdown({
|
||||
const $uiDropdowns = $('.ui.dropdown');
|
||||
$uiDropdowns.filter(':not(.custom)').dropdown({
|
||||
fullTextSearch: 'exact'
|
||||
});
|
||||
$('.jump.dropdown').dropdown({
|
||||
$uiDropdowns.filter('.jump').dropdown({
|
||||
action: 'hide',
|
||||
onShow() {
|
||||
$('.tooltip').popup('hide');
|
||||
},
|
||||
fullTextSearch: 'exact'
|
||||
});
|
||||
$('.slide.up.dropdown').dropdown({
|
||||
$uiDropdowns.filter('.slide.up').dropdown({
|
||||
transition: 'slide up',
|
||||
fullTextSearch: 'exact'
|
||||
});
|
||||
$('.upward.dropdown').dropdown({
|
||||
$uiDropdowns.filter('.upward').dropdown({
|
||||
direction: 'upward',
|
||||
fullTextSearch: 'exact'
|
||||
});
|
||||
attachDropdownAria($uiDropdowns);
|
||||
|
||||
$('.ui.checkbox').checkbox();
|
||||
|
||||
// init popups
|
||||
|
||||
@ -6,12 +6,37 @@ const {appSubUrl, csrfToken} = window.config;
|
||||
|
||||
export function initRepoSettingsCollaboration() {
|
||||
// Change collaborator access mode
|
||||
$('.access-mode.menu .item').on('click', function () {
|
||||
const $menu = $(this).parent();
|
||||
$.post($menu.data('url'), {
|
||||
_csrf: csrfToken,
|
||||
uid: $menu.data('uid'),
|
||||
mode: $(this).data('value')
|
||||
$('.page-content.repository .ui.dropdown.access-mode').each((_, e) => {
|
||||
const $dropdown = $(e);
|
||||
const $text = $dropdown.find('> .text');
|
||||
$dropdown.dropdown({
|
||||
action(_text, value) {
|
||||
const lastValue = $dropdown.attr('data-last-value');
|
||||
$.post($dropdown.attr('data-url'), {
|
||||
_csrf: csrfToken,
|
||||
uid: $dropdown.attr('data-uid'),
|
||||
mode: value,
|
||||
}).fail(() => {
|
||||
$text.text('(error)'); // prevent from misleading users when error occurs
|
||||
$dropdown.attr('data-last-value', lastValue);
|
||||
});
|
||||
$dropdown.attr('data-last-value', value);
|
||||
$dropdown.dropdown('hide');
|
||||
},
|
||||
onChange(_value, text, _$choice) {
|
||||
$text.text(text); // update the text when using keyboard navigating
|
||||
},
|
||||
onHide() {
|
||||
// set to the really selected value, defer to next tick to make sure `action` has finished its work because the calling order might be onHide -> action
|
||||
setTimeout(() => {
|
||||
const $item = $dropdown.dropdown('get item', $dropdown.attr('data-last-value'));
|
||||
if ($item) {
|
||||
$dropdown.dropdown('set selected', $dropdown.attr('data-last-value'));
|
||||
} else {
|
||||
$text.text('(N/A)'); // prevent from misleading users when the access mode is undefined
|
||||
}
|
||||
}, 0);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
4338
web_src/js/vendor/dropdown.js
vendored
4338
web_src/js/vendor/dropdown.js
vendored
File diff suppressed because it is too large
Load Diff
@ -170,9 +170,9 @@ textarea:focus,
|
||||
margin-left: @create-page-form-input-padding;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
width: 50% !important;
|
||||
.inline.field > input,
|
||||
.inline.field > textarea {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user