Restore Accessibility for Dropdown #16576

zeripath · 2021-07-29T22:10:12Z

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]

This PR restores the vendored and patched dropdow from #8638. It however, 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 · 2021-07-29T22:23:50Z

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 · 2021-07-30T07:54:15Z

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.

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

zeripath · 2021-07-30T08:38:52Z

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 · 2021-07-30T10:20:47Z

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 · 2021-07-30T10:29:58Z

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 · 2021-07-30T20:03:59Z

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

web_src/fomantic/build/semantic.css

lafriks · 2021-08-03T21:29:21Z

In a lot of places comments are changed to wrong ones

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

zeripath · 2021-08-03T22:48:16Z

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 · 2021-08-03T22:49:57Z

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

…tea#16576) Backport go-gitea#16576 This PR restores the vendored and patched dropdow from go-gitea#8638. It however, it partially abandons the call 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 go-gitea#15172 References: go-gitea#7057 Signed-off-by: Andrew Thornton <[email protected]> as per jookia Signed-off-by: Andrew Thornton <[email protected]>

…tea#16576) Backport go-gitea#16576 This PR restores the vendored and patched dropdow from go-gitea#8638. It however, it partially abandons the call 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 go-gitea#15172 References: go-gitea#7057 Signed-off-by: Andrew Thornton <[email protected]>

Backport #16576 This PR restores the vendored and patched dropdow from #8638. It however, it partially abandons the call 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]>

## [1.15.0-rc3](https://github.com/go-gitea/gitea/releases/tag/v1.15.0-rc3) - 2021-08-04 * BREAKING * Upgrade to the latest version of golang-jwt and increase minimum go to 1.15 (go-gitea#16590) (go-gitea#16606) * SECURITY * Upgrade to the latest version of golang-jwt and increase minimum go to 1.15 (go-gitea#16590) (go-gitea#16606) * Switch to maintained jwt lib (go-gitea#16532) (go-gitea#16533) * Correctly create of git-daemon-export-ok files (go-gitea#16508) (go-gitea#16514) * Don't show private user's repo in explore view (go-gitea#16550) (go-gitea#16554) * API * Swagger AccessToken fixes (go-gitea#16574) (go-gitea#16597) * Set AllowedHeaders on API CORS handler (go-gitea#16524) (go-gitea#16618) * BUGFIXES * Restore Accessibility for Dropdown (go-gitea#16576) (go-gitea#16617) * Pass down SignedUserName down to AccessLogger context (go-gitea#16605) (go-gitea#16616) * Fix table alignment in markdown (go-gitea#16596) (go-gitea#16602) * Fix 500 on first wiki page (go-gitea#16586) (go-gitea#16598) * Lock goth/gothic and Re-attempt OAuth2 registration on login if registration failed at startup (go-gitea#16564) (go-gitea#16570) * Upgrade levelqueue to v0.4.0 (go-gitea#16560) (go-gitea#16561) * Handle too long PR titles correctly (go-gitea#16517) (go-gitea#16549) * Fix data race in bleve indexer (go-gitea#16474) (go-gitea#16509) * Restore CORS on git smart http protocol (go-gitea#16496) (go-gitea#16506) * Fix race in log (go-gitea#16490) (go-gitea#16505) * Fix prepareWikiFileName to respect existing unescaped files (go-gitea#16487) (go-gitea#16498) * Make cancel from CatFileBatch and CatFileBatchCheck wait for the command to end (go-gitea#16479) (go-gitea#16480) * Update notification table with only latest data (go-gitea#16445) (go-gitea#16469) * Revert to use alpine 3.13 (go-gitea#16451) (go-gitea#16452) * Fix crash following ldap authentication update (go-gitea#16447) (go-gitea#16448) * Fix direct creation of external users on admin page (partial go-gitea#16612) (go-gitea#16613) Signed-off-by: Andrew Thornton <[email protected]>

kdumontnu · 2021-08-05T20:18:00Z

Does v1.14 need a backport?

fnetX · 2021-08-05T20:18:58Z

No, v1.14 is unaffected.

techknowlogick · 2021-08-05T21:27:17Z

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

fnetX · 2021-08-05T23:05:07Z

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 · 2021-08-05T23:05:22Z

Thank you very much! @zeripath

* Changelog for 1.15.0-rc3 ## [1.15.0-rc3](https://github.com/go-gitea/gitea/releases/tag/v1.15.0-rc3) - 2021-08-04 * BREAKING * Upgrade to the latest version of golang-jwt and increase minimum go to 1.15 (#16590) (#16606) * SECURITY * Upgrade to the latest version of golang-jwt and increase minimum go to 1.15 (#16590) (#16606) * Switch to maintained jwt lib (#16532) (#16533) * Correctly create of git-daemon-export-ok files (#16508) (#16514) * Don't show private user's repo in explore view (#16550) (#16554) * API * Swagger AccessToken fixes (#16574) (#16597) * Set AllowedHeaders on API CORS handler (#16524) (#16618) * BUGFIXES * Restore Accessibility for Dropdown (#16576) (#16617) * Pass down SignedUserName down to AccessLogger context (#16605) (#16616) * Fix table alignment in markdown (#16596) (#16602) * Fix 500 on first wiki page (#16586) (#16598) * Lock goth/gothic and Re-attempt OAuth2 registration on login if registration failed at startup (#16564) (#16570) * Upgrade levelqueue to v0.4.0 (#16560) (#16561) * Handle too long PR titles correctly (#16517) (#16549) * Fix data race in bleve indexer (#16474) (#16509) * Restore CORS on git smart http protocol (#16496) (#16506) * Fix race in log (#16490) (#16505) * Fix prepareWikiFileName to respect existing unescaped files (#16487) (#16498) * Make cancel from CatFileBatch and CatFileBatchCheck wait for the command to end (#16479) (#16480) * Update notification table with only latest data (#16445) (#16469) * Revert to use alpine 3.13 (#16451) (#16452) * Fix crash following ldap authentication update (#16447) (#16448) * Fix direct creation of external users on admin page (partial #16612) (#16613) Signed-off-by: Andrew Thornton <[email protected]> * Update CHANGELOG.md Co-authored-by: techknowlogick <[email protected]> * Update CHANGELOG.md Co-authored-by: zeripath <[email protected]> * Update CHANGELOG.md * Update CHANGELOG.md Co-authored-by: techknowlogick <[email protected]> Co-authored-by: Lauris BH <[email protected]>

Frontport go-gitea#16621 ## [1.15.0-rc3](https://github.com/go-gitea/gitea/releases/tag/v1.15.0-rc3) - 2021-08-06 * BREAKING * Upgrade to the latest version of golang-jwt and increase minimum go to 1.15 (go-gitea#16590) (go-gitea#16606) * SECURITY * Upgrade to the latest version of golang-jwt and increase minimum go to 1.15 (go-gitea#16590) (go-gitea#16606) * Correctly create of git-daemon-export-ok files (go-gitea#16508) (go-gitea#16514) * Don't show private user's repo in explore view (go-gitea#16550) (go-gitea#16554) * Update node tar dependency to 6.1.6 (go-gitea#16622) (go-gitea#16623) * API * Swagger AccessToken fixes (go-gitea#16574) (go-gitea#16597) * Set AllowedHeaders on API CORS handler (go-gitea#16524) (go-gitea#16618) * BUGFIXES * Restore Accessibility for Dropdown (go-gitea#16576) (go-gitea#16617) * Pass down SignedUserName down to AccessLogger context (go-gitea#16605) (go-gitea#16616) * Fix table alignment in markdown (go-gitea#16596) (go-gitea#16602) * Fix 500 on first wiki page (go-gitea#16586) (go-gitea#16598) * Lock goth/gothic and Re-attempt OAuth2 registration on login if registration failed at startup (go-gitea#16564) (go-gitea#16570) * Upgrade levelqueue to v0.4.0 (go-gitea#16560) (go-gitea#16561) * Handle too long PR titles correctly (go-gitea#16517) (go-gitea#16549) * Fix data race in bleve indexer (go-gitea#16474) (go-gitea#16509) * Restore CORS on git smart http protocol (go-gitea#16496) (go-gitea#16506) * Fix race in log (go-gitea#16490) (go-gitea#16505) * Fix prepareWikiFileName to respect existing unescaped files (go-gitea#16487) (go-gitea#16498) * Make cancel from CatFileBatch and CatFileBatchCheck wait for the command to end (go-gitea#16479) (go-gitea#16480) * Update notification table with only latest data (go-gitea#16445) (go-gitea#16469) * Revert to use alpine 3.13 (go-gitea#16451) (go-gitea#16452) * Fix crash following ldap authentication update (go-gitea#16447) (go-gitea#16448) * Fix direct creation of external users on admin page (partial go-gitea#16612) (go-gitea#16613) * Prevent 500 on draft releases without tag (go-gitea#16634) (go-gitea#16636) Signed-off-by: Andrew Thornton <[email protected]> Co-authored-by: techknowlogick <[email protected]> Co-authored-by: Lauris BH <[email protected]>

zeripath added kind/bug backport/v1.15 labels Jul 29, 2021

zeripath added this to the 1.16.0 milestone Jul 29, 2021

GiteaBot added the lgtm/need 2 label Jul 29, 2021

Merge branch 'main' into reattempt-a11y-fixes

edca2c1

techknowlogick approved these changes Jul 30, 2021

View changes

GiteaBot added lgtm/need 1 and removed lgtm/need 2 labels Jul 30, 2021

leverage fomantic-build instead

8fd6415

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

zeripath mentioned this pull request Jul 30, 2021

Reintegrate the dropdown patch using fomantic hooks and template changes #16581

Open

lafriks reviewed Aug 3, 2021

View changes

web_src/fomantic/build/semantic.css Show resolved Hide resolved

as per jookia

42ceef7

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

Merge branch 'main' into reattempt-a11y-fixes

41dae97

zeripath mentioned this pull request Aug 4, 2021

Restore Accessibility for Dropdown (#16576) #16617

Merged

zeripath added the backport/done label Aug 4, 2021

zeripath mentioned this pull request Aug 4, 2021

Changelog for 1.15.0-rc3 #16621

Merged

zeripath changed the title ~~Restore #10096/#8638 and re-fix #15172~~ Restore Accessibility for Dropdown Aug 4, 2021

Merge branch 'main' into reattempt-a11y-fixes

801c4ce

lafriks approved these changes Aug 5, 2021

View changes

GiteaBot added lgtm/done and removed lgtm/need 1 labels Aug 5, 2021

lafriks merged commit 6e6f23b into go-gitea:main Aug 5, 2021
2 checks passed

2 checks passed

approvals/lgtm this commit looks good

continuous-integration/drone/pr Build is passing
Details

zeripath deleted the zeripath:reattempt-a11y-fixes branch Aug 5, 2021

zeripath mentioned this pull request Aug 7, 2021

Changelog for 1.15.0-rc3 (#16621) #16645

Open

Jul	AUG	Sep
	07
2020	2021	2022

go-gitea / gitea

Restore Accessibility for Dropdown #16576

Restore Accessibility for Dropdown #16576

zeripath commented Jul 29, 2021 •

edited

codecov-commenter commented Jul 29, 2021 •

edited

techknowlogick left a comment

silverwind commented Jul 30, 2021 •

edited

zeripath commented Jul 30, 2021 •

edited

silverwind commented Jul 30, 2021 •

edited

silverwind commented Jul 30, 2021 •

edited

Jookia commented Jul 30, 2021

lafriks commented Aug 3, 2021

zeripath commented Aug 3, 2021

lafriks commented Aug 3, 2021

kdumontnu commented Aug 5, 2021

fnetX commented Aug 5, 2021

techknowlogick commented Aug 5, 2021

fnetX commented Aug 5, 2021 •

edited

fnetX commented Aug 5, 2021

go-gitea / gitea

Sponsor go-gitea/gitea

Restore Accessibility for Dropdown #16576

Restore Accessibility for Dropdown #16576

Conversation

zeripath commented Jul 29, 2021 • edited

codecov-commenter commented Jul 29, 2021 • edited

Codecov Report

techknowlogick left a comment

silverwind commented Jul 30, 2021 • edited

zeripath commented Jul 30, 2021 • edited

silverwind commented Jul 30, 2021 • edited

silverwind commented Jul 30, 2021 • edited

Jookia commented Jul 30, 2021

lafriks commented Aug 3, 2021

zeripath commented Aug 3, 2021

lafriks commented Aug 3, 2021

kdumontnu commented Aug 5, 2021

fnetX commented Aug 5, 2021

techknowlogick commented Aug 5, 2021

fnetX commented Aug 5, 2021 • edited

fnetX commented Aug 5, 2021

zeripath commented Jul 29, 2021 •

edited

codecov-commenter commented Jul 29, 2021 •

edited

silverwind commented Jul 30, 2021 •

edited

zeripath commented Jul 30, 2021 •

edited

silverwind commented Jul 30, 2021 •

edited

silverwind commented Jul 30, 2021 •

edited

fnetX commented Aug 5, 2021 •

edited