Group filter: build the selected filters feature

[fionamorrison23]

User story

As an anonymous user
I want to see a visual representation of my selected filters as chips
So that I can easily review, modify, or remove filters without searching through the filter options

Description

The group filter never had the exposed filter feature built. We want to build this so we can add it to the existing group filter and so it can be sed in the new vertical group filter configuration.

Design

https://www.figma.com/design/7vl6Aobg7G8gBCcRriNegr/CivicTheme%3A-Design-System-v1.10-(WIP)?node-id=2976-41567&p=f&t=nVFomovgEBmlY8uJ-0

Acceptance criteria

AC 1: Show selected filters as chips
Given I'm an anonymous user
When I select a filter option
Then a chip representing the selected filter should appear
And the chip should display the filter label clearly

AC 2: Update chips dynamically when filters change
Given I'm an anonymous user
And I have selected one or more filters
When I then deselect a filter
Then the corresponding chip should be removed
And when I select additional filters, new chips should appear

AC 3: Remove filters using chips
Given I'm an anonymous user
And a filter is displayed as a chip
When I click the close (×) button on the chip
Then the corresponding filter should be deselected in the group filter
And the chip should be removed from the display

AC 4: Ensure keyboard accessibility
Given I'm an anonymous user navigating using a keyboard
When I focus on a chip
Then I should be able to remove it using the "Enter" or "Space" key

AC 5: Provide ARIA support for accessibility
Given I'm an anonymous user using a screen reader
When I navigate to a chip
Then it should announce the selected filter name
And it should announce that pressing the close button will remove the filter

AC 6: Ensure responsive layout for selected filter chips
Given I'm an anonymous user
Given I have selected multiple filters
When I view the page on a desktop screen
Then the chips should be displayed in a row near the filters or search results
And when I view the page on a mobile screen
Then the chips should wrap or stack appropriately for usability

AC 7: Clear focus indicators
Given I'm an anonymous user
When I am am using the group filter
Then all elements should provide clear focus indicators to show which element is active

AC 8: If filters produce no results, provide a clear message with guidance instead of an empty state.
Given I'm an anonymous user using screen reading technology
When my filter selection returns no results
Then a clear message is provided with guidance instead of an empty state
And if I am not using a screenreader
Then there is a clear visual message with guidance

AC 9: Dynamic filters should announce updates via ARIA live regions without disrupting navigation
Given I'm an anonymous user
When I apply a group filter
Then the filtered results should update dynamically
And an ARIA live region should announce the updated result count
And the announcement should not interfere with user navigation or focus
And should not disrupt keyboard navigation

AC 10: ARIA live announcement is clear and descriptive
Given I'm an anonymous user
When I apply a group filter
And the ARIA live region announces the update
Then the announcement should clearly state the number of results found

Solution direction

1. Create a new component 02-organisms/selected-filters.twig
   • Selected Filters should take in the following props**:
     • theme - String - "light"
     • title - String - "Selected filters"
     • filters - Array - [{ url, text, label }]
     • clear_link - Object - [{ text, url, icon, icon_placement, text, type, size, attributes }]
     • ** Note this list is not exhaustive. If new items need to be created that's fine.
2. Create story.

Example template

{% set id = id|default("selected-filters") %}
<div class="ct-selected-filters">
  <div class="ct-selected-filters__active-filters">
    <div class="ct-selected-filters__title" id="{{ id }}">{{ title }}</div>
    {% set items = [] %}
    {% for filter in filters %}
      {% set filter_item %}
        {% include '@atoms/filter-chip/filter-chip.twig' with {
          theme: theme,
          content: filter.text,
          url: filter.url,
          size: 'small',
          label: filter.label|default('Remove filter: ' ~ filter.text),
        } only %}
      {% endset %}
      {% set items = items|merge([filter_chip_item]) %}
    {% endfor %}
    {% include '@base/item-list/item-list.twig' with {
      theme: theme,
      direction: 'horizontal',
      size: 'small',
      items: items,
      modifier_class: 'ct-selected-filters__list',
      attributes: 'aria-labelledby="' ~ id ~ '"',
    } only %}
  </div>
  {% if clear_link %}
    <div class="ct-selected-filters__clear">
      {% include '@atoms/button/button.twig' with {
        theme: theme,
        kind: 'link',
        type: clear_link.type|default('secondary'),
        size: clear_link.size|default('regular'),
        icon: clear_link.icon|default('close-outline'),
        icon_placement: clear_link.icon_placement|default('after'),
        text: clear_link.text|default('Clear all'),
        url: clear_link.url,
        attributes: clear_link.attributes,
      } only %}
    </div>
  {% endif %}
</div>

List - Solution Direction

1. In 03-organisms/list/list.twig
   • list.twig should accept new parameters:
     • selected_filters - Array - [{ url, text, label }]
     • selected_filters_clear_url - String - Clear URL
   • Within the filters block and under the filters condition, we should include a selected_filters check and output.
   • Update story.

Example template:

{% if selected_filters %}
  <div class="row">
    <div class="col-xxs-12">
      {% include '@organisms/selected-filters.twig' with {
        theme: theme,
        title: 'Selected filters:'|t,
        filters: selected_filters,
        clear_link: selected_filters_clear_link,
      } only %}
    </div>
  </div>
{% endif %}

[alan-cole]

Selected Filter - Solution Direction

• Create a new component 02-organisms/selected-filters.twig
  • SelectedFilters should take in the following props**:
    • theme - String - "light"
    • title - String - "Selected filters"
    • filters - Array - [{ url, text, label }]
    • clear_link - Object - [{ text, url, icon, icon_placement, text, type, size, attributes }]
    • ** Note this list is not exhaustive. If new items need to be created that's fine.
  • Create story.

Example template:

{% set id = id|default("selected-filters") %}
<div class="ct-selected-filters">
  <div class="ct-selected-filters__active-filters">
    <div class="ct-selected-filters__title" id="{{ id }}">{{ title }}</div>
    {% set items = [] %}
    {% for filter in filters %}
      {% set filter_item %}
        {% include '@atoms/filter-chip/filter-chip.twig' with {
          theme: theme,
          content: filter.text,
          url: filter.url,
          size: 'small',
          label: filter.label|default('Remove filter: '|t ~ filter.text),
        } only %}
      {% endset %}
      {% set items = items|merge([filter_chip_item]) %}
    {% endfor %}
    {% include '@base/item-list/item-list.twig' with {
      theme: theme,
      direction: 'horizontal',
      size: 'small',
      items: items,
      modifier_class: 'ct-selected-filters__list',
      attributes: 'aria-labelledby="' ~ id ~ '"',
    } only %}
  </div>
  {% if clear_link %}
    <div class="ct-selected-filters__clear">
      {% include '@atoms/button/button.twig' with {
        theme: theme,
        kind: 'link',
        type: clear_link.type|default('secondary'),
        size: clear_link.size|default('regular'),
        icon: clear_link.icon|default('close-outline'),
        icon_placement: clear_link.icon_placement|default('after'),
        text: clear_link.text|default('Clear all'),
        url: clear_link.url,
        attributes: clear_link.attributes,
      } only %}
    </div>
  {% endif %}
</div>

List - Solution Direction

• In 03-organisms/list/list.twig
  • list.twig should accept new parameters:
    • selected_filters - Array - [{ url, text, label }]
    • selected_filters_clear_url - String - Clear URL
  • Within the filters block and under the filters condition, we should include a selected_filters check and output.
  • Update story.

Example template:

{% if selected_filters %}
  <div class="row">
    <div class="col-xxs-12">
      {% include '@organisms/selected-filters.twig' with {
        theme: theme,
        title: 'Selected filters:'|t,
        filters: selected_filters,
        clear_link: selected_filters_clear_link,
      } only %}
    </div>
  </div>
{% endif %}