feat(TreeView): add support for Backspace to collapse a folder

[joshblack]

Based on feedback here, this PR adds in support for Backspace to collapse a folder.

Testing & Reviewing

You can verify that Backspace works by visiting a story for TreeView and expanding a folder. Pressing Backspace on the folder should not collapse it. If a parent item is available, focus should move to it. If the element is at the root, focus should not move.

Screen.Recording.2022-10-31.at.4.00.02.PM.mov

[changeset-bot]

🦋 Changeset detected

Latest commit: 4070655

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	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

[github-actions]

size-limit report 📦

Path	Size
dist/browser.esm.js	78.87 KB (+0.06% 🔺)
dist/browser.umd.js	79.51 KB (+0.06% 🔺)

[colebemis]

When inside of a folder, pressing Backspace on an item should noop.

I think pressing Backspace on an item should focus the parent folder. That's how I interpreted @jscholes' description here: https://github.com/github/primer/issues/1114#issuecomment-1292397344

So, in generic terms, Backspace should: move focus to the parent node of the currently focused node, without changing the expanded state of any nodes. If the currently focused node is a root node, it should do nothing, even if that root node is an expanded parent.

[jscholes]

Correct, @colebemis. @joshblack Backspace shouldn't collapse any nodes. It should move focus to the parent of the focused node, or do nothing if the focused node is a root node. But the state of nodes shouldn't change.

[joshblack]

Totally makes sense! Making those changes now 👍 Sorry about the confusion over behavior on my end.

[colebemis]

Wanted to call out this note from @jscholes:

Critical note: Backspace on Windows and Delete on macOS are not the same key, even though they occupy the same physical position on most keyboards. This functionality must only apply to Backspace, and not Delete.

In the storybook, the Delete key on my mac keyboard is triggering the backspace behavior. I'm not sure how we can programmatically differentiate Backspace on Windows and Delete on macOS. Any ideas @jscholes @joshblack?

[jscholes]

@colebemis / @joshblack Does this only apply on Mac? I.e. does ['Backspace', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Enter'].includes(event.key) resolve to true when pressing Delete specifically on Windows? If not, I think we should be fine; WebKit may just treat them as the same. Not sure what we should do down the line if we actually want to support node deletion though...

[joshblack]

@jscholes great question, I tried testing with the Delete key on Windows 10 real quick and it seems like event.key will have the value Delete and so that condition will end up being false.

As you noted, it does seem like on macOS it treats the delete key when in that classic Backspace position as Backspace in JavaScript

[jscholes]

@joshblack I think Fn+Backspace on Mac is Delete specifically. Backspace on its own is Backspace, so the current state should be good.