Make WordPress Core

Opened 7 years ago

Closed 11 months ago

Last modified 11 months ago

#43241 closed defect (bug) (wontfix)

Twenty Seventeen: Menu stays expanded after clicking on links

Reported by: nilamacharya's profile nilamacharya 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 sabernhardt)

Menu Items are sticky once user will click on it

Steps:

  1. Installed WordPress 4.9.4
  2. Imported file "themeunittestdata.wordpress.xml"
  3. 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)

menu.mp4 (3.2 MB) - added by nilamacharya 7 years ago.
menu.png (362.7 KB) - added by nilamacharya 7 years ago.
twenty-seventeen-menu-mobile-expanded.png (9.1 KB) - added by sabernhardt 2 years ago.
mobile menu, expanded

Change History (12)

@nilamacharya
7 years ago

@nilamacharya
7 years ago

#1 @swissspidy
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

#2 @chetan200891
7 years ago

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.

This ticket was mentioned in Slack in #accessibility by chetan200891. View the logs.


7 years ago

#4 @afercia
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.

#5 @nilamacharya
7 years ago

Is there any updates on this ticket ?

#6 @sabernhardt
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

@sabernhardt
2 years ago

mobile menu, expanded

#7 @sabernhardt
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.

Last edited 2 years ago by sabernhardt (previous) (diff)

#8 @karmatosed
11 months ago

  • Milestone Awaiting Review deleted
  • Resolution set to wontfix
  • Status changed from new to closed

#9 @karmatosed
11 months ago

I agree with your comment @sabernhardt that this should be continued on the test theme repository as a discussion. I will close this but we can come back to it should anyone wish to reopen. Thank you everyone for your collaboration.

Note: See TracTickets for help on using tickets.