Mentioned in email to @SteveALee already, but for reference: the way the "Expand all sections" / "Collapse all sections" buttons on https://wai-wcag-supplemental.netlify.app/wcag-supplemental/all-supplemental-guidance are currently implemented (with the <button> being dynamically changed to disabled once activated) means effectively that the control that had focus is "rug-pulled" from underneath the user's focus. while it's true that most browsers nowadays try to error-correct for this (and try to find a sensible location to place focus on the next Tab / Shift+Tab for a keyboard user), that can't be relied on in all circumstances.
As an example, here's a video (with sound) of how this behaves in Chrome/JAWS 2021. After activating the "Expand all sections" control (which then becomes non-focusable with disabled), note in the devtools how document.activeElement now indicates that the body as a whole has now focus. The page title is read out again (since JAWS got confused and reset itself to the top of the page). Now, using down arrow reading key, note how it starts reading back from the very start of the page as well.
The solution here (assuming the two <button> approach is kept) is to explicitly manage the focus() once one of those buttons is activated - the most logical would likely be to set focus to the "other" button (i.e. after activating "Expand all sections", make that button disabled but move focus() explicitly to the "Collapse all sections" button).
Mentioned in email to @SteveALee already, but for reference: the way the "Expand all sections" / "Collapse all sections" buttons on https://wai-wcag-supplemental.netlify.app/wcag-supplemental/all-supplemental-guidance are currently implemented (with the
<button>being dynamically changed todisabledonce activated) means effectively that the control that had focus is "rug-pulled" from underneath the user's focus. while it's true that most browsers nowadays try to error-correct for this (and try to find a sensible location to place focus on the nextTab/Shift+Tabfor a keyboard user), that can't be relied on in all circumstances.As an example, here's a video (with sound) of how this behaves in Chrome/JAWS 2021. After activating the "Expand all sections" control (which then becomes non-focusable with
disabled), note in the devtools howdocument.activeElementnow indicates that thebodyas a whole has now focus. The page title is read out again (since JAWS got confused and reset itself to the top of the page). Now, using down arrow reading key, note how it starts reading back from the very start of the page as well.https://user-images.githubusercontent.com/895831/155352595-19488fc1-41bf-4c9b-9c98-96a98004a231.mp4
The solution here (assuming the two
<button>approach is kept) is to explicitly manage thefocus()once one of those buttons is activated - the most logical would likely be to set focus to the "other" button (i.e. after activating "Expand all sections", make that buttondisabledbut movefocus()explicitly to the "Collapse all sections" button).