fix(menu): preserve scroll position when focusing on open

[averyjohnston]

Pull request checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been reviewed and added / updated if needed (for bug fixes / features)
• Build (npm run build) was run locally and any changes were pushed
• Lint (npm run lint) has passed locally and any fixes were made for failures

Pull request type

Please check the type of change your PR introduces:

• Bugfix
• Feature
• Code style update (formatting, renaming)
• Refactoring (no functional changes, no api changes)
• Build related changes
• Documentation content changes
• Other (please describe):

What is the current behavior?

When an ion-menu is opened, the first (focusable) element inside it is auto-focused for screen readers. This causes the menu's scroll position to jump to the focused element, and only once the opening animation has finished, leading to a jarring experience.

Issue URL: Resolves #24634

What is the new behavior?

When opening the menu, the host element is focused instead of the first element. This allows focus trapping without affecting the scroll position.

Does this introduce a breaking change?

• Yes
• No

Other information

An alternative would be to use the preventScroll option in focusFirstDescendant:

element.focus({ preventScroll: true });

However, this isn't currently supported in Safari: https://caniuse.com/mdn-api_htmlelement_focus_options_preventscroll_parameter

Side note: I elected to write the test in Puppeteer for the sake of time, rather than migrating to Playwright.

[liamdebeasi]

Great job!