From 0b8bcb8b43e92f5217785f6e1df946fab3a07673 Mon Sep 17 00:00:00 2001 From: Matthew Tylee Atkinson Date: Sat, 20 Jun 2020 13:46:49 +0100 Subject: [PATCH] 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 --- src/code/landmarksFinder.js | 26 +++++++++++++++--------- test/manual-test-multiple-mains.html | 30 ++++++++++++++++++++++++++++ 2 files changed, 47 insertions(+), 9 deletions(-) create mode 100644 test/manual-test-multiple-mains.html diff --git a/src/code/landmarksFinder.js b/src/code/landmarksFinder.js index 79eafe3c..9dafffad 100644 --- 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
or role="main" element + let currentlySelectedIndex // the landmark currently having focus/border + let mainElementIndices = [] // if we find
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 } @@ -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 new file mode 100644 index 00000000..e341ade7 --- /dev/null +++ b/test/manual-test-multiple-mains.html @@ -0,0 +1,30 @@ + + + + + Test cycling through multiple main regions + + +
+

Test cycling through multiple main regions

+
+
+

Don't try this at home, folks! You're not supposed to have more than one main region per page, according to both HTML and ARIA. +

+ +
+

The main event, again!

+
+ +
+

The real deal.

+
+ + +