Modal component documentation page: Unexpected autoscroll/focus

[jmuzina]

Describe the bug Opening the modal documentation page causes the "With footer" example close button to be focused.

To Reproduce

Steps to reproduce the behavior:

1. Go to modal documentation page
2. Verify that the close button of the "With footer" example has been focused and scrolled to.

Expected behavior

Page opens to the top of the documentation article.

Screenshots

If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: macOS Sonoma 14.5
• Browser: Firefox 126.0.1

Additional context

I think the problem may come from this line of code: https://github.com/canonical/vanilla-framework/blob/426d15144f7efde7c0dcf0ee52c73b26a1aacdb8/templates/docs/examples/patterns/modal/_script.js#L117-L118

[syncronize-issues-to-jira[bot]]

Thank you for reporting us your feedback!

The internal ticket has been created: https://warthogs.atlassian.net/browse/WD-13588.

This message was autogenerated

[bartaz]

Triage: indeed, I can reproduce it in Firefox. It doesn't happen in Chrome (button is focused, but not scrolled to).

This should be fixed in current codebase.

[bartaz]

For accessibility reasons modals have a code that brings focus inside them when opened. This seems to be causing issues in embedded examples.

We still what the focusing to happen when component is used. Not sure if it would be possible to not do it when example is embedded.

Other option would not to focus when opening the modal initially (when example is loaded and first rendered), but make it work normally when opened via click on a button.

[Nayab-Gauhar]

Hi! I'd like to work on this issue. The fix is straightforward - we need to prevent the initial auto-focus behavior that's causing the unwanted scroll. I'll remove the initial toggleModal(true) call that opens the modal on page load, or modify it to not focus initially. Can this issue be assigned to me?