Skip to content
Snippets Groups Projects

Fix: Prevent unwanted navigation when opening modals

Merged Lera Shuklina requested to merge ITCP-312 into main

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

  1. Go to somepage with schedules
  2. Click on a location link (with class .schedule-dashboard__modal--location-link)
  3. :white_check_mark: The correct modal should open
  4. :x: The page should not scroll or reload
  5. Use the Tab key to navigate to the link and press Enter — modal should still open (keyboard accessible)
  6. Repeat the test on different browsers (especially Safari) Selection_1321

Merge request reports

Approval is optional

Merged by Andrii PodanenkoAndrii Podanenko 1 month ago (May 22, 2025 10:16am UTC)

Merge details

  • Changes merged into main with ca678d3b (commits were squashed).
  • Deleted the source branch.

Activity

Filter activity
  • Approvals
  • Assignees & reviewers
  • Comments (from bots)
  • Comments (from users)
  • Commits & branches
  • Edits
  • Labels
  • Lock status
  • Mentions
  • Merge request status
  • Tracking
Please register or sign in to reply
Loading