a11y: Improve accessibility of dropdown menus (#8638)

* js: Import Semantic-UI's dropdown.js (version 2.3.1)

* js: Set tabindex=-1 on dropdown items

Setting tabindex=-1 on focusable elements within dropdown menus allows
the user to treat dropdown menus as a single focusable item with its own
internal navigation using arrow keys.

* js: Don't use jQuery to click menu items

Menu items are often <a> elements, which jQuery refuses to trigger click
events on. Instead it just bubbles up to the menu.

Using HTMLElement's click method fixes this and makes menu items
clickable from the keyboard using dropdown menus.

* js: Set correct ARIA 1.1 roles on dropdown menus

Setting role= makes assistive technology aware there is a widget here.
In this case, Orca will now exit browse mode and allow us to capture
keydown events when focused on a dropdown menu. It will also inform the
user that there's a menu focused.

Since dropdowns can be used in multiple elements each with different
ARIA roles, a guessRole method is used to find the correct role.
All roles I consider possible are listed, but only menu is implemented.

* js: Set aria-expanded when dropdown menus show and hide

This is deliberately done before the transition finishes so that screen
readers get immediate feedback.

* js: Set aria-label or aria-labelledby on dropdown menus

This makes dropdown menu buttons screen reader accessible.

aria-labelledby refers to an element using an ID, so the chosen labels
are now assigned a unique ID- This ID is not stable, do not refer to it
with user scripts.

* js: Set aria-activedescendant on dropdown menus

As the menus grab focus and navigate by tracking a 'selected' div class,
assistive technology has no idea that what the current selection is.

Assign IDs to each menu item and set aria-activedescendant to the ID of
the currently selected menu item.

When the menu is unfocused, remove aria-activedescendant- This isn't
neccessary but in my experience it triggers Orca to remind the user of
their current selection when re-focusing the menu.

* Makefile: Make eslint ignore semantic.dropdown.js

This file is taken from Semantic UI which isn't linted upstream.
Ignore it as we won't fix these issues.

* js: Add version note to semantic.dropdown.js

* Add Md5 AppVer to templates/base/footer.tmpl

Co-Authored-By: guillep2k <18600385+guillep2k@users.noreply.github.com>

* Add Md5 AppVer to templates/pwa/serviceworker_js.tmpl

Co-Authored-By: guillep2k <18600385+guillep2k@users.noreply.github.com>

* semantic.dropdown.js -> semantic.dropdown.custom.js

* Use eslintignore

* remove bogus submodule

2 files changed, 2 insertions, 0 deletions

diff --git a/templates/base/footer.tmpl b/templates/base/footer.tmpl
index 7185b20377..5a3d24ab58 100644
--- a/templates/base/footer.tmpl
+++ b/templates/base/footer.tmpl
@@ -121,6 +121,7 @@
 
 	<!-- JavaScript -->
 	<script src="{{StaticUrlPrefix}}/vendor/plugins/semantic/semantic.min.js"></script>
+	<script src="{{StaticUrlPrefix}}/js/semantic.dropdown.custom.js?v={{MD5 AppVer}}"></script>
 	<script src="{{StaticUrlPrefix}}/js/index.js?v={{MD5 AppVer}}"></script>
 {{if .EnableHeatmap}}
 	<script src="{{StaticUrlPrefix}}/vendor/plugins/moment/moment.min.js" charset="utf-8"></script>
diff --git a/templates/pwa/serviceworker_js.tmpl b/templates/pwa/serviceworker_js.tmpl
index 5a2756cf24..dc2453e3d8 100644
--- a/templates/pwa/serviceworker_js.tmpl
+++ b/templates/pwa/serviceworker_js.tmpl
@@ -6,6 +6,7 @@ var urlsToCache = [
   '{{StaticUrlPrefix}}/vendor/plugins/jquery-migrate/jquery-migrate.min.js?v=3.0.1',
   '{{StaticUrlPrefix}}/vendor/plugins/semantic/semantic.min.js',
   '{{StaticUrlPrefix}}/js/index.js?v={{MD5 AppVer}}',
+  '{{StaticUrlPrefix}}/js/semantic.dropdown.custom.js?v={{MD5 AppVer}}',
   '{{StaticUrlPrefix}}/js/draw.js',
   '{{StaticUrlPrefix}}/vendor/plugins/clipboard/clipboard.min.js',
   '{{StaticUrlPrefix}}/vendor/plugins/gitgraph/gitgraph.js',