[Popover] Allow tabbing inside open anchored regions, support keyboard accessible navigation for popover

[adamint]

Pull Request

📖 Description

Investigating the previous fix for menu buttons, I noticed that I forgot to support tabbing inside the anchored region. Previously, the first tab inside the region would close the popover and focus the next element on the page. Changed behavior to tabbing working until tabbing the last focusable element inside the popover (which will close the popover and focus the next page element).

Additionally, as mentioned in the linked issue, popovers were not keyboard accessible. The keyboard access patterns are identical for both the popover and menubutton components, so I moved the common logic to FluentAnchoredRegion.razor.js, and updated the FluentPopover component to support its use.

🎫 Issues

Fixes #4127

👩‍💻 Reviewer Notes

You can manually test this by interacting with elements on /Popover and /MenuButton pages in the demo server. Click on the element just prior to the component you want to test, then tab.

📑 Test Plan

✅ Checklist

General

• I have added tests for my changes.
• I have tested my changes.
• I have updated the project documentation to reflect my changes.
• I have read the CONTRIBUTING documentation and followed the standards for this project.

Component-specific

• I have added a new component
• I have added Unit Tests for my new component
• I have modified an existing component
• I have validated the Unit Tests for an existing component

⏭ Next Steps