Issue #3136604 by lauriii, xjm, effulgentsia, justafish: Update to jQuery 3.5.1

core/core.libraries.yml

@@ -340,10 +340,10 @@ es6-promise:
 
 jquery:
   remote: https://github.com/jquery/jquery
-  version: "3.4.1"
+  version: "3.5.1"
   license:
     name: MIT
-    url: https://github.com/jquery/jquery/blob/3.4.1/LICENSE.txt
+    url: https://github.com/jquery/jquery/blob/3.5.1/LICENSE.txt
     gpl-compatible: true
   js:
     assets/vendor/jquery/jquery.min.js: { minified: true, weight: -20 }

core/misc/dialog/dialog.ajax.es6.js

@@ -23,7 +23,7 @@
         // Add 'ui-front' jQuery UI class so jQuery UI widgets like autocomplete
         // sit on top of dialogs. For more information see
         // http://api.jqueryui.com/theming/stacking-elements/.
-        $('<div id="drupal-modal" class="ui-front"/>')
+        $('<div id="drupal-modal" class="ui-front"></div>')
           .hide()
           .appendTo('body');
       }
@@ -109,7 +109,10 @@
     if (!$dialog.length) {
       // Create the element if needed.
       $dialog = $(
-        `<div id="${response.selector.replace(/^#/, '')}" class="ui-front"/>`,
+        `<div id="${response.selector.replace(
+          /^#/,
+          '',
+        )}" class="ui-front"></div>`,
       ).appendTo('body');
     }
     // Set up the wrapper, if there isn't one.

core/misc/dialog/dialog.ajax.js

@@ -11,7 +11,7 @@
       var $context = $(context);
 
       if (!$('#drupal-modal').length) {
-        $('<div id="drupal-modal" class="ui-front"/>').hide().appendTo('body');
+        $('<div id="drupal-modal" class="ui-front"></div>').hide().appendTo('body');
       }
 
       var $dialog = $context.closest('.ui-dialog-content');
@@ -67,7 +67,7 @@
     var $dialog = $(response.selector);
 
     if (!$dialog.length) {
-      $dialog = $("<div id=\"".concat(response.selector.replace(/^#/, ''), "\" class=\"ui-front\"/>")).appendTo('body');
+      $dialog = $("<div id=\"".concat(response.selector.replace(/^#/, ''), "\" class=\"ui-front\"></div>")).appendTo('body');
     }
 
     if (!ajax.wrapper) {

core/misc/tabledrag.es6.js

@@ -202,10 +202,10 @@
       // manually append 2 indentations in the first draggable row, measure
       // the offset, then remove.
       const indent = Drupal.theme('tableDragIndentation');
-      const testRow = $('<tr/>')
+      const testRow = $('<tr></tr>')
         .addClass('draggable')
         .appendTo(table);
-      const testCell = $('<td/>')
+      const testCell = $('<td></td>')
         .appendTo(testRow)
         .prepend(indent)
         .prepend(indent);

core/misc/tabledrag.js

@@ -63,8 +63,8 @@ function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterat
     if (this.indentEnabled) {
       this.indentCount = 1;
       var indent = Drupal.theme('tableDragIndentation');
-      var testRow = $('<tr/>').addClass('draggable').appendTo(table);
-      var testCell = $('<td/>').appendTo(testRow).prepend(indent).prepend(indent);
+      var testRow = $('<tr></tr>').addClass('draggable').appendTo(table);
+      var testCell = $('<td></td>').appendTo(testRow).prepend(indent).prepend(indent);
       var $indentation = testCell.find('.js-indentation');
       this.indentAmount = $indentation.get(1).offsetLeft - $indentation.get(0).offsetLeft;
       testRow.remove();

core/misc/tableheader.es6.js

@@ -210,7 +210,7 @@
         // Clone the table header so it inherits original jQuery properties.
         const $stickyHeader = this.$originalHeader.clone(true);
         // Hide the table to avoid a flash of the header clone upon page load.
-        this.$stickyTable = $('<table class="sticky-header"/>')
+        this.$stickyTable = $('<table class="sticky-header"></table>')
           .css({
             visibility: 'hidden',
             position: 'fixed',

core/misc/tableheader.js

@@ -91,7 +91,7 @@
     stickyVisible: false,
     createSticky: function createSticky() {
       var $stickyHeader = this.$originalHeader.clone(true);
-      this.$stickyTable = $('<table class="sticky-header"/>').css({
+      this.$stickyTable = $('<table class="sticky-header"></table>').css({
         visibility: 'hidden',
         position: 'fixed',
         top: '0px'

core/modules/comment/js/comment-new-indicator.es6.js

@@ -41,7 +41,7 @@
         // this is the first new comment in the DOM.
         if (isFirstNewComment) {
           isFirstNewComment = false;
-          $comment.prev().before('<a id="new" />');
+          $comment.prev().before('<a id="new"></a>');
           // If the URL points to the first new comment, then scroll to that
           // comment.
           if (window.location.hash === '#new') {

core/modules/comment/js/comment-new-indicator.js

@@ -22,7 +22,7 @@
 
         if (isFirstNewComment) {
           isFirstNewComment = false;
-          $comment.prev().before('<a id="new" />');
+          $comment.prev().before('<a id="new"></a>');
 
           if (window.location.hash === '#new') {
             window.scrollTo(0, $comment.offset().top - Drupal.displace.offsets.top);

core/modules/quickedit/js/theme.es6.js

@@ -17,7 +17,7 @@
    */
   Drupal.theme.quickeditBackstage = function(settings) {
     let html = '';
-    html += `<div id="${settings.id}" />`;
+    html += `<div id="${settings.id}"></div>`;
     return html;
   };
 
@@ -39,10 +39,10 @@
     html += '<div class="quickedit-toolbar-content">';
     html +=
       '<div class="quickedit-toolbar quickedit-toolbar-entity clearfix icon icon-pencil">';
-    html += '<div class="quickedit-toolbar-label" />';
+    html += '<div class="quickedit-toolbar-label"></div>';
     html += '</div>';
     html +=
-      '<div class="quickedit-toolbar quickedit-toolbar-field clearfix" />';
+      '<div class="quickedit-toolbar quickedit-toolbar-field clearfix"></div>';
     html += '</div><div class="quickedit-toolbar-lining"></div></div>';
     return html;
   };
@@ -74,7 +74,7 @@
    *   The corresponding HTML.
    */
   Drupal.theme.quickeditEntityToolbarFence = function() {
-    return '<div id="quickedit-toolbar-fence" />';
+    return '<div id="quickedit-toolbar-fence"></div>';
   };
 
   /**
@@ -89,7 +89,7 @@
    *   The corresponding HTML.
    */
   Drupal.theme.quickeditFieldToolbar = function(settings) {
-    return `<div id="${settings.id}" />`;
+    return `<div id="${settings.id}"></div>`;
   };
 
   /**

core/modules/quickedit/js/theme.js

@@ -8,7 +8,7 @@
 (function ($, Drupal) {
   Drupal.theme.quickeditBackstage = function (settings) {
     var html = '';
-    html += "<div id=\"".concat(settings.id, "\" />");
+    html += "<div id=\"".concat(settings.id, "\"></div>");
     return html;
   };
 
@@ -18,9 +18,9 @@
     html += '<i class="quickedit-toolbar-pointer"></i>';
     html += '<div class="quickedit-toolbar-content">';
     html += '<div class="quickedit-toolbar quickedit-toolbar-entity clearfix icon icon-pencil">';
-    html += '<div class="quickedit-toolbar-label" />';
+    html += '<div class="quickedit-toolbar-label"></div>';
     html += '</div>';
-    html += '<div class="quickedit-toolbar quickedit-toolbar-field clearfix" />';
+    html += '<div class="quickedit-toolbar quickedit-toolbar-field clearfix"></div>';
     html += '</div><div class="quickedit-toolbar-lining"></div></div>';
     return html;
   };
@@ -30,11 +30,11 @@
   };
 
   Drupal.theme.quickeditEntityToolbarFence = function () {
-    return '<div id="quickedit-toolbar-fence" />';
+    return '<div id="quickedit-toolbar-fence"></div>';
   };
 
   Drupal.theme.quickeditFieldToolbar = function (settings) {
-    return "<div id=\"".concat(settings.id, "\" />");
+    return "<div id=\"".concat(settings.id, "\"></div>");
   };
 
   Drupal.theme.quickeditToolgroup = function (settings) {

core/themes/claro/js/tabledrag.es6.js

@@ -237,10 +237,10 @@
       // manually append 2 indentations in the first draggable row, measure
       // the offset, then remove.
       const indent = Drupal.theme('tableDragIndentation');
-      const testRow = $('<tr/>')
+      const testRow = $('<tr></tr>')
         .addClass('draggable')
         .appendTo(table);
-      const testCell = $('<td/>')
+      const testCell = $('<td></td>')
         .appendTo(testRow)
         .prepend(indent)
         .prepend(indent);
@@ -1824,7 +1824,7 @@
        *   A string representing a DOM fragment.
        */
       tableDragCellItemsWrapper() {
-        return '<div class="tabledrag-cell-content"/>';
+        return '<div class="tabledrag-cell-content"></div>';
       },
 
       /**
@@ -1834,7 +1834,7 @@
        *   A string representing a DOM fragment.
        */
       tableDragCellContentWrapper() {
-        return '<div class="tabledrag-cell-content__item"/>';
+        return '<div class="tabledrag-cell-content__item"></div>';
       },
 
       /**

core/themes/claro/js/tabledrag.js

@@ -63,8 +63,8 @@ function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterat
     if (this.indentEnabled) {
       this.indentCount = 1;
       var indent = Drupal.theme('tableDragIndentation');
-      var testRow = $('<tr/>').addClass('draggable').appendTo(table);
-      var testCell = $('<td/>').appendTo(testRow).prepend(indent).prepend(indent);
+      var testRow = $('<tr></tr>').addClass('draggable').appendTo(table);
+      var testCell = $('<td></td>').appendTo(testRow).prepend(indent).prepend(indent);
       var $indentation = testCell.find('.js-indentation');
       this.indentAmount = $indentation.get(1).offsetLeft - $indentation.get(0).offsetLeft;
       testRow.remove();
@@ -993,10 +993,10 @@ function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterat
       return '<a href="#" class="tabledrag-handle"></a>';
     },
     tableDragCellItemsWrapper: function tableDragCellItemsWrapper() {
-      return '<div class="tabledrag-cell-content"/>';
+      return '<div class="tabledrag-cell-content"></div>';
     },
     tableDragCellContentWrapper: function tableDragCellContentWrapper() {
-      return '<div class="tabledrag-cell-content__item"/>';
+      return '<div class="tabledrag-cell-content__item"></div>';
     },
     tableDragToggle: function tableDragToggle(action, text) {
       var classes = ['action-link', 'action-link--extrasmall', 'tabledrag-toggle-weight'];