What version of Expressive Code are you using?

0.41.6

What is your idea?

Create a new boolean prop (e.g., showLineNumbersToggle). When showLineNumbers is true and showLineNumbersToggle is true, an accessible checkbox or toggle switch with label (e.g., "Hide line numbers") is added to the code block and aria-hidden=true is removed from line numbers.

Why is this feature necessary?

0.37.1
Adds aria-hidden="true" to line numbers to prevent them from being read out loud and interrupting the flow of the code. Thank you @Yesterday17!

I spoke to my blind colleague (who is a daily screen reader user) and he shared that hiding the line numbers doesn't present an issue for him when his task is simply copying the entire code block so it can be pasted elsewhere. But, we agreed that in other use cases, hiding the line numbers would be problematic.

Consider this scenario (current state)...

Sighted colleague: What do you think about the changes I made to the code on lines 20-35 in our project documentation?

Non-sighted colleague: Sorry, I don't see any line numbers.

Sighted colleague: Huh, that's strange. I see line numbers. I guess I need to figure out another way to share the code I need you to review.

This proposed feature would give all users agency to prevent line numbers from being displayed/read out lout and interrupting the flow of the code. It also gives non-sighted screen reader users who want access to line numbers the opportunity to perceive them which is not possible today.

If consumers of this package determine their audience would benefit from this new feature, they can opt-in to displaying the "Hide line numbers" checkbox. Otherwise, the visible line numbers user experience would remain exactly as it is today.

Do you have examples of this feature in other projects?

No response

Participation

• I am willing to submit a pull request for this feature.