Add tabindex to main element landmark

In the header of MDN Web Docs we provide context-sensitive skips links to the main content, language selector(Only on the homepage. There are two bugs here which I will log separately), and search. For non-natively focusable elements, we need to add tabindex="-1" to make them focusable.

The search link links to the search input which is natively focusable so we are all good here. When we address the link to the language selector we need to ensure it links to the select element. The main element is not natively focusable and so it needs the addition of tabindex="-1"

Why? Well,

Some browsers, such as Safari, require the link destination to either be natively focusable (such as a link, button, or form element), or have a tabindex value to function correctly. If the link is not focusable and does not have a tabindex value, the viewport will scroll down to the appropriate place, but when the user presses the tab key, the focus will jump back up to the next link after the “skip navigation” link, when it should jump to the next link after the destination.

See additional context: https://github.com/mdn/yari/issues/2755#issuecomment-770586949

[schalkneethling]

From what I can confirm: The issue happens the same on Firefox for Android with TalkBack. The quote in your first article mentions „Some browsers, such as Safari” - so it’s not limited to it.

For sure, but the solution proposed here will cover all browsers and platforms. Thank you for confirming.

[ghost]

tabindex=0 on main, that’s all.