feat: Cycle betwixt multiple main regions (#373)

Pages should not really have more than one, but if they do, this seems the most sensible approach. Closes #371
matatk · Jun 20, 2020 · 0b8bcb8 · 0b8bcb8
1 parent e6a543e
commit 0b8bcb8
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 9 deletions.
diff --git a/src/code/landmarksFinder.js b/src/code/landmarksFinder.js
@@ -90,8 +90,9 @@ export default function LandmarksFinder(win, doc) {
 	// Keeping track of landmark navigation
 	//
 
-	let currentlySelectedIndex  // the landmark currently having focus/border
-	let mainElementIndex        // if we find a <main> or role="main" element
+	let currentlySelectedIndex   // the landmark currently having focus/border
+	let mainElementIndices = []  // if we find <main> or role="main" elements
+	let mainIndexPointer         // allows us to cylce through main regions
 
 	// Keep a reference to the currently-selected element in case the page
 	// changes and the landmark is still there, but has moved within the list.
@@ -156,10 +157,10 @@ export default function LandmarksFinder(win, doc) {
 				currentlySelectedIndex = landmarks.length - 1
 			}
 
-			// If this is the first main landmark (there should only
-			// be one), store a reference to it.
-			if (mainElementIndex < 0 && role === 'main') {
-				mainElementIndex = landmarks.length - 1
+			// There should only be one main region, but pages may be bad and
+			// wrong, so catch 'em all...
+			if (role === 'main') {
+				mainElementIndices.push(landmarks.length - 1)
 			}
 
 			parentLandmark = element
@@ -331,7 +332,8 @@ export default function LandmarksFinder(win, doc) {
 
 	this.find = function() {
 		landmarks = []
-		mainElementIndex = -1
+		mainElementIndices = []
+		mainIndexPointer = -1
 		currentlySelectedIndex = -1
 		getLandmarks(doc.body.parentNode, 0, null)  // supports role on <body>
 	}
@@ -378,8 +380,14 @@ export default function LandmarksFinder(win, doc) {
 		return updateSelectedIndexAndReturnElementInfo(index)
 	}
 
+	// If pages are naughty and have more than one 'main' region, we cycle
+	// betwixt them.
 	this.getMainElementInfo = function() {
-		return mainElementIndex < 0 ?
-			null : updateSelectedIndexAndReturnElementInfo(mainElementIndex)
+		if (mainElementIndices.length > 0) {
+			mainIndexPointer = (mainIndexPointer + 1) % mainElementIndices.length
+			const mainElementIndex = mainElementIndices[mainIndexPointer]
+			return updateSelectedIndexAndReturnElementInfo(mainElementIndex)
+		}
+		return null
 	}
 }
diff --git a/test/manual-test-multiple-mains.html b/test/manual-test-multiple-mains.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8">
+		<title>Test cycling through multiple main regions</title>
+	</head>
+	<body>
+		<header>
+			<h1>Test cycling through multiple <code>main</code> regions</h1>
+		</header>
+		<main>
+			<p><strong>Don't try this at home, folks! You're not supposed to have more than one <code>main</code> region per page, according to both <a href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-main-element">HTML</a> and <a href="https://www.w3.org/TR/wai-aria-1.1/#main">ARIA</a>.</strong>
+		</main>
+		<aside>
+			<p>Sunshine, lollipops and rainbows everywhere&hellip;</p>
+		</aside>
+		<main>
+			<p>The main event, again!</p>
+		</main>
+		<aside>
+			<p>Yet another diversion.</p>
+		</aside>
+		<main>
+			<p>The real deal.</p>
+		</main>
+		<footer>
+			<p>Fin.</p>
+		</footer>
+	</body>
+</html>