component-driven / component-driven/cypress-axe

`aria-expanded` property seems to be missing, but appears in devtools

Open
#153 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
641
Forks
90
Avg merge
6h 8m
Merged PRs (30d)
1

Description

I just started using cypress-axe, and the very first error I'm getting is this:

Required ARIA attributes must be provided
=========================================

<input type="search" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_1_list" aria-autocomplete="list" aria-controls="rc_select_1_list" aria-activedescendant="rc_select_1_list_0" readonly="" unselectable="on" value="" id="rc_select_1" style="opacity: 0;">

Fix any of the following:
  Required ARIA attribute not present: aria-expanded

However, when I use devtools to inspect the element in question (a select from Ant Design), I can see that aria-expanded is actually there:

image

This problem is reproducible on all the Ant select components on the page. I'm running cy.checkA11y well after the page has fully rendered, so I don't think it's an issue of "the property hasn't shown up yet". The property appears to be there, but cypress-axe is not seeing it for some reason.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the report with cypress-axe's cy.checkA11y against an Ant Design select and compare the DOM seen by the accessibility check with the element shown in DevTools. Trace where aria-expanded is handled or lost; done means the reported error is explained and the behavior is covered by a regression test.

Written by the indexing model from the issue text.

Assessment

Tech stack
cypress, typescript
Domain
accessibility, testing
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.