Make resizable SplitPageLayout.Pane keyboard accessible.

[radglob]

Added a tabIndex prop and onKeyDown event handler to PageLayout.Pane (which SplitPageLayout.Pane uses) to allow keyboard controls to change the pane's size. Only handles ArrowRight and ArrowLeft keys.

Also added a text input that is only visible to screen readers that allows users to change the width of the pane from the minimum percentage to the maximum percentage it can take up within its parent. This is still visible to a screen reader even on narrow views where the pane width is not resizable.

Closes#2522

Screenshots

Please provide before/after screenshots for any visual changes

Merge checklist

• Added/updated tests
• Added/updated documentation
• 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: b387475

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

This PR includes changesets to release 1 package

Name	Type
@primer/react	Minor

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

[github-actions]

size-limit report 📦

Path	Size
dist/browser.esm.js	84.53 KB (+0.52% 🔺)
dist/browser.umd.js	85.17 KB (+0.51% 🔺)

[colebemis]

This looks like a great start! Tagging @ericwbailey for accessibility guidance on how this interaction should work.

[ericwbailey]

Hey @radglob, it's looking like the resize control isn't announced or operable via assistive technology (tested with VoiceOver and NVDA).

Unfortunately, only a tabindex declaration on a div is not sufficient. The resizing control needs to have an accessible name and role for it to be understood, or be controlled via visually hidden (sr-only) controls that have an accessible name and role.

For example, we could tie the divider to something like a range input, which would provide an accessible name, role, and preset range of values a user could control:

<divclass="sr-only"><labelfor="uuid-panel-widths">
Panel widths
</label><inputid="uuid-panel-widths" name="range" min="0" max="100" value="50" step="10"
type="range" />

A value of 50 here would set it at 50% width distribution, and step="10" lessens the amount of keypresses a user would need to make to adjust things in either direction.

We might also want to get more explicit, to both clarify what is getting resized and lessen the amount of interaction needed:

<divclass="sr-only"><labelfor="uuid-width-pane">
Pane width
</label><inputid="uuid-width-pane" name="telephone" autocorrect="off" autocomplete="none" type="tel"
value="50"><labelfor="uuid-width-content">
Content width
</label><inputid="uuid-width-content" name="telephone" autocorrect="off" autocomplete="none" type="tel"
value="50"></div>

For this setup, we'd have some JS to calculate 100 minus the last submitted value and apply the result to the input not modified. So, setting the content's width to 80 would automatically set the panel's width to 20.

I think it would also be helpful to have more descriptive names than "panel" and "content", whose jargon might not be apparent to the end user. Ideally we'd describe resizing the width of what each pane contains.

[ericwbailey]

Unsure if you've seen it or not, but I have some additional context in this comment.

[radglob]

Unsure if you've seen it or not, but I have some additional context in this comment.

Thanks Eric, looking over all of this today!

[ericwbailey]

@radglob One little tweak and I think we're good to merge.

Apologies that it took some time to get back to you. The path we're going to take is to ship incrementally, with the larger issue of content on focus in Primer being brought up in primer/design#338.

[ericwbailey]

🙌

[colebemis]

Excellent work on this @radglob@ericwbailey! ✨