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={{ display: 'none' }} className="ignored">Invisible</button>
14 <a className="ignored">No href</a>
15
16 <input type="text" />
17 <textarea></textarea>
18 <button>Button</button>
19 <a href="#">Link</a>
20 <div tabIndex={0}>Tabbable</div>
21 </div>
22 </main>
23 );
24
25 mount(<Tabbables />);
26 cy.get('#start').focus();
27
28 const actualTargets: HTMLElement[] = [];
29 for (let i = 0; i < 5; i++) {
30 cy.realPress('Tab');
31 cy.focused().should('not.have.class', 'ignored').then($el => {
32 actualTargets.push($el.get(0));
33 });
34 }
35
36 cy.get('.targets').then($el => {
37 const element = $el.get(0);
38 expect(getFocusTargets(element)).to.deep.equal(actualTargets);
39 });
40});