Fix: Prevent unwanted navigation when opening modals
Problem
On the schedule page, modal links use the href=".schedule-dashboard__modal--location" attribute to open a specific modal. This usually works well and ensures accessibility (keyboard + screen reader support). However, in certain environments, clicking the link causes an unexpected page scroll or redirect to the anchor instead of opening the modal. This breaks application behavior.
Fix
Added the Vue .prevent
modifier to the click handler to stop the default browser behavior of following the href.
This preserves accessibility while preventing any redirect or scroll caused by the anchor in the href.
Steps to test / review
- Go to somepage with schedules
- Click on a location link (with class
.schedule-dashboard__modal--location-link
) -
The correct modal should open -
The page should not scroll or reload - Use the Tab key to navigate to the link and press Enter — modal should still open (keyboard accessible)
- Repeat the test on different browsers (especially Safari)