Forced focus to example textbox on every (?) page can't be escaped?

[tshinnic]

First noticed as inability to move backwards/forwards in page history. Then realized that tab/shift-tab would not let me escape the initial example textbox. Only mouse interaction to focus outside the textbox would allow tabbing to other controls or using alt-leftarrow or alt-rightarrow to action page history.

Example page would be String.prototype.codePointAt()

• Why is there a forced focus on page load or refresh on any initial example textbox?

• Why is there no mechanism to escape once focused in the textbox?

This is beyond inconvenient but also quite against accessibility?

(this on Chrome 91, Edge 92, FF 90 and Win10)

[wbamberg]

I believe that this is intentional, to help show that the examples are editable. But it's probably not actually very effective, and I agree with you that it has ugly side effects. We should stop doing it.

@mdn/core-dev , please could you transfer this to mdn/yari?

[peterbe]

@schalkneethling I transferred this issue to here. Seems like a pretty significant bug.

[tshinnic]

What does use of this option do?

autofocus: boolean
Can be used to make CodeMirror focus itself on initialization. Defaults to off.

Apparently original code from 3+ years ago, perhaps something recently changing elsewhere has caused this effort to surface so obtrusively? Perhaps experimenting with that option commented out so that it can default to 'false' would be worth a try?

[peterbe]

@schalkneethling Can you please test to turn that to false and see how it behaves?

[peterbe]

This bug is so annoying that when you go to https://developer.mozilla.org/en-US/docs/MDN/Kitchensink it always automatically scrolls you down to this interactive example: