Accessible Navigation is Captured by Element

[SybelBlue]

Tabbing through a webpage with a screen reader is blocked by the element, because after a line gains focus the tab key reindents, it does not advance.

Using Enter to advance between blanks loops silently.

[SybelBlue]

Proposal: float only the pl-faded-parsons div to screen-readers by default. On Enter, make all the codelines visible, and hide the div. Then on Esc, revert. This way the codelines can have Tab to indent by default for mouse users that can focus on them directly, and screen readers will not be captured by tabbing/returns.

Potential Issues:

• Automatic compliance checkers will likely flag the interactive but hidden-by-default codelines as a violation
• Adds an extra step for users of screen readers to read the contents of the problem (consider adding an aria-descrbedby to give a detailed explanation without entering the div manually)