[Site Admin]: Add NavigableRegion component

[retrofox]

Introduces a new <NavigableRegion /> component that creates accessible regions with keyboard navigation support.
This component follows Gutenberg's pattern for creating navigable sections in the admin interface, providing proper ARIA attributes and keyboard interaction capabilities.

The component is flexible, allowing different HTML elements via the as prop while maintaining consistent accessibility features across the interface.

Related to ARC-27

Proposed Changes

• [Site Admin]: Add NavigableRegion component

Why are these changes being made?

Testing Instructions

• Visual review will be enough for now. In the ARC-25 follow-up, we will put this component into practice.

Pre-merge Checklist

• Has the general commit checklist been followed? (PCYsg-hS-p2)
• Have you written new tests for your changes?
• Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
• Have you checked for TypeScript, React or other console errors?
• Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
• Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
  • For UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
• For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

[matticbot]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-140017

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-140017&env=jetpack

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-140017&env=a8c-for-agencies

[matticbot]

This PR does not affect the size of JS and CSS bundles shipped to the user's browser.

Generated by performance advisor bot at iscalypsofastyet.com.

[tyxla]

Ah, bummer we're duplicating yet another existing component. I wish we could just use the one from @wordpress/interface.

[retrofox]

AFAIK, it's a private component

[tyxla]

Yep, unfortunately. I have a special opinion about components that we need to use externally but we decided to keep private.

I'll defer to @mirka / @ciampo to make the call here.

[retrofox]

The plan is to get everything ready so we can switch to the core one as soon as it becomes public

[ciampo]

I don't see an alternative, given that the component is not exported from @wordpress/interface, unfortunately.

Although I'm slightly confused by this sentence:

The plan is to get everything ready so we can switch to the core one as soon as it becomes public

I was under the impression that the goal for the @automattic/site-admin package was "visual consistency" with Gutenberg, and that maintaining compatibility with the APIs of the original Gutenberg package (and tweaking code as little as possible) was NOT a goal, like Riad clarified in this comment.

If that's the case, switching to core as soon as it becomes public may not be possible as our version may have diverged signifcantly.

[retrofox]

I don't see an alternative, given that the component is not exported from @wordpress/interface, unfortunately.

Although I'm slightly confused by this sentence:

The plan is to get everything ready so we can switch to the core one as soon as it becomes public

I was under the impression that the goal for the @automattic/site-admin package was "visual consistency" with Gutenberg, and that maintaining compatibility with the APIs of the original Gutenberg package (and tweaking code as little as possible) was NOT a goal, like Riad clarified in this comment.

If that's the case, switching to core as soon as it becomes public may not be possible as our version may have diverged signifcantly.

Yes, that makes sense. But if, for any reason, core exposes resources that are copies of them — like the router package, for instance — we can switch to those instead.

[ciampo]

Pre-approving, given that I won't be very responsive for the rest of the week.

Feel free to merge after addressing #102361 (comment)