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

Remove redundant `role` attributes from elements

CHANGELOG.md

@@ -16,6 +16,7 @@
 * **BREAKING** Use component wrapper on attachment link component ([PR #4549](https://github.com/alphagov/govuk_publishing_components/pull/4549))
 * Add rel attribute to component wrapper ([PR #4551](https://github.com/alphagov/govuk_publishing_components/pull/4551))
 * Add 'draggable' attribute to component wrapper helper ([PR #4544](https://github.com/alphagov/govuk_publishing_components/pull/4544))
+* Remove redundant `role` attributes from elements ([PR #4556](https://github.com/alphagov/govuk_publishing_components/pull/4556))
 
 ## 48.0.0
 

app/views/govuk_publishing_components/components/_contents_list.html.erb

@@ -30,7 +30,6 @@
   component_helper.add_class("gem-c-contents-list--custom-title") if title
   component_helper.add_data_attribute({ module: "ga4-link-tracker" }) unless disable_ga4
   component_helper.add_aria_attribute({ label: t("components.contents_list.contents") }) unless local_assigns[:aria][:label]
-  component_helper.add_role("navigation")
 
   title_fallback = t("components.contents_list.contents", locale: I18n.locale, fallback: false, default: "en")
 %>

app/views/govuk_publishing_components/components/_cross_service_header.html.erb

@@ -7,7 +7,7 @@
   service_navigation_aria_label ||= "Service menu"
 %>
 
-<header class="gem-c-cross-service-header" role="banner" data-module="cross-service-header">
+<header class="gem-c-cross-service-header" data-module="cross-service-header">
   <%= render "govuk_publishing_components/components/cross_service_header/one_login_header", {
     one_login_navigation_items: one_login_navigation_items,
   } %>

app/views/govuk_publishing_components/components/_layout_footer.html.erb

@@ -11,7 +11,6 @@
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
   component_helper.add_class("gem-c-layout-footer govuk-footer")
   component_helper.add_class("gem-c-layout-footer--border") if with_border
-  component_helper.add_role("contentinfo")
   component_helper.add_data_attribute({ module: "ga4-link-tracker" })
 %>
 <%= tag.footer(**component_helper.all_attributes) do %>

app/views/govuk_publishing_components/components/_layout_header.html.erb

@@ -15,7 +15,6 @@
   component_helper.add_class("gem-c-layout-header govuk-header")
   component_helper.add_class("gem-c-layout-header--#{environment}") if environment
   component_helper.add_class("gem-c-layout-header--no-bottom-border") if remove_bottom_border
-  component_helper.add_role("banner")
   component_helper.add_data_attribute({ module: "govuk-header" })
 
 %>

app/views/govuk_publishing_components/components/_layout_super_navigation_header.html.erb

@@ -65,7 +65,6 @@
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
   component_helper.add_class("gem-c-layout-super-navigation-header")
   component_helper.add_class("gem-c-layout-super-navigation-header--blue-background") if blue_background
-  component_helper.add_role("banner")
   component_helper.add_data_attribute({ module: "ga4-event-tracker ga4-link-tracker", ga4_expandable: "" })
 %>
 <%= tag.header(**component_helper.all_attributes) do %>

app/views/govuk_publishing_components/components/_previous_and_next_navigation.html.erb

@@ -4,7 +4,6 @@
 
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
   component_helper.add_class("govuk-pagination govuk-pagination--block")
-  component_helper.add_role("navigation")
   component_helper.add_aria_attribute({ label: t("components.previous_and_next_navigation.pagination") })
   component_helper.add_data_attribute({ module: "ga4-link-tracker" }) unless disable_ga4
 

app/views/govuk_publishing_components/components/_secondary_navigation.html.erb

@@ -8,7 +8,6 @@
   component_helper.add_aria_attribute({label: aria_label})
   component_helper.add_class('gem-c-secondary-navigation')
   component_helper.set_id(id)
-  component_helper.add_role("navigation")
 %>
 
 <% if items.any? %>

app/views/govuk_publishing_components/components/_translation_nav.html.erb

@@ -6,7 +6,6 @@
   translation_helper = GovukPublishingComponents::Presenters::TranslationNavHelper.new(local_assigns)
 
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
-  component_helper.add_role("navigation")
   component_helper.add_class("gem-c-translation-nav govuk-!-display-none-print #{translation_helper.classes} #{brand_helper.brand_class}")
   component_helper.add_aria_attribute({ label: t("common.translations") })
 %>

app/views/govuk_publishing_components/components/docs/layout_footer.yml

@@ -20,17 +20,8 @@ accessibility_criteria: |
 
     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`](https://www.w3.org/TR/wai-aria-1.1/#contentinfo) at the root of the component (`<footer>`)
-
-    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.
 shared_accessibility_criteria:
   - link
-accessibility_excluded_rules:
-  - landmark-contentinfo-is-top-level # The footer element can not be top level in the examples
 examples:
   default:
     data: {}

app/views/govuk_publishing_components/components/layout_for_public/_account-layout.html.erb

@@ -12,7 +12,7 @@
     <div class="govuk-grid-column-two-thirds">
       <div id="wrapper">
         <%= yield :before_content %>
-        <main role="main" id="content">
+        <main id="content">
           <%= yield %>
         </main>
       </div>

app/views/govuk_publishing_components/components/related_navigation/_section.html.erb

@@ -1,5 +1,4 @@
-<nav role="navigation"
-     class="gem-c-related-navigation__nav-section"
+<nav class="gem-c-related-navigation__nav-section"
      aria-labelledby="related-nav-<%= section_title %>-<%= random %>"
      data-module="gem-toggle">
 

spec/components/previous_and_next_navigation_spec.rb

@@ -16,7 +16,7 @@ def component_name
       label: "1 of 3",
     })
 
-    assert_select ".govuk-pagination[role='navigation']"
+    assert_select ".govuk-pagination"
     assert_select ".govuk-pagination__link-title", text: "Previous page"
     assert_select ".govuk-pagination__link-label", text: "1 of 3"
     assert_link("previous-page")

spec/components/translation_nav_spec.rb

@@ -67,7 +67,7 @@ def multiple_translations
 
   it "is labelled as translation navigation" do
     render_component(translations: multiple_translations)
-    assert_select "nav[role='navigation'][aria-label='Translations']"
+    assert_select "nav[aria-label='Translations']"
   end
 
   it "adds branding correctly" do

spec/dummy/app/views/layouts/dummy_admin_layout.html.erb

@@ -18,7 +18,7 @@
   }%>
   <div class="govuk-width-container">
     <%# breadcrumbs, backlink, phasebanner goes here %>
-    <main class="govuk-main-wrapper " id="main-content" role="main">
+    <main class="govuk-main-wrapper " id="main-content">
       <%= yield %>
     </main>
   </div>

spec/javascripts/components/cross-service-header-spec.js

@@ -10,7 +10,7 @@ describe('The _layout_header_one_login', function () {
   beforeEach(function () {
     container = document.createElement('div')
     container.innerHTML =
-      '<header class="gem-c-cross-service-header" role="banner" data-module="cross-service-header">' +
+      '<header class="gem-c-cross-service-header" data-module="cross-service-header">' +
       '<div class="gem-c-one-login-header" data-one-login-header-nav>' +
         '<div class="gem-c-one-login-header__container govuk-width-container">' +
           '<div class="gem-c-one-login-header__logo">' +

spec/lib/govuk_publishing_components/components/component_wrapper_helper_spec.rb

@@ -9,7 +9,7 @@
         aria: {
           labelledby: "element",
         },
-        role: "navigation",
+        role: "region",
         lang: "en",
         open: true,
         hidden: "",
@@ -28,7 +28,7 @@
         aria: {
           labelledby: "element",
         },
-        role: "navigation",
+        role: "region",
         lang: "en",
         open: true,
         hidden: "",
@@ -194,19 +194,19 @@
         }.to raise_error(ArgumentError, error)
 
         expect {
-          GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(role: "navigation custarddoughnuts moose")
+          GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(role: "region custarddoughnuts moose")
         }.to raise_error(ArgumentError, error)
       end
 
       it "does not accept an invalid role when passed" do
         error = "Role attribute (custarddoughnuts, moose) is not recognised"
         expect {
-          helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(role: "navigation")
+          helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(role: "region")
           helper.add_role("custarddoughnuts moose")
         }.to raise_error(ArgumentError, error)
 
         expect {
-          helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(role: "navigation")
+          helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(role: "region")
           helper.add_role("alert custarddoughnuts moose")
         }.to raise_error(ArgumentError, error)
       end