Move from jQuery.click

[rfultz]

Summary

• Resolves # (if we set this to 6410, will this one PR close that whole ticket? It'll have other PRs, too.)

Resolving the jQuery deprecations has been a burden so let's break #6411 into much smaller pieces

Required reviewers

• front-end for code
• anyone for functionality

Impacted areas of the application

General components of the application that this PR will affect:

click() and .click(𝑓) on/in

• 404 page
• 500 page
• Audit tags
• Dropdown filters
• Tags for checkbox and radio filters

Screenshots

No changes

Related PRs

Related PRs against other branches:

PR	Branch	Deprecated features
#6750‡	feature/jquery-deprecation-click	.click
#6751	feature/jquery-deprecation-change	.change
#6753	feature/jquery-migrations-focus-blur	.focus, .blur
#6752	feature/jquery-deprecations	.bind, :first, .hover, .keyCode, :last, .submit, .trim

‡you are here

How to test

• Pull the branch
• npm i
• npm run test-single should be clear
• npm run build
• ./manage.py runserver
• For this PR we're checking the click actions and handlers:
  • 404 page: feedback box link handler should open the feedback box
  • 500 page: feedback box link handler should open the feedback box
  • Calendar
    • Also checked by tests
    • Grid view:
      • Switch to a month with a day with enough events to get a '+ ? More' link (e.g. 26 & 27 March 2025)
      • Tab to that 'more' link
      • Press the Return/Enter key on your keyboard
      • The event pop-up should open
      • Press the Tab key on your keyboard to get to the X/close button
      • Press the Return/Enter key on your keyboard
      • The event pop-up should close
      • Tabbing to individual events, return/enter should open the pop-up KNOWN ISSUE: doesn't work here or on Production
  • Audit search
    • Apply a primary filter (those under 'Findings and issue categories')
    • Click the X to remove that new tag
    • The tag should go away
  • Dropdowns (Individual Contributions with two states pre-selected)
    • I'm not sure how to test this. The code (line ~150) only wants to trigger a click if the button doesn't have .is-checked and initially clicking/checking items isn't calling that function at all (i.e. clicking a new item works fine but handleDropdownItemClick() isn't called
  • FilterSet
    • Stay on Individual Contributions
    • Remove one of the states tag (click an X next to the state name in the tag at the top)
    • That state should disappear from the filter in the left column
• Celebrate!

[johnnyporkchops]

Everything works as expected

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 79.79%. Comparing base (7860ec0) to head (fc00ed5).
Report is 5 commits behind head on develop.

Additional details and impacted files

@@           Coverage Diff            @@
##           develop    #6750   +/-   ##
========================================
  Coverage    79.79%   79.79%           
========================================
  Files          238      238           
  Lines         5247     5247           
========================================
  Hits          4187     4187           
  Misses        1060     1060           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.