Broken ARIA reference in the views mini pager

[KelvinWong]

The header in the view mini pager has a missing id attribute, causing a broken ARIA labelledby reference in the nav tag.

https://github.com/govCMS/govcms8_uikit_starter/blob/8.x-1.x/templates/views/views-mini-pager.html.twig#L14

[KelvinWong]

Here is a patch that fixes the problem.

diff --git a/templates/views/views-mini-pager.html.twig b/templates/views/views-mini-pager.html.twig
index c8d894e..9b82a09 100644
--- a/templates/views/views-mini-pager.html.twig
+++ b/templates/views/views-mini-pager.html.twig
@@ -11,7 +11,7 @@
 #}
 {% if items.previous or items.next %}
   <nav class="pager" aria-labelledby="pagination-heading">
-    <h4 class="pager__heading visually-hidden">{{ 'Pagination'|t }}</h4>
+    <h4 id="pagination-heading" class="pager__heading visually-hidden">{{ 'Pagination'|t }}</h4>
     <ul class="pager__items js-pager__items au-link-list au-link-list--inline">
       {% if items.previous %}
         <li class="pager__item">

[petrillek]

What if you have more views block with pager on one page – than you will have multiple H4 elements with the same ID. That is another accessibility issue. The solution will probably need to be more complicated. :(

[KelvinWong]

Look like that is a core issue. I can see the template is set up the same as the template provided in the core views module.

RE @petrillek The patch above follow the same way of the full pager implementation. I agree it is a more complicated issue, and it is not just problems for the mini pagers, user can also set up multiple views blocks one the same page with the full pager, and they will run into the duplicated ID issue as well.

I am closing this ticket because it is not a GovCMS issue.