Automattic / Automattic/WP-Job-Manager

Accessibility issue with category dropdown

Open
#1,895 1 comment 0 reactions 0 assignees View on GitHub
[Pri] Normal Bug
Dominant language
PHP
Stars
899
Forks
369
Avg merge
11h 37m
Merged PRs (30d)
12

Description

**Describe the bug**
When running an accessibility audit on a wordpress page using the WP Job Manager shortcode "[jobs per_page="10" job_types="Full Time, Part Time, Temporary"]", the dropdown menu for Categories triggers a accessibility issue in the audit. Audit error message is:

_Elements with [role] that require specific children [role]s, are missing.
Some ARIA parent roles must contain specific child roles to perform their intended accessibility functions._

**Failing Elements**
span.select2-selection.select2-selection--single

This element has aria-labelledby assigned to it, but it points to another element that doesn't exist on the page.

**To Reproduce**
Steps to reproduce the behavior:
1. Go to page using the shortcode.
2. Open Dev Tools and run an audit.
3. See error in audit summary.

**Expected behavior**
The element should either a) have its own aria-label, or b) the missing element needs to be put back in the html code with an appropriate label.

**WordPress Environment**
- WordPress Version: 5.2.3
- WP Job Manager Version: 1.33.5
- PHP Version: tested with 5.6.4 and 7.3

Contributor guide

Open the contributing guide

Research direction

Reproduce the issue on a WordPress page using the [jobs per_page="10" job_types="Full Time, Part Time, Temporary"] shortcode, then inspect the Categories dropdown markup in DevTools. Start with the span.select2-selection.select2-selection--single element and its aria-labelledby target; done means the audit no longer reports a missing label target and the control has an appropriate accessible label.

Written by the indexing model from the issue text.

Assessment

Tech stack
php, wordpress
Domain
accessibility, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.