forked from forgejo/forgejo
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
9 changed files with 195 additions and 4459 deletions
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);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue