Feature/2.x/805 add default accessible label to templates using localgov prev next

components/prev-next/prev-next.component.yml

@@ -10,6 +10,11 @@ status: stable
 props:
   type: object
   properties:
+    prevNextAttributes:
+      type: object
+      title: Prev-Next attributes
+      description: a Drupal attributes object. Will not override default
+        classes.
     prev_next_type:
       type: string
       title: Prev-Next type
@@ -74,3 +79,20 @@ props:
       description: >
         The actual URL for the Next link. If empty, the entire link will
         not be rendered.
+    prev_next_nav_aria_label:
+      type: string
+      title: Prev-Next nav label
+      description: Translated label for parent <nav> element. Optional since
+        an aria-label may also be set in prevNextAttributes or an accessible
+        value provided as part of the prev_next_pre_content slot.
+slots:
+  prev_next_pre_content:
+    title: Prev-Next pre-content
+    description:
+      Use this slot to add arbitrary content prior to the nav list in the
+      component. This is useful for adding an accessible text label when
+      aria-label isn't used.
+  prev_next_post_content:
+    title: Prev-Next post-content
+    description:
+      Use this slot to add arbitrary content after nav list in the component.

components/prev-next/prev-next.twig

@@ -8,6 +8,9 @@
 #}
 
 {% set prevNextAttributes = create_attribute(prevNextAttributes|default({})) %}
+{% if prev_next_nav_aria_label is not empty %}
+  {% do prevNextAttributes.setAttribute('aria-label', prev_next_nav_aria_label) %}
+{% endif %}
 
 {% set icon_path = icon_path|default('@localgov_base/includes/icons') %}
 {% set prev_icon = prev_icon|default('chevron-left') %}
@@ -29,6 +32,9 @@
 #}
 
 <nav{{prevNextAttributes.addClass(classes)}}>
+  {% block prev_next_pre_content %}
+    {{ prev_next_pre_content }}
+  {% endblock %}
   <ul class="lgd-prev-next__list">
     {% if prev_url %}
       <li class="lgd-prev-next__list-item lgd-prev-next__list-item--prev">
@@ -69,4 +75,7 @@
       </li>
     {% endif %}
   </ul>
+  {% block postv_next_post_content %}
+    {{ prev_next_post_content }}
+  {% endblock %}
 </nav>

templates/block/guides-prev-next-block.html.twig

@@ -1,3 +1,5 @@
+{% set nav_id = 'guides-prev-next-' ~ random() %}
+{% set prevNextAttributes = create_attribute({ id: nav_id }) %}
 {% set prev_next_type = 'guides' %}
 {#
   Probably the parent module should take responsibility for this.
@@ -9,4 +11,8 @@
 {% set prev_url = previous_url|default('') %}
 {% set prev_title = previous_title %}
 
-{% include 'localgov_base:prev-next' %}
+{% embed 'localgov_base:prev-next' %}
+  {% block prev_next_pre_content %}
+    <h2 class="visually-hidden" aria-labelledby="{{ nav_id }}">{{ 'Guides navigation'|t }}</h2>
+  {% endblock %}
+{% endembed %}

templates/block/localgov-blogs-prev-next-block.html.twig

@@ -1,2 +1,8 @@
+{% set nav_id = 'blogs-prev-next-' ~ random() %}
+{% set prevNextAttributes = create_attribute({ id: nav_id }) %}
 {% set prev_next_type = 'blog' %}
-{% include 'localgov_base:prev-next' %}
+{% embed 'localgov_base:prev-next' %}
+  {% block prev_next_pre_content %}
+    <h2 class="visually-hidden" aria-labelledby="{{ nav_id }}">{{ 'Blog navigation'|t }}</h2>
+  {% endblock %}
+{% endembed %}

templates/navigation/book-navigation--publication.html.twig

@@ -32,9 +32,15 @@
 #}
 
 {% if has_links %}
+  {% set nav_id = 'publication-prev-next-' ~ random() %}
+  {% set prevNextAttributes = create_attribute({ id: nav_id }) %}
   {# This uses previous_* vars, prev-next uses prev_*, so we translate. #}
   {% set show_title = true %}
   {% set prev_next_type = 'publications' %}
 
-  {% include 'localgov_base:prev-next' %}
+  {% embed 'localgov_base:prev-next' %}
+    {% block prev_next_pre_content %}
+      <h2 class="visually-hidden" aria-labelledby="{{ nav_id }}">{{ 'Publication navigation'|t }}</h2>
+    {% endblock %}
+  {% endembed %}
 {% endif %}

templates/views/views-view-list--localgov-step-by-step-navigation--prev-next.html.twig

@@ -36,8 +36,14 @@
  */
 #}
 
+{% set nav_id = 'step-by-step-prev-next-' ~ random() %}
+{% set prevNextAttributes = create_attribute({ id: nav_id }) %}
 {% set prev_next_type = 'step_by_step' %}
 {% set prev_url = has_prev_step ? path('entity.node.canonical', {'node': prev_step_nid }) : '' %}
 {% set next_url = has_next_step ? path('entity.node.canonical', {'node': next_step_nid }) : ''  %}
 
-{% include 'localgov_base:prev-next' %}
+{% embed 'localgov_base:prev-next' %}
+  {% block prev_next_pre_content %}
+    <h2 class="visually-hidden" aria-labelledby="{{ nav_id }}">{{ 'Step by step navigation'|t }}</h2>
+  {% endblock %}
+{% endembed %}