Problem/Motivation

The value textfield on numeric exposed filters is missing an accessible name.

It appears that the problem only occurs when the operator is also exposed.

Steps to reproduce

  1. Install with standard profile.
  2. Edit the Frontpage view.
  3. Under the Filter criteria section, click "Add".
  4. In the list of fields that appears, check the boxes for ID (numeric), Content type (bundle), and Tags (term reference).
  5. Click "Add and configure filter criteria".
  6. For each of the filters, check the box for"Expose this filter to visitors, to allow them to change it", then check the box for "Expose operator", then click "Apply". (For the Tags filter you will also need to choose and apply the Selection type.)
  7. Confirm that the new exposed filter appears in the preview.
  8. Run a test with Axe or Accessibility Insights.
  9. Click "Save"
  10. Go to /node.
  11. Run a test with Axe or Accessibility Insights.

Screenshot of accessibility error in view preview
Screenshot of accessibility error on view page

Proposed resolution

  1. Ensure that the element has a #title property with appropriate text.
  2. Hide the label visually with '#title_display' => 'invisible'.

The error appears in NumericFilter::valueForm, and the same problem also occurs with bundle filters and term reference filters. It might also affect other filter types. See if it can be fixed more generally.

Remaining tasks

User interface changes

Accessible names are added for the affected elements.

Introduced terminology

API changes

Data model changes

Release notes snippet

Issue fork drupal-3545814

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

kentr created an issue. See original summary.

kentr’s picture

Issue summary: View changes
kentr’s picture

Title: Numeric value on exposed filter form is missing accessible name » Numeric value textfield on exposed filter form is missing accessible name
Issue tags: +Needs tests

First draft in issue branch. Still needs tests.

kentr’s picture

Status: Active » Needs review
Issue tags: -Needs tests
acbramley’s picture

Status: Needs review » Needs work

Nightwatch tests are extremely inefficient and are likely being phased out eventually (see #3467492: [policy, no patch] Replace Nightwatch with Playwright).

The test here can be rewritten as a functional test that just checks for the label and uses a test view that's already defined in yaml.

kentr’s picture

Checking just for the label element is brittle because there are multiple ways to name elements form controls. It's more robust and more closely resembles user interaction to use a tool that gets the computed name. AFAICT, PHPUnit can't do this out of the box even with the selenium webdriver, but Axe and Nightwatch can.

This Nightwatch test also uses a full Axe check that covers the whole page and can be expanded to cover more exposed filter cases, in line with #2857808: Automate Accessibility Checks for Core. Views doesn't have good coverage.

#3338664: Automated A11y tests in PHPUnit was chosen to replace the Nightwatch + Axe tests, but it's stalled.

It may start moving soon, but if it doesn't:

Even if standard Nightwatch tests move to Playwright, the accessibility tests will have no replacement until until #3338664: Automated A11y tests in PHPUnit lands. I vote for having better accessibility test coverage in the interim and converting tests to PHPUnit then.

I tried to use one of the existing test views but didn't find a means outside of PHPUnit. Using one of the existing standard views (like Frontpage or Content) seems brittle because they may be removed from the testing profile. This is how I arrived at creating a simple test view in the test.

cboyden’s picture

Title: Numeric value textfield on exposed filter form is missing accessible name » Exposed filters with exposed operators are missing accessible names
Issue summary: View changes

This is not just an issue with numeric filters, it is a general issue with exposed filters where the operator is also exposed. For example, if you follow the steps in the issue summary and also add exposed Content type and Tags filters with exposed operators, you will see the same problem.

cboyden’s picture

Issue summary: View changes
StatusFileSize
new29.02 KB
new33.93 KB

Updated issue summary with steps to reproduce and screenshots showing three types of exposed filters/operators with errors.

kentr’s picture

Status: Needs work » Closed (duplicate)

@cboyden It looks like the errors for the Content type and tag / vocabulary filters are fixed by #933004: Test that all form elements have a title for accessibility. I see the errors in 11.x but not with the MR from that issue.

Based on the scoping docs, the precedent set by that issue, and a (very old) comment by @sun regarding the earlier effort to fix missing titles, I'm going to roll these #title fixes into #933004: Test that all form elements have a title for accessibility.

That issue adds a check for empty #title properties, which should catch these cases for now and defer the question of better accessible name tests and / or Axe coverage.

It did catch the original numeric filter problem in this issue, and that particular test passes locally when I apply the changes from this MR to NumericFilter.php.

Closing as duplicate of #933004: Test that all form elements have a title for accessibility.

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.