#43241 closed defect (bug) (wontfix)
Twenty Seventeen: Menu stays expanded after clicking on links
Reported by: |
|
Owned by: | |
---|---|---|---|
Milestone: | Priority: | normal | |
Severity: | normal | Version: | 4.7 |
Component: | Bundled Theme | Keywords: | has-screenshots 2nd-opinion close |
Focuses: | ui, javascript | Cc: |
Description (last modified by )
Menu Items are sticky once user will click on it
Steps:
- Installed WordPress 4.9.4
- Imported file "themeunittestdata.wordpress.xml"
- Activated Menu
Issue: Menu is shown sticky after clicking on it (where there is #
link and third party links)
Expected Behaviour: It should be disappear once user will click on it
Attachments (3)
Change History (12)
#1
@
7 years ago
- Component changed from Menus to Bundled Theme
- Summary changed from Menu behaviour is not proper to Twenty Seventeen: Menu behaviour is not proper
This ticket was mentioned in Slack in #accessibility by chetan200891. View the logs.
7 years ago
#4
@
7 years ago
- Keywords has-screenshots added
- Version changed from 4.9.4 to 4.7
Yes, the focus
CSS class is added also for keyboard navigation, without that, the menu doesn't work when using only the keyboard. Worth noting the menu stays "sticky" only with links with an href attribute #
or links with target="_blank"
regardless if they're external or internal links. The reason is: focus stays on the clicked menu item link.
I'm not even sure this should be fixed, as there's no reason to use links to #
and maybe it's acceptable to see the menu still open when closing a browser tab previously opened by a link with target="_blank"
. In any case, I'd recomment to not use blur()
as it would cause a focus loss.
#6
@
2 years ago
- Description modified (diff)
- Focuses javascript added
- Keywords 2nd-opinion added
- Summary changed from Twenty Seventeen: Menu behaviour is not proper to Twenty Seventeen: Menu stays expanded after clicking on links
#7
@
2 years ago
- Keywords close added
I recommend continuing this discussion on the test theme repository:
https://github.com/WPTT/theme-test-data/issues/50
The menu items need meaningful links for people on smaller devices and for basically anyone who does not use a mouse. I would rather not edit the script for this special case that sites hopefully do not use.
It looks like navigation.js adds .focus class for touch enabled devices for accessibility. And this affects on desktop as well. "li.focus" related CSS applies.