Query Filter: Single option filters don't have accessible names

[ryelle]

Initially reported on learn, this is an issue across the site.

The toggle that opens the course status filters is labeled using the currently selected status. Buttons to perform an action should be labeled using information about what the control does. Having the current status visible is OK; but it shouldn't be the only content.

This would be better labeled using something like "Filter Courses: All" or even "Filter: All". This would inform the user what they can do with the control.

The single-select variation of query filter should display "[Filter name]: [Value]" as the button text (label value).

This has been fixed on Learn in WordPress/Learn#2804

Still needs to be fixed on:

• Themes (only uses multiple select filters)
• Plugins (only has filters if ?show_filters=1, and this is already using the right format)
• Patterns (curation & sort, remove unused status from "my patterns")
• Events (technically correct, but the single-select uses the multiple-select label style)
• Showcase (has sort on archive view)

Question for @WordPress/meta-design:

Once we do this, the label is shown twice. Should the label inside the dropdown be hidden again? This would match the multiple select behavior (it's there, but only visible on mobile).

	Desktop	Mobile
Multiple select
Single select

[jasmussen]

Once we do this, the label is shown twice. Should the label inside the dropdown be hidden again? This would match the multiple select behavior (it's there, but only visible on mobile).

I think we should, yes, but happy to defer to another opinion.

[ndiego]

Once we do this, the label is shown twice. Should the label inside the dropdown be hidden again? This would match the multiple select behavior (it's there, but only visible on mobile).

I think we should, yes, but happy to defer to another opinion.

I agree.

[ryelle]

Okay, that should be as easy as removing the &:where(:not(.is-single-select)) from this CSS:

wporg-mu-plugins/mu-plugins/blocks/query-filter/src/style.pcss

Lines 115 to 117 in f13cb5f

	&:where(:not(.is-single-select)) .wporg-query-filter__modal-header {
	display: none;
	}

[fcoveram]

Agree with removing the label from the dropdown

[fcoveram]

I forgot to ask. Does this change include the multi-selection version? The report doesn't mention it.

[ryelle]

Multi-selects already use a static label (with dynamic count), ex "Layout [2]", and no title in the desktop dropdown. This change basically makes the two variations more similar.

[fcoveram]

I see. Thanks