Issue #2333: Domain state filters - [RJM]

[rachidatecs]

Ticket

Resolves #2333

Changes

• Update checked filtered options on load (all options checked by default)
• Listen to the checkboxes, update the json var, make new call
• When filter active, toggle filter reset button
• When filter active, update filter indicator (the number of items in the result, on the filter toggle button)
• Implement reset button listener and method
• The search reset does not reset filters but does reset sort
• The filter reset does not reset search but does reset sort
• Update the no results template view to be more generic, to work for search and filters
• Close filter popup when the focus shifts away from the open filter BONUS:
• Fix tables layout in small tablet screen sizes

Context for reviewers

Designers

The biggest outstanding question was about markup and whether to focus trap or not to focus trap. I took a look at USWDS's nav dropdown implementation (not the main nav trigger, rather the dropdowns within the nav). They use a variant of the accordion component, do not focus trap, rather trigger a hide of the subnav when the focus shifts away from the open subnav/trigger. I implemented the same patterns on this ticket @gabydisarli @AnnaGingle

On keyboard navigability, the default DOM components used work as follows:

• Enter/space toggles the button to open and close the filter. Esc does nothing.

• Tab shifts between the form elements within the filter. Arrows are tied to full page scroll.

• Space selects/deselects checkboxes We did not add the new pages to pa11y. These pages are dynamic (they use a portfolio pk in the routing) and we have not established a pa11y testing setup for those yet (should be its own ticket) cc @abroddrick

• Do not forget to test tables in responsive screens, they should no longer cause the layout to break but should rather become scrollable horizontally when not stacked and not enough space in viewport. The scrollable container is also focusable to enable keyboard nav (focus then use left/right arrows to scroll)

Setup

• Make sure you check in the portfolio waffle flag if not checked.
• Add a portfolio with you as a creator, and some organization name, to load the new homepage templates

Code Review Verification Steps

As the original developer, I have

Satisfied acceptance criteria and met development standards

• [x] Met the acceptance criteria, or will meet them in a subsequent PR
• [x] Created/modified automated tests
• [x] Added at least 2 developers as PR reviewers (only 1 will need to approve)
• [x] Messaged on Slack or in standup to notify the team that a PR is ready for review
• [ ] Changes to “how we do things” are documented in READMEs and or onboarding guide
• [ ] If any model was updated to modify/add/delete columns, makemigrations was ran and the associated migrations file has been commited.

Ensured code standards are met (Original Developer)

• [x] All new functions and methods are commented using plain language
• [ ] Did dependency updates in Pipfile also get changed in requirements.txt?
• [ ] Interactions with external systems are wrapped in try/except
• [x] Error handling exists for unusual or missing values

Validated user-facing changes (if applicable)

• [ ] New pages have been added to .pa11yci file so that they will be tested with our automated accessibility testing
• [x] Checked keyboard navigability
• [x] Tested general usability, landmarks, page header structure, and links with a screen reader (such as Voiceover or ANDI)
• [x] Add at least 1 designer as PR reviewer

As a code reviewer, I have

Reviewed, tested, and left feedback about the changes

• [ ] Pulled this branch locally and tested it
• [ ] Reviewed this code and left comments
• [ ] Checked that all code is adequately covered by tests
• [ ] Made it clear which comments need to be addressed before this work is merged
• [ ] If any model was updated to modify/add/delete columns, makemigrations was ran and the associated migrations file has been commited.

Ensured code standards are met (Code reviewer)

• [ ] All new functions and methods are commented using plain language
• [ ] Interactions with external systems are wrapped in try/except
• [ ] Error handling exists for unusual or missing values
• [ ] (Rarely needed) Did dependency updates in Pipfile also get changed in requirements.txt?

Validated user-facing changes as a developer

• [ ] 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)

• [ ] Tested with multiple browsers, the suggestion is to use ones that the developer didn't (check off which ones were used)

  • [ ] Chrome
  • [ ] Microsoft Edge
  • [ ] FireFox
  • [ ] Safari

• [ ] (Rarely needed) Tested as both an analyst and applicant user

Note: Multiple code reviewers can share the checklists above, a second reviewers should not make a duplicate checklist

As a designer reviewer, I have

Verified that the changes match the design intention

• [ ] Checked that the design translated visually
• [ ] Checked behavior
• [ ] Checked different states (empty, one, some, error)
• [ ] Checked for landmarks, page heading structure, and links
• [ ] Tried to break the intended flow

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

Screenshots

[github-actions[bot]]

🥳 Successfully deployed to developer sandbox rjm.

[github-actions[bot]]

🥳 Successfully deployed to developer sandbox rjm.

[github-actions[bot]]

🥳 Successfully deployed to developer sandbox rjm.

[gabydisarli]

@rachidatecs — @AnnaGingle and I will be doing the design review.

[github-actions[bot]]

🥳 Successfully deployed to developer sandbox rjm.

[gabydisarli]

@rachidatecs I would like the filters to activate once the user starts interacting with them. Meaning the base state is that they are all unchecked. Them being unchecked is the table with no filters applied. Once the user opens, selects a filter, then the table is filtered based on what they selected, this way they don't have to uncheck all other filters in order to filter for the the status they want.

[gabydisarli]

Can we make the space between h1 and the table 16px?

[gabydisarli]

Is the space beween "Filter by" and the status dropdowns 16px?

[gabydisarli]

can we match this spacing for above and below the filter

[github-actions[bot]]

🥳 Successfully deployed to developer sandbox rjm.

[github-actions[bot]]

🥳 Successfully deployed to developer sandbox rjm.

[gabydisarli]

Some more visual tweaks:

• Add a 1px base-lighter border (DFE1E2) around dropdown menu
• Add 4px corner radius to dropdown menu
• Make padding on top, left, right 16px. Make bottom padding 24px to dropdown menu
• Make padding on left, right 12px. Make bottom padding 9px, and top padding 8 px on Status button (same with clear filters)

[gabydisarli]

Can we preserve scroll position when the filters are toggled? Every time I select a filter, the viewport pulls down towards the dropdown and it feels awkward.

[gabydisarli]

Noticing we don't have the clear selection link button below the filters. Am I forgetting that we axed that? I thought we kept it.

[gabydisarli]

When I select filters and then click Clear filters button, the carat stays in the expanded version even though the dropdown is closed. (this happens sporadically)

[rachidatecs]

Noticing we don't have the clear selection link button below the filters. Am I forgetting that we axed that? I thought we kept it.

This would be the exact same functionality as the reset button that pops up. Is it needed?

[github-actions[bot]]

🥳 Successfully deployed to developer sandbox rjm.

[rachidatecs]

When I select filters and then click Clear filters button, the carat stays in the expanded version even though the dropdown is closed. (this happens sporadically)

~Unable to recreate. If you're able to get this to happen consistently, let's get on a huddle.~

I see it. Fixing.

Can we preserve scroll position when the filters are toggled? Every time I select a filter, the viewport pulls down towards the dropdown and it feels awkward.

Yeah... Cuz we always scroll to the top of the table once the data reloads, an implementation that was a good idea for pagination. ~I'll see what I can do.~ -- Fixed

[github-actions[bot]]

🥳 Successfully deployed to developer sandbox rjm.

[github-actions[bot]]

🥳 Successfully deployed to developer sandbox rjm.

[gabydisarli]

Can we switch to allowing the dropdown to close if clicking outside of it?

[gabydisarli]

I'm still seeing a slight inconsistency between the production button and the Figma design. There is a lot of space besides the button label. See side by side.