Allowing main element as well as main role

bbc · May 27, 2021 · 3ddd9d5 · 3ddd9d5
1 parent 05f7fb6
commit 3ddd9d5
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 10 deletions.
diff --git a/features/setting_cookies.feature b/features/setting_cookies.feature
@@ -28,11 +28,11 @@ Feature: Setting Cookies
 
       ✗ http://localhost:54321/good_with_cookie.html
         * Structure: Containers and landmarks: Exactly one main landmark
-          - Found 0 elements with role="main".
+          - Found 0 main elements (main or with role="main").
 
       ✗ http://localhost:54321/good_with_cookie.html
         * Structure: Containers and landmarks: Exactly one main landmark
-          - Found 0 elements with role="main".
+          - Found 0 main elements (main or with role="main").
 
       ✓ http://localhost:54321/good_with_cookie.html
       """
diff --git a/features/standards/mag/structure/03_containers_and_landmarks.feature b/features/standards/mag/structure/03_containers_and_landmarks.feature
@@ -24,14 +24,22 @@ Feature: Containers and landmarks
   navigation and other contents that might be before it.
 
   @html @automated
-  Scenario: Page has a single main element
+  Scenario: Page has a single element with role of main
     Given a page with the body:
       """
       <div role="main">Main element</div>
       """
     When I test the "Structure: Containers and landmarks: Exactly one main landmark" standard
     Then it passes
 
+  Scenario: Page has a single main element
+    Given a page with the body:
+      """
+      <main>Main element</main>
+      """
+    When I test the "Structure: Containers and landmarks: Exactly one main landmark" standard
+    Then it passes
+
   @html @automated
   Scenario: Page has two main elements
     Given a page with the body:
@@ -42,7 +50,7 @@ Feature: Containers and landmarks
     When I test the "Structure: Containers and landmarks: Exactly one main landmark" standard
     Then it fails with the message:
       """
-      Found 2 elements with role="main": /html/body/div[1] /html/body/div[2]
+      Found 2 main elements (main or with role="main"): /html/body/div[1] /html/body/div[2]
       """
 
   @html @automated
@@ -54,7 +62,7 @@ Feature: Containers and landmarks
     When I test the "Structure: Containers and landmarks: Exactly one main landmark" standard
     Then it fails with the message:
       """
-      Found 0 elements with role="main".
+      Found 0 main elements (main or with role="main").
       """
 
   @html @manual

diff --git a/lib/standards/tests/exactlyOneMainLandmark.js b/lib/standards/tests/exactlyOneMainLandmark.js
@@ -8,12 +8,12 @@ module.exports = {
   topFrameOnly: true,
 
   test: function ({ $, fail }) {
-    var mainLandmarks = $("[role='main']")
+    var mainLandmarks = $("main,[role='main']")
     var count = mainLandmarks.length
     if (count === 0) {
-      fail('Found 0 elements with role="main".')
+      fail('Found 0 main elements (main or with role="main").')
     } else if (count > 1) {
-      fail('Found ' + count + ' elements with role="main":', mainLandmarks)
+      fail('Found ' + count + ' main elements (main or with role="main"):', mainLandmarks)
     }
   }
 }
diff --git a/test/a11ySpec.js b/test/a11ySpec.js
@@ -30,13 +30,13 @@ describe('a11y', function () {
   })
 
   it('hides errors', function () {
-    return a11y.test({ hide: ['Found 0 elements with role="main".'] })
+    return a11y.test({ hide: ['Found 0 main elements (main or with role="main").'] })
       .then(function (outcome) {
         var resultsWithErrors = outcome.results.filter(function (standardResult) {
           return standardResult.hiddenErrors.length > 0
         })
         expect(resultsWithErrors[0].errors).to.eql([])
-        expect(resultsWithErrors[0].hiddenErrors).to.eql([['Found 0 elements with role="main".']])
+        expect(resultsWithErrors[0].hiddenErrors).to.eql([['Found 0 main elements (main or with role="main").']])
       })
   })