canonical / canonical/vanilla-framework

Modal component documentation page: Unexpected autoscroll/focus

Open
#5,119 4 comments 0 reactions 0 assignees View on GitHub
Bug 🐛 Good first issue 🔰 Guest dev 🤝 P3 Triaged Triaged: v4
Dominant language
HTML
Stars
984
Forks
216
Avg merge
3d 13h
Merged PRs (30d)
3

Description

**Describe the bug**
Opening the [modal documentation page](https://vanillaframework.io/docs/patterns/modal) causes the "With footer" example close button to be focused.

**To Reproduce**

Steps to reproduce the behavior:

1. Go to [modal documentation page](https://vanillaframework.io/docs/patterns/modal)
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

Contributor guide

Open the contributing guide

Research direction

Start with templates/docs/examples/patterns/modal/_script.js at the referenced lines, then open the modal documentation page in Firefox and reproduce the focus and scroll behavior. Done means the page opens at the top without focusing or scrolling to the “With footer” example’s close button.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.