Issue #3515452 by herved, grimreaper: Update active-link.js according to core...

Issue #3515452 by herved, grimreaper: Update active-link.js according to core #3464340 and #3038523 + split active trail support in dedicated file

assets/js/misc/active-link-trail.js

+/**
+ * @file
+ * Attaches behaviors for Drupal's active trail link marking.
+ */
+
+((Drupal, drupalSettings) => {
+  const activeClass = 'active';
+
+  /**
+   * Append active class.
+   *
+   * The link is only active if it has data-drupal-active-trail=true.
+   *
+   * Does not discriminate based on element type, so allows you to set the
+   * active class on any element: a, li…
+   *
+   * @type {Drupal~behavior}
+   */
+  Drupal.behaviors.ui_suite_bootstrap_activeTrailLinks = {
+    attach(context) {
+      // Start by finding all potentially active links.
+      const { path } = drupalSettings;
+      const queryString = JSON.stringify(path.currentQuery);
+      const querySelector = queryString
+        ? `[data-drupal-link-query="${CSS.escape(queryString)}"]`
+        : ':not([data-drupal-link-query])';
+      const originalSelectors = [`[data-drupal-active-trail=true]`];
+      let selectors;
+
+      // Add language filtering.
+      selectors = [].concat(
+        // Links without any hreflang attributes (most of them).
+        originalSelectors.map((selector) => `${selector}:not([hreflang])`),
+        // Links with hreflang equals to the current language.
+        originalSelectors.map(
+          (selector) => `${selector}[hreflang="${path.currentLanguage}"]`,
+        ),
+      );
+
+      // Add query string selector for pagers, exposed filters.
+      selectors = selectors.map((current) => current + querySelector);
+
+      // Query the DOM.
+      const activeLinks = context.querySelectorAll(selectors.join(','));
+      const il = activeLinks.length;
+      for (let i = 0; i < il; i++) {
+        activeLinks[i].classList.add(activeClass);
+      }
+    },
+    detach(context, settings, trigger) {
+      if (trigger === 'unload') {
+        const activeLinks = context.querySelectorAll(
+          `[data-drupal-active-trail=true]`,
+        );
+        const il = activeLinks.length;
+        for (let i = 0; i < il; i++) {
+          activeLinks[i].classList.remove(activeClass);
+        }
+      }
+    },
+  };
+})(Drupal, drupalSettings);

assets/js/misc/active-link.js

@@ -25,12 +25,11 @@
       // Start by finding all potentially active links.
       const { path } = drupalSettings;
       const queryString = JSON.stringify(path.currentQuery);
-      const querySelector = path.currentQuery
-        ? `[data-drupal-link-query='${queryString}']`
+      const querySelector = queryString
+        ? `[data-drupal-link-query="${CSS.escape(queryString)}"]`
         : ':not([data-drupal-link-query])';
       const originalSelectors = [
-        `[data-drupal-link-system-path="${path.currentPath}"]`,
-        `[data-drupal-active-trail=true]`,
+        `[data-drupal-link-system-path="${CSS.escape(path.currentPath)}"]`,
       ];
       let selectors;
 
@@ -58,17 +57,18 @@
       const il = activeLinks.length;
       for (let i = 0; i < il; i++) {
         activeLinks[i].classList.add(activeClass);
+        activeLinks[i].setAttribute('aria-current', 'page');
       }
     },
     detach(context, settings, trigger) {
       if (trigger === 'unload') {
         const activeLinks = context.querySelectorAll(
           `[data-drupal-link-system-path].${activeClass}`,
-          `[data-drupal-active-trail=true]`,
         );
         const il = activeLinks.length;
         for (let i = 0; i < il; i++) {
           activeLinks[i].classList.remove(activeClass);
+          activeLinks[i].removeAttribute('aria-current');
         }
       }
     },

ui_suite_bootstrap.info.yml

@@ -101,6 +101,8 @@ libraries-override:
         css/icon.autocomplete.css: false
 
 libraries-extend:
+  core/drupal.active-link:
+    - ui_suite_bootstrap/drupal.active-link
   core/drupal.ajax:
     - ui_suite_bootstrap/drupal.ajax
   core/drupal.autocomplete:

ui_suite_bootstrap.libraries.yml

@@ -23,6 +23,13 @@ component_placeholder:
     theme:
       assets/css/component/placeholder.css: {}
 
+drupal.active-link:
+  js:
+    assets/js/misc/active-link-trail.js: { }
+  dependencies:
+    - core/drupal
+    - core/drupalSettings
+
 drupal.ajax:
   js:
     assets/js/misc/ajax.js: {}