* 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>
87 lines
2.8 KiB
JavaScript
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();
|
|
}
|