Group filter - extend feature to allow for vertical use

[fionamorrison23]

User story

As a an anonymous user
I want the group filter to be available as a vertical display
So that I can easily navigate and apply filters when browsing a faceted search page, especially on narrow screens or sidebar layouts.

Description

We want to extend the group filter component so it can be used vertically on pages such as the search page.

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: Default layout remains horizontal
Given I am on a page with a group filter
When no layout preference is specified
Then the filters should be displayed in a horizontal layout

AC 2 - BEM & Design: Theming follows CivicTheme standards
Given I'm an anonymous user
When the group filter is rendered
Then the applied styles should follow CivicTheme BEM conventions
And the design should be consistent with CivicTheme UI guidelines

AC 3: Ensure proper ARIA roles and attributes
Given I'm an anonymous user
When the group filter is rendered on the page
Then each filter option should have appropriate ARIA attributes
And the filter group should have an ARIA role that conveys its purpose to assistive technologies

AC 4: Maintain sufficient color contrast
Given I'm an anonymous user
When a filter option is in a selected or hovered state
Then the text and background contrast should meet WCAG 2.1 AA standards

AC 5: Ensure screen reader compatibility
Given I'm an anonymous user using a screen reader
When I navigate to the group filter
Then the filter group should be announced as a filter section
And each filter option should be clearly described with its state (selected or unselected)

AC 6: Provide a visible focus indicator
Given I'm an anonymous user navigating using a keyboard
When I tab through the filter options
Then a clear visible focus indicator should be present on each item

AC 7: Ensure filter selection is perceivable
Given I'm an anonymous user
When I select or deselect a filter option
Then a live region should announce the change to assistive technologies

AC 8: Semantic heading markup
Given I'm an anonymous user viewing the group filter
When I inspect the heading structure
Then the filter section should have a semantically correct heading element
And the heading level should follow a logical hierarchy within the page structure

AC 9: Ensure assistive technologies recognise the heading
Given I'm an anonymous user using a screen reader
When I navigate to the group filter
Then the heading should be announced as a section title
And it should describe the purpose of the filter section

Solution direction