Issue #3011722 by pasan.gamage, ilya.no, Eric115, alexpott, lauriii: Hard coded 'pagination-heading' HTML ID can lead to duplicate ID's

core/includes/pager.inc

@@ -6,6 +6,7 @@
  */
 
 use Drupal\Component\Utility\UrlHelper;
+use Drupal\Component\Utility\Html;
 
 /**
  * Returns the current page being requested for display within a pager.
@@ -278,6 +279,7 @@ function template_preprocess_pager(&$variables) {
   }
 
   $variables['items'] = $items;
+  $variables['heading_id'] = Html::getUniqueId('pagination-heading');
 
   // The rendered link needs to play well with any other query parameter used
   // on the page, like exposed filters, so for the cacheability all query

core/modules/system/templates/pager.html.twig

@@ -4,6 +4,7 @@
  * Default theme implementation to display a pager.
  *
  * Available variables:
+ * - heading_id: Pagination heading ID.
  * - items: List of pager items.
  *   The list is keyed by the following elements:
  *   - first: Item for the first page; not present on the first page of results.
@@ -32,8 +33,8 @@
  */
 #}
 {% if items %}
-  <nav class="pager" role="navigation" aria-labelledby="pagination-heading">
-    <h4 id="pagination-heading" class="visually-hidden">{{ 'Pagination'|t }}</h4>
+  <nav class="pager" role="navigation" aria-labelledby="{{ heading_id }}">
+    <h4 id="{{ heading_id }}" class="visually-hidden">{{ 'Pagination'|t }}</h4>
     <ul class="pager__items js-pager__items">
       {# Print first item if we are not on the first page. #}
       {% if items.first %}

core/themes/classy/templates/navigation/pager.html.twig

@@ -4,6 +4,7 @@
  * Theme override to display a pager.
  *
  * Available variables:
+ * - heading_id: Pagination heading ID.
  * - items: List of pager items.
  *   The list is keyed by the following elements:
  *   - first: Item for the first page; not present on the first page of results.
@@ -30,8 +31,8 @@
  */
 #}
 {% if items %}
-  <nav class="pager" role="navigation" aria-labelledby="pagination-heading">
-    <h4 id="pagination-heading" class="visually-hidden">{{ 'Pagination'|t }}</h4>
+  <nav class="pager" role="navigation" aria-labelledby="{{ heading_id }}">
+    <h4 id="{{ heading_id }}" class="visually-hidden">{{ 'Pagination'|t }}</h4>
     <ul class="pager__items js-pager__items">
       {# Print first item if we are not on the first page. #}
       {% if items.first %}

core/themes/stable/templates/navigation/pager.html.twig

@@ -4,6 +4,7 @@
  * Theme override to display a pager.
  *
  * Available variables:
+ * - heading_id: Pagination heading ID.
  * - items: List of pager items.
  *   The list is keyed by the following elements:
  *   - first: Item for the first page; not present on the first page of results.
@@ -30,8 +31,8 @@
  */
 #}
 {% if items %}
-  <nav class="pager" role="navigation" aria-labelledby="pagination-heading">
-    <h4 id="pagination-heading" class="visually-hidden">{{ 'Pagination'|t }}</h4>
+  <nav class="pager" role="navigation" aria-labelledby="{{ heading_id }}">
+    <h4 id="{{ heading_id }}" class="visually-hidden">{{ 'Pagination'|t }}</h4>
     <ul class="pager__items js-pager__items">
       {# Print first item if we are not on the first page. #}
       {% if items.first %}