Skip to content

fix(filters): add WCAG labels to front-end filter form#7562

Open
faisalahammad wants to merge 1 commit into
pods-framework:mainfrom
faisalahammad:fix/7561-filter-labels
Open

fix(filters): add WCAG labels to front-end filter form#7562
faisalahammad wants to merge 1 commit into
pods-framework:mainfrom
faisalahammad:fix/7561-filter-labels

Conversation

@faisalahammad

Copy link
Copy Markdown
Contributor

Summary

Add visible, programmatically-associated <label> elements to the front-end filter form rendered by Pods::filters(). Fixes WCAG 2.1 "Labels or Instructions" violation.

Changes

ui/front/filters.php

Before:

  • Filter dropdowns relied on -- Label -- placeholder option
  • Search input had no visible label, no placeholder, no aria-label

After:

  • Each pick/taxonomy filter gets <label for="pods-form-ui-filter_{name}">Filter by {field_label}</label> linked to its <select>
  • Search input gets visible label, matching id, placeholder="Search…", and aria-label="Search"
  • Labels customizable via existing pods_form_ui_label_text filter
  • Placeholder option removed when label visible (BC: returns when label suppressed)

Testing

  1. Create a Pod with Relationship fields (test with Category and custom-simple)
  2. Use shortcode: [pods name="test_products" template="my_template" filters="category,status"]
  3. Verify each filter has visible label linked to its control
  4. Verify search input has label + placeholder + aria-label
  5. Run automated tests: vendor/bin/codecept run wpunit PodsFiltersLabelsCest PodsFiltersLabelFilterCest

Screenshots

Before After
Before: no labels on filters After: labels present

Fixes #7561

@what-the-diff

what-the-diff Bot commented Jul 3, 2026

Copy link
Copy Markdown

PR Summary

  • Upgraded GitHub Actions Workflow Version
    The workflow process now uses an updated version of GitHub Actions (actions/checkout@v6). This helps to streamline the code checking process offering more efficiency.

  • Integration of New Test Files for Label Customization
    Two new test files have been added which allow us to extensively test the customization of labels in the filter area. This ensures that our filter labels are always presented accurately to the user, enhancing user experience.

  • Enhancements to Filter Display Settings
    Several important improvements have been made to the filters.php file which dictate the way our filtering system works. These include:

    • The output of labels is now executed using a reliable function PodsForm::output_label().
    • The search input field now includes proper labeling and attributes making our search functionality more intuitive for users.
    • The display settings for drop-down selections in filter menus have also been adjusted to offer a more user-friendly experience.

- Add visible <label> for each pick/taxonomy filter dropdown with 'Filter by {field_label}' text
- Add visible label, placeholder, and aria-label to keyword search input
- Labels customizable via existing pods_form_ui_label_text filter
- Drop placeholder option when label visible (BC: returns when label suppressed)

Fixes pods-framework#7561
@faisalahammad faisalahammad force-pushed the fix/7561-filter-labels branch from e2a7783 to ecce306 Compare July 3, 2026 10:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add labels to pods select filters and input search by keyword

2 participants