Feature: Move focus when handling same-page links

[daun]

Describe the problem 🧐

Both swup and the scroll plugin don't explicitly move focus when a same-page anchor is clicked. Focus remains on the clicked link, which is not great for keyboard and screen reader users.

We've briefly discussed the topic on an issue about the :target pseudo-lement but I never followed up on checking our implementation.

Describe the propsed solution 😎

Move the focus navigation starting point to the targeted anchor. Browsers these days don't directly focus the target element but merely move the focus starting point so the next tab press will find the closest interactive element to focus. Technically, the document's active element will be body – the browser merely bookmarks a position for restarting focus navigation.

Some research or prior discussions:

• HTML spec: sequential focus navigation
• Working Group discussion: Programmatically setting focus navigation start point?
• Explanation on what the focus navigation starting point is
• Chrome updates on automatic management of the focus starting point

There's currently no way of manually setting the focus starting point without also focussing the element itself. There's a few workarounds, though, like the one below from a whatwg discussion on the topic. Given the amount of new code required for a "clean" implementation, I'd rather have this in the accessibility plugin than the core.

function setFocusStartPoint(element) {
  const tabindex = element.getAttribute('tabindex');

  element.setAttribute('tabindex', '-1');
  element.focus();
  element.blur();

  if (tabindex) {
    element.setAttribute('tabindex', tabindex);
  } else {
    element.removeAttribute('tabindex');
  }
}

Alternatives considered 🤔

We could get away with just calling .focus() from the core, but that tends to come with styling issues.

How important is this feature to you? 🧭

Would make my life a lot easier

Checked all these? 📚

• I have read and searched the official docs
• I have checked discussions and existing issues for related problems
• I agree to follow this project's Code of Conduct
• I have provided all necessary information to the best of my knowledge