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>

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.*
 

templates/repo/settings/collaboration.tmpl

@@ -19,10 +19,10 @@
 					</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="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>

web_src/fomantic/build/semantic.js

@@ -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);
               }

web_src/js/features/aria.js

@@ -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)));
+}

web_src/js/features/aria.md

@@ -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>
+```

web_src/js/features/common-global.js

@@ -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

web_src/js/features/repo-settings.js

@@ -6,12 +6,37 @@ const {appSubUrl, csrfToken} = window.config;
 
 export function initRepoSettingsCollaboration() {
   // Change collaborator access mode
-  $('.access-mode.menu .item').on('click', function () {
+  $('.page-content.repository .ui.dropdown.access-mode').each((_, e) => {
-    const $menu = $(this).parent();
+    const $dropdown = $(e);
-    $.post($menu.data('url'), {
+    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: $menu.data('uid'),
+          uid: $dropdown.attr('data-uid'),
-      mode: $(this).data('value')
+          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);
+      }
     });
   });
 }

web_src/less/_form.less

@@ -170,9 +170,9 @@ textarea:focus,
         margin-left: @create-page-form-input-padding;
       }
 
-      input,
+      .inline.field > input,
-      textarea {
+      .inline.field > textarea {
-        width: 50% !important;
+        width: 50%;
       }
     }