2.1.1 release

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>

css/base/base.css

@@ -149,10 +149,10 @@ img {
 }
 
 img[alt] {
-  font-style: var(--image-alt-font-style);
-  font-size: var(--image-alt-font-size-large);
   text-wrap: balance;
   color: var(--image-alt-color);
+  font-size: var(--image-alt-font-size-large);
+  font-style: var(--image-alt-font-style);
 }
 img[data-img-loading-error] {
   padding: var(--image-alt-spacing);

css/components/contact.css

@@ -6,8 +6,8 @@
 }
 
 .lgd-contact__headings {
-  border: var(--contact-border);
   color: var(--contact-accent-color-contrast);
+  border: var(--contact-border);
   border-block-end: 0;
   background-color: var(--contact-accent-color);
 }
@@ -26,7 +26,7 @@
 .lgd-contact__group {
   padding-block-end: var(--contact-spacing);
   border-block-end: var(--contact-border);
-  border-color: var(--contact-accent-color);
+  border-block-end-color: var(--contact-accent-color);
 }
 
 .lgd-contact__group .field--name-localgov-contact-other-social > .field__item + .field__item,

css/layout/grid.css

@@ -41,8 +41,8 @@
 .lgd-row__two-thirds,
 .lgd-row__three-quarters,
 .lgd-row__full {
-  width: 100%;
   grid-column: span 1;
+  width: 100%;
 }
 
 @media screen and (min-width: 48rem) {

localgov_base.theme

@@ -20,92 +20,130 @@ function localgov_base_form_system_theme_settings_alter(&$form, FormStateInterfa
     return;
   }
 
-  $form['localgov_base_remove_css'] = [
+  // Add settings in a details element for better organization.
+  $theme_info = \Drupal::service('theme.manager')->getActiveTheme()->getExtension()->info;
+  $theme_human_name = $theme_info['name'] ?? \Drupal::service('theme.manager')->getActiveTheme()->getName();
+  $form['localgov_base_settings'] = [
+    '#type' => 'details',
+    '#title' => t('@theme Settings', ['@theme' => $theme_human_name]),
+    '#open' => TRUE,
+  ];
+
+  // Create a fieldset for general settings and place at the top.
+  $form['localgov_base_settings']['general_fieldset'] = [
+    '#type' => 'fieldset',
+    '#title' => t('General Settings'),
+    '#description' => t('General layout and display settings.'),
+    '#weight' => -10,
+  ];
+
+  $form['localgov_base_settings']['general_fieldset']['localgov_base_show_back_to_top_link'] = [
+    '#type'          => 'checkbox',
+    '#title'         => t('Display a "Back to Top" link on long pages.'),
+    '#default_value' => theme_get_setting('localgov_base_show_back_to_top_link'),
+    '#description'   => t('This adds a link to the beginning of the page content (<code>#main-content</code>).'),
+  ];
+
+  $form['localgov_base_settings']['general_fieldset']['localgov_base_header_behaviour'] = [
+    '#type' => 'radios',
+    '#title' => t('Header behaviour'),
+    '#default_value' => theme_get_setting('localgov_base_header_behaviour'),
+    '#options' => [
+      'default' => t('Default - scrolls away with the page'),
+      'sticky' => t('Sticky - remains at the top of the page'),
+      'appears_on_scroll' => t('Scroll - appears when scrolling up the page'),
+    ],
+    '#description' => t('Select how you want the header to behave. This setting only apply to anonymous users.'),
+  ];
+
+  $form['localgov_base_settings']['general_fieldset']['localgov_base_mobile_breakpoint_js'] = [
+    '#type'          => 'number',
+    '#title'         => t('Mobile breakpoint for JavaScript'),
+    '#default_value' => theme_get_setting('localgov_base_mobile_breakpoint_js') ? theme_get_setting('localgov_base_mobile_breakpoint_js') : 768,
+    '#description'   => t('This is the mobile breakpoint in pixels. This is used by the JS to determine when to show the mobile menu. If left blank, this will default to 768px.'),
+    '#min'           => 0,
+    '#attributes' => [
+      'placeholder' => '768',
+    ],
+  ];
+
+  $form['localgov_base_settings']['general_fieldset']['localgov_base_responsive_wysiwyg_tables'] = [
+    '#type'          => 'checkbox',
+    '#title'         => t('Make WYSIWYG tables responsive.'),
+    '#description'   => t('Places tables inserted via WYSIWYG into a responsive container, so they can scroll horizontally on small screens.'),
+    '#default_value' => theme_get_setting('localgov_base_responsive_wysiwyg_tables') ? theme_get_setting('localgov_base_responsive_wysiwyg_tables') : FALSE,
+  ];
+
+  // Create a fieldset for the CSS/JS library options.
+  $form['localgov_base_settings']['libraries_fieldset'] = [
+    '#type' => 'fieldset',
+    '#title' => t('Theme Libraries'),
+    '#description' => t('Control whether to load base theme CSS and JavaScript libraries.'),
+  ];
+
+  $form['localgov_base_settings']['libraries_fieldset']['localgov_base_remove_css'] = [
     '#type'          => 'checkbox',
     '#title'         => t('Remove CSS libraries from base theme.'),
     '#default_value' => theme_get_setting('localgov_base_remove_css'),
     '#description'   => t("Check this box to disable the base theme's CSS"),
   ];
 
-  $form['localgov_base_remove_js'] = [
+  $form['localgov_base_settings']['libraries_fieldset']['localgov_base_remove_js'] = [
     '#type'          => 'checkbox',
     '#title'         => t('Remove JS libraries from base theme.'),
     '#default_value' => theme_get_setting('localgov_base_remove_js'),
     '#description'   => t("Check this box to disable the base theme's JavaScript"),
   ];
 
-  $form['localgov_base_add_unpublished_background_colour'] = [
+  // Create a fieldset for content status related settings.
+  $form['localgov_base_settings']['content_status_fieldset'] = [
+    '#type' => 'fieldset',
+    '#title' => t('Content Status Display'),
+    '#description' => t('Control how unpublished and archived content is displayed.'),
+  ];
+
+  $form['localgov_base_settings']['content_status_fieldset']['localgov_base_add_unpublished_background_colour'] = [
     '#type'          => 'checkbox',
     '#title'         => t('Add background colour to unpublished content.'),
     '#default_value' => theme_get_setting('localgov_base_add_unpublished_background_colour'),
     '#description'   => t("If you remove the background colour, you should probably also check the box below to add '[Draft]' to the title of unpublished content."),
   ];
 
-  $form['localgov_base_add_draft_note_to_unpublished_content'] = [
+  $form['localgov_base_settings']['content_status_fieldset']['localgov_base_add_draft_note_to_unpublished_content'] = [
     '#type'          => 'checkbox',
     '#title'         => t('Add "Draft" to title of draft unpublished content.'),
     '#default_value' => theme_get_setting('localgov_base_add_draft_note_to_unpublished_content'),
     '#description'   => t('This adds the word "Draft" to the title of any draft unpublished content. This is useful if you have removed the pink background from unpublished content.'),
   ];
 
-  $form['localgov_base_add_archived_note_to_archived_content'] = [
+  $form['localgov_base_settings']['content_status_fieldset']['localgov_base_add_archived_note_to_archived_content'] = [
     '#type'          => 'checkbox',
     '#title'         => t('Add "Archived" to title of archived content.'),
     '#default_value' => theme_get_setting('localgov_base_add_archived_note_to_archived_content'),
     '#description'   => t('This adds the word "Archived" to the title of any content with the "archived" moderation state.'),
   ];
 
-  $form['localgov_base_show_back_to_top_link'] = [
-    '#type'          => 'checkbox',
-    '#title'         => t('Display a "Back to Top" link on long pages.'),
-    '#default_value' => theme_get_setting('localgov_base_show_back_to_top_link'),
-    '#description'   => t('This adds a link to the beginning of the page content (<code>#main-content</code>).'),
-  ];
-
-  $form['localgov_base_header_behaviour'] = [
-    '#type' => 'radios',
-    '#title' => t('Header behaviour'),
-    '#default_value' => theme_get_setting('localgov_base_header_behaviour'),
-    '#options' => [
-      'default' => t('Default - scrolls away with the page'),
-      'sticky' => t('Sticky - remains at the top of the page'),
-      'appears_on_scroll' => t('Scroll - appears when scrolling up the page'),
-    ],
-    '#description' => t('Select how you want the header to behave. This setting only apply to anonymous users.'),
+  // Create a fieldset for guide-related settings.
+  $form['localgov_base_settings']['guides_fieldset'] = [
+    '#type' => 'fieldset',
+    '#title' => t('Guide Display Settings'),
+    '#description' => t('Control how guides are displayed on the site.'),
   ];
 
-  $form['localgov_base_localgov_guides_stacked_heading'] = [
+  $form['localgov_base_settings']['guides_fieldset']['localgov_base_localgov_guides_stacked_heading'] = [
     '#type'          => 'checkbox',
     '#title'         => t('Use stacked heading pattern for guides.'),
     '#default_value' => theme_get_setting('localgov_base_localgov_guides_stacked_heading'),
     '#description'   => t('This will stack the Guide title and page heading on top of each other.'),
   ];
 
-  $form['localgov_base_localgov_guides_vertical_navigation'] = [
+  $form['localgov_base_settings']['guides_fieldset']['localgov_base_localgov_guides_vertical_navigation'] = [
     '#type'          => 'checkbox',
     '#title'         => t('Use vertical navigation for guides.'),
     '#default_value' => theme_get_setting('localgov_base_localgov_guides_vertical_navigation'),
     '#description'   => t('This will display the guide navigation vertically above the guide.'),
   ];
 
-  $form['localgov_base_mobile_breakpoint_js'] = [
-    '#type'          => 'number',
-    '#title'         => t('Mobile breakpoint for JavaScript'),
-    '#default_value' => theme_get_setting('localgov_base_mobile_breakpoint_js') ? theme_get_setting('localgov_base_mobile_breakpoint_js') : 768,
-    '#description'   => t('This is the mobile breakpoint in pixels. This is used by the JS to determine when to show the mobile menu. If left blank, this will default to 768px.'),
-    '#min'           => 0,
-    '#attributes' => [
-      'placeholder' => '768',
-    ],
-  ];
-
-  $form['localgov_base_responsive_wysiwyg_tables'] = [
-    '#type'          => 'checkbox',
-    '#title'         => t('Make WYSIWYG tables responsive.'),
-    '#description'   => t('Places tables inserted via WYSIWYG into a responsive container, so they can scroll horizontally on small screens.'),
-    '#default_value' => theme_get_setting('localgov_base_responsive_wysiwyg_tables') ? theme_get_setting('localgov_base_responsive_wysiwyg_tables') : FALSE,
-  ];
-
   $form['#validate'][] = 'localgov_base_theme_settings_validate';
 }
 

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 %}