docbrown/app/assets/javascripts/initializePage.js
Marcy Sutton f072730f0f
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

87 lines
2.8 KiB
JavaScript

/*
global initializeLocalStorageRender, initializeBodyData,
initializeAllChatButtons, initializeAllTagEditButtons, initializeUserFollowButts,
initializeBaseTracking, initializeCommentsPage,
initializeArticleDate, initializeArticleReactions, initNotifications,
initializeCommentDate, initializeCommentDropdown, initializeSettings,
initializeCommentPreview,
initializeTimeFixer, initializeDashboardSort, initializePWAFunctionality,
initializeEllipsisMenu, initializeArchivedPostFilter, initializeCreditsPage,
initializeUserProfilePage, initializeProfileInfoToggle, initializePodcastPlayback,
initializeVideoPlayback, initializeDrawerSliders, initializeProfileBadgesToggle,
initializeHeroBannerClose, initializeOnboardingTaskCard, initScrolling,
nextPage:writable, fetching:writable, done:writable, adClicked:writable,
initializePaymentPointers, initializeBroadcast, initializeDateHelpers,
initializeColorPicker
*/
function callInitializers() {
initializeLocalStorageRender();
initializeBodyData();
var waitingForDataLoad = setInterval(function wait() {
if (document.body.getAttribute('data-loaded') === 'true') {
clearInterval(waitingForDataLoad);
if (document.body.getAttribute('data-user-status') === 'logged-in') {
initializeBaseUserData();
initializeAllChatButtons();
initializeAllTagEditButtons();
}
initializeBroadcast();
initializeAllFollowButts();
initializeUserFollowButts();
initializeReadingListIcons();
initializeSponsorshipVisibility();
if (document.getElementById('sidebar-additional')) {
document.getElementById('sidebar-additional').classList.add('showing');
}
}
}, 1);
initializeBaseTracking();
initializePaymentPointers();
initializeCommentsPage();
initializeArticleDate();
initializeArticleReactions();
initNotifications();
initializeCommentDate();
initializeCommentDropdown();
initializeSettings();
initializeCommentPreview();
initializeTimeFixer();
initializeDashboardSort();
initializePWAFunctionality();
initializeEllipsisMenu();
initializeArchivedPostFilter();
initializeCreditsPage();
initializeUserProfilePage();
initializeProfileInfoToggle();
initializeProfileBadgesToggle();
initializePodcastPlayback();
initializeVideoPlayback();
initializeDrawerSliders();
initializeHeroBannerClose();
initializeOnboardingTaskCard();
initializeDateHelpers();
initializeColorPicker();
function freezeScrolling(event) {
event.preventDefault();
}
nextPage = 0;
fetching = false;
done = false;
adClicked = false;
setTimeout(function undone() {
done = false;
}, 300);
if (!initScrolling.called) {
initScrolling();
}
}
function initializePage() {
initializeLocalStorageRender();
callInitializers();
}