always use combobox

Author: wxiaoguang

web_src/js/features/aria.js

@@ -29,9 +29,8 @@ function attachOneDropdownAria($dropdown) {
   const $focusable = $textSearch.length ? $textSearch : $dropdown; // the primary element for focus, see comment above
   if (!$focusable.length) return;
 
-  // detect if the dropdown has an input, if yes, it works like a combobox, otherwise it works like a menu
-  // or use a special class to indicate it's a combobox/menu in the future
-  const isComboBox = $dropdown.find('input').length > 0;
+  // There are 2 possible solutions about the role: combobox or menu. Always use combobox, see "aria.md" for details.
+  const isComboBox = true; // $dropdown.find('input').length > 0;
 
   const focusableRole = isComboBox ? 'combobox' : 'button';
   const listPopupRole = isComboBox ? 'listbox' : 'menu';
@@ -44,6 +43,7 @@ function attachOneDropdownAria($dropdown) {
     $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.
   }
 
+  // delegate the dropdown's template function to add aria attributes
   const dropdownTemplates = {...$dropdown.dropdown('setting', 'templates')};
   const dropdownTemplatesMenuOld = dropdownTemplates.menu;
   dropdownTemplates.menu = function(response, fields, preserveHTML, className) {
@@ -70,6 +70,7 @@ function attachOneDropdownAria($dropdown) {
   // this role could only be changed after its content is ready, otherwise some browsers+readers (like Chrome+AppleVoice) crash
   $menu.attr('role', listPopupRole);
 
+  // make the primary element (focusable) aria-friendly
   $focusable.attr({
     'role': $focusable.attr('role') ?? focusableRole,
     'aria-haspopup': listPopupRole,

web_src/js/features/aria.md

@@ -48,7 +48,21 @@ There are different solutions:
 
 ## Fomantic UI Dropdown
 
-When the dropdown has input elements, use `role=combobox`, otherwise use `role=menu` (see `aria.js`) for actions.
+There are 2 possible solutions about the role: combobox or menu
+
+1. Detect if the dropdown has an input, if yes, it works like a combobox, otherwise it works like a menu
+2. Always use "combobox", never use "menu"
+
+According to the public discussion with fsologureng in chat channel, we think it's better to use "combobox" for all dropdowns.
+
+> On the old web there were many menus implemented with an auto-submit select,
+> but that didn't change the fact that they were selects for screen readers.
+> That is the case with Fomantic dropdowns as used in Gitea.
+> Implementations of auto-submit select menus fell behind in modern web design precisely because they are not usable or accessible."
+>
+> We can mark all "dropdown" as "combobox", never use "menu" in code. Do you think this solution is clear enough?
+>
+> Yes. I think it will provide better accessibility because is more coherent with the current fomantic based implementation.
 
 Reference: