fix(lxlweb): a11y FS10, NL30 (correct forms)

[jesperengstrom]

Description

Solves

• Report no: FS10, NL30

Use correct forms and form controls

The report mainly focuses on supersearch, but also points out a number of issues regarding the filter panel:

• What looks like form elements (checkboxes, radio buttons) are actually links with icons
• They cannot be interacted with using space and arrow keys as expected
• Overuse of screen reader labels for these links mismatch the visible text and create too much repetition
• Interacting with the links causes navigation and loss of focus

I've replaced the 'form simulation links' with two new components, FacetRadio and FacetCheckbox which uses real form elements including fieldset, legend and label. To do this completely by the book, we should also have a 'submit' button. But there's a technical limitation to this: the frontend cannot compute the resulting query from multiple choices made; we must use the view.@id for each. Which means navigation has to happen onChange, which makes them JS dependent.

Apart from this tradeoff, this seems to work pretty well. Svelte's keep-focus and no-scroll options manages to update the results while keeping focus. A small debouncer prevents too many navigations to occur while moving through radio buttons. In the case of a completely server-rendered page (no JS), the FacetLinks are rendered instead.

Pros:

• Retaining focus also helps to preserve filter panel state. Disorientation caused by content scrolling/collapsing on navigation is now less evident.

Drawbacks:

• A radio button cannot be unchecked. Filters chosen from such a category has to be removed from the search field.

Summary of changes

• Rename component FacetGroup -> Facet
• Rename component FacetValue -> FacetLink
• Extract logic to new component FacetLinks
• Create FacetRadio and FacetCheckbox components
• Remove screen reader labels ('klicka för att lägga till filter' etc)
• Fix tests

[olovy]

LGTM!

My only comment is that the radio button labels don't span the full width of the facet panel. The hover highlight is for the full width but only the text can be clicked.
For links and checkboxes the full width is clickable.

[olovy]

As I understand it, it is best practice to not change the pointer for checkboxes and radio buttons. But it feels a bit spretigt with mixed hand and regular pointer in the facet panel.

[jesperengstrom]

radio button labels don't span the full width of the facet panel.

fixed in 3cd9e4e

But it feels a bit spretigt

Agreed, but as you say it's default behaviour and I don't think we should tamper with it