Specify tabindex for the #__next div to make NextJS apps accesible

[surdu]

Describe the feature you'd like to request

In order to have accessible pages generated by NextJS, the div#__next appears to need a tabindex to be added to it:

But, as far as I can tell, there is no way to add custom props to this div.

Describe the solution you'd like

There should be an option to be able to customize the #next div element.

An easy alternative would be for NextJS to add tabindex="0" by default.

Describe alternatives you've considered

It might be an option to add the attribute with JS, but I don't know how screen readers will handle this.

[HaNdTriX]

Afaik: When it comes to the HTML Specification the default value for tabindex is 0. Setting it to zero should not make a difference. More info:

The maximum value for tabindex is 32767. If not specified, it takes the default value 0.

source

[jakejarvis]

Clickable elements must be focusable and should have interactive semantics.

[balazsorban44]

#__next is not an interactive element, I wonder why Firefox reports it as such. 🤔 I cannot reproduce it in either the Chrome Dev Tools > Accessibility tab or using an online A11y checker tool like https://wave.webaim.org/ (I was checking vercel.com)

[bbemis017]

Hi all, I ran into this issue today and have been reading a bit about it so I thought I should share.

Firefox is reporting the #__next element as interactive because it has a onClick handler. Even though realistically a user should never click the #__next element it has a handler because the element is a React Root! In React the root element always has a onClick handler for event delegation purposes.

There is a similar ticket on the react.js repo facebook/react#20895 that is very interesting and has a lot more context about this issue. Ultimately, the recommendation that I got from there is that when you add a react root you should specify the role="presentation". This tells the browser to keep the content but hide the clickable element from the accessibility tree so that screen readers do not tell users that it's a clickable element.

Additionally, I noticed while I was testing my application that next.js seems to add mulitple React Roots to the page so I see this issue twice on the same page:

• Once for the __next element
• Once for the next-route-announcer