Allow attributes to be added to anchor items in header, footer, breadcrumbs, tabs and error-summary components

CHANGELOG.md

@@ -22,6 +22,12 @@
 
   ([PR #990](https://github.com/alphagov/govuk-frontend/pull/990))
 
+- Allow attributes to be added to some child items in header, footer, breadcrumbs, tabs and error-summary components
+
+  You can now pass additional attributes to links in header, footer, breadcrumbs, tabs and error-summary components
+
+  ([PR #993](https://github.com/alphagov/govuk-frontend/pull/993))
+
 - Pull Request Title goes here
 
   Description goes here (optional)

src/components/breadcrumbs/README.md

@@ -288,6 +288,18 @@ If you are using Nunjucks,then macros take the following arguments
 
 <tr class="govuk-table__row">
 
+<th class="govuk-table__header" scope="row">items.{}.attributes</th>
+
+<td class="govuk-table__cell ">object</td>
+
+<td class="govuk-table__cell ">No</td>
+
+<td class="govuk-table__cell ">Any extra HTML attributes (for example data attributes) to add to the breadcrumb anchor item.</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
 <th class="govuk-table__header" scope="row">classes</th>
 
 <td class="govuk-table__cell ">string</td>

src/components/breadcrumbs/README.njk

@@ -71,6 +71,20 @@ The Breadcrumbs component helps users to understand where they are within a webs
         text: 'Link for the breadcrumbs item. If not specified, breadcrumbs item is a normal list item'
       }
     ],
+    [
+      {
+        text: 'items.{}.attributes'
+      },
+      {
+        text: 'object'
+      },
+      {
+        text: 'No'
+      },
+      {
+        text: 'Any extra HTML attributes (for example data attributes) to add to the breadcrumb anchor item.'
+      }
+    ],
     [
       {
         text: 'classes'

src/components/breadcrumbs/template.njk

@@ -3,7 +3,7 @@
   {% for item in params.items %}
     {% if item.href %}
     <li class="govuk-breadcrumbs__list-item">
-      <a class="govuk-breadcrumbs__link" href="{{ item.href }}">{{ item.html | safe if item.html else item.text }}</a>
+      <a class="govuk-breadcrumbs__link" href="{{ item.href }}"{% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ item.html | safe if item.html else item.text }}</a>
     </li>
     {% else %}
     <li class="govuk-breadcrumbs__list-item" aria-current="page">{{ item.html | safe if item.html else item.text }}</li>

src/components/breadcrumbs/template.test.js

@@ -79,6 +79,25 @@ describe('Breadcrumbs', () => {
       expect($item.html()).toEqual('<span>Section 1</span>')
     })
 
+    it('renders item anchor with attributes', () => {
+      const $ = render('breadcrumbs', {
+        items: [
+          {
+            'text': 'Section 1',
+            'href': '/section',
+            'attributes': {
+              'data-attribute': 'my-attribute',
+              'data-attribute-2': 'my-attribute-2'
+            }
+          }
+        ]
+      })
+
+      const $breadcrumbLink = $('.govuk-breadcrumbs__link')
+      expect($breadcrumbLink.attr('data-attribute')).toEqual('my-attribute')
+      expect($breadcrumbLink.attr('data-attribute-2')).toEqual('my-attribute-2')
+    })
+
     it('renders item with html', () => {
       const $ = render('breadcrumbs', {
         items: [

src/components/error-summary/README.md

@@ -168,6 +168,18 @@ If you are using Nunjucks,then macros take the following arguments
 
 <tr class="govuk-table__row">
 
+<th class="govuk-table__header" scope="row">errorList.{}.attributes</th>
+
+<td class="govuk-table__cell ">object</td>
+
+<td class="govuk-table__cell ">No</td>
+
+<td class="govuk-table__cell ">Any extra HTML attributes (for example data attributes) to add to the error link anchor.</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
 <th class="govuk-table__header" scope="row">classes</th>
 
 <td class="govuk-table__cell ">string</td>

src/components/error-summary/README.njk

@@ -101,6 +101,20 @@
         text: 'Text or HTML for the error link item. If `html` is provided, the `text` argument will be ignored.'
       }
     ],
+    [
+      {
+        text: 'errorList.{}.attributes'
+      },
+      {
+        text: 'object'
+      },
+      {
+        text: 'No'
+      },
+      {
+        text: 'Any extra HTML attributes (for example data attributes) to add to the error link anchor.'
+      }
+    ],
     [
       {
         text: 'classes'

src/components/error-summary/template.njk

@@ -14,7 +14,7 @@
     {% for item in params.errorList %}
       <li>
       {% if item.href %}
-        <a href="{{ item.href }}">{{ item.html | safe if item.html else item.text }}</a>
+        <a href="{{ item.href }}"{% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ item.html | safe if item.html else item.text }}</a>
       {% else %}
         {{ item.html | safe if item.html else item.text }}
       {% endif %}

src/components/error-summary/template.test.js

@@ -128,6 +128,25 @@ describe('Error-summary', () => {
     expect(errorItem.attr('href')).toEqual('#example-error-1')
   })
 
+  it('renders anchor tag with attributes', () => {
+    const $ = render('error-summary', {
+      errorList: [
+        {
+          'text': 'Error-1',
+          'href': '#item',
+          'attributes': {
+            'data-attribute': 'my-attribute',
+            'data-attribute-2': 'my-attribute-2'
+          }
+        }
+      ]
+    })
+
+    const $component = $('.govuk-error-summary__list a')
+    expect($component.attr('data-attribute')).toEqual('my-attribute')
+    expect($component.attr('data-attribute-2')).toEqual('my-attribute-2')
+  })
+
   it('renders error item text', () => {
     const $ = render('error-summary', examples.default)
     const errorItemText = $('.govuk-error-summary .govuk-error-summary__list li:first-child').text().trim()

src/components/footer/README.md

@@ -177,6 +177,18 @@ If you are using Nunjucks,then macros take the following arguments
 
 <tr class="govuk-table__row">
 
+<th class="govuk-table__header" scope="row">meta.items.{}.attributes</th>
+
+<td class="govuk-table__cell ">object</td>
+
+<td class="govuk-table__cell ">No</td>
+
+<td class="govuk-table__cell ">Any extra HTML attributes (for example data attributes) to add to the anchor in the footer meta section.</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
 <th class="govuk-table__header" scope="row">navigation</th>
 
 <td class="govuk-table__cell ">array</td>
@@ -249,6 +261,18 @@ If you are using Nunjucks,then macros take the following arguments
 
 <tr class="govuk-table__row">
 
+<th class="govuk-table__header" scope="row">navigation.items.{}.attributes</th>
+
+<td class="govuk-table__cell ">object</td>
+
+<td class="govuk-table__cell ">No</td>
+
+<td class="govuk-table__cell ">Any extra HTML attributes (for example data attributes) to add to the anchor in the footer navigation section.</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
 <th class="govuk-table__header" scope="row">containerClasses</th>
 
 <td class="govuk-table__cell ">string</td>

src/components/footer/README.njk

@@ -114,6 +114,20 @@
         text: 'List item href attribute in the meta section of the footer.'
       }
     ],
+    [
+      {
+        text: 'meta.items.{}.attributes'
+      },
+      {
+        text: 'object'
+      },
+      {
+        text: 'No'
+      },
+      {
+        text: 'Any extra HTML attributes (for example data attributes) to add to the anchor in the footer meta section.'
+      }
+    ],
     [
       {
         text: 'navigation'
@@ -198,6 +212,20 @@
         text: 'List item href attribute in the navigation section of the footer. Both `text` and `href` attributes need to be present to create a link.'
       }
     ],
+    [
+      {
+        text: 'navigation.items.{}.attributes'
+      },
+      {
+        text: 'object'
+      },
+      {
+        text: 'No'
+      },
+      {
+        text: 'Any extra HTML attributes (for example data attributes) to add to the anchor in the footer navigation section.'
+      }
+    ],
     [
       {
         text: 'containerClasses'

src/components/footer/template.njk

@@ -16,7 +16,7 @@
                 {% for item in item.items %}
                   {% if item.href and item.text %}
                     <li class="govuk-footer__list-item">
-                      <a class="govuk-footer__link" href="{{ item.href }}">
+                      <a class="govuk-footer__link" href="{{ item.href }}"{% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
                         {{ item.text }}
                       </a>
                     </li>
@@ -37,7 +37,7 @@
             <ul class="govuk-footer__inline-list">
               {% for item in params.meta.items %}
                 <li class="govuk-footer__inline-list-item">
-                  <a class="govuk-footer__link" href="{{ item.href }}">
+                  <a class="govuk-footer__link" href="{{ item.href }}"{% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
                     {{ item.text }}
                   </a>
                 </li>

src/components/footer/template.test.js

@@ -105,6 +105,27 @@ describe('footer', () => {
       const $custom = $component.find('.govuk-footer__meta-custom')
       expect($custom.text()).toContain('GOV.UK Prototype Kit v7.0.1')
     })
+
+    it('renders attributes on meta links', () => {
+      const $ = render('footer', {
+        meta: {
+          items: [
+            {
+              href: '#1',
+              text: 'meta item 1',
+              attributes: {
+                'data-attribute': 'my-attribute',
+                'data-attribute-2': 'my-attribute-2'
+              }
+            }
+          ]
+        }
+      })
+
+      const $metaLink = $('.govuk-footer__meta .govuk-footer__link')
+      expect($metaLink.attr('data-attribute')).toEqual('my-attribute')
+      expect($metaLink.attr('data-attribute-2')).toEqual('my-attribute-2')
+    })
   })
 
   describe('navigation', () => {
@@ -139,6 +160,29 @@ describe('footer', () => {
       expect($firstItem.text()).toContain('Navigation item 1')
     })
 
+    it('renders attributes on links', () => {
+      const $ = render('footer', {
+        navigation: [
+          {
+            items: [
+              {
+                href: '#1',
+                text: 'Navigation item 1',
+                attributes: {
+                  'data-attribute': 'my-attribute',
+                  'data-attribute-2': 'my-attribute-2'
+                }
+              }
+            ]
+          }
+        ]
+      })
+
+      const $navigationLink = $('.govuk-footer__list .govuk-footer__link')
+      expect($navigationLink.attr('data-attribute')).toEqual('my-attribute')
+      expect($navigationLink.attr('data-attribute-2')).toEqual('my-attribute-2')
+    })
+
     it('renders lists in columns', () => {
       const $ = render('footer', examples['with navigation'])
 

src/components/header/README.md

@@ -473,6 +473,18 @@ If you are using Nunjucks,then macros take the following arguments
 
 <tr class="govuk-table__row">
 
+<th class="govuk-table__header" scope="row">navigation.{}.attributes</th>
+
+<td class="govuk-table__cell ">object</td>
+
+<td class="govuk-table__cell ">No</td>
+
+<td class="govuk-table__cell ">Any extra HTML attributes (for example data attributes) to add to the navigation item anchor.</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
 <th class="govuk-table__header" scope="row">navigationClasses</th>
 
 <td class="govuk-table__cell ">string</td>

src/components/header/README.njk

@@ -156,6 +156,20 @@
         text: 'Flag to mark the navigation item as active or not.'
       }
     ],
+    [
+      {
+        text: 'navigation.{}.attributes'
+      },
+      {
+        text: 'object'
+      },
+      {
+        text: 'No'
+      },
+      {
+        text: 'Any extra HTML attributes (for example data attributes) to add to the navigation item anchor.'
+      }
+    ],
     [
       {
         text: 'navigationClasses'

src/components/header/template.njk

@@ -69,7 +69,7 @@
         {% for item in params.navigation %}
           {% if item.href and item.text %}
             <li class="govuk-header__navigation-item{{ ' govuk-header__navigation-item--active' if item.active }}">
-              <a class="govuk-header__link" href="{{ item.href }}">
+              <a class="govuk-header__link" href="{{ item.href }}"{% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
                 {{ item.text }}
               </a>
             </li>

src/components/header/template.test.js

@@ -104,6 +104,24 @@ describe('header', () => {
       expect($firstItem.text()).toContain('Navigation item 1')
     })
 
+    it('renders navigation item anchor with attributes', () => {
+      const $ = render('header', {
+        navigation: [
+          {
+            'text': 'Item',
+            'href': '/link',
+            'attributes': {
+              'data-attribute': 'my-attribute',
+              'data-attribute-2': 'my-attribute-2'
+            }
+          }
+        ]
+      })
+
+      const $navigationLink = $('.govuk-header__navigation-item a')
+      expect($navigationLink.attr('data-attribute')).toEqual('my-attribute')
+      expect($navigationLink.attr('data-attribute-2')).toEqual('my-attribute-2')
+    })
     describe('menu button', () => {
       it('has an explicit type="button" so it does not act as a submit button', () => {
         const $ = render('header', examples['with navigation'])