Problem/Motivation

The value fields for some exposed filter types are missing an accessible name.

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

Steps to reproduce

  1. Install with Umami profile (ddrush si -y demo_umami).
  2. Go to /en/admin/structure/views.
  3. In the row for the "Content" view, click "Edit"
  4. Under the "Filter criteria" section, click "Add".
  5. In the list of fields that appears, check the boxes for:
    • "ID" (numeric)
    • "Content type" (bundle)
    • "Tags (field_tags)" (term reference)

    The box at the bottom of the form should contain "Selected:ID, Content type, Tags (field_tags)".

  6. Click "Add and configure filter criteria".
  7. For each of the filters in turn:
    1. check the box for"Expose this filter to visitors, to allow them to change it"
      (For the Tags filter you will also need continue past the "Configure extra settings" screen),
    2. then check the box for "Expose operator",
    3. then click "Apply and continue".
  8. Confirm that the new exposed filters appear in the preview.
  9. Run a test with Axe or Accessibility Insights.
  10. Click "Save"
  11. Go to /admin/content.
  12. Run a test with Axe or Accessibility Insights.
Screenshots

View preview:

Screenshot of accessibility error in view preview

View page (/admin/content):

Screenshot of accessibility error on view page

Manual testing note

To check for visual regressions with the numeric filter:

  1. Add a second exposed filter for ID, but do not check the box for "Expose operator".
  2. Confirm that the "Value" field in the filter configuration form looks the same without & with the MR.
    Screenshot on main:
  3. Confirm that this exposed filter on the view page looks the same without & with the MR.

Proposed resolution

  1. Ensure that the elements have a #title property with appropriate text.
  2. Hide the labels visually with '#title_display' => 'invisible'.

Remaining tasks

User interface changes

  • Visually, no changes.
  • Visually-hidden accessible names are added for the affected elements. These will be perceivable for users of assistive technology.

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: Migrate Nightwatch Axe tests to 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: Migrate Nightwatch Axe tests to 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.

kentr’s picture

Issue summary: View changes
StatusFileSize
new78.29 KB

I updated steps to reproduce. Tags and content types were removed from the standard profile.

I'll update the MR to fix the issues that @cboyden reported and look for other cases included in #933004: Test that all form elements have a #title for accessibility.

kentr’s picture

I added fixes for the cases that @cboyden reported in #8.

I didn't find other cases, but I think it's a general fix that will cover other cases except where the specific filter plugin overrides it in ::valueForm(). I didn't find any overrides like this.

I removed the Nightwatch test and am hoping we can skip the addition of tests for now since the goal of #933004: Test that all form elements have a #title for accessibility is to add a single test for all cases.

smustgrave’s picture

Status: Needs review » Needs work

Don’t think we can skip tests for a bug. So think we need to add some here or postpone on the parent issue.

kentr’s picture

IIRC we've skipped them for special cases in the past. I remember the context being something like "this issue has been reviewed & manually tested aplenty, so we (core committers) are OK with deferring the automated tests".

I'll see if I can dig up the issue.

kentr’s picture

@lauriii in #3541910-38: Elements in closed sidebar are focusable:

I personally think this is fine to commit without the automated tests. Confirmed this manually both with the steps from the issue summary and with screen reader.

Maybe someone in the C-Suite (framework manager / core committer?) can weigh in on this case.

kentr’s picture

Still, there is a followup to add test coverage: #3570453: Test coverage for closed sidebar focus in Navigation.

It was @catch who said (before @lauriii's decision)

If it needs entirely new test coverage, I'd be happy to add that in a follow-up given this has had extensive manual testing.

I'm hoping for the "test coverage in a followup" here.

smustgrave’s picture

Still think as a bug we should add coverage here. Especially since it could just be a few assertions on existing tests. Else think this should be closed and folded into the parent where I guess test coverage will be also.