Survey task filter radio button labels use nested buttons

[eatyourgreens]

Package

lib-classifier

Describe the bug

The label for each filter radio button includes a close button when the radio button is checked. <label> tags can only contain inline text and images. Nested <button> tags are invalid and raise an accessibility issue. With one clickable element nested inside another clickable element, the label's behaviour is not obvious when clicked.

front-end-monorepo/packages/lib-classifier/src/plugins/tasks/survey/components/components/Chooser/components/CharacteristicsFilter/components/FilterButton.js

Lines 56 to 65 in 699ef77

	{checked && (
	<CloseButton
	closeFn={(event) => {
	// Note: preventDefault and stopPropagation are to prevent the radio button input click handler from firing and re-selecting the characteristic filter
	event.preventDefault()
	event.stopPropagation()
	onFilter(characteristicId)
	}}
	/>
	)}

The radio button's label is also confusing, since it contains the close button label.

To Reproduce

Select a filter then inspect the radio button label in the DOM.

Expected behavior

Labels should use valid HTML and not generate accessibility errors.

[mcbouslog]

Maybe the close / remove button should be removed.

With the desired UI of selecting or deselecting one item, and only ever one item at a time, from a group of items, what's the best implementation?

Maybe a checkbox group with that only allows one item to be checked?
Maybe a radio button group with onClick that unchecks checked inputs?
Something else?

[eatyourgreens]

Maybe a checkbox group with that only allows one item to be checked?

This is basically re-inventing radio buttons, albeit with the option to turn one off. Checkboxes have a completely different keyboard interaction from radio buttons, so the design would have to clarify, visually, that the interaction is different.

[eatyourgreens]

We could also allow multiple selection. See, for example, the filtered search on https://www.johnlewis.com/search?search-term=coffee

[eatyourgreens]

Radio buttons are a good choice when only one answer can be selected but always provide an extra option eg. Male/Female/Prefer not to answer.

[eatyourgreens]

The GDS guidelines for radio buttons are worth reading.

[mcbouslog]

Not suggesting we mirror, but for reference here's what PFE does. PFE provides a Clear button that's only enabled once a different option within the related characteristic group has been selected, and when Clear is clicked it clears and closes the related filter section.

Project with survey task - https://master.pfe-preview.zooniverse.org/projects/markb-panoptes/survey-task-test-project/classify?reload=0&workflow=2434&env=staging

The linked GDS guidelines note:
"Users cannot go back to having no option selected once they have selected one, without refreshing their browser window. Therefore, you should include ‘None of the above’ or ‘I do not know’ if they are valid options."

I'm not sure, but I think the two options to consider are:
a) changing the characteristic section to a checkbox group and allowing the selection of multiple specific values (i.e. red AND black)
b) keeping the characteristic section a radio group and adding a "no filter" option

@seanmiller26 - what are your thoughts?

[seanmiller26]

I have reconfigured the functionality to be checkboxes instead of radio buttons.

This allows volunteers to make multiple selections. Notice a tally counts the active filters next to the 'Filter' button and a 'Clear All Filters' button only shows when a selection is made. There is also an overlay applied to the checkboxes to make the checks more visible.

Here is how it looks after the selections are made and the filter dialog closes. Volunteers can see there are filters applied but would have to go back into the filter dialog and choose new selections, similar to PFE's current functionality.

Let me know if there are other functionalities I have missed.