Move from jQuery .focus, .blur

[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:

focus() and .blur() on/in

• Calendar
• Contact form
• Download
• Dropdowns
• Date filters
• Filter panel
• Reporting dates table
• Search
• SkipNav
• Tables
• Text filter
• Typeahead filter

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 the blur triggers:
  • Load the RAD Contact form
  • The focus isn't on the "Your position or title (optional)" text
• For the focus triggers:
  • Calendar
    • Switch to grid view
    • Click an event
    • Click the X/close
    • Press the tab key
    • Focus shifted to the next(ish) event, rather than someplace outside of the calendar grid
    • Click another event to open its popup (leave it open)
    • Click the next/prev month buttons
    • The open popup closed
  • Downloads
    • Will need to test on not-localhost
    • Go to a datatables page (National party works)
    • Click the Export button
    • Focus shifted to the new Download button in the downloads panel
  • Dropdowns (not the native <select> elements
    • Load a page with dropdown filters (National party works)
    • Change the Report time period filter
    • When selecting the first option, the next is focused
    • When selecting the last option, the previous is focused
    • When all options have been selected, focus moves to the last checkbox for that filter
  • Date filter
    • Go to a page with date filters with the grid (PAC and party committee reports works)
    • Expand the Date filter panel
    • Click into the Beginning field for Transaction time period
    • Click a date from the grid
    • Focused moved to the Ending field
  • Filter panel
    • Go to any datatables page with the left-side filters panel (all of them?)
    • Click into the first field or so
    • Click the < at the top to close that filter panel
    • The tab key tabbed to the table right away, rather than tabbing through the fields in the collapsed filter panel
    • Open the filter panel again
    • The tab key (within 1-2 presses) is back to tabbing through the filter panel elements
  • Typeahead filter
    • Go to any page with a Typeahead filter (Any candidate or committee name?)
    • In a Typeahead filter, start typing to find a candidate, committee, etc
    • Choose one
    • The focus went to that Typeahead filter's 🔍 button
  • Text filter
    • Go to any datatables page with text field filters (Receipts has city name)
      • Type a value into the text field
      • do not tab or click out of it
      • Press Enter
      • The focus moved to that field's ▶︎ button
  • Search
    • ISSUE: I can't find where to test the focus for inside search.js. Are we still using .js-search anywhere? (Move from jQuery .bind, :first, .hover, .keyCode, :last, .submit, .trim #6752 had the same issue)
  • SkipNav
    • Load any page
    • Press the tab key
    • The skip nav element should appear at the top left of the screen and it should be focused
  • Tables
    • Load any page with a details panel (Receipts does)
    • Click one of the ➲ to open the details side panel
    • Pressing enter closes the panel
    • Pressing enter again re-opens the same panel
    • (repeat)
  • Reporting Dates Table
    • Go to a Reporting dates table
    • Shrink your browser width so it's more like phone size
    • Click any of the * in the "State & type of election" column, or any of the footnote numbers in "Election date" column
    • That should open a kind of sub row for that entry
    • The Enter key closes that content
• Celebrate!

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 79.83%. Comparing base (cfb73e9) to head (0edfea0).
⚠️ Report is 107 commits behind head on develop.

Additional details and impacted files

@@           Coverage Diff            @@
##           develop    #6753   +/-   ##
========================================
  Coverage    79.83%   79.83%           
========================================
  Files          237      237           
  Lines         5218     5218           
========================================
  Hits          4166     4166           
  Misses        1052     1052           

☔ 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.

[patphongs]

Changes look clean and works well, I couldn't break it, well done!