From 2e93f628c8d223a633ed6eaa7845576740b1b529 Mon Sep 17 00:00:00 2001
From: Ed Horsford <mail@edwardhorsford.com>
Date: Thu, 22 Aug 2024 11:08:07 +0100
Subject: [PATCH] Add attributes macro (#998)

* Add attributes macro copied from GOV.UK
---
 CHANGELOG.md                                  |  1 +
 packages/components/action-link/template.njk  |  4 +-
 packages/components/back-link/template.njk    |  4 +-
 packages/components/breadcrumb/template.njk   |  8 +-
 packages/components/button/template.njk       |  4 +-
 packages/components/card/template.njk         |  4 +-
 packages/components/checkboxes/template.njk   |  5 +-
 .../components/contents-list/template.njk     |  4 +-
 packages/components/date-input/template.njk   |  3 +-
 packages/components/details/template.njk      |  4 +-
 packages/components/do-dont-list/template.njk |  4 +-
 .../components/error-message/template.njk     |  4 +-
 .../components/error-summary/template.njk     |  6 +-
 packages/components/fieldset/template.njk     |  4 +-
 packages/components/footer/template.njk       |  4 +-
 packages/components/header/template.njk       | 10 +-
 packages/components/hero/template.njk         |  4 +-
 packages/components/hint/template.njk         |  4 +-
 packages/components/images/template.njk       |  4 +-
 packages/components/input/template.njk        |  3 +-
 packages/components/inset-text/template.njk   |  4 +-
 packages/components/label/template.njk        |  4 +-
 packages/components/pagination/template.njk   |  4 +-
 packages/components/radios/template.njk       |  5 +-
 packages/components/select/template.njk       |  5 +-
 packages/components/skip-link/template.njk    |  4 +-
 packages/components/summary-list/template.njk |  4 +-
 packages/components/tables/template.njk       |  4 +-
 packages/components/tabs/template.njk         | 10 +-
 packages/components/tag/template.njk          |  4 +-
 packages/components/textarea/template.njk     |  3 +-
 .../components/warning-callout/template.njk   |  4 +-
 packages/macros/attributes.njk                | 96 +++++++++++++++++++
 33 files changed, 196 insertions(+), 43 deletions(-)
 create mode 100644 packages/macros/attributes.njk

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 21bcac47b..51342ffba 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,7 @@
 ## Unreleased
 
 - Fix Sass deprecation on `mix` function (passing a number without unit) ([PR 995](https://github.com/nhsuk/nhsuk-frontend/pull/995))
+- Add nhsukAttributes macro, copied from GOV.UK ([PR 998](https://github.com/nhsuk/nhsuk-frontend/pull/998))
 
 ## 8.3.0 - 24 July 2024
 
diff --git a/packages/components/action-link/template.njk b/packages/components/action-link/template.njk
index fc6d9cddd..49cef6edb 100644
--- a/packages/components/action-link/template.njk
+++ b/packages/components/action-link/template.njk
@@ -1,9 +1,11 @@
+{% from "../../macros/attributes.njk" import nhsukAttributes %}
+
 <div class="nhsuk-action-link">
   <a class="nhsuk-action-link__link
   {%- if params.classes %} {{ params.classes }}{% endif %}" href="
   {%- if params.href %}{{ params.href }}{% else %}#{% endif %}"
   {%- if params.openInNewWindow %} target="_blank"{% endif %}
-  {%- for attribute, value in params.attributes %} {{attribute}}="{{ value }}"{% endfor %}>
+  {{- nhsukAttributes(params.attributes) }}>
     <svg class="nhsuk-icon nhsuk-icon__arrow-right-circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="36" height="36">
       <path d="M0 0h24v24H0z" fill="none"></path>
       <path d="M12 2a10 10 0 0 0-9.95 9h11.64L9.74 7.05a1 1 0 0 1 1.41-1.41l5.66 5.65a1 1 0 0 1 0 1.42l-5.66 5.65a1 1 0 0 1-1.41 0 1 1 0 0 1 0-1.41L13.69 13H2.05A10 10 0 1 0 12 2z"></path>
diff --git a/packages/components/back-link/template.njk b/packages/components/back-link/template.njk
index d80b706b9..8a9db9ac2 100644
--- a/packages/components/back-link/template.njk
+++ b/packages/components/back-link/template.njk
@@ -1,3 +1,5 @@
+{% from "../../macros/attributes.njk" import nhsukAttributes %}
+
 <div class="nhsuk-back-link{%- if params.classes %} {{ params.classes }}{% endif %}">
   {%- if params.element == 'button' %}
     {% set element='button' %}
@@ -6,7 +8,7 @@
   {% endif %}
   <{{element}} class="nhsuk-back-link__link"
   {%- if element == 'a'%} href="{% if params.href %}{{ params.href }}{% else %}#{% endif %}"{% endif %}
-  {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+  {{- nhsukAttributes(params.attributes) }}>
   <svg class="nhsuk-icon nhsuk-icon__chevron-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" height="24" width="24">
     <path d="M8.5 12c0-.3.1-.5.3-.7l5-5c.4-.4 1-.4 1.4 0s.4 1 0 1.4L10.9 12l4.3 4.3c.4.4.4 1 0 1.4s-1 .4-1.4 0l-5-5c-.2-.2-.3-.4-.3-.7z"></path>
   </svg>
diff --git a/packages/components/breadcrumb/template.njk b/packages/components/breadcrumb/template.njk
index 56f9cb019..af935271f 100644
--- a/packages/components/breadcrumb/template.njk
+++ b/packages/components/breadcrumb/template.njk
@@ -1,10 +1,12 @@
+{% from "../../macros/attributes.njk" import nhsukAttributes %}
+
 <nav class="nhsuk-breadcrumb{% if params.classes %} {{ params.classes }}{% endif %}" aria-label="Breadcrumb"
-{%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+{{- nhsukAttributes(params.attributes) }}>
   <div class="nhsuk-width-container">
     <ol class="nhsuk-breadcrumb__list">
   {%- for item in params.items %}
     {%- if item.href %}
-          <li class="nhsuk-breadcrumb__item"><a class="nhsuk-breadcrumb__link" href="{{ item.href }}"{% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ item.text }}</a>{% if not loop.last %}{% endif %}</li>
+          <li class="nhsuk-breadcrumb__item"><a class="nhsuk-breadcrumb__link" href="{{ item.href }}" {{- nhsukAttributes(item.attributes) }}>{{ item.text }}</a>{% if not loop.last %}{% endif %}</li>
     {%- endif -%}
   {% endfor %}
     {% if params.href %}
@@ -18,7 +20,7 @@
     {% endif %}
     </ol>
     <p class="nhsuk-breadcrumb__back">
-      <a class="nhsuk-breadcrumb__backlink" href="{{ lastHref }}" {% for attribute, value in lastItem.attributes %}{{attribute}}="{{value}}"{% endfor %}>
+      <a class="nhsuk-breadcrumb__backlink" href="{{ lastHref }}" {{- nhsukAttributes(lastItem.attributes) }}>
         <span class="nhsuk-u-visually-hidden">Back to &nbsp;</span>
         {{ lastText }}
       </a>
diff --git a/packages/components/button/template.njk b/packages/components/button/template.njk
index cc564541f..d893f02cc 100644
--- a/packages/components/button/template.njk
+++ b/packages/components/button/template.njk
@@ -1,3 +1,5 @@
+{% from "../../macros/attributes.njk" import nhsukAttributes %}
+
 {# Define type of element to use, if not explicitly set #}
 
 {% if params.element %}
@@ -16,7 +18,7 @@
   {%- if params.disabled %} nhsuk-button--disabled{% endif %}"
   data-module="nhsuk-button"
   {% if params.preventDoubleClick %} data-prevent-double-click="true"{% endif %}
-  {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}
+  {{- nhsukAttributes(params.attributes) }}
 {%- endset -%}
 
 {# Define common attributes we can use for both button and input types #}
diff --git a/packages/components/card/template.njk b/packages/components/card/template.njk
index 76738678e..78ea2ff47 100644
--- a/packages/components/card/template.njk
+++ b/packages/components/card/template.njk
@@ -1,3 +1,5 @@
+{% from "../../macros/attributes.njk" import nhsukAttributes %}
+
 {% set headingLevel = params.headingLevel if params.headingLevel else 2 %}
 
 <div class="nhsuk-card
@@ -7,7 +9,7 @@
 {%- if params.feature %} nhsuk-card--feature{% endif %}
 {%- if params.topTask %} nhsuk-card--top-task{% endif %}
 {%- if params.classes %} {{ params.classes }}{% endif %}"
-{%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+{{- nhsukAttributes(params.attributes) }}>
 {%- if params.imgURL %}
   <img class="nhsuk-card__img" src="{{ params.imgURL }}" alt="{{ params.imgALT }}">
 {%- endif %}
diff --git a/packages/components/checkboxes/template.njk b/packages/components/checkboxes/template.njk
index 2ec9cd7b8..0e4b0d41c 100644
--- a/packages/components/checkboxes/template.njk
+++ b/packages/components/checkboxes/template.njk
@@ -2,6 +2,7 @@
 {% from "../fieldset/macro.njk" import fieldset %}
 {% from "../hint/macro.njk" import hint %}
 {% from "../label/macro.njk" import label %}
+{% from "../../macros/attributes.njk" import nhsukAttributes %}
 
 {#- If an id 'prefix' is not passed, fall back to using the name attribute
    instead. We need this for error messages and hints as well -#}
@@ -42,7 +43,7 @@
   }) | indent(2) | trim }}
 {% endif %}
   <div class="nhsuk-checkboxes {%- if params.classes %} {{ params.classes }}{% endif %} {%- if isConditional %} nhsuk-checkboxes--conditional{% endif -%}"
-    {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+    {{- nhsukAttributes(params.attributes) }}>
     {% for item in params.items %}
     {% set id = item.id if item.id else idPrefix + "-" + loop.index %}
     {% set name = item.name if item.name else params.name %}
@@ -60,7 +61,7 @@
       {%- if item.exclusiveGroup %} data-checkbox-exclusive-group="{{ item.exclusiveGroup }}"{% endif -%}
       {%- if item.conditional %} aria-controls="{{ conditionalId }}" aria-expanded="{{"true" if item.checked else "false"}}"{% endif -%}
       {%- if hasHint %} aria-describedby="{{ itemHintId }}"{% endif -%}
-      {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+      {{- nhsukAttributes(item.attributes) }}>
       {{ label({
         html: item.html,
         text: item.text,
diff --git a/packages/components/contents-list/template.njk b/packages/components/contents-list/template.njk
index 018a1cf22..927091a91 100644
--- a/packages/components/contents-list/template.njk
+++ b/packages/components/contents-list/template.njk
@@ -1,6 +1,8 @@
+{% from "../../macros/attributes.njk" import nhsukAttributes %}
+
 <nav class="nhsuk-contents-list
 {%- if params.classes %} {{ params.classes }}{% endif %}"
-{%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %} role="navigation" aria-label="Pages in this guide">
+{{- nhsukAttributes(params.attributes) }} role="navigation" aria-label="Pages in this guide">
   <h2 class="nhsuk-u-visually-hidden">Contents</h2>
   <ol class="nhsuk-contents-list__list">
     {%- for item in params.items %}
diff --git a/packages/components/date-input/template.njk b/packages/components/date-input/template.njk
index 0670c6a39..89bb2ffbc 100644
--- a/packages/components/date-input/template.njk
+++ b/packages/components/date-input/template.njk
@@ -2,6 +2,7 @@
 {% from "../fieldset/macro.njk" import fieldset %}
 {% from "../hint/macro.njk" import hint %}
 {% from "../input/macro.njk" import input %}
+{% from "../../macros/attributes.njk" import nhsukAttributes %}
 
 {#- a record of other elements that we need to associate with the input using
    aria-describedby – for example hints or error messages -#}
@@ -52,7 +53,7 @@
 {% endif %}
   <div class="nhsuk-date-input
     {%- if params.classes %} {{ params.classes }}{% endif %}"
-    {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}
+    {{- nhsukAttributes(params.attributes) }}
     {%- if params.id %} id="{{ params.id }}"{% endif %}>
     {%- for item in dateInputItems %}
     <div class="nhsuk-date-input__item">
diff --git a/packages/components/details/template.njk b/packages/components/details/template.njk
index 42419de27..b7c31d42a 100644
--- a/packages/components/details/template.njk
+++ b/packages/components/details/template.njk
@@ -1,6 +1,8 @@
+{% from "../../macros/attributes.njk" import nhsukAttributes %}
+
 <details {%- if params.id %} id="{{params.id}}"{% endif %} class="nhsuk-details
 {%- if params.classes %} {{ params.classes }}{% endif %}"
-{%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %} {{- " open" if params.open }}>
+{{- nhsukAttributes(params.attributes) }} {{- " open" if params.open }}>
   <summary class="nhsuk-details__summary">
     <span class="nhsuk-details__summary-text">
       {{ params.text }}
diff --git a/packages/components/do-dont-list/template.njk b/packages/components/do-dont-list/template.njk
index bd28d3bd6..9cf613b33 100644
--- a/packages/components/do-dont-list/template.njk
+++ b/packages/components/do-dont-list/template.njk
@@ -1,7 +1,9 @@
+{% from "../../macros/attributes.njk" import nhsukAttributes %}
+
 {% set headingLevel = params.headingLevel if params.headingLevel else 3 %}
 <div class="nhsuk-do-dont-list
 {%- if params.classes %} {{ params.classes }}{% endif %}"
-{%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+{{- nhsukAttributes(params.attributes) }}>
   <h{{ headingLevel }} class="nhsuk-do-dont-list__label">{{ params.title }}</h{{ headingLevel }}>
   <ul class="nhsuk-list {% if params.type == 'tick' %}nhsuk-list--tick{% else %}nhsuk-list--cross{% endif %}" role="list">
     {%- for data in params.items %}
diff --git a/packages/components/error-message/template.njk b/packages/components/error-message/template.njk
index ec4264025..0b273e6d8 100644
--- a/packages/components/error-message/template.njk
+++ b/packages/components/error-message/template.njk
@@ -1,9 +1,11 @@
+{% from "../../macros/attributes.njk" import nhsukAttributes %}
+
 {% set visuallyHiddenText = params.visuallyHiddenText | default("Error") -%}
 
 <span class="nhsuk-error-message
 {%- if params.classes %} {{ params.classes }}{% endif %}"
 {%- if params.id %} id="{{ params.id }}"{% endif %}
-{%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+{{- nhsukAttributes(params.attributes) }}>
   {% if visuallyHiddenText %}<span class="nhsuk-u-visually-hidden">{{ visuallyHiddenText }}:</span> {% endif -%}
   {{ params.html | safe if params.html else params.text }}
 </span>
diff --git a/packages/components/error-summary/template.njk b/packages/components/error-summary/template.njk
index dda1cd4d0..db43467be 100644
--- a/packages/components/error-summary/template.njk
+++ b/packages/components/error-summary/template.njk
@@ -1,6 +1,8 @@
+{% from "../../macros/attributes.njk" import nhsukAttributes %}
+
 <div class="nhsuk-error-summary
   {%- if params.classes %} {{ params.classes }}{% endif %}" aria-labelledby="error-summary-title" role="alert" tabindex="-1"
-  {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+  {{- nhsukAttributes(params.attributes) }}>
   <h2 class="nhsuk-error-summary__title" id="error-summary-title">
     {{ params.titleHtml | safe if params.titleHtml else params.titleText }}
   </h2>
@@ -14,7 +16,7 @@
     {%- for item in params.errorList %}
       <li>
       {%- if item.href %}
-        <a href="{{ item.href }}"{% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ item.html | safe if item.html else item.text }}</a>
+        <a href="{{ item.href }}"{{- nhsukAttributes(item.attributes) }}>{{ item.html | safe if item.html else item.text }}</a>
       {% else %}
         {{ item.html | safe if item.html else item.text }}
       {%- endif -%}
diff --git a/packages/components/fieldset/template.njk b/packages/components/fieldset/template.njk
index b4bb554ed..5f3a5254e 100644
--- a/packages/components/fieldset/template.njk
+++ b/packages/components/fieldset/template.njk
@@ -1,7 +1,9 @@
+{% from "../../macros/attributes.njk" import nhsukAttributes %}
+
 <fieldset class="nhsuk-fieldset
   {%- if params.classes %} {{ params.classes }}{% endif %}"
   {%- if params.describedBy %} aria-describedby="{{ params.describedBy }}"{% endif %}
-  {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+  {{- nhsukAttributes(params.attributes) }}>
   {%- if params.legend.html or params.legend.text %}
   <legend class="nhsuk-fieldset__legend{%- if params.legend.classes %} {{ params.legend.classes }}{% endif %}">
   {%- if params.legend.isPageHeading %}
diff --git a/packages/components/footer/template.njk b/packages/components/footer/template.njk
index 572361903..42af3899f 100644
--- a/packages/components/footer/template.njk
+++ b/packages/components/footer/template.njk
@@ -1,3 +1,5 @@
+{% from "../../macros/attributes.njk" import nhsukAttributes %}
+
 {%- set copyrightText = params.copyright if params.copyright else '© NHS England' -%}
 
 <footer role="contentinfo">
@@ -6,7 +8,7 @@
       <h2 class="nhsuk-u-visually-hidden">Support links</h2>
       <div class="nhsuk-footer
         {%- if params.classes %} {{ params.classes }}{% endif %}"
-        {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+        {{- nhsukAttributes(params.attributes) }}>
           {% if  not params.linksColumn2 %}
               <ul class="nhsuk-footer__list">
                 {%- for item in params.links %}
diff --git a/packages/components/header/template.njk b/packages/components/header/template.njk
index b1ac41ade..5419e7627 100644
--- a/packages/components/header/template.njk
+++ b/packages/components/header/template.njk
@@ -1,3 +1,5 @@
+{% from "../../macros/attributes.njk" import nhsukAttributes %}
+
 {# Define some defaults #}
 {% set showNav = params.showNav if params.showNav else "false" %}
 {% set showSearch = params.showSearch if params.showSearch else "false" %}
@@ -13,7 +15,7 @@
 {%- if params.transactional or params.transactionalService %} nhsuk-header__transactional{% endif %}
 {%- if params.organisation and params.organisation.name %} nhsuk-header--organisation{% endif %}
 {%- if params.classes %} {{ params.classes }}{% endif %}" role="banner"
-{%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+{{- nhsukAttributes(params.attributes) }}>
   
   <div class="nhsuk-header__container">
     <div class="nhsuk-header__logo 
@@ -80,7 +82,7 @@
       <nav class="nhsuk-navigation" id="header-navigation" role="navigation" aria-label="Primary navigation">
         <ul class="nhsuk-header__navigation-list {%- if params.primaryLinks.length < 4 %} nhsuk-header__navigation-list--left-aligned{% endif %}">
           {%- for item in params.primaryLinks %}
-          <li class="nhsuk-header__navigation-item {%- if item.classes %} {{ item.classes }}{% endif %}" {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+          <li class="nhsuk-header__navigation-item {%- if item.classes %} {{ item.classes }}{% endif %}" {{- nhsukAttributes(item.attributes) }}>
             <a class="nhsuk-header__navigation-link"  href="{{item.url}}">
               {{item.label}}
             </a>
@@ -138,7 +140,7 @@
       <nav class="nhsuk-navigation" id="header-navigation" role="navigation" aria-label="Primary navigation">
         <ul class="nhsuk-header__navigation-list {%- if params.primaryLinks.length < 4 %} nhsuk-header__navigation-list--left-aligned{% endif %}">
           {%- for item in params.primaryLinks %}
-          <li class="nhsuk-header__navigation-item {%- if item.classes %} {{ item.classes }}{% endif %}" {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+          <li class="nhsuk-header__navigation-item {%- if item.classes %} {{ item.classes }}{% endif %}" {{- nhsukAttributes(item.attributes) }}>
             <a class="nhsuk-header__navigation-link"  href="{{item.url}}">
               {{item.label}}
             </a>
@@ -164,4 +166,4 @@
 
     {% endif -%}
 
-</header>
\ No newline at end of file
+</header>
diff --git a/packages/components/hero/template.njk b/packages/components/hero/template.njk
index 4c1249976..8f7f474e3 100644
--- a/packages/components/hero/template.njk
+++ b/packages/components/hero/template.njk
@@ -1,9 +1,11 @@
+{% from "../../macros/attributes.njk" import nhsukAttributes %}
+
 <section class="nhsuk-hero
 {%- if params.imageURL and params.heading %} nhsuk-hero--image nhsuk-hero--image-description
 {%- elif params.imageURL %} nhsuk-hero--image{% endif %}
 {%- if params.classes %} {{ params.classes }}{% endif %}"
 {%- if params.imageURL %} style="background-image: url('{{ params.imageURL }}');"{% endif %}
-{%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+{{- nhsukAttributes(params.attributes) }}>
 {% if params.imageURL %}<div class="nhsuk-hero__overlay">{% endif %}
 {%- if params.heading %}
   <div class="nhsuk-width-container{% if not params.imageURL %} nhsuk-hero--border{% endif %}">
diff --git a/packages/components/hint/template.njk b/packages/components/hint/template.njk
index cf5c9e3ce..2a4749069 100644
--- a/packages/components/hint/template.njk
+++ b/packages/components/hint/template.njk
@@ -1,6 +1,8 @@
+{% from "../../macros/attributes.njk" import nhsukAttributes %}
+
 <div class="nhsuk-hint
 {%- if params.classes %} {{ params.classes }}{% endif %}"
 {%- if params.id %} id="{{ params.id }}"{% endif %}
-{%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+{{- nhsukAttributes(params.attributes) }}>
   {{ params.html | safe if params.html else params.text }}
 </div>
diff --git a/packages/components/images/template.njk b/packages/components/images/template.njk
index 9b5ac89bd..ca3b99025 100644
--- a/packages/components/images/template.njk
+++ b/packages/components/images/template.njk
@@ -1,6 +1,8 @@
+{% from "../../macros/attributes.njk" import nhsukAttributes %}
+
 <figure class="nhsuk-image
 {%- if params.classes %} {{ params.classes }}{% endif %}"
-{%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+{{- nhsukAttributes(params.attributes) }}>
   <img class="nhsuk-image__img" src="{{ params.src }}" alt="{{ params.alt }}" 
   {%- if params.sizes and params.srcset %}
     sizes="{{ params.sizes }}" srcset="{{ params.srcset }}"
diff --git a/packages/components/input/template.njk b/packages/components/input/template.njk
index 3f8e72878..03b1dd552 100644
--- a/packages/components/input/template.njk
+++ b/packages/components/input/template.njk
@@ -1,6 +1,7 @@
 {% from "../error-message/macro.njk" import errorMessage -%}
 {% from "../hint/macro.njk" import hint %}
 {% from "../label/macro.njk" import label %}
+{% from "../../macros/attributes.njk" import nhsukAttributes %}
 
 {#- a record of other elements that we need to associate with the input using
    aria-describedby – for example hints or error messages -#}
@@ -52,7 +53,7 @@
     {%- if params.autocomplete %} autocomplete="{{ params.autocomplete}}"{% endif %}
     {%- if params.pattern %} pattern="{{ params.pattern }}"{% endif %}
     {%- if params.inputmode %} inputmode="{{ params.inputmode }}"{% endif %}
-    {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+    {{- nhsukAttributes(params.attributes) }}>
     {%- if params.suffix %}
     <div class="nhsuk-input__suffix" aria-hidden="true">{{ params.suffix }}</div>
     {% endif %}
diff --git a/packages/components/inset-text/template.njk b/packages/components/inset-text/template.njk
index 451c856b7..0eb0427ad 100644
--- a/packages/components/inset-text/template.njk
+++ b/packages/components/inset-text/template.njk
@@ -1,6 +1,8 @@
+{% from "../../macros/attributes.njk" import nhsukAttributes %}
+
 <div class="nhsuk-inset-text
 {%- if params.classes %} {{ params.classes }}{% endif %}"
-{%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+{{- nhsukAttributes(params.attributes) }}>
   <span class="nhsuk-u-visually-hidden">Information: </span>
   {# params.HTML supported for backwards compatibility - see issue #950 #}
   {{ (params.html or params.HTML) | safe }}
diff --git a/packages/components/label/template.njk b/packages/components/label/template.njk
index 069c5a277..bb78d6582 100644
--- a/packages/components/label/template.njk
+++ b/packages/components/label/template.njk
@@ -1,9 +1,11 @@
+{% from "../../macros/attributes.njk" import nhsukAttributes %}
+
 {% if params.html or params.text %}
 {%- set labelHtml %}
 <label class="nhsuk-label
 {%- if params.classes %} {{ params.classes }}{% endif %}"
 {%- if params.for %} for="{{ params.for }}"{% endif %}
-{%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+{{- nhsukAttributes(params.attributes) }}>
   {{ params.html | safe if params.html else params.text }}
 </label>
 {%- endset -%}
diff --git a/packages/components/pagination/template.njk b/packages/components/pagination/template.njk
index 654b9161d..3712fe5ba 100644
--- a/packages/components/pagination/template.njk
+++ b/packages/components/pagination/template.njk
@@ -1,6 +1,8 @@
+{% from "../../macros/attributes.njk" import nhsukAttributes %}
+
 <nav class="nhsuk-pagination
 {%- if params.classes %} {{ params.classes }}{% endif %}" role="navigation" aria-label="Pagination"
-{%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+{{- nhsukAttributes(params.attributes) }}>
   <ul class="nhsuk-list nhsuk-pagination__list">
   {%- if params.previousUrl and params.previousPage %}
     <li class="nhsuk-pagination-item--previous">
diff --git a/packages/components/radios/template.njk b/packages/components/radios/template.njk
index 422b3f9df..86c750c8d 100644
--- a/packages/components/radios/template.njk
+++ b/packages/components/radios/template.njk
@@ -2,6 +2,7 @@
 {% from "../fieldset/macro.njk" import fieldset %}
 {% from "../hint/macro.njk" import hint %}
 {% from "../label/macro.njk" import label %}
+{% from "../../macros/attributes.njk" import nhsukAttributes %}
 
 {#- If an id 'prefix' is not passed, fall back to using the name attribute
    instead. We need this for error messages and hints as well -#}
@@ -43,7 +44,7 @@
 {% endif %}
   <div class="nhsuk-radios
   {%- if params.classes %} {{ params.classes }}{% endif %} {%- if isConditional %} nhsuk-radios--conditional{% endif -%}"
-  {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+  {{- nhsukAttributes(params.attributes) }}>
     {%- for item in params.items %}
     {%- set id = item.id if item.id else idPrefix + "-" + loop.index %}
     {% set conditionalId = "conditional-" + id %}
@@ -58,7 +59,7 @@
       {{-" disabled" if item.disabled }}
       {%- if item.conditional.html %} aria-controls="{{ conditionalId }}" aria-expanded="{{"true" if item.checked else "false"}}"{% endif -%}
       {%- if hasHint %} aria-describedby="{{ itemHintId }}"{% endif -%}
-      {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+      {{- nhsukAttributes(item.attributes) }}>
       {{ label({
         html: item.html,
         text: item.text,
diff --git a/packages/components/select/template.njk b/packages/components/select/template.njk
index f64c58ee2..65e42055b 100644
--- a/packages/components/select/template.njk
+++ b/packages/components/select/template.njk
@@ -1,6 +1,7 @@
 {% from "../error-message/macro.njk" import errorMessage -%}
 {% from "../hint/macro.njk" import hint %}
 {% from "../label/macro.njk" import label %}
+{% from "../../macros/attributes.njk" import nhsukAttributes %}
 
 {#- a record of other elements that we need to associate with the input using
    aria-describedby – for example hints or error messages -#}
@@ -40,12 +41,12 @@
     {%- if params.classes %} {{ params.classes }}{% endif %}
     {%- if params.errorMessage %} nhsuk-select--error{% endif %}" id="{{ params.id }}" name="{{ params.name }}"
     {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}
-    {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+    {{- nhsukAttributes(params.attributes) }}>
   {%- for item in params.items %}
     <option value="{{ item.value }}"
       {{-" selected" if item.selected }}
       {{-" disabled" if item.disabled }}
-      {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>{{ item.text }}</option>
+      {{- nhsukAttributes(item.attributes) }}>{{ item.text }}</option>
   {%- endfor %}
   </select>
 </div>
diff --git a/packages/components/skip-link/template.njk b/packages/components/skip-link/template.njk
index 028fa035c..afde93e62 100644
--- a/packages/components/skip-link/template.njk
+++ b/packages/components/skip-link/template.njk
@@ -1,5 +1,7 @@
+{% from "../../macros/attributes.njk" import nhsukAttributes %}
+
 <a class="nhsuk-skip-link
 {%- if params.classes %} {{ params.classes }}{% endif %}" href="
 {%- if params.href %}{{ params.href }}{% else %}#maincontent{% endif %}"
-{%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+{{- nhsukAttributes(params.attributes) }}>
 {%- if params.text %}{{ params.text }}{% else %}Skip to main content{% endif %}</a>
diff --git a/packages/components/summary-list/template.njk b/packages/components/summary-list/template.njk
index 68598172c..f25befd26 100644
--- a/packages/components/summary-list/template.njk
+++ b/packages/components/summary-list/template.njk
@@ -1,3 +1,5 @@
+{% from "../../macros/attributes.njk" import nhsukAttributes %}
+
 {%- macro _link(action) %}
   <a href="{{ action.href }}">
     {{ action.html | safe if action.html else action.text }}
@@ -6,7 +8,7 @@
     {% endif -%}
   </a>
 {% endmacro -%}
-<dl class="nhsuk-summary-list {%- if params.classes %} {{ params.classes }}{% endif %}"{% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+<dl class="nhsuk-summary-list {%- if params.classes %} {{ params.classes }}{% endif %}" {{- nhsukAttributes(params.attributes) }}>
   {% for row in params.rows %}
     <div class="nhsuk-summary-list__row">
       <dt class="nhsuk-summary-list__key {%- if row.key.classes %} {{ row.key.classes }}{% endif %}">
diff --git a/packages/components/tables/template.njk b/packages/components/tables/template.njk
index 0c000b7eb..f380ce270 100644
--- a/packages/components/tables/template.njk
+++ b/packages/components/tables/template.njk
@@ -1,3 +1,5 @@
+{% from "../../macros/attributes.njk" import nhsukAttributes %}
+
 {%- set headingLevel = params.headingLevel if params.headingLevel else 3 -%}
 {%  if params.panel %}
 <div class="nhsuk-table__panel-with-heading-tab
@@ -8,7 +10,7 @@
   {%- endif %}
   <table {%- if params.responsive %} role="table"{% endif %} class="nhsuk-table{%- if params.responsive %}-responsive{% endif %}
   {%- if params.tableClasses %} {{ params.tableClasses }}{% endif %}"
-  {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+  {{- nhsukAttributes(params.attributes) }}>
   {%- if params.caption %}
     <caption class="nhsuk-table__caption
   {%- if params.captionClasses %} {{ params.captionClasses }}{% endif %}">{{ params.caption }}</caption>
diff --git a/packages/components/tabs/template.njk b/packages/components/tabs/template.njk
index df2a45dc3..377f8c257 100644
--- a/packages/components/tabs/template.njk
+++ b/packages/components/tabs/template.njk
@@ -1,8 +1,10 @@
+{% from "../../macros/attributes.njk" import nhsukAttributes %}
+
 {#- If an id 'prefix' is not passed, fall back to using the name attribute
    instead. We need this for error messages and hints as well -#}
 {% set idPrefix = params.idPrefix if params.idPrefix -%}
 
-<div {%- if params.id %} id="{{params.id}}"{% endif %} class="nhsuk-tabs {%- if params.classes %} {{ params.classes }}{% endif %}" {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %} data-module="nhsuk-tabs">
+<div {%- if params.id %} id="{{params.id}}"{% endif %} class="nhsuk-tabs {%- if params.classes %} {{ params.classes }}{% endif %}" {{- nhsukAttributes(params.attributes) }} data-module="nhsuk-tabs">
   <h2 class="nhsuk-tabs__title">
     {{ params.title | default ("Contents") }}
   </h2>
@@ -13,7 +15,7 @@
         {% set id = item.id if item.id else idPrefix + "-" + loop.index %}
         <li class="nhsuk-tabs__list-item{% if loop.index == 1 %} nhsuk-tabs__list-item--selected{% endif %}">
           <a class="nhsuk-tabs__tab" href="#{{ id }}"
-            {%- for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+            {{- nhsukAttributes(item.attributes) }}>
             {{ item.label }}
           </a>
         </li>
@@ -24,9 +26,9 @@
   {% for item in params.items %}
     {% if item %}
       {% set id = item.id if item.id else idPrefix + "-" + loop.index %}
-      <div class="nhsuk-tabs__panel{% if loop.index > 1 %} nhsuk-tabs__panel--hidden{% endif %}" id="{{ id }}"{% for attribute, value in item.panel.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+      <div class="nhsuk-tabs__panel{% if loop.index > 1 %} nhsuk-tabs__panel--hidden{% endif %}" id="{{ id }}" {{- nhsukAttributes(item.panel.attributes) }}>
         {{ item.panel.html | safe if item.panel.html else item.panel.text }}
       </div>
     {% endif %}
   {% endfor %}
-</div>
\ No newline at end of file
+</div>
diff --git a/packages/components/tag/template.njk b/packages/components/tag/template.njk
index 535db405c..6175b1adf 100644
--- a/packages/components/tag/template.njk
+++ b/packages/components/tag/template.njk
@@ -1,3 +1,5 @@
-<strong class="nhsuk-tag{% if params.classes %} {{ params.classes }}{% endif %}"{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+{% from "../../macros/attributes.njk" import nhsukAttributes %}
+
+<strong class="nhsuk-tag{% if params.classes %} {{ params.classes }}{% endif %}" {{- nhsukAttributes(params.attributes) }}>
   {{ params.html | safe if params.html else params.text }}
 </strong>
diff --git a/packages/components/textarea/template.njk b/packages/components/textarea/template.njk
index d7251efa3..3ebc22078 100644
--- a/packages/components/textarea/template.njk
+++ b/packages/components/textarea/template.njk
@@ -1,6 +1,7 @@
 {% from "../error-message/macro.njk" import errorMessage -%}
 {% from "../hint/macro.njk" import hint %}
 {% from "../label/macro.njk" import label %}
+{% from "../../macros/attributes.njk" import nhsukAttributes %}
 
 {#- a record of other elements that we need to associate with the input using
    aria-describedby – for example hints or error messages -#}
@@ -41,5 +42,5 @@
   {%- if params.rows %} {{ params.rows }} {% else %}5{%endif %}"
   {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}
   {%- if params.autocomplete %} autocomplete="{{ params.autocomplete}}"{% endif %}
-  {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ params.value }}</textarea>
+  {{- nhsukAttributes(params.attributes) }}>{{ params.value }}</textarea>
 </div>
diff --git a/packages/components/warning-callout/template.njk b/packages/components/warning-callout/template.njk
index c518f10de..c5287ccf9 100644
--- a/packages/components/warning-callout/template.njk
+++ b/packages/components/warning-callout/template.njk
@@ -1,7 +1,9 @@
+{% from "../../macros/attributes.njk" import nhsukAttributes %}
+
 {% set headingLevel = params.headingLevel if params.headingLevel else 3 %}
 <div class="nhsuk-warning-callout
 {%- if params.classes %} {{ params.classes }}{% endif %}"
-{%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+{{- nhsukAttributes(params.attributes) }}>
   <h{{ headingLevel }} class="nhsuk-warning-callout__label">
     {%- if "Important" in params.heading or "important" in params.heading %}
     {{ params.heading | safe }}<span class="nhsuk-u-visually-hidden">:</span>
diff --git a/packages/macros/attributes.njk b/packages/macros/attributes.njk
new file mode 100644
index 000000000..8ef96665e
--- /dev/null
+++ b/packages/macros/attributes.njk
@@ -0,0 +1,96 @@
+{# Adapted from https://github.com/alphagov/govuk-frontend/blob/main/packages/govuk-frontend/src/govuk/macros/attributes.njk #}
+
+{#
+  Renders component attributes as string
+
+  * By default or using `optional: false`, attributes render as ` name="value"`
+  * Using `optional: true`, attributes with empty (`null`, `undefined` or `false`) values are omitted
+  * Using `optional: true`, attributes with `true` (boolean) values render `name` only without value
+
+  {@link https://developer.mozilla.org/en-US/docs/Glossary/Boolean/HTML}
+
+  @example
+  Output attribute ` aria-hidden="true"` when `true` (boolean) or `"true"` (string)
+
+  ```njk
+  nhsukAttributes({
+    "aria-hidden": true
+  })
+  ```
+
+  @example
+  Output attribute ` aria-hidden="false"` when `false` (boolean) or `"false"` (string)
+
+  ```njk
+  nhsukAttributes({
+    "aria-hidden": false
+  })
+  ```
+
+  @example
+  Output attribute ` hidden=""` when `null`, `undefined` or empty `""` (string)
+
+  ```njk
+  nhsukAttributes({
+    "hidden": undefined
+  })
+  ```
+
+  @example
+  Output attribute ` hidden` as boolean attribute when optional and `true`
+
+  ```njk
+  nhsukAttributes({
+    hidden: {
+      value: true,
+      optional: true
+    },
+  })
+  ```
+
+  @example
+  Output empty string when optional and `null`, `undefined` or `false`
+
+  ```njk
+  nhsukAttributes({
+    hidden: {
+      value: undefined,
+      optional: true
+    },
+  })
+  ```
+
+  @private
+  @param {{ [attribute: string]: string | { value: string, optional?: boolean } } | string} attributes - Component attributes param
+#}
+{% macro nhsukAttributes(attributes) -%}
+  {#- Default attributes output -#}
+  {% set attributesHtml = attributes if attributes is string else "" %}
+
+  {#- Append attribute name/value pairs -#}
+  {%- if attributes is mapping %}
+    {% for name, value in attributes %}
+      {#- Detect if this is a `safe` filtered value. Just pass the value through if so. -#}
+      {#- https://github.com/alphagov/govuk-frontend/issues/4937 -#}
+      {% if value is mapping and not [undefined, null].includes(value.val) and value.length %}
+        {% set value = value.val %}
+      {% endif %}
+
+      {#- Set default attribute options -#}
+      {% set options = value if value is mapping else {
+        value: value,
+        optional: false
+      } %}
+
+      {#- Output ` name` only (no value) for boolean attributes -#}
+      {% if options.optional === true and options.value === true %}
+        {% set attributesHtml = attributesHtml + " " + name | escape %}
+      {#- Skip optional empty attributes or output ` name="value"` pair by default -#}
+      {% elif (options.optional === true and not [undefined, null, false].includes(options.value)) or options.optional !== true %}
+        {% set attributesHtml = attributesHtml + " " + name | escape + '="' + options.value | escape + '"' %}
+      {% endif %}
+    {% endfor %}
+  {% endif -%}
+
+  {{- attributesHtml | safe -}}
+{%- endmacro %}