[wp-trac] [WordPress Trac] #47069: Twenty Nineteen: the admin bar on the front end has reduced functionalities and bugs due to jQuery not being used

[WordPress Trac]

#47069: Twenty Nineteen: the admin bar on the front end has reduced functionalities
and bugs due to jQuery not being used
---------------------------------------+-----------------------------
 Reporter:  afercia                    |      Owner:  (none)
     Type:  defect (bug)               |     Status:  new
 Priority:  normal                     |  Milestone:  Awaiting Review
Component:  Toolbar                    |    Version:  5.0
 Severity:  normal                     |   Keywords:
  Focuses:  accessibility, javascript  |
---------------------------------------+-----------------------------
 Twenty Nineteen doesn't use jQuery on the front end. This is a welcomed
 effort to make Twenty Nineteen not depending 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 [https://make.wordpress.org/core/2017/04/23/target-
 browser-coverage/ 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.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/47069>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform