MDN Docs with interactive examples auto-focus on example code, breaking keyboard navigation

[sushant-j]

Description:
When referring MDN docs with new, interactive examples, keyboard focus is automatically switched to the example code. This makes navigating with keyboard shortcuts impossible.

Steps to reproduce:

1. Search for any CSS property which has an interactive example on MDN docs.
   [E.g. background-size, transform, etc.]
2. Press enter to open the docs in right, preview pane for Devdocs.
3. Observe that keyboard focus is now on interactive example code, and navigation in left pane is not possible.

Environment

• OS: Linux Ubuntu 16.04.4
• Browser: Chrome - Version 65.0.3325.146 (64-bit)

[jmerle]

Fixed in mdn/interactive-examples#1158. This can be closed.

[jmerle]

I don't think the MDN docs need an update to fix this issue. DevDocs shows the interactive examples inside iframes, so DevDocs automatically uses the latest version of the source of the interactive examples, which now comes without the auto-focus thing.

I can't really explain it, but just try to reproduce the issue and you'll see that it's gone.

[j-f1]

Thanks for clarifying @jmerle!

[vaaski]

this issue seems to be back, it autofocuses the code block on this page, breaking keyboard navigation.

not sure if it's related to the same mdn thread so i'm pining here.