Update Markdown preview examples to include tabindex

[khiga8]

What are you trying to accomplish?

• Updates Markdown preview examples to include tabindex to ensure horizontal overflow region can be scrolled with keyboard.
• Adds a note that this component is purely presentational.

List the issues that this change affects.

Relates to:

• https://github.com/github/accessibility-audits/issues/10053
• https://github.com/github/accessibility-audits/issues/10132

Risk Assessment

• Low risk the change is small, highly observable, and easily rolled back.
• Medium risk changes that are isolated, reduced in scope or could impact few users. The change will not impact library availability.
• High risk changes are those that could impact customers and SLOs, low or no test coverage, low observability, or slow to rollback.

What approach did you choose and why?

Given this component is purely presentational, I hesitate to add JS behaviors to it since it's already used in places that might already be providing JS behaviors. I opted to add a warning to have the consumer handle adding JS behaviors. For example, dotcom has a JS script to handle overflowing tables. (Note: we are still not handling overflow code blocks and I've started a convo with the relevant team. See this discussion thread).

Anything you want to highlight for special attention from reviewers?

Does this approach sound reasonable?

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Lookbook)
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

[changeset-bot]

⚠️ No Changeset found

Latest commit: dcaba31

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[TylerJDev]

LGTM, with non-blocking comment.

Also thank you for starting that discussion. It would be great if we could also improve the code blocks!

[TylerJDev]

I noticed that this table and the second one are smaller than the last table. Do we still need tabindex on them? Wasn't sure if the scrollbar still appears 🤔