A11y: Refactor filter multiselect with inline pills (neighborhood/community org/zone) to fix keyboard navigation & other issues

[bacitracin]

Describe the task

NOTE: This one is tricky to fix! Also, there are 2 related tickets

• https://github.com/CodeForPhilly/clean-and-green-philly/issues/651
• https://github.com/CodeForPhilly/clean-and-green-philly/issues/653

Right now the 3 filter dropdowns (Neighborhood, Community Organizations, Zoning Behavior) have incorrect keyboard navigation behavior.

These components most closely model the "multiselect with inline buttons" pattern here. -> https://codepen.io/smhigley/pen/GRgjRVN

The ideal and suggested fix (for all the related tickets) is pulling the selected neighborhood/community org pills out of the UX as a separate component, and not have the pills inline in the select dropdown (See Marvie's comment below).

If we don't do that, we can try to fix the current inline dropdown. The desired behavior is listed below.

Acceptance Criteria

• [ ] Open the Find Properties page
• [ ] Open the Filter sidepanel by pressing the "Filter" button

TAB bug

• [ ] TAB to a filter dropdown
• [ ] Open the dropdown by pressing either ENTER/SPACE/UP arrow or DOWN arrow
• [ ] Use the arrow to move up and down the options
• [ ] Press ENTER to select
• [ ] Press TAB. The dropdown SHOULD close, and focus stays on the dropdown. Instead the dropdown stays open and the focus moves to the individual pills.

ESC bug

• [ ] TAB to a filter dropdown
• [ ] Open the dropdown by pressing either ENTER/SPACE/UP arrow or DOWN arrow
• [ ] Use the arrow to move up and down the options
• [ ] Press ENTER to select
• [ ] Press ESC. The dropdown SHOULD close, and the item remains selected. See "multiselect with inline buttons" example listed above. INSTEAD all selected items are being removed. See this ticket for more info (closed as a dupe since this ticket should cover it)

Additional context

https://www.24a11y.com/2019/select-your-poison-part-2/#:~:text=Multi-select%20Variant

[marvieqa]

Note: Related to #651 . We might be better off separating the pills from the listbox popup for better UX, so that it is easier to understand for all cognitive levels. When there are in-line pills, it's hard to tell how to re-open the list box.

[nlebovits]

@bacitracin can we possibly re-write this as two smaller tickets?

[bacitracin]

@nlebovits Ideally it would just be one big refactor because it's all interconnected but I'll see if I can rewrite this ticket as 3 tickets. 1) change the dropdown multiselect to instead be a list of selected pills + a regular select dropdown and 2) fix pills accessibility 3) fix dropdown accessibility. Moving this & the related ticket back to backlog while I rewrite

[github-actions[bot]]

This issue has been marked as stale because it has been open for 30 days with no activity.

[github-actions[bot]]

This issue has been marked as stale because it has been open for 30 days with no activity.