Fix label visibility and add wrapper container for exposed numeric/date filters with multiple form elements

Created on 29 November 2015, almost 9 years ago
Updated 17 February 2023, almost 2 years ago

Problem/Motivation

When exposing a views filter on a numeric or date field the labels shown are missing or not placed in a logical order. Also there is no containing span to group operator and input field(s). This is related to / extends #2480719: Missing label and description for exposed numeric filter when using 'between' filter

Filter that has no exposed operator:

Filter that has an exposed operator with a single input value:

The label and description are not rendered correctly. There is no span surrounding the two elements for styling / keeping them together. The operator filter element label "Operator" is rendered in the same style as a separate filter.

Filter that has an exposed operator with multiple input values:

The label and description are rendered on the first of the two inputs. There is no span surrounding the three elements for styling / keeping them together. The operator filter element label "Operator" and the "And" label are rendered in the same style as a separate filter. This is the behaviour after applying the patch for #2480719: Missing label and description for exposed numeric filter when using 'between' filter . The Language filter is shown for reference how the exposed filter looks when showing a row of filters.

Key UI/UX/Accessibility bugs fixed by this issue

  1. Site builders can define a label for a filter in the Views UI, but the label doesn't appear at all in these cases, neither visually, nor for screen readers.
  2. Operator and related form elements are not grouped in any way, neither visually, nor for assistive tech. There's no way to tell which form elements a given operator choice is impacting.
  3. Is (not)? between filters have no meaningful label for min vs. max. "And" is a bizarre and unhelpful label. The filter label needs to apply to the whole set of elements, not just the "min" value.

Proposed resolution

Do what was done in D7 Views.

Single

Single operator exposed

Multiple

Multiple operator exposed

Remaining tasks

  1. (?) Seems really clear already.
  2. RTBC
  3. Commit
  4. Unblock progress on [PP-2] Use form element of type date instead textfield when selecting a date in an exposed filter Needs work

User interface changes

If an exposed filter requires multiple form elements, add a wrapper around the whole thing and use the field label as the legend for that wrapping fieldset. This allows the label for the field itself to be visible, ensures all the elements related to the same field are grouped together (both visually and in the form structure), and allows the sub elements to all have visible labels.

Cases where an exposed filter require multiple elements include:

  • The operator is exposed.
  • The operator is fixed but requires multiple elements (e.g. "Between" and "Not between").

Screenshots: Before

Screenshots: After

API changes

None.

Release notes snippet

Views exposed filters that involve multiple form elements are now wrapped in a fieldset. For example, this applies to numeric filters with a 'Between' operator, or any filter with an exposed operator. The filter label is now always visible, as the fieldset legend, and any included elements are nested inside.

This significantly improves the user interface for both sighted users and people using assistive technology. However, this means that the form structure of the exposed filter form is changed. Sites that implement hook_form_alter() to modify the exposed filter form may have to update that implementation to handle the changed form structure. See the change record for details.

🐛 Bug report
Status

Fixed

Version

9.1

Component
Views 

Last updated about 5 hours ago

Created by

🇳🇱Netherlands finne Amsterdam

Live updates comments and jobs are added and updated live.
  • VDC

    Related to the Views in Drupal Core initiative.

  • Usability

    Makes Drupal easier to use. Preferred over UX, D7UX, etc.

  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Production build 0.71.5 2024