fix: tab key in code block

[luka-nextcloud]

📝 Summary

• Resolves: can not using tab in code block #4398

🖼️ Screenshots

🏚️ Before	🏡 After
B	A

🚧 TODO

• ...

🏁 Checklist

• Code is properly formatted (npm run lint / npm run stylelint / composer run cs:check)
• Sign-off message is added to all commits
• Tests (unit, integration and/or end-to-end) passing and the changes are covered with tests
• Documentation (README or documentation) has been updated or is not required

[cypress]

1 flaky tests on run #11449 ↗︎

0

149

2

0

1

Details:

fix: tab key in code block
Project: Text	Commit: 5f28509094
Status: Passed	Duration: 03:51 💡
Started: Aug 1, 2023 10:01 AM	Ended: Aug 1, 2023 10:05 AM

  cypress/e2e/sync.spec.js • 1 flaky test

View Output Video

Test		Artifacts
Sync > passes the doc content from one session to the next		Output Screenshots

_{This comment has been generated by cypress-bot as a result of this project's GitHub integration settings.}

[mejo-]

I wonder whether we want to do this a11y wise. It will break navigating with Tab if the focus jumps into a code block. CodeMirror has implemented an "escape hatch" for that reason: See https://codemirror.net/examples/tab/

[mejo-]

@juliushaertl had the idea to add an aria-label attribute to code blocks to make it visible to screen readers that you're inside a code block.

Given that it's very unlikely to end up in a code block by tabbing through the app and that you still can move out of the code block via arrow keys, please disregard my a11y doubts ☺️

[juliushaertl]

@Pytal @susnux Since you work more on accessibility topics, do you have any hint how how this could be addressed best?

TL;DR: Tab key in a code block should indent but then the tab key can no longer be used to move to the next focus element, arrow keys would work to move out.

[Pytal]

As WCAG states "... if it requires more than unmodified arrow or tab keys or other standard exit methods, the user is advised of the method for moving focus away." (https://www.w3.org/WAI/WCAG21/Understanding/no-keyboard-trap.html) this technically meets requirements

But it would be ideal to add an aria-describedby on the code block pointing it to a description informing the user that the arrow keys can be used to move focus out of the code block, any additional recommendations @michaelnissenbaum?

[max-nextcloud]

Code changes look good to me. Did not test it though.
Maybe accessibility hint could be moved to a separate issue.

[juliushaertl]

Yes, we can also keep that separate and follow up. Another option might be to just disable the Tab behavior override depending on the user setting for disabling keyboard shortcuts.

[mejo-]

/compile

[mejo-]

/backport f1ed024 to stable27

[mejo-]

/backport f1ed024 to stable26