Header navigation dropdown accessibility (#11509 )

* Improve keyboard a11y of header menu dropdown

This commit also includes some cleanup of unnecessary functions that seemed to degrade performance.

Closes https://github.com/forem/forem/issues/1154

* Add temporary focus style on navigation-button

* Put menu items in a list

* Adjust menu button based on VoiceOver testing

* Refactor menu logic to be reusable/work on touch

* Preserve admin link visibility

* Focus on first item on menu open

* Clean up some HTML and CSS

* Apply suggestions from code review

Co-authored-by: ludwiczakpawel <ludwiczakpawel@gmail.com>

* Ensure menu hides on click outside

* Rename toggle function and adjust formatting

* Update nav button focus style

* Clean up padding on header avatar focus style

* Make button show focus state for keyboard only

Using .focus-visible:focus targets keyboard focus and eliminates a flash of the blue border on click before focus is moved to the child item (which also has no focus style on mouse click)

* Update app/views/layouts/_top_bar.html.erb

Co-authored-by: ludwiczakpawel <ludwiczakpawel@gmail.com>

* Add some defensive programming

* Removed initializeTouchDevice from base.js.erb

* navigation-butt ID is now member-menu-button

* Moved all the logic from initializeTouchDevice.js into a pack file/utilities.

* committing re-ordered schema after setup

* add tests for initializeTouchDevice

* remove some unneeded html setup

* make sure menu doesn't close if user tabs back from sign out

* Revert "committing re-ordered schema after setup"

This reverts commit a41a1c861cca3b97d8a7b8a99268b8afaae9f028.

* optimized code

* small tweaks, only show outline when focused

Co-authored-by: ludwiczakpawel <ludwiczakpawel@gmail.com>
Co-authored-by: rhymes <rhymes@hey.com>
Co-authored-by: Nick Taylor <nick@dev.to>
Co-authored-by: Suzanne Aitchison <suzanne@forem.com>

2021-01-27 09:39:17 +00:00

1.3 KiB

Raw Blame History

title
JavaScript and Initializers

JavaScript and Initializers

Forem has two JavaScript codebases.

One is located in the directory app/assets/javascripts and contains plain JavaScript (mostly ES5+) being served using Sprockets which packages static assets.

Webpacker manages the other one, which you can read more about in this guide.

This source code is not transpiled, only packaged and minified, and will be limited to whatever flavor of JavaScript can run on the user's web browser.

app/assets/javascripts/application.js contains the manifest JavaScript file which is included globally in the primary template, app/views/layouts/application.html.erb.

application.js automatically includes all JS files via the statement:

//= require_tree .

One JS file in particular, app/assets/javascripts/initializePage.js.erb, bootstraps the majority of the functionality. You will notice, within this file, that major sections of the websites are bootstrapped, for example:

initializeBaseTracking();
initializeCommentsPage();
initEditorResize();
initLeaveEditorWarning();
initializeArticleReactions();
initNotifications();
initializeSplitTestTracking();

All the "initializers" are in /app/assets/javascripts/initializers.

1.3 KiB Raw Blame History

JavaScript and Initializers

1.3 KiB

Raw Blame History