fix(anchor-menu): keep sticky menu keyboard-reachable at 200% zoom

[juanmitriatti]

Description

At 200% desktop zoom, the anchor menu became unreachable by keyboard — tabbing skipped it entirely (accessibility audit, UDS-1638 / UDS-2160).

Root cause: the sticky behavior moved the menu node into the global header (appendChild). Tab order follows DOM order, so the menu's controls jumped to a point earlier in the document than the user's current focus, and forward Tab never landed on them.

Fix: pin the menu with CSS (position: fixed; top: var(--uds-anchor-menu-top)) instead of relocating the node, with attach/detach driven by a scroll threshold. This matches how the unity-react-core AnchorMenu already positions itself. Fixes WCAG 2.1.1 (Keyboard) and 2.4.3 (Focus Order).

Testing Steps

1. Open Atoms → Anchor Menu in the unity-bootstrap-theme Storybook.
2. Set browser zoom to 200% (or narrow the window below ~640px) — the menu collapses to the "On This Page:" bar.
3. Scroll down so the menu sticks below the header, then Tab from the top of the page. Expected: focus reaches the "On This Page:" toggle and its links. Before this change, Tab skipped the menu.
4. Regression check at normal zoom: expanded menu still sticks, links reachable, click-to-scroll and active-link highlighting work, menu detaches when scrolling back to top.

Checklist

• Tests pass for relevant code changes

Links

• JIRA ticket
• Unity reference site
• UDS Guidelines

[asu-jenkins-devops]

Storybook deployed at https://unity-uds-staging.s3.us-west-2.amazonaws.com/pr-1713/index.html

[mlsamuelson]

AI generated descriptions can be a bit wordy and add more time to read to review. Perhaps they can be made more brief?

Ran into an issue testing this - both the current live Bootstrap version of the anchor menu and the one displayed here don't provide the chevron for the dropdown, so I'm unable to verify: https://unity-uds-staging.s3.us-west-2.amazonaws.com/pr-1713/@asu/unity-react-core/index.html?path=/story/components-anchormenu--default

[juanmitriatti]

AI generated descriptions can be a bit wordy and add more time to read to review. Perhaps they can be made more brief?

Ran into an issue testing this - both the current live Bootstrap version of the anchor menu and the one displayed here don't provide the chevron for the dropdown, so I'm unable to verify: https://unity-uds-staging.s3.us-west-2.amazonaws.com/pr-1713/@asu/unity-react-core/index.html?path=/story/components-anchormenu--default

@mlsamuelson you're right about description I just adjusted it.

Note on the earlier test: the story linked in the review is the unity-react-core AnchorMenu, this PR only changes the unity-bootstrap-theme version, so that story wouldn't show the fix. The right one is below.

Story: anchor-menu

QA steps (I just ran these against the staging build )

1. Open the story above.
2. Set browser zoom to 200% on desktop, or narrow the window to ~640px the menu collapses to the "On This Page:" bar. (No chevron will show next to it ,Font Awesome isn't bundled with Unity per the Get Started docs, which is why it's also missing on the live Storybook. Pre-existing and unrelated to this change. @davidornelas11 please confirm if Im wrong.)
3. Scroll down until the menu sticks below the header.
4. Click into the top of the page and Tab forward. Expected: focus lands on the "On This Page:" toggle; Enter opens it; further Tabs reach the five anchor links (First item → Fifth item). Before this fix, Tab skipped the menu entirely.
5. Regression check at normal zoom/full width: the expanded menu still sticks below the header, links scroll-to-section and highlight, and the menu detaches when you scroll back to the top.