Mirror: React hooks for accessible, common web interactions. UI super powers without the UI.
kitten.sh
1import React from 'react';
2import { mount } from '@cypress/react';
3import { getFocusTargets } from '../focus';
4
5it('detects typical focusable elements', () => {
6 const Tabbables = () => (
7 <main>
8 <button id="start">Start</button>
9 <div className="targets" style={{ display: 'flex', flexDirection: 'column' }}>
10 <input type="hidden" className="ignored" />
11 <input type="text" disabled className="ignored" />
12 <button tabIndex={-1} className="ignored" />
13 <button style={{ visibility: 'hidden' }} className="ignored">Invisible</button>
14 <button style={{ display: 'none' }} className="ignored">Invisible</button>
15 <a className="ignored">No href</a>
16
17 <input type="text" />
18 <textarea></textarea>
19 <button>Button</button>
20 <a href="#">Link</a>
21 <div tabIndex={0}>Tabbable</div>
22 </div>
23 </main>
24 );
25
26 mount(<Tabbables />);
27 cy.get('#start').focus();
28
29 const actualTargets: HTMLElement[] = [];
30 for (let i = 0; i < 5; i++) {
31 cy.realPress('Tab');
32 cy.focused().should('not.have.class', 'ignored').then($el => {
33 actualTargets.push($el.get(0));
34 });
35 }
36
37 cy.get('.targets').then($el => {
38 const element = $el.get(0);
39 expect(getFocusTargets(element)).to.deep.equal(actualTargets);
40 });
41});