Focus rings for notebook code cells and text outputs are broken

[gabalafou]

Context

• Code cells that have lines that are too long to fit in the main column are horizontally scrollable (overflow-x: auto).
• For accessibility, these elements must be tab-navigable (tabindex="0") so that keyboard users can scroll the code block
• If they are focusable/tab-navigable, they must also have a focus ring for accessibility
• There are two different extensions that convert notebooks for Sphinx:
  • nbsphinx
  • MyST-NB
• Notebook cell outputs can include a wide variety of output types. This GitHub issue concerns text outputs only. One way to create a text output is with a print statement in the input cell.

Problem

• For nbsphinx-generated pages, focus rings are not visible for:
  • input code cells
  • text outputs
• For MyST-NB-generated pages, focus rings are not visible for:
  • text outputs

Steps to reproduce

1. Go to https://pydata-sphinx-theme.readthedocs.io/en/latest/examples/pydata.html#Xarray
2. Make sure your screen is less than 1100 px wide or greater than 1200.
3. Tab into the notebook code cell. You'll know that you've tabbed into it when you can use the left and right arrow keys to horizontally scroll the content.
4. Notice that there is no focus ring around the code cell.

The PST docs use nbsphinx. Here is a URL that uses MyST-NB (put window width at 1250px): https://microsoft.github.io/autogen/0.4.8/user-guide/core-user-guide/quickstart.html

At that page, the notebook input code cells should work fine, but the output cells are missing focus rings.

[trallard]

This might be the cause of the failing a11y tests in CI (I have not dug into those, but they fail on the tab stop tests)