Restore Accessibility for Dropdown

[zeripath]

This PR restores the vendored and patched dropdown.js from #8638. It
however, it partially abandons the calls to click() using instead the default
dropdown click calls instead. This prevents the issue of the dropdown
grabbing focus permanently however, this may have negative effects on
the effect of focus on the dropdowns.

Of note, the behaviour of the template selector dropdown on the repo
creation page is slightly odd - I don't believe that this odd behaviour
is caused by this PR but rather by the feed source for this. I suspect
that the dropdown should be adding a delete button to its selection.

Fix #15172
References: #7057

Signed-off-by: Andrew Thornton [email protected]

[codecov-commenter]

Codecov Report

Merging #16576 (801c4ce) into main (fd39e6d) will increase coverage by 0.01%.
The diff coverage is n/a.

@@            Coverage Diff             @@
##             main   #16576      +/-   ##
==========================================
+ Coverage   45.36%   45.38%   +0.01%     
==========================================
  Files         750      750              
  Lines       85115    85115              
==========================================
+ Hits        38612    38626      +14     
+ Misses      40256    40244      -12     
+ Partials     6247     6245       -2     

Impacted Files	Coverage Δ
services/pull/pull.go	42.13% <0.00%> (+0.40%)	⬆️
models/repo_list.go	77.64% <0.00%> (+0.78%)	⬆️
modules/queue/workerpool.go	54.58% <0.00%> (+1.52%)	⬆️
modules/queue/queue_bytefifo.go	77.24% <0.00%> (+3.59%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update fd39e6d...801c4ce. Read the comment docs.

[techknowlogick]

Tested w/ macOS voiceover and it was able to read the items in the dropdown.

Thanks @zeripath (and also to Jookia for your original work)

[silverwind]

I would suggest to copy the patched file to web_src/fomantic/node_modules/src/definitions/modules/dropdown.js during the make fomantic target, before the fomantic build runs, that way, we avoid loading the file twice which surely has unintended side-effects.

A even better approach would be to create a .patch and instead of a full-file replacement, or finally get this patch accepted by upstream.

[zeripath]

I would suggest to copy the patched file to web_src/fomantic/node_modules/src/definitions/modules/dropdown.js during the make fomantic target, before the fomantic build runs, that way, we avoid loading the file twice which surely has unintended side-effects.

Done.

A even better approach would be to create a .patch and instead of a full-file replacement, or finally get this patch accepted by upstream.

That doesn't help us right now. The current patch is here:

Patch

--- ../../../dist/components/dropdown.js	1985-10-26 09:15:00.000000000 +0100
+++ dropdown.js	2021-07-30 09:30:57.316168125 +0100
@@ -8,6 +8,13 @@
  *
  */
 
+/*
+ * 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';
@@ -41,6 +48,7 @@
     query          = arguments[0],
     methodInvoked  = (typeof query == 'string'),
     queryArguments = [].slice.call(arguments, 1),
+    lastAriaID = 1,
     returnedValue
   ;
 
@@ -133,6 +141,8 @@
 
             module.observeChanges();
             module.instantiate();
+
+            module.aria.setup();
           }
 
         },
@@ -333,6 +343,86 @@
           }
         },
 
+        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
@@ -379,6 +469,7 @@
             if(settings.allowTab) {
               module.set.tabbable();
             }
+            $item.attr('tabindex', '-1');
           },
           select: function() {
             var
@@ -525,6 +616,8 @@
               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();
@@ -547,6 +640,8 @@
           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
@@ -1548,6 +1643,7 @@
                         .closest(selector.item)
                           .addClass(className.selected)
                       ;
+                      module.aria.refreshDescendant();
                       event.preventDefault();
                     }
                   }
@@ -1564,6 +1660,7 @@
                         .find(selector.item).eq(0)
                           .addClass(className.selected)
                       ;
+                      module.aria.refreshDescendant();
                       event.preventDefault();
                     }
                   }
@@ -1588,6 +1685,7 @@
                     $nextItem
                       .addClass(className.selected)
                     ;
+                    module.aria.refreshDescendant();
                     module.set.scrollPosition($nextItem);
                     if(settings.selectOnKeydown && module.is.single()) {
                       module.set.selectedItem($nextItem);
@@ -1615,6 +1713,7 @@
                     $nextItem
                       .addClass(className.selected)
                     ;
+                    module.aria.refreshDescendant();
                     module.set.scrollPosition($nextItem);
                     if(settings.selectOnKeydown && module.is.single()) {
                       module.set.selectedItem($nextItem);
@@ -2584,6 +2683,7 @@
               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);
               }

I think we should be able to just use the hooks within fomantic-ui's dropdown.js to add the correct functionality though

[silverwind]

Does that patch cleanly apply on the current dropdown.js? If so, I suggest using git apply or the venerable patch command to patch the file on-the-fly before the fomantic build. It will make the upgrade to fomantic 2.8.8 easier if we can just apply a patch.

[silverwind]

Note that the typo fixes that are reverted in this PR are fine, the files should not have been changed like that as they are essentially build artifacts. If patching fails because of these typo changes, revert the files to original build output before applying the patch.

[Jookia]

Can you confirm that click handlers work for elements that supply its own click handler, like the contribution permissions dialogs?

[lafriks]

In a lot of places comments are changed to wrong ones

[zeripath]

In a lot of places comments are changed to wrong ones

These are autogenerated and vendored files. They are the result of make fomantic

The spelling changes that are occurring are because the spelling in these files should never have been changed.

[lafriks]

Did not notice it's in build, looked like just strange changes in comments from correct to wrong wording 😅

[kdumontnu]

Does v1.14 need a backport?

[fnetX]

No, v1.14 is unaffected.

[techknowlogick]

@lafriks / @a1012112796 you've both reviewed the backport, could you take a look at this PR?

[fnetX]

I waited for it to be deployed to try.gitea.io, and I can confirm that keyboard navigation for dropdowns (e.g. the language selection) is working fine again and that a screen reader reads out the elements (compared to a few minutes before where it didn't), just as with Gitea 1.14.

I have been trying Gitea with a screen reader recently, and I can confirm it's not really optimal. I think I'll open a few issues for stuff I notice, maybe this helps at getting a first idea before asking external auditors (don't want to slow this, but provide information in case this still takes a while), it might also save some money if stuff gets improved before (not sure).

[fnetX]

Thank you very much! @zeripath