f072730f0f
* 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>
34 lines
1.2 KiB
JavaScript
34 lines
1.2 KiB
JavaScript
import {
|
|
initializeMobileMenu,
|
|
setCurrentPageIconLink,
|
|
getInstantClick,
|
|
initializeTouchDevice,
|
|
} from '../topNavigation/utilities';
|
|
|
|
function getPageEntries() {
|
|
return Object.entries({
|
|
'notifications-index': document.getElementById('notifications-link'),
|
|
'chat_channels-index': document.getElementById('connect-link'),
|
|
'moderations-index': document.getElementById('moderation-link'),
|
|
'stories-search': document.getElementById('search-link'),
|
|
});
|
|
}
|
|
|
|
const menus = [...document.getElementsByClassName('js-hamburger-trigger')];
|
|
const moreMenus = [...document.getElementsByClassName('js-nav-more-trigger')];
|
|
|
|
getInstantClick().then((spa) => {
|
|
spa.on('change', () => {
|
|
const { currentPage } = document.getElementById('page-content').dataset;
|
|
|
|
setCurrentPageIconLink(currentPage, getPageEntries());
|
|
});
|
|
});
|
|
|
|
const { currentPage } = document.getElementById('page-content').dataset;
|
|
const memberMenu = document.getElementById('crayons-header__menu');
|
|
const menuNavButton = document.getElementById('member-menu-button');
|
|
|
|
setCurrentPageIconLink(currentPage, getPageEntries());
|
|
initializeMobileMenu(menus, moreMenus);
|
|
initializeTouchDevice(memberMenu, menuNavButton);
|