Use CSS to outline focused code blocks

[mkrtchian]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

When navigating with the keyboard in the documentation, the focus is going on code blocks <pre> tags because of the tabindex on it.

With this behavior we have to tab twice for each code block: once for the code block itself (which is not an interactive element as notified by eslint), and once to be on the copy button which is normal.

On firefox it's even worse because the focused <pre> tag is not outlined, so I don't see the focus when it's there.

Steps to reproduce

The behavior can be reproduced in the documentation part of the docusaurus.io website, for example in installation.

Just go there and navigate with the Tab button several times to notice that the tab is going to the code block and the copy button each time.

Expected behavior

I expect the focus not to go to the <pre> tag.

Actual behavior

The focus goes to the <pre> tag.

Your environment

No response

Reproducible demo

No response

Self-service

• I'd be willing to fix this bug myself.

[Josh-Cena]

Hi, this is intended behavior, added here: #3649

The rationale is that some code blocks are horizontally scrollable, so in order to scroll them they have to be focusable. However, I do acknowledge that the outline missing in FF is problematic. I guess we would manually add CSS to highlight the focus.

[mkrtchian]

Thank you for your answer. I didn't think about that, it's useful indeed.

Do you want me to rename this issue, or close it and open a new one for the outline issue ?

[christopherklint97]

Maybe I am misunderstanding the issue but I seem to get css on my code blocks when I use Tab. It is a white outline similar to the Copy button.

[mkrtchian]

If you are using Google Chrome you will probably never have problems seeing the focused element when navigating with the keyboard, because Chrome is adding an additional visual outline independently from the CSS outline property.

Firefox (and probably other browsers) don't do that, so here as the CSS outline is not visible when the pre tag gets the focus, on Firefox there is no visual indication.

The outline is not visible on non-Chrome browsers because:

• this outline: 0; property applies to it (which is actually enough)
• the parent div of the div containing the pre tag has the same size as the pre tag, and an overflow: hidden; property that makes anything that overflows (like an outline of a child) not visible even if it was not set to 0.

[christopherklint97]

Ah I see, thanks for the explanation! Are you currently working on this or can I start?

[mkrtchian]

You can start 😉