Accessible name and role are synthesized by the browser into an accessibility tree, and normally (with the exception of experimental AOM in Chrome) aren't available to JS. However, there's work to recreate the browser accessible name and role computation in JS, e.g. https://github.com/eps1lon/dom-accessibility-api, that could be used here.
Why is this needed?
By adding this capability to the built-in actionability checks in Cypress, users could enable this for their test suite and find accessibility issues without needing to rewrite their existing tests to use better element selectors (via testing-library or similar) or run axe-core validations.
With this feature enabled, my existing test suite will automatically time out if the application is not accessible to screen readers or other assistive tech due to missing accessible names and role for actionable elements.
Other
Ideally this would be configurable via the global actionability config, via actionability options passed to cy.visit, and also at the individual selector level, but the existingforce: true might be an acceptable solution.
What would you like?
Along the same lines of this feature request recently opened for Playwright, I'd like to propose extending the actionability checks for Cypress to include (optionally) checking for an accessible name and role.
Relevant details from the Playwright issue:
Why is this needed?
By adding this capability to the built-in actionability checks in Cypress, users could enable this for their test suite and find accessibility issues without needing to rewrite their existing tests to use better element selectors (via testing-library or similar) or run axe-core validations.
With this feature enabled, my existing test suite will automatically time out if the application is not accessible to screen readers or other assistive tech due to missing accessible names and role for actionable elements.
Other
Ideally this would be configurable via the global actionability config, via actionability options passed to
cy.visit
, and also at the individual selector level, but the existingforce: true
might be an acceptable solution.