fix(core/form/inputs): fix issue with tabbing to popover toolbar buttons in PT-input

[skogsmaskin]

Description

There is currently an issue with reaching the annotation and inline object edit toolbar buttons with the keyboard.

This will make sure that when these toolbars shows, it will be possible to press Tab in order to get to the buttons with the keyboard.

Also added component tests for this.

What to review

That you are able to tab into the buttons when the toolbar is showing.

Notes for release

• Fixed an issue with keyboard navigation to edit buttons for annotation and inline objects in the Portable Text Input.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
performance-studio	✅ Ready (Inspect)	Visit Preview		Nov 1, 2023 9:22am
test-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 1, 2023 9:22am

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
studio-workshop	⬜️ Ignored (Inspect)	Visit Preview		Nov 1, 2023 9:22am

[github-actions]

No changes to documentation

[github-actions]

Component Testing Report Updated Nov 1, 2023 9:26 AM (UTC)

File	Status	Duration	Passed	Skipped	Failed
comments/CommentInput.spec.tsx	✅ Passed (Inspect)	26s	12	0	0
formBuilder/ArrayInput.spec.tsx	✅ Passed (Inspect)	5s	3	0	0
formBuilder/inputs/PortableText/Annotations.spec.tsx	✅ Passed (Inspect)	12s	3	0	0
formBuilder/inputs/PortableText/Decorators.spec.tsx	✅ Passed (Inspect)	11s	6	0	0
formBuilder/inputs/PortableText/FocusTracking.spec.tsx	✅ Passed (Inspect)	30s	15	0	0
formBuilder/inputs/PortableText/Input.spec.tsx	✅ Passed (Inspect)	14s	9	0	0
formBuilder/inputs/PortableText/ObjectBlock.spec.tsx	✅ Passed (Inspect)	1m 7s	21	0	0
formBuilder/inputs/PortableText/Styles.spec.tsx	✅ Passed (Inspect)	12s	6	0	0
formBuilder/inputs/PortableText/Toolbar.spec.tsx	✅ Passed (Inspect)	7s	3	0	0

[robinpyon]

Thanks @skogsmaskin, this is a huge improvement.

Just had a look and noticed a few things:

1. When pressing TAB for the first time over an annotation, it will try focus the next element briefly before then focusing buttons within the popover.

If you look at this video and pay attention to the 'No items' box, you'll see what I mean:

Screenflick.Movie.30.mp4

I'm very certain this is the case due to buttonRef.current.focus() being wrapped within a setTimeout. This does seem like a bit of a smell!

One possible alternative is that rather than focusing the button directly, we create an invisible anchor element (with tabIndex=-1), and then on TAB:

• initially focus the anchor element. Since it has tabIndex=-1, it will be ignored in sequential keyboard navigation
• the browser will then 'naturally' tab to the next button in the list

Here's an example video with that approach:

Screenflick.Movie.31.mp4

2. This popover doesn't trap focus – making it very easy to accidentally tab or shift-tab away completely out of the form. We should probably trap focus here.

3. Focus isn't restored when closing the popover – ideally, closing the popover with ESC returns you exactly where you were.

We could probably punt on 2 + 3, but should capture these if we do.

[RitaDias]

@skogsmaskin I'm assuming that this PR can be closed? 👀