[docs] Code snippets are not accessible

[Studio384]

Docs feedback

How can we improve Base UI documentation?

There are various issues with the code examples.

• The scrollbar doesn't appear on mouse hover, instead you must scroll before the scrollbar becomes visible. Scrolling is only possible by selecting text and dragging the cursor left and right, middle clicking the scroll wheel or - if the mouse supports it - pushing the scroll wheel left and right. There is seemingly no keyboard navigation.
• When visible, the scroll bar is imo too easily dismissed by accidentally clicking just slightly above the bar, but being able to interact with the bar requires to be relatively fast so the scroll bar doesn't hide again.
• On large code examples that require scrolling, this experience is just incredibly bad. Mayhaps the maximum height of the code examples should be limited.

This scrollbar seems to be based on the ScrollArea component, whose example does show the scroll bar on hovering over the area. It would be great if that behavior is used in the code blocks as well. Or better yet; just use the native scroll bars.

• Selecting code but leaving the code block with the cursor will result in the selection being dismissed. This only happens in the collapsible code blocks.

Recording.2024-12-19.161158.mp4

• Selecting code and going with the cursor outside the codeblock results in unexpected behavior where the selection seems to flip. This makes that some extra precision is required, because moving back into the codeblock won't restore the previous selection. This also only happens with the collapsible code blocks. This bug does not appear on Firefox.

Recording.2024-12-19.161522.mp4

Furthermore, moving even further out away from the block removes the selection entirely from the code and instead only selects the contents above it instead.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@Studio384 How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.