#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

zandercymatics · 2025-02-25T15:22:03Z

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

+            let focusedElement = document.getElementById(lastClickedFilterId);
+            if (focusedElement) {
+                //Focus the element
+                focusedElement.setAttribute("tabindex", "-1"); 


(Q) Why is -1 added here? Isn't < a > tab-able by default?

This is just another (more enforced) way of focusing the element so that you can immediately resume tabbing from it.

zandercymatics · 2025-02-25T15:28:20Z

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

+        if (lastClickedFilterId) {
+            let focusedElement = document.getElementById(lastClickedFilterId);
+            if (focusedElement) {
+                //Focus the element
+                focusedElement.setAttribute("tabindex", "-1"); 
+                focusedElement.focus({ preventScroll: true });
+
+                // Announce focus change for screen readers
+                announceForScreenReaders("Filter refocused on " + focusedElement.textContent);
+            }
+        }


Suggested change

if (lastClickedFilterId) {

let focusedElement = document.getElementById(lastClickedFilterId);

if (focusedElement) {

//Focus the element

focusedElement.setAttribute("tabindex", "-1");

focusedElement.focus({ preventScroll: true });

// Announce focus change for screen readers

announceForScreenReaders("Filter refocused on " + focusedElement.textContent);

}

}

if (lastClickedFilterId) {

let focusedElement = document.getElementById(lastClickedFilterId);

if (focusedElement) {

//Focus the element

focusedElement.setAttribute("tabindex", "-1");

focusedElement.focus({ preventScroll: true });

// Announce focus change for screen readers

announceForScreenReaders("Filter refocused on " + focusedElement.textContent);

}

// Cleanup the filter after use

localStorage.removeItem("admin_filter_focus_id");

}

(optional) Rather than using an event listener, I think just adding a cleanup step right after use should be sufficient! This should be more performant. What are your thoughts?

zandercymatics · 2025-02-25T15:29:56Z

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

+    liveRegion.style.position = "absolute";
+    liveRegion.style.left = "-9999px";


(blocking) Can you use class="usa-sr-only" instead?

zandercymatics · 2025-02-25T16:14:08Z

src/registrar/templates/admin/filter.html

@@ -0,0 +1,12 @@
+{% load i18n %}


Suggested change

{% load i18n %}

{% comment %} Override of this file: https://github.com/django/django/blob/main/django/contrib/admin/templates/admin/filter.html {% endcomment %}

{% load i18n %}

(optional / nice to have) For tracing purposes, this would be helpful! Not needed though, just a minor time saver

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.

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

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 Feb 25, 2025 •

edited

Loading

CocoByte Feb 27, 2025

zandercymatics Feb 25, 2025 •

edited

Loading

zandercymatics Feb 25, 2025

zandercymatics Feb 25, 2025

zandercymatics left a comment

github-actions bot commented Feb 28, 2025

		liveRegion.style.position = "absolute";
		liveRegion.style.left = "-9999px";

	{% load i18n %}
	{% comment %} Override of this file: https://github.com/django/django/blob/main/django/contrib/admin/templates/admin/filter.html {% endcomment %}
	{% load i18n %}

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

Are you sure you want to change the base?

#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 Feb 25, 2025 • edited Loading

Choose a reason for hiding this comment

CocoByte Feb 27, 2025

Choose a reason for hiding this comment

zandercymatics Feb 25, 2025 • edited Loading

Choose a reason for hiding this comment

zandercymatics Feb 25, 2025

Choose a reason for hiding this comment

zandercymatics Feb 25, 2025

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

CocoByte commented Feb 17, 2025 •

edited

Loading

zandercymatics left a comment •

edited

Loading

zandercymatics Feb 25, 2025 •

edited

Loading

zandercymatics Feb 25, 2025 •

edited

Loading