#3140 - Maintain focus after filter selection [-NL] #3533

CocoByte · 2025-02-17T22:31:00Z

Ticket 3140

Resolves #3140

Changes

Added javascript to detect filter clicks and preserve focus on that filter after page refresh
Added ids to filters in order to allow for focus targeting
Added a helper function for screenreader announcements

Context for reviewers

Setup

Code Review Verification Steps

As the original developer, I have

Satisfied acceptance criteria and met development standards

Met the acceptance criteria, or will meet them in a subsequent PR
Created/modified automated tests
Update documentation in READMEs and/or onboarding guide

Ensured code standards are met (Original Developer)

If any updated dependencies on Pipfile, also update dependencies in requirements.txt.
Interactions with external systems are wrapped in try/except
Error handling exists for unusual or missing values

Validated user-facing changes (if applicable)

Tag @dotgov-designers in this PR's Reviewers for design review. If code is not user-facing, delete design reviewer checklist
Verify new pages have been added to .pa11yci file so that they will be tested with our automated accessibility testing
Checked keyboard navigability
Tested general usability, landmarks, page header structure, and links with a screen reader (such as Voiceover or ANDI)

As a code reviewer, I have

Reviewed, tested, and left feedback about the changes

Pulled this branch locally and tested it
Verified code meets all checks above. Address any checks that are not satisfied
Reviewed this code and left comments. Indicate if comments must be addressed before code is merged
Checked that all code is adequately covered by tests
Verify migrations are valid and do not conflict with existing migrations

Validated user-facing changes as a developer

Note: Multiple code reviewers can share the checklists above, a second reviewer should not make a duplicate checklist. All checks should be checked before approving, even those labeled N/A.

New pages have been added to .pa11yci file so that they will be tested with our automated accessibility testing
Checked keyboard navigability
Meets all designs and user flows provided by design/product
Tested general usability, landmarks, page header structure, and links with a screen reader (such as Voiceover or ANDI)
(Rarely needed) Tested as both an analyst and applicant user

As a designer reviewer, I have

Verified that the changes match the design intention

Checked that the design translated visually
Checked behavior. Comment any found issues or broken flows.
Checked different states (empty, one, some, error)
Checked for landmarks, page heading structure, and links

Validated user-facing changes as a designer

Checked keyboard navigability
Tested general usability, landmarks, page header structure, and links with a screen reader (such as Voiceover or ANDI)
Tested with multiple browsers (check off which ones were used)
- Chrome
- Microsoft Edge
- FireFox
- Safari
(Rarely needed) Tested as both an analyst and applicant user

References

Code review best practices

Screenshots

github-actions · 2025-02-17T22:35:15Z

🥳 Successfully deployed to developer sandbox nl.

github-actions · 2025-02-17T22:40:00Z

🥳 Successfully deployed to developer sandbox nl.

github-actions · 2025-02-17T22:41:32Z

🥳 Successfully deployed to developer sandbox nl.

zandercymatics

Works great! See comments for some code changes though, but after those are in (or otherwise discussed) I'd be glad to approve

I like your approach here

src/registrar/assets/src/js/getgov-admin/domain-request-form.js

src/registrar/assets/src/js/getgov-admin/helpers-admin.js

src/registrar/templates/admin/filter.html

zandercymatics

Swapping over to approved since the requested changes are small! Just shoot me a message when your changes are in and I'll take a quick look, though hold off on merging before looking through it

Also worth noting that you have some merge conflicts

github-actions · 2025-02-28T19:47:24Z

🥳 Successfully deployed to developer sandbox nl.

github-actions · 2025-03-01T00:25:23Z

🥳 Successfully deployed to developer sandbox nl.

Co-authored-by: zandercymatics <141044360+zandercymatics@users.noreply.github.com>

github-actions · 2025-03-03T18:47:03Z

🥳 Successfully deployed to developer sandbox nl.

zandercymatics

Found a bug where generic organization is messed up style-wise, I think because its missing some data and also a bug with the tab index change where you can't tab onto the same element (as -1 blocks it)

src/registrar/assets/src/js/getgov-admin/domain-request-form.js

Co-authored-by: zandercymatics <141044360+zandercymatics@users.noreply.github.com>

github-actions · 2025-03-03T22:25:34Z

🥳 Successfully deployed to developer sandbox nl.

github-actions · 2025-03-03T23:03:31Z

🥳 Successfully deployed to developer sandbox nl.

github-actions · 2025-03-03T23:05:38Z

🥳 Successfully deployed to developer sandbox nl.

github-actions · 2025-03-04T00:54:10Z

🥳 Successfully deployed to developer sandbox nl.

github-actions · 2025-03-04T15:23:44Z

🥳 Successfully deployed to developer sandbox nl.

zandercymatics

Approving but do note that there are failing unit tests. Fix before merging! Also do double check the fix before merging!

One last issue: it seems like the menu items (status) aren't focusing! I traced this to a bug not related to your code but with the template more generally.

src/registrar/templates/django/admin/multiple_choice_list_filter.html

…er.html Co-authored-by: zandercymatics <141044360+zandercymatics@users.noreply.github.com>

github-actions · 2025-03-04T17:49:01Z

🥳 Successfully deployed to developer sandbox nl.

…nto nl/3140-maintain-filter-focus

github-actions · 2025-03-04T18:21:21Z

🥳 Successfully deployed to developer sandbox nl.

github-actions · 2025-03-04T18:24:15Z

🥳 Successfully deployed to developer sandbox nl.

CocoByte added 2 commits February 17, 2025 14:31

First draft

1b25536

Add filter IDs and target those for focus

dac0841

CocoByte added 2 commits February 17, 2025 15:35

fix typo

98f4fe7

remove experiment

bbcabbe

Fixed multi-list bug

0a0b9c0

CocoByte changed the title ~~[DRAFT] #3140 - Maintain focus after filter selection~~ #3140 - Maintain focus after filter selection Feb 23, 2025

CocoByte requested review from Matt-Spence, rachidatecs, dave-kennedy-ecs, erinysong, zandercymatics, a team, therealslimhsiehdy and allly-b February 24, 2025 22:04

SamiyahKey requested review from SamiyahKey and removed request for a team February 25, 2025 14:22

SamiyahKey approved these changes Feb 25, 2025

View reviewed changes

zandercymatics requested changes Feb 25, 2025

View reviewed changes

zandercymatics self-assigned this Feb 25, 2025

zandercymatics approved these changes Feb 27, 2025

View reviewed changes

CocoByte changed the title ~~#3140 - Maintain focus after filter selection~~ #3140 - Maintain focus after filter selection [-NL] Feb 27, 2025

resolve merge conflicts

621b291

Merge branch 'main' into nl/3140-maintain-filter-focus

0c4126f

CocoByte and others added 2 commits March 3, 2025 11:03

Merge branch 'main' into nl/3140-maintain-filter-focus

3e9ed39

Update src/registrar/templates/admin/filter.html

e506604

Co-authored-by: zandercymatics <141044360+zandercymatics@users.noreply.github.com>

cleanup

ea0e9e2

zandercymatics requested changes Mar 3, 2025

View reviewed changes

src/registrar/assets/src/js/getgov-admin/domain-request-form.js Outdated Show resolved Hide resolved

Update src/registrar/assets/src/js/getgov-admin/domain-request-form.js

f937360

Co-authored-by: zandercymatics <141044360+zandercymatics@users.noreply.github.com>

CocoByte added 2 commits March 3, 2025 15:59

fix (removed stray code - possible merge error or slip of a keystroke)

bc914c4

Merge branch 'main' into nl/3140-maintain-filter-focus

f7d82ac

CocoByte requested a review from zandercymatics March 3, 2025 23:02

Merge branch 'main' into nl/3140-maintain-filter-focus

07e8f1d

zandercymatics approved these changes Mar 4, 2025

View reviewed changes

src/registrar/templates/django/admin/multiple_choice_list_filter.html Outdated Show resolved Hide resolved

CocoByte and others added 2 commits March 4, 2025 10:44

Update src/registrar/templates/django/admin/multiple_choice_list_filt…

e8f2730

…er.html Co-authored-by: zandercymatics <141044360+zandercymatics@users.noreply.github.com>

Merge branch 'main' into nl/3140-maintain-filter-focus

90e9376

CocoByte added 4 commits March 4, 2025 11:01

Merge branch 'main' into nl/3140-maintain-filter-focus

fc7d98e

simplify multi filter

604b391

Merge remote-tracking branch 'origin/nl/3140-maintain-filter-focus' i…

4730d01

…nto nl/3140-maintain-filter-focus

unit test fixes

ea0f0ec

CocoByte merged commit a16bdc0 into main Mar 4, 2025
9 of 10 checks passed

CocoByte deleted the nl/3140-maintain-filter-focus branch March 4, 2025 18:26

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

#3140 - Maintain focus after filter selection [-NL] #3533

#3140 - Maintain focus after filter selection [-NL] #3533

CocoByte commented Feb 17, 2025 •

edited

Loading

github-actions bot commented Feb 17, 2025

github-actions bot commented Feb 17, 2025

github-actions bot commented Feb 17, 2025

zandercymatics left a comment •

edited

Loading

zandercymatics left a comment

github-actions bot commented Feb 28, 2025

github-actions bot commented Mar 1, 2025

github-actions bot commented Mar 3, 2025

zandercymatics left a comment

github-actions bot commented Mar 3, 2025

github-actions bot commented Mar 3, 2025

github-actions bot commented Mar 3, 2025

github-actions bot commented Mar 4, 2025

github-actions bot commented Mar 4, 2025

zandercymatics left a comment •

edited

Loading

github-actions bot commented Mar 4, 2025

github-actions bot commented Mar 4, 2025

github-actions bot commented Mar 4, 2025

#3140 - Maintain focus after filter selection [-NL] #3533

#3140 - Maintain focus after filter selection [-NL] #3533

Conversation

CocoByte commented Feb 17, 2025 • edited Loading

Ticket 3140

Changes

Context for reviewers

Setup

Code Review Verification Steps

As the original developer, I have

Satisfied acceptance criteria and met development standards

Ensured code standards are met (Original Developer)

Validated user-facing changes (if applicable)

As a code reviewer, I have

Reviewed, tested, and left feedback about the changes

Validated user-facing changes as a developer

As a designer reviewer, I have

Verified that the changes match the design intention

Validated user-facing changes as a designer

References

Screenshots

github-actions bot commented Feb 17, 2025

github-actions bot commented Feb 17, 2025

github-actions bot commented Feb 17, 2025

zandercymatics left a comment • edited Loading

Choose a reason for hiding this comment

zandercymatics left a comment

Choose a reason for hiding this comment

github-actions bot commented Feb 28, 2025

github-actions bot commented Mar 1, 2025

github-actions bot commented Mar 3, 2025

zandercymatics left a comment

Choose a reason for hiding this comment

github-actions bot commented Mar 3, 2025

github-actions bot commented Mar 3, 2025

github-actions bot commented Mar 3, 2025

github-actions bot commented Mar 4, 2025

github-actions bot commented Mar 4, 2025

zandercymatics left a comment • edited Loading

Choose a reason for hiding this comment

github-actions bot commented Mar 4, 2025

github-actions bot commented Mar 4, 2025

github-actions bot commented Mar 4, 2025

CocoByte commented Feb 17, 2025 •

edited

Loading

zandercymatics left a comment •

edited

Loading

zandercymatics left a comment •

edited

Loading