Make WordPress Core

Opened 6 years ago

Last modified 16 months ago

#43241 new defect (bug)

Twenty Seventeen: Menu stays expanded after clicking on links

Reported by: nilamacharya's profile nilamacharya Owned by:
Milestone: Awaiting Review 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 6 years ago.
menu.png (362.7 KB) - added by nilamacharya 6 years ago.
twenty-seventeen-menu-mobile-expanded.png (9.1 KB) - added by sabernhardt 16 months ago.
mobile menu, expanded

Change History (10)

@nilamacharya
6 years ago

@nilamacharya
6 years ago

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


6 years ago

#4 @afercia
6 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
6 years ago

Is there any updates on this ticket ?

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

mobile menu, expanded

#7 @sabernhardt
16 months 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 16 months ago by sabernhardt (previous) (diff)
Note: See TracTickets for help on using tickets.