WordPress.org

Make WordPress Core

Opened 7 weeks ago

Last modified 4 weeks ago

#47069 new defect (bug)

Twenty Nineteen: the admin bar on the front end has reduced functionalities and bugs due to jQuery not being used

Reported by: afercia Owned by:
Milestone: 5.3 Priority: normal
Severity: normal Version: 5.0
Component: Toolbar Keywords: has-screenshots has-patch
Focuses: accessibility, javascript Cc:

Description (last modified by afercia)

Twenty Nineteen doesn't use jQuery on the front end. This is a welcomed effort to make Twenty Nineteen not depend on jQuery and use vanilla JavaScript instead.

Unfortunately, seems it hasn't been well considered that the WordPress admin bar has some functionalities that depend on jQuery.

The admin-bar.js file is split in two main parts: the original one uses vanilla JavaScript. The other part includes functionalities that were added over time and that depend on jQuery. A check for jQuery determines which part of the file is going to be used. As jQuery is undefined in the Twenty Nineteen front end, the old part of the file is used and many functionalities are missing.

Most importantly:

  • keyboard interaction with the menu: pressing Enter on a menu top level item doesn't open the menu any longer and instead navigates to the link destination, making the menu unusable with keyboard (this is nothing new, see https://core.trac.wordpress.org/ticket/19088#comment:26)
  • same happens on mobile: tapping a menu top level item triggers navigation instead of opening the menu, making the menu unusable
  • hoverIntent on the menu top level items can't work without jQuery: it was added 8 years ago in [18488] / #18299 together with other improvements
  • the search input field icon is missing

I can't think of good ways to fix this other than rewriting the whole admin-bar.js file in vanilla JavaScript. Worth noting a few functionalities are basically duplicated in the two parts. Other functionalities should be rewritten instead.

Considering that WordPress has officially ended support for old Internet Explorer versions since two years, this could be a good opportunity to make the admin bar use vanilla JavaScript.

Any thoughts and feedback very welcome.

Attachments (5)

Twenty Seventeen.png (62.9 KB) - added by afercia 7 weeks ago.
Twenty Seventeen: pressing Enter opens the menu
Twenty Nineteen.png (76.5 KB) - added by afercia 7 weeks ago.
Twenty Nineteen: pressing Enter doesn't open the menu and navigates to wp-admin/post-new.php
19 mobile admin bar.gif (43.8 KB) - added by afercia 7 weeks ago.
Mobile: tapping the menu triggers navigation instead of opening the menu dropdown
missing search icon.png (85.8 KB) - added by afercia 7 weeks ago.
Missing icon within the search input
47069.diff (584 bytes) - added by audrasjb 4 weeks ago.
First step: enqueue jQuery if the Admin Bar is displayed

Download all attachments as: .zip

Change History (13)

@afercia
7 weeks ago

Twenty Seventeen: pressing Enter opens the menu

@afercia
7 weeks ago

Twenty Nineteen: pressing Enter doesn't open the menu and navigates to wp-admin/post-new.php

@afercia
7 weeks ago

Mobile: tapping the menu triggers navigation instead of opening the menu dropdown

@afercia
7 weeks ago

Missing icon within the search input

#1 @afercia
7 weeks ago

See also #34668, related to the admin bar menu when used with screen readers.

#2 @afercia
7 weeks ago

For some history on the reasons why the "click-to-open (Tab to select, Enter to open/close)" behavior was implemented on the admin bar menu, see #19088, specifically starting from ticket:19088#comment:34. Various opinions were then collected on a Make post, see https://make.wordpress.org/accessibility/2011/11/28/do-people-think-it-is-better-for-the/

#3 @afercia
7 weeks ago

One more thing to consider: the admin bar is rendered in the footer since (if I'm not wrong) its introduction in [15671]. Not sure why it's also moved with JS, see ticket:14772#comment:71 and see d.body.appendChild( aB ) in the admin-bar.js file.

Regardless, WordPress 5.2 is going to introduce the new wp_body_open hook. For the future, it would be worth considering to move the admin bar at the top of the markup, to make the visual order match the DOM order. See also #47053.

#4 @afercia
7 weeks ago

  • Description modified (diff)

#5 @desrosj
7 weeks ago

  • Keywords needs-patch has-screenshots added

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


5 weeks ago

#7 @afercia
5 weeks ago

  • Milestone changed from Awaiting Review to 5.3

Discussed during today's accessibility bug scrub. Agree to move to the 5.3 milestone for research and exploration. Two possible options came out from the bug scrub:

  • either enqueue jQuery in the front end when the admin bar is displayed
  • or rewrite the whole file admin-bar.js in vanilla JavaScript (with no jQuery methods)

A first step would be: research if a non-jQuery equivalent of hoverintent.js exists.

@audrasjb
4 weeks ago

First step: enqueue jQuery if the Admin Bar is displayed

#8 @audrasjb
4 weeks ago

  • Keywords has-patch added; needs-patch removed
Note: See TracTickets for help on using tickets.