Skip to content

Restore Accessibility for Dropdown #16576

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Aug 5, 2021
Merged

Restore Accessibility for Dropdown #16576

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
1372bac
Restore #10096/#8638 and re-fix #15172
zeripath Jul 29, 2021
edca2c1
Merge branch 'main' into reattempt-a11y-fixes
zeripath Jul 29, 2021
8fd6415
leverage fomantic-build instead
zeripath Jul 30, 2021
42ceef7
as per jookia
zeripath Aug 3, 2021
41dae97
Merge branch 'main' into reattempt-a11y-fixes
zeripath Aug 3, 2021
801c4ce
Merge branch 'main' into reattempt-a11y-fixes
zeripath Aug 5, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .eslintrc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ root: true
reportUnusedDisableDirectives: true

ignorePatterns:
- /web_src/js/vendor
- /templates/base/head.tmpl
- /templates/repo/activity.tmpl
- /templates/repo/view_file.tmpl
Expand Down
1 change: 1 addition & 0 deletions Makefile
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -699,6 +699,7 @@ 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

.PHONY: webpack
Expand Down
4 changes: 2 additions & 2 deletions web_src/fomantic/build/semantic.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30873,7 +30873,7 @@ ol.ui.suffixed.list li:before,
List
---------------*/

/* Menu divider shouldn't apply */
/* Menu divider shouldnt apply */

.ui.menu .list .item:before {
background: none !important;
Expand Down Expand Up @@ -31802,7 +31802,7 @@ Floated Menu / Item
opacity: 1;
}

/* Icon Glyph */
/* Icon Gylph */

.ui.icon.menu i.icon:before {
opacity: 1;
Expand Down
116 changes: 108 additions & 8 deletions web_src/fomantic/build/semantic.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,7 @@ $.api = $.fn.api = function(parameters) {
response = JSON.parse(response);
}
catch(e) {
// isn't json string
// isnt json string
}
}
return response;
Expand Down Expand Up @@ -2220,7 +2220,7 @@ $.fn.dimmer = function(parameters) {

event: {
click: function(event) {
module.verbose('Determining if event occurred on dimmer', event);
module.verbose('Determining if event occured on dimmer', event);
if( $dimmer.find(event.target).length === 0 || $(event.target).is(selector.content) ) {
module.hide();
event.stopImmediatePropagation();
Expand Down Expand Up @@ -2827,6 +2827,13 @@ $.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';
Expand Down Expand Up @@ -2860,6 +2867,7 @@ $.fn.dropdown = function(parameters) {
query = arguments[0],
methodInvoked = (typeof query == 'string'),
queryArguments = [].slice.call(arguments, 1),
lastAriaID = 1,
returnedValue
;

Expand Down Expand Up @@ -2952,6 +2960,8 @@ $.fn.dropdown = function(parameters) {

module.observeChanges();
module.instantiate();

module.aria.setup();
}

},
Expand Down Expand Up @@ -3152,6 +3162,86 @@ $.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
Expand Down Expand Up @@ -3198,6 +3288,7 @@ $.fn.dropdown = function(parameters) {
if(settings.allowTab) {
module.set.tabbable();
}
$item.attr('tabindex', '-1');
},
select: function() {
var
Expand Down Expand Up @@ -3344,6 +3435,8 @@ $.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();
Expand All @@ -3366,9 +3459,11 @@ $.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();
// hiding search focus
// hidding search focus
if ( module.is.focusedOnSearch() && preventBlur !== true ) {
$search.blur();
}
Expand Down Expand Up @@ -4319,7 +4414,7 @@ $.fn.dropdown = function(parameters) {
// allow selection with menu closed
if(isAdditionWithoutMenu) {
module.verbose('Selecting item from keyboard shortcut', $selectedItem);
module.event.item.click.call($selectedItem, event);
$selectedItem[0].click();
if(module.is.searchSelection()) {
module.remove.searchTerm();
}
Expand All @@ -4339,7 +4434,7 @@ $.fn.dropdown = function(parameters) {
}
else if(selectedIsSelectable) {
module.verbose('Selecting item from keyboard shortcut', $selectedItem);
module.event.item.click.call($selectedItem, event);
$selectedItem[0].click();
if(module.is.searchSelection()) {
module.remove.searchTerm();
if(module.is.multiple()) {
Expand Down Expand Up @@ -4367,6 +4462,7 @@ $.fn.dropdown = function(parameters) {
.closest(selector.item)
.addClass(className.selected)
;
module.aria.refreshDescendant();
event.preventDefault();
}
}
Expand All @@ -4383,6 +4479,7 @@ $.fn.dropdown = function(parameters) {
.find(selector.item).eq(0)
.addClass(className.selected)
;
module.aria.refreshDescendant();
event.preventDefault();
}
}
Expand All @@ -4407,6 +4504,7 @@ $.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);
Expand Down Expand Up @@ -4434,6 +4532,7 @@ $.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);
Expand Down Expand Up @@ -5403,6 +5502,7 @@ $.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);
}
Expand Down Expand Up @@ -11937,7 +12037,7 @@ $.fn.progress = function(parameters) {
*
* @param min A minimum value within multiple values
* @param total A total amount of multiple values
* @returns {number} A precision. Could be 1, 10, 100, ... 1e+10.
* @returns {number} A precison. Could be 1, 10, 100, ... 1e+10.
*/
derivePrecision: function(min, total) {
var precisionPower = 0
Expand Down Expand Up @@ -12837,7 +12937,7 @@ $.fn.progress.settings = {
nonNumeric : 'Progress value is non numeric',
tooHigh : 'Value specified is above 100%',
tooLow : 'Value specified is below 0%',
sumExceedsTotal : 'Sum of multiple values exceed total',
sumExceedsTotal : 'Sum of multple values exceed total',
},

regExp: {
Expand Down Expand Up @@ -18076,7 +18176,7 @@ $.fn.transition.settings = {

// possible errors
error: {
noAnimation : 'Element is no longer attached to DOM. Unable to animate. Use silent setting to suppress this warning in production.',
noAnimation : 'Element is no longer attached to DOM. Unable to animate. Use silent setting to surpress this warning in production.',
repeated : 'That animation is already occurring, cancelling repeated animation',
method : 'The method you called is not defined',
support : 'This browser does not support CSS animations'
Expand Down
Loading