Brief Summary
This video introduces a new accessibility rule in Cypress that identifies potential accessibility issues in custom components by comparing HTML and page interactions during tests. It highlights scenarios where elements, despite appearing visually correct and being clickable in tests, lack the appropriate semantic structure for accessibility, such as using <div> or <span> elements styled as buttons instead of actual <button> elements. The rule helps catch issues that static analysis tools like Axe Core might miss, ensuring a more accessible user experience.
- The new accessibility rule in Cypress identifies potential issues in custom components.
- It compares HTML and page interactions during tests to find elements lacking proper semantic structure.
- The rule catches issues that static analysis tools like Axe Core might miss.
Introduction to Cypress Accessibility Rule
The video introduces a new accessibility rule in Cypress, designed to supplement Axe Core rule sets. This rule helps identify accessibility problems in custom components that might not be apparent through static analysis. It focuses on comparing the HTML structure and page interactions during tests to reveal potential issues.
Demonstration of the Accessibility Rule
A Cypress test recorded to the cloud is examined to demonstrate the rule in action. The test involves finding and clicking elements using various methods, including testing library find by role and IDs. Although the test itself doesn't include explicit accessibility checks, the new rule identifies several suspicious elements that are clicked but lack proper accessibility semantics.
Example 1: Incomplete Button Pattern
The first example involves a button element with an icon but no text, which Axe Core flags as an incomplete button pattern. This is because the HTML indicates it should behave as a button, but it's missing essential attributes. This type of issue is detectable through static code analysis.
Example 2: Misused Div Element
The second example highlights an SVG element inside a <div> with a class of "button." Unlike the previous example, Axe Core doesn't flag this because the <div> is treated as generic content without specific expectations for interactive behavior. Visually, it appears identical to a button, but semantically, it lacks the necessary accessibility attributes.
Example 3: Span with Button Role
The third example involves a <span> element with the role of "button." While it partially fulfills the button contract and might be located using testing libraries find by role command, it still fails Cypress's accessibility check. This indicates that it's not fully compliant with accessibility standards and requires manual review to determine if it should be replaced with a standard <button> element.
Call to Action: One-Week Trial
The video concludes with an invitation to try out the new accessibility rule with a one-week trial. Interested users can fill out a form to gain access and see how the rule works with their own Cypress tests and applications.
