PLATUI-2941: Update hmrc-frontend to govuk-frontend v5.3.0 (#364)

CHANGELOG.md

@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased]
 
+## [6.15.0] - 2024-04-05
+
+### Changed
+
+- Updated govuk-frontend to v5.3.0
+
 ## [6.14.0] - 2024-04-01
 
 ### Changed

app/views/layouts/full-width.njk

@@ -4,7 +4,7 @@
   <div class="govuk-width-container">
     {% block beforeContent %}{% endblock %}
   </div>
-  <main class="govuk-main-wrapper {{ mainClasses }}" id="main-content" role="main">
+  <main class="govuk-main-wrapper {{ mainClasses }}" id="main-content">
     {% block content %}{% endblock %}
   </main>
 {% endblock %}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hmrc-frontend",
-  "version": "6.14.0",
+  "version": "6.15.0",
   "description": "Design patterns for HMRC frontends",
   "scripts": {
     "start": "gulp dev",
@@ -42,7 +42,7 @@
   },
   "homepage": "https://github.com/hmrc/hmrc-frontend#readme",
   "dependencies": {
-    "govuk-frontend": "^5.2.0",
+    "govuk-frontend": "^5.3.0",
     "accessible-autocomplete": "^2.0.4"
   },
   "devDependencies": {

src/components/footer/footer.yaml

@@ -104,14 +104,6 @@ accessibilityCriteria: |
     Note: This decision has been made based on prior experience seeing removal of overuse of `<nav>` elements from www.GOV.UK, which made it confusing for users of assistive technologies to know what were the most important navigation aspects of GOV.UK.
     Should be challenged if user research indicates this is an issue.
 
-  - have a role of `contentinfo` at the root of the component (<footer>) (https://www.w3.org/TR/wai-aria-1.1/#contentinfo)
-    Note: This decision has been made given that most uses of this role tend to be used directly on a `<footer>` element.
-    Assumption made is that is most predictable for users of assistive technologies.
-    The spec indicates that `contentinfo` is useful for "Examples of information included in this region of the page are copyrights and links to privacy statements.", which may indicate that it might be better placed around the 'meta' section of this component.
-    Should be challenged if user research indicates this is an issue.
-
-    See also: http://www.brucelawson.co.uk/2013/why-does-html-take-rolecontentinfo
-
 examples:
 - name: default
   data:

src/components/footer/template.test.js

@@ -28,13 +28,6 @@ describe('footer', () => {
     expect(results).toHaveNoViolations();
   });
 
-  it('entire component must have a role of `contentinfo`', () => {
-    const $ = render('footer', examples.default);
-
-    const $component = $('.govuk-footer');
-    expect($component.attr('role')).toEqual('contentinfo');
-  });
-
   it('renders attributes correctly', () => {
     const $ = render('footer', examples.attributes);
 

src/components/header/header.yaml

@@ -140,9 +140,6 @@ accessibilityCriteria: |
   Images in the Header must:
   - be presentational when linked to from accompanying text (crown icon).
 
-  Landmarks and Roles in the Header should:
-  - have a role of `banner` at the root of the component (<header>) (https://www.w3.org/TR/wai-aria-1.1/#banner)
-
 examples:
 - name: default
   description: The standard header as used on information pages on GOV.UK

src/components/header/template.njk

@@ -39,7 +39,7 @@
 </svg>
 {% endset -%}
 
-<header role="banner">
+<header>
 <div class="govuk-header hmrc-header {%- if params.classes %} {{ params.classes }}{% endif %}{{ ' hmrc-header--with-additional-navigation' if params.signOutHref or params.languageToggle }}" data-module="govuk-header"
   {{- govukAttributes(params.attributes) }}>
   <div class="govuk-header__container {{ params.containerClasses | default("govuk-width-container", true) }}">

src/components/header/template.test.js

@@ -21,13 +21,6 @@ describe('header', () => {
     expect(withoutHmrcHeaderClasses(hmrcHeaderHtml)).toEqual(govukHeaderHtml);
   });
 
-  it('has a role of `banner`', () => {
-    const $ = render('header', {});
-
-    const $component = $('header');
-    expect($component.attr('role')).toEqual('banner');
-  });
-
   it('renders classes', () => {
     const $ = render('header', {
       classes: 'app-header--custom-modifier',

src/components/internal-header/internal-header.yaml

@@ -41,9 +41,6 @@ accessibilityCriteria:
   Images in the Header must:
   - be presentational when linked to from accompanying text (crown icon).
 
-  Landmarks and Roles in the Header should:
-  - have a role of `banner` at the root of the component (<header>) (https://www.w3.org/TR/wai-aria-1.1/#banner)
-
 examples:
 - name: default
   description: The standard header