Work around roving tabindex: make Retry focusable in loading_failure_story

[llastflowers]

What are you trying to accomplish?

Make the "Retry" button in the TreeView: Loading failure story accessible via keyboard navigation

Integration

N/A (preview-only)

List the issues that this change affects.

Relates to https://github.com/github/accessibility-audits/issues/14759

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?

Workaround to make the "Retry" button in the TreeView: Loading failure story accessible via keyboard navigation. Needed to escape default tabindex behavior to accomplish this (preview-only). I don't think a component change is needed since this nested button most likely isn't a pattern that is actually used in TreeView, and changing the main component could cause other unwanted side-effects. Reviewers, please lmk if you feel otherwise!

Anything you want to highlight for special attention from reviewers?

Let me know if overriding this specific behavior in only this story doesn't seem like the right approach for any reason!

Accessibility

This addresses a SEV1 a11y bug where the button in this story was not keyboard-accessible.

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]

🦋 Changeset detected

Latest commit: 8fe701b

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/view-components	Patch

Not sure what this means? Click here to learn what changesets are.

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

[Copilot]

Pull request overview

This pull request addresses a keyboard accessibility issue where the "Retry" button in the TreeView loading failure story was not reachable via keyboard navigation due to the roving tabindex pattern. The fix adds JavaScript to remove the tabindex="-1" attribute and implements custom keyboard navigation logic.

Key Changes:

• Added helper functions to locate and make the Retry button keyboard-accessible
• Implemented event listeners to handle dynamic content updates
• Added keyboard navigation logic to redirect Tab focus to the Retry button

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[TylerJDev]

I noticed that once you click "retry" focus is lost again and you're not able to focus onto the tree item, nor are you able to focus back on the "retry" button. When the "retry" button is triggered, could we programmatically set focus back onto the tree item?

[llastflowers]

I noticed that once you click "retry" focus is lost again and you're not able to focus onto the tree item, nor are you able to focus back on the "retry" button. When the "retry" button is triggered, could we programmatically set focus back onto the tree item?

@TylerJDev Thanks for catching this! I'll take a look! 🫡

[jonrohan]

Seems good to me 👍🏻