MDN URL
https://developer.mozilla.org/en-US/
What specific section or headline is this issue about?
No response
What information was incorrect, unhelpful, or incomplete?
When using keyboard navigation in Firefox, activating the "Skip to main content" link (by pressing Enter) correctly scrolls the viewport to the target element <div id="content" class="homepage homepage--dark">.
However, because the target element does not have a tabindex="-1" attribute, it is non-focusable. As a result, when pressing the Tab key next, the browser's focus is reset back to the top of the page (focusing on the "Skip to search" link) instead of continuing sequentially from the main content area.
What did you expect to see?
After triggering the "Skip to main content" link, the browser's focus should be moved to the main content container. When the user presses the Tab key next, the focus should move to the first interactive/focusable element within the main content area, rather than jumping back to the top of the page.
Suggested Fix by Gemini:
Adding tabindex="-1" to the <div id="content"> element will allow it to programmatically receive focus when the skip link is activated, solving this issue in Firefox.
Do you have any supporting links, references, or citations?
Yes, according to the Web.dev documentation on Focus:
https://web.dev/learn/html/focus#main-content
Interactive elements, including form controls, links, and buttons, are by default focusable and tabbable... Other elements are inert, meaning they are not interactive.
To ensure skip links work correctly across all browsers (especially Firefox), the target container needs to be made programmatically focusable using tabindex="-1".
Do you have anything more you want to share?
No response
MDN URL
https://developer.mozilla.org/en-US/
What specific section or headline is this issue about?
No response
What information was incorrect, unhelpful, or incomplete?
When using keyboard navigation in Firefox, activating the "Skip to main content" link (by pressing Enter) correctly scrolls the viewport to the target element
<div id="content" class="homepage homepage--dark">.However, because the target element does not have a
tabindex="-1"attribute, it is non-focusable. As a result, when pressing the Tab key next, the browser's focus is reset back to the top of the page (focusing on the "Skip to search" link) instead of continuing sequentially from the main content area.What did you expect to see?
After triggering the "Skip to main content" link, the browser's focus should be moved to the main content container. When the user presses the Tab key next, the focus should move to the first interactive/focusable element within the main content area, rather than jumping back to the top of the page.
Suggested Fix by Gemini:
Adding
tabindex="-1"to the<div id="content">element will allow it to programmatically receive focus when the skip link is activated, solving this issue in Firefox.Do you have any supporting links, references, or citations?
Yes, according to the Web.dev documentation on Focus:
https://web.dev/learn/html/focus#main-content
Do you have anything more you want to share?
No response