Issue #3239123 by hooroomoo, bnjmnm, nod_: Refactor (if feasible) uses of the jQuery text function to use vanillaJS

core/.eslintrc.jquery.json

@@ -45,7 +45,7 @@
     "jquery/no-sizzle": 0,
     "jquery/no-slide": 0,
     "jquery/no-submit": 2,
-    "jquery/no-text": 0,
+    "jquery/no-text": 2,
     "jquery/no-toggle": 0,
     "jquery/no-trigger": 0,
     "jquery/no-trim": 2,

core/misc/tableresponsive.es6.js

@@ -108,13 +108,15 @@
         // If the table has hidden columns, associate an action link with the
         // table to show the columns.
         if (hiddenLength > 0) {
-          this.$link.show().text(this.showText);
+          this.$link.show();
+          this.$link[0].textContent = this.showText;
         }
         // When the toggle is pegged, its presence is maintained because the user
         // has interacted with it. This is necessary to keep the link visible if
         // the user adjusts screen size and changes the visibility of columns.
         if (!pegged && hiddenLength === 0) {
-          this.$link.hide().text(this.hideText);
+          this.$link.hide();
+          this.$link[0].textContent = this.hideText;
         }
       },
 
@@ -148,7 +150,8 @@
             // Keep track of the revealed headers, so they can be hidden later.
             self.$revealedCells = $().add(self.$revealedCells).add($header);
           });
-          this.$link.text(this.hideText).data('pegged', 1);
+          this.$link[0].textContent = this.hideText;
+          this.$link.data('pegged', 1);
         }
         // Hide revealed columns.
         else {
@@ -177,7 +180,8 @@
             // Return the rest of the style attribute values to the element.
             $cell.attr('style', newProps.join(';'));
           });
-          this.$link.text(this.showText).data('pegged', 0);
+          this.$link[0].textContent = this.showText;
+          this.$link.data('pegged', 0);
           // Refresh the toggle link.
           $(window).trigger('resize.tableresponsive');
         }

core/misc/tableresponsive.js

@@ -34,11 +34,13 @@
       const hiddenLength = this.$headers.filter('.priority-medium:hidden, .priority-low:hidden').length;
 
       if (hiddenLength > 0) {
-        this.$link.show().text(this.showText);
+        this.$link.show();
+        this.$link[0].textContent = this.showText;
       }
 
       if (!pegged && hiddenLength === 0) {
-        this.$link.hide().text(this.hideText);
+        this.$link.hide();
+        this.$link[0].textContent = this.hideText;
       }
     },
 
@@ -60,7 +62,8 @@
           $header.show();
           self.$revealedCells = $().add(self.$revealedCells).add($header);
         });
-        this.$link.text(this.hideText).data('pegged', 1);
+        this.$link[0].textContent = this.hideText;
+        this.$link.data('pegged', 1);
       } else {
         this.$revealedCells.hide();
         this.$revealedCells.each(function (index, element) {
@@ -83,7 +86,8 @@
 
           $cell.attr('style', newProps.join(';'));
         });
-        this.$link.text(this.showText).data('pegged', 0);
+        this.$link[0].textContent = this.showText;
+        this.$link.data('pegged', 0);
         $(window).trigger('resize.tableresponsive');
       }
     }

core/misc/vertical-tabs.es6.js

@@ -84,8 +84,9 @@
           // Transform each details into a tab.
           $details.each(function () {
             const $that = $(this);
+            const $summary = $that.find('> summary');
             const verticalTab = new Drupal.verticalTab({
-              title: $that.find('> summary').text(),
+              title: $summary.length ? $summary[0].textContent : '',
               details: $that,
             });
             tabList.append(verticalTab.item);
@@ -281,15 +282,13 @@
    */
   Drupal.theme.verticalTab = function (settings) {
     const tab = {};
+    tab.title = $('<strong class="vertical-tabs__menu-item-title"></strong>');
+    tab.title[0].textContent = settings.title;
     tab.item = $(
       '<li class="vertical-tabs__menu-item" tabindex="-1"></li>',
     ).append(
       (tab.link = $('<a href="#"></a>')
-        .append(
+        .append(tab.title)
-          (tab.title = $(
-            '<strong class="vertical-tabs__menu-item-title"></strong>',
-          ).text(settings.title)),
-        )
         .append(
           (tab.summary = $(
             '<span class="vertical-tabs__menu-item-summary"></span>',

core/misc/vertical-tabs.js

@@ -36,8 +36,9 @@
         $this.wrap('<div class="vertical-tabs clearfix"></div>').before(tabList);
         $details.each(function () {
           const $that = $(this);
+          const $summary = $that.find('> summary');
           const verticalTab = new Drupal.verticalTab({
-            title: $that.find('> summary').text(),
+            title: $summary.length ? $summary[0].textContent : '',
             details: $that
           });
           tabList.append(verticalTab.item);
@@ -132,7 +133,9 @@
 
   Drupal.theme.verticalTab = function (settings) {
     const tab = {};
-    tab.item = $('<li class="vertical-tabs__menu-item" tabindex="-1"></li>').append(tab.link = $('<a href="#"></a>').append(tab.title = $('<strong class="vertical-tabs__menu-item-title"></strong>').text(settings.title)).append(tab.summary = $('<span class="vertical-tabs__menu-item-summary"></span>')));
+    tab.title = $('<strong class="vertical-tabs__menu-item-title"></strong>');
+    tab.title[0].textContent = settings.title;
+    tab.item = $('<li class="vertical-tabs__menu-item" tabindex="-1"></li>').append(tab.link = $('<a href="#"></a>').append(tab.title).append(tab.summary = $('<span class="vertical-tabs__menu-item-summary"></span>')));
     return tab;
   };
 })(jQuery, Drupal, drupalSettings);

core/modules/block/js/block.admin.es6.js

@@ -44,9 +44,8 @@
          *   The label of the block.
          */
         function toggleBlockEntry(index, label) {
-          const $label = $(label);
+          const $row = $(label).parent().parent();
-          const $row = $label.parent().parent();
+          const textMatch = label.textContent.toLowerCase().includes(query);
-          const textMatch = $label.text().toLowerCase().includes(query);
           $row.toggle(textMatch);
         }
 

core/modules/block/js/block.admin.js

@@ -16,9 +16,8 @@
         const query = e.target.value.toLowerCase();
 
         function toggleBlockEntry(index, label) {
-          const $label = $(label);
+          const $row = $(label).parent().parent();
-          const $row = $label.parent().parent();
+          const textMatch = label.textContent.toLowerCase().includes(query);
-          const textMatch = $label.text().toLowerCase().includes(query);
           $row.toggle(textMatch);
         }
 

core/modules/book/book.es6.js

@@ -26,8 +26,7 @@
           if (val === 'new') {
             return Drupal.t('New book');
           }
-
+          return Drupal.checkPlain($select.find(':selected')[0].textContent);
-          return Drupal.checkPlain($select.find(':selected').text());
         });
     },
   };

core/modules/book/book.js

@@ -20,7 +20,7 @@
           return Drupal.t('New book');
         }
 
-        return Drupal.checkPlain($select.find(':selected').text());
+        return Drupal.checkPlain($select.find(':selected')[0].textContent);
       });
     }
 

core/modules/ckeditor/js/ckeditor.admin.es6.js

@@ -285,7 +285,9 @@
           $group
             .attr('data-drupal-ckeditor-toolbar-group-name', name)
             .children('.ckeditor-toolbar-group-name')
-            .text(name);
+            .each(function () {
+              this.textContent = name;
+            });
         }
 
         // Invoke a user-provided callback and indicate failure.

core/modules/ckeditor/js/ckeditor.admin.js

@@ -119,7 +119,9 @@
             $group.removeAttr('aria-label').attr('data-drupal-ckeditor-type', 'group').attr('tabindex', 0).children('.ckeditor-toolbar-group-name').attr('id', groupID).end().children('.ckeditor-toolbar-group-buttons').attr('aria-labelledby', groupID);
           }
 
-          $group.attr('data-drupal-ckeditor-toolbar-group-name', name).children('.ckeditor-toolbar-group-name').text(name);
+          $group.attr('data-drupal-ckeditor-toolbar-group-name', name).children('.ckeditor-toolbar-group-name').each(function () {
+            this.textContent = name;
+          });
         }
 
         if (action === 'cancel') {

core/modules/ckeditor/js/ckeditor.language.admin.es6.js

@@ -4,10 +4,16 @@
    */
   Drupal.behaviors.ckeditorLanguageSettingsSummary = {
     attach() {
-      $('#edit-editor-settings-plugins-language').drupalSetSummary((context) =>
+      $('#edit-editor-settings-plugins-language').drupalSetSummary(
-        $(
+        (context) => {
+          const $selected = $(
             '#edit-editor-settings-plugins-language-language-list-type option:selected',
-        ).text(),
+          );
+          if ($selected.length) {
+            return $selected[0].textContent;
+          }
+          return '';
+        },
       );
     },
   };

core/modules/ckeditor/js/ckeditor.language.admin.js

@@ -8,7 +8,15 @@
 (function ($, Drupal) {
   Drupal.behaviors.ckeditorLanguageSettingsSummary = {
     attach() {
-      $('#edit-editor-settings-plugins-language').drupalSetSummary(context => $('#edit-editor-settings-plugins-language-language-list-type option:selected').text());
+      $('#edit-editor-settings-plugins-language').drupalSetSummary(context => {
+        const $selected = $('#edit-editor-settings-plugins-language-language-list-type option:selected');
+
+        if ($selected.length) {
+          return $selected[0].textContent;
+        }
+
+        return '';
+      });
     }
 
   };

core/modules/ckeditor/js/views/VisualView.es6.js

@@ -67,15 +67,14 @@
         this.$el
           .find('[data-toolbar="active"]')
           .toggleClass('ckeditor-group-names-are-visible', groupNamesVisible);
-        this.$el
+        const $toggle = this.$el.find('.ckeditor-groupnames-toggle');
-          .find('.ckeditor-groupnames-toggle')
+        $toggle
-          .text(
+          .each((index, element) => {
-            groupNamesVisible
+            element.textContent = groupNamesVisible
               ? Drupal.t('Hide group names')
-              : Drupal.t('Show group names'),
+              : Drupal.t('Show group names');
-          )
+          })
           .attr('aria-pressed', groupNamesVisible);
-
         return this;
       },
 

core/modules/ckeditor/js/views/VisualView.js

@@ -34,7 +34,10 @@
       }
 
       this.$el.find('[data-toolbar="active"]').toggleClass('ckeditor-group-names-are-visible', groupNamesVisible);
-      this.$el.find('.ckeditor-groupnames-toggle').text(groupNamesVisible ? Drupal.t('Hide group names') : Drupal.t('Show group names')).attr('aria-pressed', groupNamesVisible);
+      const $toggle = this.$el.find('.ckeditor-groupnames-toggle');
+      $toggle.each((index, element) => {
+        element.textContent = groupNamesVisible ? Drupal.t('Hide group names') : Drupal.t('Show group names');
+      }).attr('aria-pressed', groupNamesVisible);
       return this;
     },
 

core/modules/comment/comment-entity-form.es6.js

@@ -17,8 +17,7 @@
           Drupal.checkPlain(
             $(context)
               .find('.js-form-item-comment input:checked')
-              .next('label')
+              .next('label')[0].textContent,
-              .text(),
           ),
         );
     },

core/modules/comment/comment-entity-form.js

@@ -9,7 +9,7 @@
   Drupal.behaviors.commentFieldsetSummaries = {
     attach(context) {
       const $context = $(context);
-      $context.find('fieldset.comment-entity-settings-form').drupalSetSummary(context => Drupal.checkPlain($(context).find('.js-form-item-comment input:checked').next('label').text()));
+      $context.find('fieldset.comment-entity-settings-form').drupalSetSummary(context => Drupal.checkPlain($(context).find('.js-form-item-comment input:checked').next('label')[0].textContent));
     }
 
   };

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

@@ -30,9 +30,9 @@
 
       if (timestamp > lastViewTimestamp) {
         // Turn the placeholder into an actual "new" indicator.
-        const $comment = $(placeholder)
+        placeholder.textContent = newCommentString;
+        $placeholder
           .removeClass('hidden')
-          .text(newCommentString)
           .closest('.js-comment')
           // Add 'new' class to the comment, so it can be styled.
           .addClass('new');
@@ -41,13 +41,13 @@
         // this is the first new comment in the DOM.
         if (isFirstNewComment) {
           isFirstNewComment = false;
-          $comment.prev().before('<a id="new"></a>');
+          $placeholder.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') {
             window.scrollTo(
               0,
-              $comment.offset().top - Drupal.displace.offsets.top,
+              $placeholder.offset().top - Drupal.displace.offsets.top,
             );
           }
         }

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

@@ -18,14 +18,15 @@
       const lastViewTimestamp = Drupal.history.getLastRead(nodeID);
 
       if (timestamp > lastViewTimestamp) {
-        const $comment = $(placeholder).removeClass('hidden').text(newCommentString).closest('.js-comment').addClass('new');
+        placeholder.textContent = newCommentString;
+        $placeholder.removeClass('hidden').closest('.js-comment').addClass('new');
 
         if (isFirstNewComment) {
           isFirstNewComment = false;
-          $comment.prev().before('<a id="new"></a>');
+          $placeholder.prev().before('<a id="new"></a>');
 
           if (window.location.hash === '#new') {
-            window.scrollTo(0, $comment.offset().top - Drupal.displace.offsets.top);
+            window.scrollTo(0, $placeholder.offset().top - Drupal.displace.offsets.top);
           }
         }
       }

core/modules/comment/js/node-new-comments-link.es6.js

@@ -115,17 +115,17 @@
     function render(results) {
       Object.keys(results || {}).forEach((nodeID) => {
         if ($placeholdersToUpdate.hasOwnProperty(nodeID)) {
-          $placeholdersToUpdate[nodeID]
+          const $placeholderItem = $placeholdersToUpdate[nodeID];
-            .attr('href', results[nodeID].first_new_comment_link)
+          const result = results[nodeID];
-            .text(
+          $placeholderItem[0].textContent = Drupal.formatPlural(
-              Drupal.formatPlural(
+            result.new_comment_count,
-                results[nodeID].new_comment_count,
             '1 new comment',
             '@count new comments',
-              ),
+          );
-            )
+          $placeholderItem
+            .attr('href', result.first_new_comment_link)
             .removeClass('hidden');
-          show($placeholdersToUpdate[nodeID]);
+          show($placeholderItem);
         }
       });
     }

core/modules/comment/js/node-new-comments-link.js

@@ -44,8 +44,11 @@
     function render(results) {
       Object.keys(results || {}).forEach(nodeID => {
         if ($placeholdersToUpdate.hasOwnProperty(nodeID)) {
-          $placeholdersToUpdate[nodeID].attr('href', results[nodeID].first_new_comment_link).text(Drupal.formatPlural(results[nodeID].new_comment_count, '1 new comment', '@count new comments')).removeClass('hidden');
+          const $placeholderItem = $placeholdersToUpdate[nodeID];
-          show($placeholdersToUpdate[nodeID]);
+          const result = results[nodeID];
+          $placeholderItem[0].textContent = Drupal.formatPlural(result.new_comment_count, '1 new comment', '@count new comments');
+          $placeholderItem.attr('href', result.first_new_comment_link).removeClass('hidden');
+          show($placeholderItem);
         }
       });
     }

core/modules/contextual/js/contextual.es6.js

@@ -107,9 +107,14 @@
       this.setAttribute('href', url + glue + destination);
     });
 
+    let title = '';
+    const $regionHeading = $region.find('h2');
+    if ($regionHeading.length) {
+      title = $regionHeading[0].textContent.trim();
+    }
     // Create a model and the appropriate views.
     const model = new contextual.StateModel({
-      title: $region.find('h2').eq(0).text().trim(),
+      title,
     });
     const viewOptions = $.extend({ el: $contextual, model }, options);
     contextual.views.push({

core/modules/contextual/js/contextual.js

@@ -60,8 +60,15 @@
       const glue = url.indexOf('?') === -1 ? '?' : '&';
       this.setAttribute('href', url + glue + destination);
     });
+    let title = '';
+    const $regionHeading = $region.find('h2');
+
+    if ($regionHeading.length) {
+      title = $regionHeading[0].textContent.trim();
+    }
+
     const model = new contextual.StateModel({
-      title: $region.find('h2').eq(0).text().trim()
+      title
     });
     const viewOptions = $.extend({
       el: $contextual,

core/modules/contextual/js/views/AuralView.es6.js

@@ -35,16 +35,19 @@
         this.$el.find('.contextual-links').prop('hidden', !isOpen);
 
         // Update the view of the trigger.
-        this.$el
+        const $trigger = this.$el.find('.trigger');
-          .find('.trigger')
+        $trigger
-          .text(
+          .each((index, element) => {
-            Drupal.t('@action @title configuration options', {
+            element.textContent = Drupal.t(
+              '@action @title configuration options',
+              {
                 '@action': !isOpen
                   ? this.options.strings.open
                   : this.options.strings.close,
                 '@title': this.model.get('title'),
-            }),
+              },
-          )
+            );
+          })
           .attr('aria-pressed', isOpen);
       },
     },

core/modules/contextual/js/views/AuralView.js

@@ -16,10 +16,13 @@
     render() {
       const isOpen = this.model.get('isOpen');
       this.$el.find('.contextual-links').prop('hidden', !isOpen);
-      this.$el.find('.trigger').text(Drupal.t('@action @title configuration options', {
+      const $trigger = this.$el.find('.trigger');
+      $trigger.each((index, element) => {
+        element.textContent = Drupal.t('@action @title configuration options', {
           '@action': !isOpen ? this.options.strings.open : this.options.strings.close,
           '@title': this.model.get('title')
-      })).attr('aria-pressed', isOpen);
+        });
+      }).attr('aria-pressed', isOpen);
     }
 
   });

core/modules/editor/js/editor.es6.js

@@ -132,7 +132,7 @@
       const message = Drupal.t(
         'Changing the text format to %text_format will permanently remove content that is not allowed in that text format.<br><br>Save your changes before switching the text format to avoid losing data.',
         {
-          '%text_format': $(select).find('option:selected').text(),
+          '%text_format': $(select).find('option:selected')[0].textContent,
         },
       );
       const confirmationDialog = Drupal.dialog(`<div>${message}</div>`, {

core/modules/editor/js/editor.js

@@ -68,7 +68,7 @@
 
     if (hasContent && supportContentFiltering) {
       const message = Drupal.t('Changing the text format to %text_format will permanently remove content that is not allowed in that text format.<br><br>Save your changes before switching the text format to avoid losing data.', {
-        '%text_format': $(select).find('option:selected').text()
+        '%text_format': $(select).find('option:selected')[0].textContent
       });
       const confirmationDialog = Drupal.dialog(`<div>${message}</div>`, {
         title: Drupal.t('Change text format?'),

core/modules/layout_builder/js/layout-builder.es6.js

@@ -43,9 +43,9 @@
          *   The link to add the block.
          */
         const toggleBlockEntry = (index, link) => {
-          const $link = $(link);
+          const textMatch =
-          const textMatch = $link.text().toLowerCase().indexOf(query) !== -1;
+            link.textContent.toLowerCase().indexOf(query) !== -1;
-          $link.toggle(textMatch);
+          $(link).toggle(textMatch);
         };
 
         // Filter if the length of the query is at least 2 characters.

core/modules/layout_builder/js/layout-builder.js

@@ -23,9 +23,8 @@
         const query = e.target.value.toLowerCase();
 
         const toggleBlockEntry = (index, link) => {
-          const $link = $(link);
+          const textMatch = link.textContent.toLowerCase().indexOf(query) !== -1;
-          const textMatch = $link.text().toLowerCase().indexOf(query) !== -1;
+          $(link).toggle(textMatch);
-          $link.toggle(textMatch);
         };
 
         if (query.length >= 2) {

core/modules/locale/locale.admin.es6.js

@@ -79,14 +79,13 @@
 
           $tr.toggleClass('expanded');
 
+          const $localePrefix = $tr.find('.locale-translation-update__prefix');
+          if ($localePrefix.length) {
             // Change screen reader text.
-          $tr.find('.locale-translation-update__prefix').text(() => {
+            $localePrefix[0].textContent = $tr.hasClass('expanded')
-            if ($tr.hasClass('expanded')) {
+              ? Drupal.t('Hide description')
-              return Drupal.t('Hide description');
+              : Drupal.t('Show description');
           }
-
-            return Drupal.t('Show description');
-          });
         });
         $table.find('.requirements, .links').hide();
       }

core/modules/locale/locale.admin.js

@@ -56,13 +56,11 @@
           e.preventDefault();
           const $tr = $(this).closest('tr');
           $tr.toggleClass('expanded');
-          $tr.find('.locale-translation-update__prefix').text(() => {
+          const $localePrefix = $tr.find('.locale-translation-update__prefix');
-            if ($tr.hasClass('expanded')) {
-              return Drupal.t('Hide description');
-            }
 
-            return Drupal.t('Show description');
+          if ($localePrefix.length) {
-          });
+            $localePrefix[0].textContent = $tr.hasClass('expanded') ? Drupal.t('Hide description') : Drupal.t('Show description');
+          }
         });
         $table.find('.requirements, .links').hide();
       }

core/modules/media/js/type_form.es6.js

@@ -22,7 +22,7 @@
           .find('input[name^="options"]:checked')
           .parent()
           .each(function () {
-            vals.push(Drupal.checkPlain($(this).find('label').text()));
+            vals.push(Drupal.checkPlain($(this).find('label')[0].textContent));
           });
         if (!$(context).find('#edit-options-status').is(':checked')) {
           vals.unshift(Drupal.t('Not published'));
@@ -35,18 +35,16 @@
           const vals = [];
 
           vals.push(
-            $(context)
+            $(context).find(
-              .find(
               '.js-form-item-language-configuration-langcode select option:selected',
-              )
+            )[0].textContent,
-              .text(),
           );
 
           $(context)
             .find('input:checked')
             .next('label')
             .each(function () {
-              vals.push(Drupal.checkPlain($(this).text()));
+              vals.push(Drupal.checkPlain(this.textContent));
             });
 
           return vals.join(', ');

core/modules/media/js/type_form.js

@@ -12,7 +12,7 @@
       $context.find('#edit-workflow').drupalSetSummary(context => {
         const vals = [];
         $(context).find('input[name^="options"]:checked').parent().each(function () {
-          vals.push(Drupal.checkPlain($(this).find('label').text()));
+          vals.push(Drupal.checkPlain($(this).find('label')[0].textContent));
         });
 
         if (!$(context).find('#edit-options-status').is(':checked')) {
@@ -23,9 +23,9 @@
       });
       $(context).find('#edit-language').drupalSetSummary(context => {
         const vals = [];
-        vals.push($(context).find('.js-form-item-language-configuration-langcode select option:selected').text());
+        vals.push($(context).find('.js-form-item-language-configuration-langcode select option:selected')[0].textContent);
         $(context).find('input:checked').next('label').each(function () {
-          vals.push(Drupal.checkPlain($(this).text()));
+          vals.push(Drupal.checkPlain(this.textContent));
         });
         return vals.join(', ');
       });

core/modules/media_library/js/media_library.view.es6.js

@@ -39,9 +39,8 @@
             Drupal.announce(announcement);
           },
         );
-        const $label = $(
+        const $label = $('<label class="media-library-select-all"></label>');
-          '<label class="media-library-select-all"></label>',
+        $label[0].textContent = Drupal.t('Select all media');
-        ).text(Drupal.t('Select all media'));
         $label.prepend($checkbox);
         $view.find('.js-media-library-item').first().before($label);
       }

core/modules/media_library/js/media_library.view.js

@@ -21,7 +21,8 @@
           }) : Drupal.t('Zero items selected');
           Drupal.announce(announcement);
         });
-        const $label = $('<label class="media-library-select-all"></label>').text(Drupal.t('Select all media'));
+        const $label = $('<label class="media-library-select-all"></label>');
+        $label[0].textContent = Drupal.t('Select all media');
         $label.prepend($checkbox);
         $view.find('.js-media-library-item').first().before($label);
       }

core/modules/media_library/js/media_library.widget.es6.js

@@ -44,28 +44,28 @@
         show: Drupal.t('Show media item weights'),
         hide: Drupal.t('Hide media item weights'),
       };
-      $(
+      const mediaLibraryToggle = once(
-        once(
         'media-library-toggle',
         '.js-media-library-widget-toggle-weight',
         context,
-        ),
+      );
-      )
+      $(mediaLibraryToggle).on('click', (e) => {
-        .on('click', (e) => {
         e.preventDefault();
-          $(e.currentTarget)
+        const $target = $(e.currentTarget);
+        e.currentTarget.textContent = $target.hasClass('active')
+          ? strings.show
+          : strings.hide;
+        $target
           .toggleClass('active')
-            .text(
-              $(e.currentTarget).hasClass('active')
-                ? strings.hide
-                : strings.show,
-            )
           .closest('.js-media-library-widget')
           .find('.js-media-library-item-weight')
           .parent()
           .toggle();
-        })
+      });
-        .text(strings.show);
+      mediaLibraryToggle.forEach((item) => {
+        item.textContent = strings.show;
+      });
+
       $(once('media-library-toggle', '.js-media-library-item-weight', context))
         .parent()
         .hide();

core/modules/media_library/js/media_library.widget.js

@@ -29,10 +29,16 @@
         show: Drupal.t('Show media item weights'),
         hide: Drupal.t('Hide media item weights')
       };
-      $(once('media-library-toggle', '.js-media-library-widget-toggle-weight', context)).on('click', e => {
+      const mediaLibraryToggle = once('media-library-toggle', '.js-media-library-widget-toggle-weight', context);
+      $(mediaLibraryToggle).on('click', e => {
         e.preventDefault();
-        $(e.currentTarget).toggleClass('active').text($(e.currentTarget).hasClass('active') ? strings.hide : strings.show).closest('.js-media-library-widget').find('.js-media-library-item-weight').parent().toggle();
+        const $target = $(e.currentTarget);
-      }).text(strings.show);
+        e.currentTarget.textContent = $target.hasClass('active') ? strings.show : strings.hide;
+        $target.toggleClass('active').closest('.js-media-library-widget').find('.js-media-library-item-weight').parent().toggle();
+      });
+      mediaLibraryToggle.forEach(item => {
+        item.textContent = strings.show;
+      });
       $(once('media-library-toggle', '.js-media-library-item-weight', context)).parent().hide();
     }
 

core/modules/menu_ui/menu_ui.admin.es6.js

@@ -54,7 +54,7 @@
           const selectContents = document.createElement('option');
           selectContents.selected = machineName === selected;
           selectContents.value = machineName;
-          selectContents.innerText = options[machineName];
+          selectContents.textContent = options[machineName];
           $select.append(selectContents);
           totalOptions++;
         });

core/modules/menu_ui/menu_ui.admin.js

@@ -42,7 +42,7 @@
           const selectContents = document.createElement('option');
           selectContents.selected = machineName === selected;
           selectContents.value = machineName;
-          selectContents.innerText = options[machineName];
+          selectContents.textContent = options[machineName];
           $select.append(selectContents);
           totalOptions++;
         });

core/modules/node/content_types.es6.js

@@ -30,7 +30,7 @@
           .find('input[name^="options"]:checked')
           .next('label')
           .each(function () {
-            vals.push(Drupal.checkPlain($(this).text()));
+            vals.push(Drupal.checkPlain(this.textContent));
           });
         if (!$(context).find('#edit-options-status').is(':checked')) {
           vals.unshift(Drupal.t('Not published'));
@@ -44,13 +44,13 @@
           $(
             '.js-form-item-language-configuration-langcode select option:selected',
             context,
-          ).text(),
+          )[0].textContent,
         );
 
         $('input:checked', context)
           .next('label')
           .each(function () {
-            vals.push(Drupal.checkPlain($(this).text()));
+            vals.push(Drupal.checkPlain(this.textContent));
           });
 
         return vals.join(', ');
@@ -62,7 +62,7 @@
           .find('input:checked')
           .next('label')
           .each(function () {
-            vals.push(Drupal.checkPlain($(this).text()));
+            vals.push(Drupal.checkPlain(this.textContent));
           });
         if (!$editContext.find('#edit-display-submitted').is(':checked')) {
           vals.unshift(Drupal.t("Don't display post information"));

core/modules/node/content_types.js

@@ -17,7 +17,7 @@
       $context.find('#edit-workflow').drupalSetSummary(context => {
         const vals = [];
         $(context).find('input[name^="options"]:checked').next('label').each(function () {
-          vals.push(Drupal.checkPlain($(this).text()));
+          vals.push(Drupal.checkPlain(this.textContent));
         });
 
         if (!$(context).find('#edit-options-status').is(':checked')) {
@@ -28,9 +28,9 @@
       });
       $('#edit-language', context).drupalSetSummary(context => {
         const vals = [];
-        vals.push($('.js-form-item-language-configuration-langcode select option:selected', context).text());
+        vals.push($('.js-form-item-language-configuration-langcode select option:selected', context)[0].textContent);
         $('input:checked', context).next('label').each(function () {
-          vals.push(Drupal.checkPlain($(this).text()));
+          vals.push(Drupal.checkPlain(this.textContent));
         });
         return vals.join(', ');
       });
@@ -38,7 +38,7 @@
         const vals = [];
         const $editContext = $(context);
         $editContext.find('input:checked').next('label').each(function () {
-          vals.push(Drupal.checkPlain($(this).text()));
+          vals.push(Drupal.checkPlain(this.textContent));
         });
 
         if (!$editContext.find('#edit-display-submitted').is(':checked')) {

core/modules/node/node.es6.js

@@ -45,7 +45,7 @@
             .find('input:checked')
             .next('label')
             .each(function () {
-              vals.push(Drupal.checkPlain($(this).text().trim()));
+              vals.push(Drupal.checkPlain(this.textContent.trim()));
             });
           return vals.join(', ');
         }

core/modules/node/node.js

@@ -40,7 +40,7 @@
 
         if ($optionsContext.find('input').is(':checked')) {
           $optionsContext.find('input:checked').next('label').each(function () {
-            vals.push(Drupal.checkPlain($(this).text().trim()));
+            vals.push(Drupal.checkPlain(this.textContent.trim()));
           });
           return vals.join(', ');
         }

core/modules/quickedit/js/editors/plainTextEditor.es6.js

@@ -30,12 +30,15 @@
         const $fieldItems = this.$el.find('.quickedit-field');
         const $textElement = $fieldItems.length ? $fieldItems.eq(0) : this.$el;
         this.$textElement = $textElement;
-        editorModel.set('originalValue', this.$textElement.text().trim());
+        editorModel.set(
+          'originalValue',
+          this.$textElement[0].textContent.trim(),
+        );
 
         // Sets the state to 'changed' whenever the value changes.
         let previousText = editorModel.get('originalValue');
         $textElement.on('keyup paste', (event) => {
-          const currentText = $textElement.text().trim();
+          const currentText = $textElement[0].textContent.trim();
           if (previousText !== currentText) {
             previousText = currentText;
             editorModel.set('currentValue', currentText);

core/modules/quickedit/js/editors/plainTextEditor.js

@@ -16,10 +16,10 @@
       const $fieldItems = this.$el.find('.quickedit-field');
       const $textElement = $fieldItems.length ? $fieldItems.eq(0) : this.$el;
       this.$textElement = $textElement;
-      editorModel.set('originalValue', this.$textElement.text().trim());
+      editorModel.set('originalValue', this.$textElement[0].textContent.trim());
       let previousText = editorModel.get('originalValue');
       $textElement.on('keyup paste', event => {
-        const currentText = $textElement.text().trim();
+        const currentText = $textElement[0].textContent.trim();
 
         if (previousText !== currentText) {
           previousText = currentText;

core/modules/quickedit/js/views/ContextualLinkView.es6.js

@@ -46,7 +46,9 @@
        */
       initialize(options) {
         // Insert the text of the quick edit toggle.
-        this.$el.find('a').text(options.strings.quickEdit);
+        this.$el.find('a').each((index, element) => {
+          element.textContent = options.strings.quickEdit;
+        });
         // Initial render.
         this.render();
         // Re-render whenever this entity's isActive attribute changes.

core/modules/quickedit/js/views/ContextualLinkView.js

@@ -23,7 +23,9 @@
     },
 
     initialize(options) {
-      this.$el.find('a').text(options.strings.quickEdit);
+      this.$el.find('a').each((index, element) => {
+        element.textContent = options.strings.quickEdit;
+      });
       this.render();
       this.listenTo(this.model, 'change:isActive', this.render);
     },

core/modules/quickedit/js/views/EntityToolbarView.es6.js

@@ -127,18 +127,18 @@
           case 'opened':
             // The saving throbber is not managed by AJAX system. The
             // EntityToolbarView manages this visual element.
+            $button[0].textContent = Drupal.t('Save');
             $button
               .removeClass('action-saving icon-throbber icon-end')
-              .text(Drupal.t('Save'))
               .removeAttr('disabled')
               .attr('aria-hidden', !isDirty);
             break;
 
           // The changes to the fields of the entity are being committed.
           case 'committing':
+            $button[0].textContent = Drupal.t('Saving');
             $button
               .addClass('action-saving icon-throbber icon-end')
-              .text(Drupal.t('Saving'))
               .attr('disabled', 'disabled');
             break;
 

core/modules/quickedit/js/views/EntityToolbarView.js

@@ -59,11 +59,13 @@
 
       switch (this.model.get('state')) {
         case 'opened':
-          $button.removeClass('action-saving icon-throbber icon-end').text(Drupal.t('Save')).removeAttr('disabled').attr('aria-hidden', !isDirty);
+          $button[0].textContent = Drupal.t('Save');
+          $button.removeClass('action-saving icon-throbber icon-end').removeAttr('disabled').attr('aria-hidden', !isDirty);
           break;
 
         case 'committing':
-          $button.addClass('action-saving icon-throbber icon-end').text(Drupal.t('Saving')).attr('disabled', 'disabled');
+          $button[0].textContent = Drupal.t('Saving');
+          $button.addClass('action-saving icon-throbber icon-end').attr('disabled', 'disabled');
           break;
 
         default:

core/modules/settings_tray/js/settings_tray.es6.js

@@ -74,11 +74,13 @@
       );
     }
     editMode = !!editMode;
-    const $editButton = $(toggleEditSelector);
     let $editables;
+    const editButton = document.querySelector(toggleEditSelector);
     // Turn on edit mode.
     if (editMode) {
-      $editButton.text(Drupal.t('Editing'));
+      if (editButton) {
+        editButton.textContent = Drupal.t('Editing');
+      }
       closeToolbarTrays();
 
       $editables = $(
@@ -142,8 +144,9 @@
         $editables.off('.settingstray');
         $(quickEditItemSelector).off('.settingstray');
       }
-
+      if (editButton) {
-      $editButton.text(Drupal.t('Edit'));
+        editButton.textContent = Drupal.t('Edit');
+      }
       closeOffCanvas();
       disableQuickEdit();
     }

core/modules/settings_tray/js/settings_tray.js

@@ -42,11 +42,14 @@
     }
 
     editMode = !!editMode;
-    const $editButton = $(toggleEditSelector);
     let $editables;
+    const editButton = document.querySelector(toggleEditSelector);
 
     if (editMode) {
-      $editButton.text(Drupal.t('Editing'));
+      if (editButton) {
+        editButton.textContent = Drupal.t('Editing');
+      }
+
       closeToolbarTrays();
       $editables = $(once('settingstray', '[data-drupal-settingstray="editable"]'));
 
@@ -81,7 +84,10 @@
         $(quickEditItemSelector).off('.settingstray');
       }
 
-      $editButton.text(Drupal.t('Edit'));
+      if (editButton) {
+        editButton.textContent = Drupal.t('Edit');
+      }
+
       closeOffCanvas();
       disableQuickEdit();
     }

core/modules/system/js/system.date.es6.js

@@ -32,9 +32,6 @@
         return;
       }
 
-      const $target = $(target);
-      const $preview = $target.find('em');
-
       /**
        * Event handler that replaces date characters with value.
        *
@@ -47,8 +44,14 @@
           dateFormats[key] ? dateFormats[key] : value,
         );
 
-        $preview.text(dateString);
+        // Set date preview.
-        $target.toggleClass('js-hide', !dateString.length);
+        target.forEach((item) => {
+          item.querySelectorAll('em').forEach((em) => {
+            em.textContent = dateString;
+          });
+        });
+
+        $(target).toggleClass('js-hide', !dateString.length);
       }
 
       /**

core/modules/system/js/system.date.js

@@ -16,14 +16,15 @@
         return;
       }
 
-      const $target = $(target);
-      const $preview = $target.find('em');
-
       function dateFormatHandler(e) {
         const baseValue = e.target.value || '';
         const dateString = baseValue.replace(/\\?(.?)/gi, (key, value) => dateFormats[key] ? dateFormats[key] : value);
-        $preview.text(dateString);
+        target.forEach(item => {
-        $target.toggleClass('js-hide', !dateString.length);
+          item.querySelectorAll('em').forEach(em => {
+            em.textContent = dateString;
+          });
+        });
+        $(target).toggleClass('js-hide', !dateString.length);
       }
 
       $(source).on('keyup.dateFormat change.dateFormat input.dateFormat', dateFormatHandler).trigger('keyup');

core/modules/system/js/system.modules.es6.js

@@ -40,12 +40,16 @@
         const re = new RegExp(`\\b${query}`, 'i');
 
         function showModuleRow(index, row) {
-          const $row = $(row);
+          const sources = row.querySelectorAll(
-          const $sources = $row.find(
             '.table-filter-text-source, .module-name, .module-description',
           );
-          const textMatch = $sources.text().search(re) !== -1;
+          let sourcesConcat = '';
-          $row.closest('tr').toggle(textMatch);
+          // Concatenate the textContent of the elements in the row.
+          sources.forEach((item) => {
+            sourcesConcat += item.textContent;
+          });
+          const textMatch = sourcesConcat.search(re) !== -1;
+          $(row).closest('tr').toggle(textMatch);
         }
         // Search over all rows and packages.
         $rowsAndDetails.show();

core/modules/system/js/system.modules.js

@@ -31,10 +31,13 @@
         const re = new RegExp(`\\b${query}`, 'i');
 
         function showModuleRow(index, row) {
-          const $row = $(row);
+          const sources = row.querySelectorAll('.table-filter-text-source, .module-name, .module-description');
-          const $sources = $row.find('.table-filter-text-source, .module-name, .module-description');
+          let sourcesConcat = '';
-          const textMatch = $sources.text().search(re) !== -1;
+          sources.forEach(item => {
-          $row.closest('tr').toggle(textMatch);
+            sourcesConcat += item.textContent;
+          });
+          const textMatch = sourcesConcat.search(re) !== -1;
+          $(row).closest('tr').toggle(textMatch);
         }
 
         $rowsAndDetails.show();

core/modules/system/system.libraries.yml

@@ -62,6 +62,7 @@ drupal.system.modules:
     - core/jquery
     - core/drupal
     - core/drupal.debounce
+    - core/drupal.nodelist.foreach
     - core/once
     - core/jquery.once.bc
     - core/drupal.announce
@@ -79,6 +80,7 @@ drupal.system.date:
   dependencies:
     - core/jquery
     - core/drupal
+    - core/drupal.nodelist.foreach
     - core/drupalSettings
     - core/once
     - core/jquery.once.bc

core/modules/toolbar/js/escapeAdmin.es6.js

@@ -34,11 +34,10 @@
     attach() {
       const toolbarEscape = once('escapeAdmin', '[data-toolbar-escape-admin]');
       if (toolbarEscape.length && pathInfo.currentPathIsAdmin) {
-        const $toolbarEscape = $(toolbarEscape);
         if (escapeAdminPath !== null) {
-          $toolbarEscape.attr('href', escapeAdminPath);
+          $(toolbarEscape).attr('href', escapeAdminPath);
         } else {
-          $toolbarEscape.text(Drupal.t('Home'));
+          toolbarEscape[0].textContent = Drupal.t('Home');
         }
       }
     },

core/modules/toolbar/js/escapeAdmin.js

@@ -19,12 +19,10 @@
       const toolbarEscape = once('escapeAdmin', '[data-toolbar-escape-admin]');
 
       if (toolbarEscape.length && pathInfo.currentPathIsAdmin) {
-        const $toolbarEscape = $(toolbarEscape);
-
         if (escapeAdminPath !== null) {
-          $toolbarEscape.attr('href', escapeAdminPath);
+          $(toolbarEscape).attr('href', escapeAdminPath);
         } else {
-          $toolbarEscape.text(Drupal.t('Home'));
+          toolbarEscape[0].textContent = Drupal.t('Home');
         }
       }
     }

core/modules/toolbar/js/toolbar.menu.es6.js

@@ -41,10 +41,10 @@
       // Twist the toggle.
       $toggle.toggleClass('open', switcher);
       // Adjust the toggle text.
-      $toggle
+      $toggle.find('.action').each((index, element) => {
-        .find('.action')
         // Expand Structure, Collapse Structure.
-        .text(switcher ? ui.handleClose : ui.handleOpen);
+        element.textContent = switcher ? ui.handleClose : ui.handleOpen;
+      });
     }
 
     /**
@@ -107,8 +107,9 @@
         const $item = $(element);
         if ($item.children('ul.toolbar-menu').length) {
           const $box = $item.children('.toolbar-box');
+          const $link = $box.find('a');
           options.text = Drupal.t('@label', {
-            '@label': $box.find('a').text(),
+            '@label': $link.length ? $link[0].textContent : '',
           });
           $item
             .children('.toolbar-box')

core/modules/toolbar/js/toolbar.menu.js

@@ -19,7 +19,9 @@
       switcher = typeof switcher !== 'undefined' ? switcher : !$item.hasClass('open');
       $item.toggleClass('open', switcher);
       $toggle.toggleClass('open', switcher);
-      $toggle.find('.action').text(switcher ? ui.handleClose : ui.handleOpen);
+      $toggle.find('.action').each((index, element) => {
+        element.textContent = switcher ? ui.handleClose : ui.handleOpen;
+      });
     }
 
     function toggleClickHandler(event) {
@@ -50,8 +52,9 @@
 
         if ($item.children('ul.toolbar-menu').length) {
           const $box = $item.children('.toolbar-box');
+          const $link = $box.find('a');
           options.text = Drupal.t('@label', {
-            '@label': $box.find('a').text()
+            '@label': $link.length ? $link[0].textContent : ''
           });
           $item.children('.toolbar-box').append(Drupal.theme('toolbarMenuItemToggle', options));
         }

core/modules/toolbar/js/views/ToolbarVisualView.es6.js

@@ -292,9 +292,9 @@
         $orientationToggleButton[0].value = antiOrientation;
         $orientationToggleButton
           .attr('title', this.strings[antiOrientation])
-          .text(this.strings[antiOrientation])
           .removeClass(iconClass)
           .addClass(iconAntiClass);
+        $orientationToggleButton[0].textContent = this.strings[antiOrientation];
 
         // Update data offset attributes for the trays.
         const dir = document.documentElement.dir;

core/modules/toolbar/js/views/ToolbarVisualView.js

@@ -146,7 +146,8 @@
       const $orientationToggle = this.$el.find('.toolbar-toggle-orientation').toggle(this.model.get('isTrayToggleVisible'));
       const $orientationToggleButton = $orientationToggle.find('button');
       $orientationToggleButton[0].value = antiOrientation;
-      $orientationToggleButton.attr('title', this.strings[antiOrientation]).text(this.strings[antiOrientation]).removeClass(iconClass).addClass(iconAntiClass);
+      $orientationToggleButton.attr('title', this.strings[antiOrientation]).removeClass(iconClass).addClass(iconAntiClass);
+      $orientationToggleButton[0].textContent = this.strings[antiOrientation];
       const dir = document.documentElement.dir;
       const edge = dir === 'rtl' ? 'right' : 'left';
       $trays.removeAttr('data-offset-left data-offset-right data-offset-top');

core/modules/views_ui/js/ajax.es6.js

@@ -144,8 +144,9 @@
       re,
       `${response.title} $1 ${response.siteName}`,
     );
-
+    document.querySelectorAll('h1.page-title').forEach((item) => {
-    $('h1.page-title').text(response.title);
+      item.textContent = response.title;
+    });
   };
 
   /**

core/modules/views_ui/js/ajax.js

@@ -50,7 +50,9 @@
     const escapedSiteName = response.siteName.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
     const re = new RegExp(`.+ (.) ${escapedSiteName}`);
     doc.title = oldTitle.replace(re, `${response.title} $1 ${response.siteName}`);
-    $('h1.page-title').text(response.title);
+    document.querySelectorAll('h1.page-title').forEach(item => {
+      item.textContent = response.title;
+    });
   };
 
   Drupal.theme.tableDragChangedWarning = function () {

core/modules/views_ui/js/views-admin.es6.js

@@ -537,8 +537,7 @@
           $description = $option.find('.description');
           options[i] = {
             // Search on the lowercase version of the title text + description.
-            searchText: `${$title.text().toLowerCase()} ${$description
+            searchText: `${$title[0].textContent.toLowerCase()} ${$description[0].textContent.toLowerCase()}
-              .text()
               .toLowerCase()}`,
             // Maintain a reference to the jQuery object for each row, so we don't
             // have to create a new object inside the performance-sensitive keyup

core/modules/views_ui/js/views-admin.js

@@ -255,7 +255,8 @@
         $title = $option.find('.title');
         $description = $option.find('.description');
         options[i] = {
-          searchText: `${$title.text().toLowerCase()} ${$description.text().toLowerCase()}`,
+          searchText: `${$title[0].textContent.toLowerCase()} ${$description[0].textContent.toLowerCase()}
+              .toLowerCase()}`,
           $div: $option
         };
       }

core/modules/views_ui/js/views_ui.listing.es6.js

@@ -29,12 +29,15 @@
         const query = e.target.value.toLowerCase();
 
         function showViewRow(index, row) {
-          const $row = $(row);
+          const sources = row.querySelectorAll(
-          const $sources = $row.find(
             '[data-drupal-selector="views-table-filter-text-source"]',
           );
-          const textMatch = $sources.text().toLowerCase().indexOf(query) !== -1;
+          let sourcesConcat = '';
-          $row.closest('tr').toggle(textMatch);
+          sources.forEach((item) => {
+            sourcesConcat += item.textContent;
+          });
+          const textMatch = sourcesConcat.toLowerCase().indexOf(query) !== -1;
+          $(row).closest('tr').toggle(textMatch);
         }
 
         // Filter if the length of the query is at least 2 characters.

core/modules/views_ui/js/views_ui.listing.js

@@ -21,10 +21,13 @@
         const query = e.target.value.toLowerCase();
 
         function showViewRow(index, row) {
-          const $row = $(row);
+          const sources = row.querySelectorAll('[data-drupal-selector="views-table-filter-text-source"]');
-          const $sources = $row.find('[data-drupal-selector="views-table-filter-text-source"]');
+          let sourcesConcat = '';
-          const textMatch = $sources.text().toLowerCase().indexOf(query) !== -1;
+          sources.forEach(item => {
-          $row.closest('tr').toggle(textMatch);
+            sourcesConcat += item.textContent;
+          });
+          const textMatch = sourcesConcat.toLowerCase().indexOf(query) !== -1;
+          $(row).closest('tr').toggle(textMatch);
         }
 
         if (query.length >= 2) {

core/modules/views_ui/views_ui.libraries.yml

@@ -14,6 +14,7 @@ views_ui.admin:
     - core/drupal.form
     - core/drupal.ajax
     - core/drupal.dropbutton
+    - core/drupal.nodelist.foreach
     - views/views.ajax
     - views_ui/admin.styling
 
@@ -24,6 +25,7 @@ views_ui.listing:
   dependencies:
     - core/jquery
     - core/drupal
+    - core/drupal.string.includes
     - core/once
     - core/jquery.once.bc
     - views_ui/admin.styling

core/themes/claro/js/vertical-tabs.es6.js

@@ -130,7 +130,7 @@
             const $that = $(this);
             /* eslint-disable new-cap */
             const verticalTab = new Drupal.verticalTab({
-              title: $that.find('> summary').text(),
+              title: $that.find('> summary')[0].textContent,
               details: $that,
             });
             /* eslint-enable new-cap */
@@ -394,16 +394,14 @@
    */
   Drupal.theme.verticalTab = (settings) => {
     const tab = {};
+    tab.title = $('<strong class="vertical-tabs__menu-link-title"></strong>');
+    tab.title[0].textContent = settings.title;
     tab.item = $(
       '<li class="vertical-tabs__menu-item" tabindex="-1"></li>',
     ).append(
       (tab.link = $('<a href="#" class="vertical-tabs__menu-link"></a>').append(
         $('<span class="vertical-tabs__menu-link-content"></span>')
-          .append(
+          .append(tab.title)
-            (tab.title = $(
-              '<strong class="vertical-tabs__menu-link-title"></strong>',
-            ).text(settings.title)),
-          )
           .append(
             (tab.summary = $(
               '<span class="vertical-tabs__menu-link-summary"></span>',

core/themes/claro/js/vertical-tabs.js

@@ -30,7 +30,7 @@
         $details.each(function initializeVerticalTabItems() {
           const $that = $(this);
           const verticalTab = new Drupal.verticalTab({
-            title: $that.find('> summary').text(),
+            title: $that.find('> summary')[0].textContent,
             details: $that
           });
           tabList.append(verticalTab.item);
@@ -166,7 +166,9 @@
 
   Drupal.theme.verticalTab = settings => {
     const tab = {};
-    tab.item = $('<li class="vertical-tabs__menu-item" tabindex="-1"></li>').append(tab.link = $('<a href="#" class="vertical-tabs__menu-link"></a>').append($('<span class="vertical-tabs__menu-link-content"></span>').append(tab.title = $('<strong class="vertical-tabs__menu-link-title"></strong>').text(settings.title)).append(tab.summary = $('<span class="vertical-tabs__menu-link-summary"></span>'))));
+    tab.title = $('<strong class="vertical-tabs__menu-link-title"></strong>');
+    tab.title[0].textContent = settings.title;
+    tab.item = $('<li class="vertical-tabs__menu-item" tabindex="-1"></li>').append(tab.link = $('<a href="#" class="vertical-tabs__menu-link"></a>').append($('<span class="vertical-tabs__menu-link-content"></span>').append(tab.title).append(tab.summary = $('<span class="vertical-tabs__menu-link-summary"></span>'))));
     return tab;
   };