Update tabbing behaviour for Popover component

[cemms1]

What are you changing?

Updates the tab behaviour for the Popover component in source-development-kitchen so that when the popover is opened, the keyboard focus is trapped within the popover until the user takes an action to dismiss it

The popover can still be dismissed by using the escape key or by clicking the dismiss/close button

Why?

After discussing as a team, it felt more intuitive for keyboard users and those using screen readers for the focus to be trapped when opening the Popover since otherwise the focus moves to the next tabbable component on the page, which can be behind the popover in terms of z-index value. Being able to focus on elements which are not entirely visible on the screen feels like poor UX.

The guidance for this online is mixed and in general suggests that you should only trap focus for "modal" popover content and not for non-modal popovers. This is not technically a modal popover

[changeset-bot]

⚠️ No Changeset found

Latest commit: 15a2448

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.

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

[github-actions]

Tip

Once this PR is ready to go, add the run_chromatic label to run the Chromatic tests.

This saves us a lot of money by not running the tests before we need them.