Problem/Motivation

Consistency survey propmpted by #2608180: View Search Filter's Label isn't Associated with Input .

The filters at the top of various admin listings make inconsistent use of form labels, descriptions, title attributes, and placeholders.

Accessibility issues

  • Some inputs have no programatically associated label, so accessible name calculation falls back to the title attribute.
  • Some inputs have title attributes that only mouse users benefit from, vs. a Form API #description which is available to all users.

Survey of listing filters in Drupal core

  • Content (admin/content) - This one is doesn't filter until submitting a form. 1 text input and 3 selects.
    • label: "Title" or "Content type", or "Published status" or "Language".(associated using for). These are node entity fields.
    • description: none (no aria-describedby)
    • placeholder: none
    • title: none
  • Comments (admin/content/comment) - This one is doesn't filter until submitting a form. There are two text inputs, and one select.
    • label: "Subject" or "Author name" or "Language" (associated using for). These are comment entity fields.
    • description: none (no aria-describedby)
    • placeholder: none
    • title: none
  • Files (admin/content/files) - This one is doesn't filter until submitting a form. 2 text inputs, 1 select.
    • label: "Filename" or "MIME type" or "Status" (associated using for). These are file entity fields.
    • description: none (no aria-describedby)
    • placeholder: none
    • title: none
  • Place block dialog (admin/structure/block)
    • Label: "Filter" (NOT associated with input, with a visually-hidden class
    • description: none (no aria-describedby)
    • placeholder: "filter by block name"
    • title: "Enter a part of the name to filter by"
  • Custom block library (admin/structure/block/block-content) - This one is doesn't filter until submitting a form. 1 text input, 1 select
    • Label: "Block description" or "block type" (associated using for). These are block entity fields.
    • description: none (no aria-describedby)
    • placeholder: none
    • title: none
  • Views (admin/structure/views)
    • Label: "Filter" (NOT associated with input, with a visually-hidden class
    • description: none (no aria-describedby)
    • placeholder: "fFilter by view name, machine name, description, or display path"
    • title: "Enter a part of the view name, machine name, description, or display path to filter by."
  • Views options dialogs (on any view configuration page, e.g. admin/structure/views/view/content, dialog presented after pressing add button for Fields, Filter Criteria, Sort Criteria, Header, Footer, No results Behaviour, etc. , )
    • label: "Search" or "Category" (associated using for). One text input, one select input.
    • description: none (no aria-describedby)
    • placeholder: none
    • title: none
  • Extend (admin/modules)
    • label: "Filter modules" (associated using for, with a visually-hidden class
    • description: "Enter a part of the module name or description" (associated with aria-describedby)
    • placeholder: "filter by name or description"
    • title: no title attribute
  • Uninstall (admin/modules/uninstall)
    • label: "Filter modules" (associated using for, with a visually-hidden class
    • description: "Enter a part of the module name or description" (associated with aria-describedby)
    • placeholder: "filter by name or description"
    • title: no title attribute
  • Testing (admin/config/development/testing)
    • label: "Search" (associated using for
    • description: none (no aria-describedby)
    • placeholder: "Enter test name…"
    • title: "Enter at least 3 characters of the test name or description to filter by."
  • URL Aliases (admin/config/search/path) - This one is doesn't filter until submitting a form.
    • label: "Path alias" (associated using for). Visually-hidden label, but nested in a details/summary group called "Filter Aliases", which makes 3 different terms!
    • description: none (no aria-describedby)
    • placeholder: none
    • title: none
  • People (admin/people) - This one is doesn't filter until submitting a form. 1 text input, 3 select.
    • label: "Name or email contains", "Status", "Role", or "Permission". (All associated using for). These are user entity fields.
    • description: none (no aria-describedby)
    • placeholder: none
    • title: none

Proposed resolution

Establish better consistency among these and/or consider whether the differences are justifiable.
They can be grouped in certain prupose + behaviours, in which case aim for consistency in each group pattern:

  • dynamic JS filters, no form submission
  • config entity filters, usually only 1 or 2 filters.
  • content entity filters, usually have several filters (typically 3+), require form submission, typically have bulk operations

Accessibility:

  • prefer a concise <label for> instead of falling back to lengthy title attributes.
  • prefer visible Form API #description to HTML title attribute, as this is more robust and reaches more users.

Remaining tasks

TBD - use child issues where appropriate.

User interface changes

TBD. Consistency for accessibility and usability.

API changes

None.

Data model changes

None/

Comments

andrewmacpherson created an issue. See original summary.

andrewmacpherson’s picture

The survey in the issue would be easier to make sense of in a table.

andrewmacpherson’s picture

andrewmacpherson’s picture

Issue summary: View changes

Version: 8.6.x-dev » 8.7.x-dev

Drupal 8.6.0-alpha1 will be released the week of July 16, 2018, which means new developments and disruptive changes should now be targeted against the 8.7.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

andrewmacpherson’s picture

Title: Make admin listing filters more consistent for accessibility and usability » Admin list filter fields are consistently labelled.
Category: Task » Bug report
Parent issue: » #3015494: Make admin list filters behave more consistently.

Claritying, this issue is about the labelling of the field.
There are various other issues relating to the JS behaviour, so I've gathered them together in a parent plan,

andrewmacpherson’s picture

Title: Admin list filter fields are consistently labelled. » Admin list filter fields are inconsistently labelled.

Version: 8.7.x-dev » 8.8.x-dev

Drupal 8.7.0-alpha1 will be released the week of March 11, 2019, which means new developments and disruptive changes should now be targeted against the 8.8.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.8.x-dev » 8.9.x-dev

Drupal 8.8.0-alpha1 will be released the week of October 14th, 2019, which means new developments and disruptive changes should now be targeted against the 8.9.x-dev branch. (Any changes to 8.9.x will also be committed to 9.0.x in preparation for Drupal 9’s release, but some changes like significant feature additions will be deferred to 9.1.x.). For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 8.9.x-dev » 9.1.x-dev

Drupal 8.9.0-beta1 was released on March 20, 2020. 8.9.x is the final, long-term support (LTS) minor release of Drupal 8, which means new developments and disruptive changes should now be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 9.1.x-dev » 9.2.x-dev

Drupal 9.1.0-alpha1 will be released the week of October 19, 2020, which means new developments and disruptive changes should now be targeted for the 9.2.x-dev branch. For more information see the Drupal 9 minor version schedule and the Allowed changes during the Drupal 9 release cycle.

Version: 9.2.x-dev » 9.3.x-dev

Drupal 9.2.0-alpha1 will be released the week of May 3, 2021, which means new developments and disruptive changes should now be targeted for the 9.3.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.5.x-dev » 10.1.x-dev

Drupal 9.5.0-beta2 and Drupal 10.0.0-beta2 were released on September 29, 2022, which means new developments and disruptive changes should now be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

mgifford’s picture