Dynamically add/remove `tabindex` based on if code snippet overflows
delucis opened this issue · comments
As reported in withastro/starlight#1411, Expressive Code (like Shiki and Shikiji) adds a tabindex="0" attribute to code blocks to allow keyboard users to navigate to them and scroll when overflowing. However, non-scrollable <pre> elements should not be focusable, which would require dynamically adding/removing tabindex client-side when they change size. Given Expressive Code is already adding some small amount of JS to pages for the copy button, it might be in a good position to fix this.
Some context:
- Firefox already automatically handles making scrollable elements focusable with or without
tabindex="0". - Chrome also intends to do that, but has kept delaying (see https://chromestatus.com/feature/5231964663578624).
- Once Chrome ships that feature, it might arguably be best to remove
tabindex="0"entirely, so any JS fix would be considered temporary. - Mastodon thread where I asked about this
- “Keyboard-Only Scrolling Areas” by Adrian Roselli
Thank you for this well-researched issue! I'm absolutely in favor of implementing the suggested solution to bridge the remaining time until this works natively in Chrome as well.
As I know that one of our community members has expressed interest in providing a small native JS-based solution and I love contributions, I'll wait for the contribution and then integrate it in EC. :)
I just released the fix in version 0.34.1. Thanks again for reporting!
Ooh, very cool! Thank you @hippotastic 💖