Accessibility: Quantity input fails label (WCAG 1.3.1 / 4.1.2) due to aria-labelledby on <label>
Nobody has claimed this yet.
- Dominant language
- Liquid
- Stars
- 3.1k
- Forks
- 4.5k
- PR merge metrics
- No merged PRs in 30d
Description
Bug Description
In sections/main-product.liquid and sections/featured-product.liquid, the quantity selector fails WCAG 1.3.1 / 4.1.2 (label / Accessible Name) in automated accessibility engines (Axe-core).
Cause
The <label> element includes aria-labelledby="quantity-label-{{ section.id }}" while its inner visible text span is marked with aria-hidden="true". According to the W3C Accessible Name algorithm, aria-labelledby on a native <label> host element is non-standard, resulting in an empty computed label for <input class="quantity__input">.
Steps to Reproduce
- Run axe-core against any standard Dawn product page.
- Observe violation:
Form elements must have labelson#Quantity-template--...__main.
Suggested Fix
Move aria-labelledby="quantity-label-{{ section.id }}" from the <label> element directly onto <input class="quantity__input">.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start in sections/main-product.liquid and sections/featured-product.liquid, inspecting the quantity selector and its label/input relationship. Run axe-core against a standard Dawn product page, then verify the form-label violation is gone after the accessibility attribute placement is corrected.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- html
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 88/100