Something went wrong. Try again.
Mirror: React hooks for accessible, common web interactions. UI super powers without the UI.
Something went wrong. Try again.
1.2 kB · 40 lines
TSX
at main
1234567891011121314151617181920212223242526272829303132333435363738394041import React from 'react';import { mount } from '@cypress/react';import { getFocusTargets } from '../focus';
it('detects typical focusable elements', () => { const Tabbables = () => ( <main> <button id="start">Start</button> <div className="targets" style={{ display: 'flex', flexDirection: 'column' }}> <input type="hidden" className="ignored" /> <input type="text" disabled className="ignored" /> <button tabIndex={-1} className="ignored" /> <button style={{ display: 'none' }} className="ignored">Invisible</button> <a className="ignored">No href</a>
<input type="text" /> <textarea></textarea> <button>Button</button> <a href="#">Link</a> <div tabIndex={0}>Tabbable</div> </div> </main> );
mount(<Tabbables />); cy.get('#start').focus();
const actualTargets: HTMLElement[] = []; for (let i = 0; i < 5; i++) { cy.realPress('Tab'); cy.focused().should('not.have.class', 'ignored').then($el => { actualTargets.push($el.get(0)); }); }
cy.get('.targets').then($el => { const element = $el.get(0); expect(getFocusTargets(element)).to.deep.equal(actualTargets); });});