aberkow / a11y-menu Goto Github PK

when the menu is closed and a click event is registered, an error occurs with

Uncaught TypeError: (intermediate value)(intermediate value).getElementsByTagName is not a function

Navigation.js 40

Right now, in the menu walker, in order to set a top level item you must have absolutely nothing in the link field for a menu item. "#" will trigger it being a link, where "" will not.

Can we add support for having "#" in the link field, since this is the default for a blank link/custom link in WordPress?

The css is based around the <nav> item, so it should probably be added to the documentation.

This is a bug I've found with the click menus.

Here is my example menu setup:

• Toggle1
• • Submenu1
• Toggle2
• • Submenu2

Here is what happens:

1. Page loads, click toggle1: toggle1 gets focus class, submenu1 gets open class
2. Click toggle2: toggle1 loses focus class, submenu1 loses open class, toggle2 receives focus class, submenu2 does not receive open class
3. Click toggle2 again: toggle2 receives focus class again, submenu2 receives open class

Here is a visual example: https://www.loom.com/share/2c524cd8b3a0477abf748cb30fa3ede0

@briankelleher points out that "icons are assigned via a style tag that is included via JS
so none of it runs until the page has already rendered and THEN icons load".

needs some different kind of implementation for they're set.

because evt.preventDefault is called when clicks happen in the menu, buttons work correctly, but links don't. needs better logic to handle whether a click is on a link or a button.

Whenever a menu is set to a hover menu, clicking the menu toggle does not open the menu or give it the open open class. It still works as expected with keyboard, but not with mouse.

Here is a video of me demoing this: https://www.loom.com/share/0465bab3cbb84bdca1ecc94aa9e8e286

currently when when tabbing through a menu, sub-menus auto close. however, sub-sub-menus don't. this means that the links and buttons inside can still gain non-visual focus.

Default functionality right now revolves around top level items being hovered on - add support for this to be click based rather than hover, and probably give the option.

The SCSS snippet from (icon-styles.scss) are good, however they apply to ALL nav items. Suggest namespacing a11y-menu somehow with a class or an ID. Might be related to instructions that require you to include an ID when initializing the menu in JS.

When there are two instances of the menu are being used on the page, only the first menu to be opened properly moved the focus into the menu.

To replicate:

1. Instantiate two menus on the page, each containing at least 1 sub-menu
2. Open the sub-menu on menu1 using the keyboard controls and tab into the menu.
3. Tab to menu2 and open a sub-menu with the keyboard controls. Whenever you try to tab into this menu, you will notice that the submenu closes and hitting tab moves focus to the next main menu item.

Regardless of which menu you open first, the other menu will always have this issue. Because it's easier to show than explain, I also recorded a screencast of the issue: https://www.loom.com/share/c9223214e1f64b12aba973884bcd084b

A fantastic addition would be the ability to hook into certain events happening on the JavaScript side of things, such as when a submenu is toggled, focused, etc, per your lib. That way, we can manipulate the menu on these events without having to dig into the source code for this project or forking.

I found a decent answer below where the user simply triggers an event after the necessary functions were run. Could be a good starting point:

https://stackoverflow.com/questions/20761612/how-do-i-check-if-a-data-attribute-changes

You should be able to close a full drop down menu with the escape key.

a case came up where an icon was requested for outbound links. personally I don't much care for outbound links in main navigation menus. that being said, a class on list items containing outbound links might be helpful for some. that way an icon could be added to those links to visually indicate that they are different than internal nav items.

When there's an open submenu and you click away from it (not selecting an item) the submenu remains open. if you click on the top level item again, the visual icon switches, but the submenu remains open.

submenus should close and the icon should reset when there's a click outside the menu