Merge pull request #4854 from alphagov/remove-redundant-roles

Remove redundant `role` attributes
alphagov · Mar 18, 2024 · 24aeede · 24aeede
2 parents 8a1c101 + 4bfd65d
commit 24aeede
Show file tree

Hide file tree

Showing 19 changed files with 45 additions and 47 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -53,6 +53,23 @@ Check your changes against [the character count example in the Design System](ht
 
 This change was introduced in [pull request #4566: Use Character count `formGroup` as module wrapper](https://github.com/alphagov/govuk-frontend/pull/4566).
 
+#### Remove redundant `role` attributes from elements
+
+We've made minor changes to the HTML of the page template, as well as the header, footer and pagination components.
+
+You can update your HTML to remove the `role` attribute from some elements. These include:
+
+- the `main` role on the `main` element in the template.
+- the `banner` role on the `header` element in the header component.
+- the `contentinfo` role on the `footer` element in the footer component.
+- the `navigation` role on the `nav` element in the pagination component.
+
+These roles were present to support legacy browsers, such as older versions of Internet Explorer. GOV.UK Frontend no longer supports these browsers, so the roles can now be removed.
+
+If you're using the Nunjucks versions of the page template or these components, you don't need to change anything.
+
+This change was introduced in [pull request #4854: Remove redundant `role` attributes](https://github.com/alphagov/govuk-frontend/pull/4854).
+
 ### Fixes
 
 We've fixed an upstream issue in the [cssnano npm package](https://www.npmjs.com/package/cssnano) that caused elements with transparency to render incorrectly in Internet Explorer 11. This affected the pre-compiled CSS files in the [GOV.UK Frontend npm package](https://www.npmjs.com/package/govuk-frontend) and [GitHub releases](https://github.com/alphagov/govuk-frontend/releases) for versions 5.0, 5.1 and 5.2. This was fixed in:

diff --git a/docs/examples/webpack/src/index.html b/docs/examples/webpack/src/index.html
@@ -13,7 +13,7 @@
     <script>document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');</script>
 
     <div class="govuk-width-container">
-      <main class="govuk-main-wrapper" id="main-content" role="main">
+      <main class="govuk-main-wrapper" id="main-content">
         <a href="/" role="button" draggable="false" class="govuk-button" data-module="govuk-button">
           Link button
         </a>

diff --git a/packages/govuk-frontend-review/src/views/full-page-examples/bank-holidays/index.njk b/packages/govuk-frontend-review/src/views/full-page-examples/bank-holidays/index.njk
@@ -3178,11 +3178,11 @@ notes: |
 
       <!-- The Related items component is not part of GOV.UK Frontend but will be styled if used in the Prototype Kit -->
 
-      <aside class="app-related-items" role="complementary">
+      <aside class="app-related-items">
         <h2 class="govuk-heading-m" id="subsection-title">
           Related content
         </h2>
-        <nav role="navigation" aria-labelledby="subsection-title">
+        <nav aria-labelledby="subsection-title">
           <ul class="govuk-list govuk-!-font-size-16">
             <li class="gem-c-related-navigation__link">
               <a class="govuk-link" href="#/holiday-entitlement-rights">Holiday entitlement</a>

diff --git a/...es/govuk-frontend-review/src/views/full-page-examples/cookie-banner-client-side/index.njk b/...es/govuk-frontend-review/src/views/full-page-examples/cookie-banner-client-side/index.njk
@@ -167,11 +167,11 @@ notes: |
 
       <!-- The Related items component is not part of GOV.UK Frontend but will be styled if used in the Prototype Kit -->
 
-      <aside class="app-related-items" role="complementary">
+      <aside class="app-related-items">
         <h2 class="govuk-heading-m" id="subsection-title">
           Related content
         </h2>
-        <nav role="navigation" aria-labelledby="subsection-title">
+        <nav aria-labelledby="subsection-title">
           <ul class="govuk-list govuk-!-font-size-16">
             <li class="gem-c-related-navigation__link">
               <a class="govuk-link" href="#/get-a-passport-urgently">Get a passport urgently</a>

diff --git a/...uk-frontend-review/src/views/full-page-examples/cookie-banner-essential-cookies/index.njk b/...uk-frontend-review/src/views/full-page-examples/cookie-banner-essential-cookies/index.njk
@@ -125,11 +125,11 @@ notes: |
 
       <!-- The Related items component is not part of GOV.UK Frontend but will be styled if used in the Prototype Kit -->
 
-      <aside class="app-related-items" role="complementary">
+      <aside class="app-related-items">
         <h2 class="govuk-heading-m" id="subsection-title">
           Related content
         </h2>
-        <nav role="navigation" aria-labelledby="subsection-title">
+        <nav aria-labelledby="subsection-title">
           <ul class="govuk-list govuk-!-font-size-16">
             <li class="gem-c-related-navigation__link">
               <a class="govuk-link" href="#/get-a-passport-urgently">Get a passport urgently</a>

diff --git a/...es/govuk-frontend-review/src/views/full-page-examples/cookie-banner-server-side/index.njk b/...es/govuk-frontend-review/src/views/full-page-examples/cookie-banner-server-side/index.njk
@@ -158,11 +158,11 @@ notes: |
 
       <!-- The Related items component is not part of GOV.UK Frontend but will be styled if used in the Prototype Kit -->
 
-      <aside class="app-related-items" role="complementary">
+      <aside class="app-related-items">
         <h2 class="govuk-heading-m" id="subsection-title">
           Related content
         </h2>
-        <nav role="navigation" aria-labelledby="subsection-title">
+        <nav aria-labelledby="subsection-title">
           <ul class="govuk-list govuk-!-font-size-16">
             <li class="gem-c-related-navigation__link">
               <a class="govuk-link" href="#/get-a-passport-urgently">Get a passport urgently</a>

diff --git a/packages/govuk-frontend-review/src/views/full-page-examples/service-manual-topic/index.njk b/packages/govuk-frontend-review/src/views/full-page-examples/service-manual-topic/index.njk
@@ -251,12 +251,12 @@ notes: The links within each section are not functional.
 
       <!-- The Related items component is not part of GOV.UK Frontend but will be styled if used in the Prototype Kit -->
 
-      <aside class="app-related-items" role="complementary">
+      <aside class="app-related-items">
         <h2 class="govuk-heading-m" id="subsection-title">
           Join the community
         </h2>
         <p class="govuk-body">Find out what the cross-government community does and how to get involved.</p>
-        <nav role="navigation" aria-labelledby="subsection-title">
+        <nav aria-labelledby="subsection-title">
           <ul class="govuk-list govuk-!-font-size-16">
             <li class="gem-c-related-navigation__link">
               <a class="govuk-link" href="#">Technology community (web operations)</a>

diff --git a/packages/govuk-frontend-review/src/views/full-page-examples/start-page/index.njk b/packages/govuk-frontend-review/src/views/full-page-examples/start-page/index.njk
@@ -93,11 +93,11 @@ notes: The buttons and links on this page are not functional.
 
       <!-- The Related items component is not part of GOV.UK Frontend but will be styled if used in the Prototype Kit -->
 
-      <aside class="app-related-items" role="complementary">
+      <aside class="app-related-items">
         <h2 class="govuk-heading-m" id="subsection-title">
           Related content
         </h2>
-        <nav role="navigation" aria-labelledby="subsection-title">
+        <nav aria-labelledby="subsection-title">
           <ul class="govuk-list govuk-!-font-size-16">
             <li class="gem-c-related-navigation__link">
               <a class="govuk-link" href="#/get-a-passport-urgently">Get a passport urgently</a>

diff --git a/packages/govuk-frontend-review/src/views/full-page-examples/task-list/index.njk b/packages/govuk-frontend-review/src/views/full-page-examples/task-list/index.njk
@@ -233,7 +233,7 @@ notes: The buttons and links on this page are not functional.
     </div>
 
     <div class="govuk-grid-column-one-third">
-      <aside class="app-related" role="complementary">
+      <aside class="app-related">
         <h2 class="govuk-heading-s govuk-!-margin-bottom-2" id="support-title">Get help</h2>
 
         <ul class="govuk-list govuk-!-font-size-16">

diff --git a/packages/govuk-frontend-review/src/views/full-page-examples/travel-guidance/index.njk b/packages/govuk-frontend-review/src/views/full-page-examples/travel-guidance/index.njk
@@ -42,8 +42,8 @@ notes: Based on https://www.gov.uk/foreign-travel-advice/iceland/entry-requireme
       <h1 class="govuk-heading-xl">Narnia entry requirements</h1>
     </div>
 
-    <aside class="govuk-!-padding-bottom-3" role="complementary">
-      <nav aria-label="Travel advice pages" role="navigation">
+    <aside class="govuk-!-padding-bottom-3">
+      <nav aria-label="Travel advice pages">
         <h2 class="govuk-heading-s">Contents</h2>
         <ol class="govuk-list govuk-list--bullet govuk-!-font-size-16">
           <li><a class="govuk-link" href="#/foreign-travel-advice/narnia">Summary</a></li>

diff --git a/packages/govuk-frontend-review/src/views/layouts/full-width-landmarks.njk b/packages/govuk-frontend-review/src/views/layouts/full-width-landmarks.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 %}
diff --git a/packages/govuk-frontend/.htmlvalidate.js b/packages/govuk-frontend/.htmlvalidate.js
@@ -24,11 +24,6 @@ module.exports = defineConfig({
     // Require all form field and ARIA references to exist
     'no-missing-references': 'error',
 
-    // Allow for explicit roles on regions that have implict roles
-    // We do this to better support AT with older versions of IE that
-    // have partial support for HTML5 semantic elements
-    'no-redundant-role': 'off',
-
     // More hassle than it's worth 👾
     'no-trailing-whitespace': 'off',
 
@@ -68,6 +63,13 @@ module.exports = defineConfig({
         attributes: {
           type: { required: false }
         }
+      },
+      fieldset: {
+        attributes: {
+          role: {
+            enum: ['group']
+          }
+        }
       }
     }
   ]

diff --git a/packages/govuk-frontend/src/govuk/components/footer/template.njk b/packages/govuk-frontend/src/govuk/components/footer/template.njk
@@ -1,6 +1,6 @@
 {% from "../../macros/attributes.njk" import govukAttributes -%}
 
-<footer class="govuk-footer {%- if params.classes %} {{ params.classes }}{% endif %}" role="contentinfo"
+<footer class="govuk-footer {%- if params.classes %} {{ params.classes }}{% endif %}"
   {{- govukAttributes(params.attributes) }}>
   <div class="govuk-width-container {%- if params.containerClasses %} {{ params.containerClasses }}{% endif %}">
     {% if params.navigation | length %}

diff --git a/packages/govuk-frontend/src/govuk/components/footer/template.test.js b/packages/govuk-frontend/src/govuk/components/footer/template.test.js
@@ -8,13 +8,6 @@ describe('footer', () => {
     examples = await getExamples('footer')
   })
 
-  it('entire component must have a role of `contentinfo`', () => {
-    const $ = render('footer', examples.default)
-
-    const $component = $('.govuk-footer')
-    expect($component.attr('role')).toBe('contentinfo')
-  })
-
   it('renders attributes correctly', () => {
     const $ = render('footer', examples.attributes)
 

diff --git a/packages/govuk-frontend/src/govuk/components/header/template.njk b/packages/govuk-frontend/src/govuk/components/header/template.njk
@@ -34,7 +34,7 @@
 </svg>
 {% endset -%}
 
-<header class="govuk-header {%- if params.classes %} {{ params.classes }}{% endif %}" role="banner" data-module="govuk-header"
+<header class="govuk-header {%- if params.classes %} {{ params.classes }}{% endif %}" data-module="govuk-header"
   {{- govukAttributes(params.attributes) }}>
   <div class="govuk-header__container {{ params.containerClasses | default("govuk-width-container", true) }}">
     <div class="govuk-header__logo">

diff --git a/packages/govuk-frontend/src/govuk/components/header/template.test.js b/packages/govuk-frontend/src/govuk/components/header/template.test.js
@@ -8,15 +8,6 @@ describe('header', () => {
     examples = await getExamples('header')
   })
 
-  describe('default example', () => {
-    it('has a role of `banner`', () => {
-      const $ = render('header', examples.default)
-
-      const $component = $('.govuk-header')
-      expect($component.attr('role')).toBe('banner')
-    })
-  })
-
   describe('custom options', () => {
     it('renders attributes correctly', () => {
       const $ = render('header', examples.attributes)

diff --git a/packages/govuk-frontend/src/govuk/components/pagination/template.njk b/packages/govuk-frontend/src/govuk/components/pagination/template.njk
@@ -50,7 +50,7 @@
   </li>
 {%- endmacro -%}
 
-<nav class="govuk-pagination {%- if blockLevel %} govuk-pagination--block{% endif %} {%- if params.classes %} {{ params.classes }}{% endif %}" role="navigation" aria-label="{{ params.landmarkLabel | default("Pagination", true) }}"
+<nav class="govuk-pagination {%- if blockLevel %} govuk-pagination--block{% endif %} {%- if params.classes %} {{ params.classes }}{% endif %}" aria-label="{{ params.landmarkLabel | default("Pagination", true) }}"
   {{- govukAttributes(params.attributes) }}>
   {% set previous = params.previous %}
   {% set next = params.next %}

diff --git a/packages/govuk-frontend/src/govuk/template.njk b/packages/govuk-frontend/src/govuk/template.njk
@@ -43,7 +43,7 @@
     {% block main %}
       <div class="govuk-width-container {%- if containerClasses %} {{ containerClasses }}{% endif %}">
         {% block beforeContent %}{% endblock %}
-        <main class="govuk-main-wrapper {%- if mainClasses %} {{ mainClasses }}{% endif %}" id="main-content" role="main" {%- if mainLang %} lang="{{ mainLang }}"{% endif %}>
+        <main class="govuk-main-wrapper {%- if mainClasses %} {{ mainClasses }}{% endif %}" id="main-content" {%- if mainLang %} lang="{{ mainLang }}"{% endif %}>
           {% block content %}{% endblock %}
         </main>
       </div>

diff --git a/packages/govuk-frontend/src/govuk/template.test.js b/packages/govuk-frontend/src/govuk/template.test.js
@@ -345,11 +345,6 @@ describe('Template', () => {
     })
 
     describe('<main>', () => {
-      it('has role="main", supporting browsers that do not natively support HTML5 elements', () => {
-        const $ = renderTemplate('govuk/template.njk')
-        expect($('main').attr('role')).toBe('main')
-      })
-
       it('can have custom classes added using mainClasses', () => {
         const $ = renderTemplate('govuk/template.njk', {
           context: {