fix(react-nav): Inset focus outlines to fix focus borders being cut off.

[emmayjiang]

Previous Behavior

The original focus outline fix changed two things:

• Added a 2px top margin to AppItems, and added a -2px top margin to the drawer header.
• Added zIndex to NavItem focus and active states

Neither of these behaviors are ideal, unfortunately. If for example a partner wants to include more than one AppItem inside their Nav, they would have an extra 2px margin on their second AppItem. If they didn't want to include an AppItem or wanted to add it somewhere besides the top of the Nav, the first item in the Nav would be cut off.

For the added zIndex: as Mason said, we don't want to bake in z indexes to shared components because product code often has their own z indexing strategy that can clash with ours.

New Behavior

A safer approach with less potential impact to partners to fixing the issue of focus border being cut off would be to make the focus borders inset instead. This way there is lower impact to customers who want to use controls differently than the way they are set up in the storybook. We have used the inset focus outline approach in the Fluent AI CopilotNav as well as other similar controls.

Related Issue(s)

• fix(react-nav): focus borders being cut-off #34565

[github-actions]

📊 Bundle size report

✅ No changes found

[github-actions]

Pull request demo site: URL

[smhigley]

I like this approach! We've also used outlineOffset in other controls for the same reason (e.g. TableRow), so it feels like a good fit for the pattern