Issue #3059232 by idebr, KelvinWong, keithnull, PCate, andrewmacpherson,...

Issue #3059232 by idebr, KelvinWong, keithnull, PCate, andrewmacpherson, huzooka, lauriii: Views mini pager Twig template has broken "aria-labelledby" reference

core/modules/views/templates/views-mini-pager.html.twig

@@ -4,6 +4,7 @@
  * Default theme implementation for a views mini-pager.
  *
  * Available variables:
+ * - heading_id: Pagination heading ID.
  * - items: List of pager items.
  *
  * @see template_preprocess_views_mini_pager()
@@ -12,8 +13,8 @@
  */
 #}
 {% if items.previous or items.next %}
-  <nav role="navigation" aria-labelledby="pagination-heading">
-    <h4 class="visually-hidden">{{ 'Pagination'|t }}</h4>
+  <nav role="navigation" aria-labelledby="{{ heading_id }}">
+    <h4 id="{{ heading_id }}" class="visually-hidden">{{ 'Pagination'|t }}</h4>
     <ul class="js-pager__items">
       {% if items.previous %}
         <li>

core/modules/views/views.theme.inc

@@ -1034,6 +1034,8 @@ function template_preprocess_views_mini_pager(&$variables) {
   // This is based on the entire current query string. We need to ensure
   // cacheability is affected accordingly.
   $variables['#cache']['contexts'][] = 'url.query_args';
+
+  $variables['heading_id'] = Html::getUniqueId('pagination-heading');
 }
 
 /**

core/themes/classy/templates/views/views-mini-pager.html.twig

@@ -4,14 +4,15 @@
  * Theme override for a views mini-pager.
  *
  * Available variables:
+ * - heading_id: Pagination heading ID.
  * - items: List of pager items.
  *
  * @see template_preprocess_views_mini_pager()
  */
 #}
 {% if items.previous or items.next %}
-  <nav class="pager" role="navigation" aria-labelledby="pagination-heading">
-    <h4 class="pager__heading visually-hidden">{{ 'Pagination'|t }}</h4>
+  <nav class="pager" role="navigation" aria-labelledby="{{ heading_id }}">
+    <h4 id="{{ heading_id }}" class="pager__heading visually-hidden">{{ 'Pagination'|t }}</h4>
     <ul class="pager__items js-pager__items">
       {% if items.previous %}
         <li class="pager__item pager__item--previous">

core/themes/stable/templates/views/views-mini-pager.html.twig

@@ -4,14 +4,15 @@
  * Theme override for a views mini-pager.
  *
  * Available variables:
+ * - heading_id: Pagination heading ID.
  * - items: List of pager items.
  *
  * @see template_preprocess_views_mini_pager()
  */
 #}
 {% if items.previous or items.next %}
-  <nav role="navigation" aria-labelledby="pagination-heading">
-    <h4 class="visually-hidden">{{ 'Pagination'|t }}</h4>
+  <nav role="navigation" aria-labelledby="{{ heading_id }}">
+    <h4 id="{{ heading_id }}" class="visually-hidden">{{ 'Pagination'|t }}</h4>
     <ul class="js-pager__items">
       {% if items.previous %}
         <li>