Allow non-link nav items to have aria-current attributes

alphagov · Jul 2, 2024 · 23bd8d9 · 23bd8d9
1 parent eff46f1
commit 23bd8d9
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 11 deletions.
diff --git a/packages/govuk-frontend/src/govuk/components/service-header/_index.scss b/packages/govuk-frontend/src/govuk/components/service-header/_index.scss
@@ -165,8 +165,8 @@
   // This is a <strong> element that is used as a fallback mechanism for
   // visually indicating the current page in scenarios where CSS is unavailable
   // or colours may have been overridden. We don't actually want it to be bold
-  // normally, so set it to regular weight.
+  // normally, so set it to inherit the parent font-weight.
   .govuk-service-header__active-fallback {
-    @include govuk-typography-weight-regular;
+    font-weight: inherit;
   }
 }
diff --git a/packages/govuk-frontend/src/govuk/components/service-header/template.njk b/packages/govuk-frontend/src/govuk/components/service-header/template.njk
@@ -38,22 +38,27 @@
                 {%- if params.slots.navigationStart %}{{ params.slots.navigationStart | safe }}{% endif -%}
 
                 {% for item in params.navigation %}
+                  {% set linkInnerContent %}
+                    {# We wrap active links in strong tags so that users who override colours or
+                    styles will still have some indicator of the current nav item. #}
+                    {% if item.active or item.current %}
+                      <strong class="govuk-service-header__active-fallback">{{- item.html | safe if item.html else item.text -}}</strong>
+                    {% else %}
+                      {{- item.html | safe if item.html else item.text -}}
+                    {% endif %}
+                  {% endset %}
+
                   <li class="govuk-service-header__navigation-item {%- if item.active or item.current %} govuk-service-header__navigation-item--active{% endif %}">
                     {% if item.href %}
                       <a class="govuk-service-header__link" href="{{ item.href }}"
                         {%- if item.active or item.current %} aria-current="{{ 'page' if item.current else 'true' }}"{% endif %}
                         {{- govukAttributes(item.attributes) -}}>
-                        {# We wrap active links in strong tags so that users who override colours or
-                        styles will still have some indicator of the current nav item. #}
-                        {% if item.active or item.current %}
-                          <strong class="govuk-service-header__active-fallback">{{- item.html | safe if item.html else item.text -}}</strong>
-                        {% else %}
-                          {{- item.html | safe if item.html else item.text -}}
-                        {% endif %}
+                        {{ linkInnerContent | safe }}
                       </a>
                     {% elif item.html or item.text %}
-                      <span class="govuk-service-header__navigation-text">
-                        {{- item.html | safe if item.html else item.text -}}
+                      <span class="govuk-service-header__navigation-text"
+                        {%- if item.active or item.current %} aria-current="{{ 'page' if item.current else 'true' }}"{% endif %}>
+                        {{ linkInnerContent | safe }}
                       </span>
                     {% endif %}
                   </li>