* 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>tags/v1.18.0-dev
@@ -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> |
@@ -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); | |||
} |
@@ -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> | |||
``` |
@@ -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); | |||
} | |||
}); | |||
}); | |||
} |
@@ -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%; | |||
} | |||
} | |||