(q)!;
25 |
26 | it('move focus', () => {
27 | createTest();
28 | querySelector('#d4').focus();
29 |
30 | expect(focusSolver(querySelector('#d4'), null)).toBe(undefined);
31 |
32 | // @ts-ignore
33 | focusSolver(querySelector('#d1'), null)!.node.focus();
34 | expect(focusInside(querySelector('#d1'))).toBe(true);
35 |
36 | // @ts-ignore
37 | focusSolver(querySelector('#d2'), null)!.node.focus();
38 | expect(focusInside(querySelector('#d2'))).toBe(true);
39 |
40 | expect(focusSolver([querySelector('#d2'), querySelector('#d3')], null)).toBe(undefined);
41 | expect(focusInside(querySelector('#d2'))).toBe(true);
42 |
43 | // @ts-ignore
44 | focusSolver([querySelector('#d3'), querySelector('#d4')], null)!.node.focus();
45 | expect(focusInside(querySelector('#d3'))).toBe(true);
46 | });
47 |
48 | describe('autofocus', () => {
49 | it('autofocus - should pick first available tabbable', () => {
50 | document.body.innerHTML = `
51 |
52 |
53 |
54 |
55 |
56 |
57 | `;
58 |
59 | expect(focusSolver(querySelector('#d1'), null)!.node.innerHTML).toBe('2');
60 | });
61 |
62 | it('autofocus - should pick first available focusable if tabbables are absent', () => {
63 | document.body.innerHTML = `
64 |
65 |
66 |
67 |
68 |
69 | `;
70 |
71 | expect(focusSolver(querySelector('#d1'), null)!.node.innerHTML).toBe('1');
72 | });
73 |
74 | it('autofocus - should pick first available exotic tabbable', () => {
75 | document.body.innerHTML = `
76 |
77 |
78 | 1
79 |
80 |
81 |
90 |
91 |
92 |
93 |
94 |
95 |
96 | `;
97 |
98 | expect(focusSolver(querySelector('#d1'), null)!.node.innerHTML).toBe('3');
99 | });
100 |
101 | it('autofocus - should pick first available focusable if pointed by AUTOFOCUS', () => {
102 | document.body.innerHTML = `
103 |
104 |
105 |
106 |
107 |
108 |
109 | `;
110 |
111 | expect(focusSolver(querySelector('#d1'), null)!.node.innerHTML).toBe('1');
112 | });
113 |
114 | it('autofocus - ignores inert attributes', () => {
115 | document.body.innerHTML = `
116 |
117 |
118 |
119 |
120 |
121 |
122 | `;
123 |
124 | expect(focusSolver(querySelector('#d1'), null)!.node.innerHTML).toBe('2');
125 | });
126 | });
127 |
128 | describe('jump case restoration', () => {
129 | it('handles jump out without tabindex', () => {
130 | document.body.innerHTML = `
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 | `;
139 |
140 | // circles on "moving forward"
141 | querySelector('#b2').focus();
142 | expect(focusSolver(querySelector('#d1'), querySelector('#b1-in'))!.node.innerHTML).toBe('0-in');
143 | // resets on "jump out"
144 | querySelector('#b3').focus();
145 | expect(focusSolver(querySelector('#d1'), querySelector('#b1-in'))!.node.innerHTML).toBe('1-in');
146 |
147 | // resets on "jump out"
148 | querySelector('#b2').focus();
149 | expect(focusSolver(querySelector('#d1'), querySelector('#b0-in'))!.node.innerHTML).toBe('0-in');
150 | });
151 |
152 | it('handles jump out with tabindex', () => {
153 | // is unaffected by non-tabbable elements
154 | document.body.innerHTML = `
155 |
156 |
157 |
158 |
159 |
160 |
161 |
162 |
163 | `;
164 |
165 | // circles on "moving forward"
166 | querySelector('#b2').focus();
167 | expect(focusSolver(querySelector('#d1'), querySelector('#b2-in'))!.node.innerHTML).toBe('0-in');
168 | // circles on "moving forward"
169 | querySelector('#b2').focus();
170 | // !!goes via hidden element!!
171 | expect(focusSolver(querySelector('#d1'), querySelector('#b1-in'))!.node.innerHTML).toBe('0-in');
172 | // resets on "jump out"
173 | querySelector('#b2').focus();
174 | expect(focusSolver(querySelector('#d1'), querySelector('#b0-in'))!.node.innerHTML).toBe('0-in');
175 | });
176 | });
177 |
178 | describe('return behavior', () => {
179 | beforeEach(() => {
180 | document.body.innerHTML = `
181 |
182 |
183 |
184 | 2
185 |
186 |
187 | `;
188 | });
189 |
190 | it('should first tabbable', () => {
191 | expect(focusSolver(querySelector('#d1'), null)!.node.innerHTML).toBe('3');
192 | });
193 |
194 | it('should focusable if pointed', () => {
195 | expect(focusSolver(querySelector('#d1'), querySelector('#d2'))!.node.innerHTML).toBe('1');
196 | });
197 |
198 | it('should first tabbable if target lost', () => {
199 | // TODO: this test might corrected by smarter returnFocus
200 | expect(focusSolver(querySelector('#d1'), querySelector('#d3'))!.node.innerHTML).toBe('3');
201 | });
202 | });
203 |
204 | describe('data-autofocus', () => {
205 | it('autofocus - should pick first available focusable if pointed directly', () => {
206 | document.body.innerHTML = `
207 |
208 |
209 |
210 |
211 |
212 |
213 | `;
214 |
215 | expect(focusSolver(querySelector('#d1'), null)!.node.innerHTML).toBe('2');
216 | });
217 |
218 | it('autofocus - false value', () => {
219 | document.body.innerHTML = `
220 |
221 |
222 |
223 |
224 |
225 | `;
226 |
227 | expect(focusSolver(querySelector('#d1'), null)!.node.innerHTML).toBe('1');
228 | });
229 |
230 | it('autofocus - nothing to focus', () => {
231 | document.body.innerHTML = `
232 |
233 |
234 |
235 | `;
236 |
237 | expect(focusSolver(querySelector('#d1'), null)!).toBe(undefined);
238 | });
239 | });
240 | });
241 |
--------------------------------------------------------------------------------
/__tests__/focusMerge.unit.spec.ts:
--------------------------------------------------------------------------------
1 | const { NEW_FOCUS, newFocus } = require('../src/solver');
2 |
3 | describe('focus Merge order', () => {
4 | const guard = {
5 | dataset: {
6 | focusGuard: true,
7 | },
8 | };
9 |
10 | it('handle zero values', () => {
11 | // cycle via left
12 | expect(newFocus([], [], [], undefined, 0)).toBe(NEW_FOCUS);
13 | });
14 |
15 | it('handle no tabbable values', () => {
16 | expect(newFocus([2, 3], [], [1, 2, 3, 4], undefined, 0)).toBe(NEW_FOCUS);
17 |
18 | // behavior prior to v1.0.1, cycling via lock
19 | // expect(newFocus([2,3], [], [1,2,3,4], 1, 2)).toBe(1);
20 | // behavior after v1.0.1, cycling only via (absent) tabbleles
21 | expect(newFocus([2, 3], [], [1, 2, 3, 4], 1, 2)).toBe(0);
22 | });
23 |
24 | it('should move from start to end', () => {
25 | // cycle via left
26 | expect(newFocus([2, 3, 4], [2, 3, 4], [1, 2, 3, 4, 5], 1, 2)).toBe(2);
27 | });
28 |
29 | it('should move from end to start', () => {
30 | // cycle via right
31 | expect(newFocus([2, 3, 4], [2, 3, 4], [1, 2, 3, 4, 5], 5, 4)).toBe(0);
32 | });
33 |
34 | it('should keep direction of move', () => {
35 | // cycle via left
36 | expect(newFocus([2, 4, 6], [2, 4, 6], [1, 2, 3, 4, 5, 6], 5, 4)).toBe(2);
37 | });
38 |
39 | it('should jump back', () => {
40 | // jump back
41 | expect(newFocus([2, 3, 4], [2, 3, 4], [1, 2, 3, 4, 5], 1, 4)).toBe(2);
42 | // jump back
43 | expect(newFocus([2, 3, 4], [2, 3, 4], [1, 2, 3, 4, 5], 1, 3)).toBe(1);
44 | });
45 |
46 | describe('if land on guard', () => {
47 | it('(back) 4 -> 0 -> 4', () => {
48 | // jump to the last
49 | expect(newFocus([2, 3, 4], [2, 3, 4], [guard, 2, 3, 4, 5], guard, 4)).toBe(2);
50 | });
51 |
52 | it('(back) 3 -> 0 -> 4', () => {
53 | // jump to the last
54 | expect(newFocus([2, 3, 4], [2, 3, 4], [guard, 2, 3, 4, 5], guard, 3)).toBe(2);
55 | });
56 |
57 | it('(forward) 3 -> 5 -> 1', () => {
58 | // jump to the last
59 | expect(newFocus([2, 3, 4], [2, 3, 4], [1, 2, 3, 4, guard], guard, 4)).toBe(0);
60 | });
61 |
62 | it('(forward) 4 -> 5 -> 1', () => {
63 | // jump to the last
64 | expect(newFocus([2, 3, 4], [2, 3, 4], [2, 2, 3, 4, guard], guard, 3)).toBe(0);
65 | });
66 | });
67 |
68 | describe('radios', () => {
69 | const radio = {
70 | tagName: 'INPUT',
71 | type: 'radio',
72 | name: 'x',
73 | };
74 | const radio1 = Object.assign({}, radio);
75 | const radio2 = Object.assign({}, radio);
76 | const radioChecked = Object.assign({ checked: true }, radio);
77 |
78 | it('picks active radio to left', () => {
79 | const innerNodes = [radio1, radioChecked, 4];
80 | expect(newFocus(innerNodes, innerNodes, [1, ...innerNodes, 5], 5, 4)).toBe(1);
81 | });
82 |
83 | it('picks active radio to right', () => {
84 | const innerNodes = [1, radio1, radioChecked, radio2];
85 | expect(newFocus(innerNodes, innerNodes, [0, ...innerNodes, 5], 0, 1)).toBe(2);
86 | });
87 |
88 | it('jump out via last node', () => {
89 | const innerNodes = [1, radioChecked];
90 | expect(newFocus(innerNodes, innerNodes, [0, ...innerNodes, 5], 5, radioChecked)).toBe(0);
91 | });
92 |
93 | it('jump out via unchecked node', () => {
94 | // radio1 and radio2 should be invisible to algo
95 | const innerNodes = [1, radioChecked, radio1, radio2];
96 | expect(newFocus(innerNodes, innerNodes, [0, ...innerNodes, 5], 5, radioChecked)).toBe(0);
97 | });
98 | });
99 |
100 | it('should select auto focused', () => {
101 | expect(newFocus([2, 3, 4], [2, 3, 4], [1, 2, 3, 4, 5], 1, 0)).toBe(NEW_FOCUS);
102 | });
103 |
104 | it('should restore last tabbable', () => {
105 | expect(newFocus([2, 3, 4], [2, 3, 4], [1, 2, 3, 4, 5], 1, 3)).toBe(1);
106 | });
107 |
108 | it('should restore last focusable', () => {
109 | expect(newFocus([2, 3, 4], [2, 4], [1, 2, 3, 4, 5], 1, 3)).toBe(1);
110 | });
111 | });
112 |
--------------------------------------------------------------------------------
/__tests__/focusables.spec.ts:
--------------------------------------------------------------------------------
1 | import { FOCUS_ALLOW, FOCUS_DISABLED, FOCUS_NO_AUTOFOCUS } from '../src/constants';
2 | import { filterAutoFocusable, getFocusableNodes } from '../src/utils/DOMutils';
3 |
4 | describe('focusables', () => {
5 | it('should remove disabled buttons', () => {
6 | document.body.innerHTML = `
7 |
8 |
9 |
10 |
11 | `;
12 |
13 | const cache = new Map();
14 | const nodes = getFocusableNodes([document.body], cache).map(({ node }) => node);
15 |
16 | expect(nodes.map((el) => el.textContent)).toEqual([
17 | // because it's normal button
18 | 'normal button',
19 | // because it's "marked" as disabled for ARIA only
20 | 'aria-disabled button',
21 | ]);
22 | });
23 | });
24 |
25 | describe('auto-focusables', () => {
26 | it('should pick correct first autofocus', () => {
27 | document.body.innerHTML = `
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 | `;
43 |
44 | const cache = new Map();
45 | const nodes = getFocusableNodes([document.body], cache).map(({ node }) => node);
46 |
47 | expect(filterAutoFocusable(nodes).map((el) => el.textContent)).toEqual([
48 | 'normal button',
49 | 'aria-disabled button',
50 | 'tabindex-1 button',
51 | 'normal button in allow group',
52 | 'normal button in disabled group',
53 | ]);
54 | });
55 | });
56 |
--------------------------------------------------------------------------------
/__tests__/footprint.spec.ts:
--------------------------------------------------------------------------------
1 | import { focusSolver } from '../src';
2 |
3 | describe('Complexity footprint', () => {
4 | const createTest = (n: number) => {
5 | document.body.innerHTML = `
6 |
7 |
8 | ${Array(n)
9 | .fill(1)
10 | .map((_, index) => ``)
11 | .join('\n')}
12 |
13 |
14 |
15 | ${Array(n)
16 | .fill(1)
17 | .map((_, index) => ``)
18 | .join('\n')}
19 |
20 | `;
21 | };
22 |
23 | const querySelector = (q: string): HTMLElement => document.querySelector(q)!;
24 |
25 | beforeEach(() => {
26 | const { getComputedStyle } = window;
27 | jest.spyOn(window, 'getComputedStyle').mockImplementation(getComputedStyle);
28 | });
29 |
30 | afterEach(() => {
31 | (window.getComputedStyle as unknown as jest.SpyInstance).mockRestore();
32 | });
33 |
34 | it('known operation complexity - no focus', () => {
35 | createTest(3);
36 | focusSolver(querySelector('#d1'), null);
37 | expect(window.getComputedStyle).toBeCalledTimes(12);
38 | });
39 |
40 | it('known operation complexity - no focus + 1', () => {
41 | createTest(3 + 1);
42 | focusSolver(querySelector('#d1'), null);
43 | expect(window.getComputedStyle).toBeCalledTimes(14);
44 | });
45 |
46 | it('known operation complexity - has focus inside', () => {
47 | createTest(4);
48 | querySelector('#b1').focus();
49 | focusSolver(querySelector('#d1'), null);
50 | expect(window.getComputedStyle).toBeCalledTimes(8);
51 | });
52 |
53 | it('known operation complexity - has focus inside + 1', () => {
54 | createTest(4 + 1);
55 | querySelector('#b1').focus();
56 | focusSolver(querySelector('#d1'), null);
57 | expect(window.getComputedStyle).toBeCalledTimes(9);
58 | });
59 | });
60 |
--------------------------------------------------------------------------------
/__tests__/iframe.spec.ts:
--------------------------------------------------------------------------------
1 | import { focusSolver, focusNextElement /*, focusPrevElement*/ } from '../src';
2 |
3 | describe('iframes', () => {
4 | afterEach(() => {
5 | document.getElementsByTagName('html')[0].innerHTML = '';
6 | });
7 |
8 | it('support for iframes', () => {
9 | const html = `
10 |
11 |
12 |
13 |
14 |
`;
15 | const iframeHtml = `
16 |
17 |
18 |
19 |
20 | `;
21 | document.body.innerHTML = html;
22 |
23 | const iframe = document.querySelector('iframe') as HTMLIFrameElement;
24 | const root = iframe.contentDocument;
25 |
26 | if (!root) {
27 | throw new Error('Unable to get iframe content document');
28 | }
29 |
30 | root.write(iframeHtml);
31 |
32 | const firstBtn = root.getElementById('firstBtn');
33 |
34 | expect(focusSolver(root.body, null)).toEqual({
35 | node: firstBtn,
36 | });
37 | });
38 |
39 | it('iframe dom element', () => {
40 | const html = `
41 |
42 |
43 |
44 |
45 |
`;
47 | const iframeHtml = `
48 |
49 |
50 | `;
51 | document.body.innerHTML = html;
52 |
53 | const iframe = document.querySelector('iframe') as HTMLIFrameElement;
54 | const root = iframe.contentDocument;
55 |
56 | if (!root) {
57 | throw new Error('Unable to get iframe content document');
58 | }
59 |
60 | root.write(iframeHtml);
61 |
62 | const input = root.querySelector('input') as HTMLInputElement;
63 |
64 | expect(focusSolver(document.body, null)).toEqual({
65 | node: input,
66 | });
67 | });
68 |
69 | // jsdom has no iframe security. We cannot test this here
70 | it('iframe on another domain', () => {
71 | const html = `
72 |
73 |
74 |
75 |
76 |
`;
78 | document.body.innerHTML = html;
79 |
80 | expect(focusSolver(document.body, null)).toEqual({
81 | node: expect.any(HTMLInputElement),
82 | });
83 | });
84 |
85 | it('iframe respect tabIndex', () => {
86 | const html = `
87 |
88 |
89 |
90 |
91 |
`;
93 | const iframeHtml = `
94 |
95 |
96 | `;
97 | document.body.innerHTML = html;
98 |
99 | const iframe = document.querySelector('iframe') as HTMLIFrameElement;
100 | const root = iframe.contentDocument;
101 |
102 | if (!root) {
103 | throw new Error('Unable to get iframe content document');
104 | }
105 |
106 | root.write(iframeHtml);
107 |
108 | const input = root.querySelector('input') as HTMLInputElement;
109 | const button = root.querySelector('button') as HTMLButtonElement;
110 |
111 | expect(focusSolver(document.body, null)).toEqual({
112 | node: document.querySelector('#focused'),
113 | });
114 |
115 | expect(focusSolver([input, button], null)).toEqual({
116 | node: input,
117 | });
118 | });
119 |
120 | it('focusNextElement w/in iframes respects out of order tabIndex', () => {
121 | document.body.innerHTML = `
122 |
123 |
124 |
125 | `;
126 |
127 | const iframeHtml = `
128 |
129 |
130 |
131 |
132 | `;
133 |
134 | const iframe = document.querySelector('iframe') as HTMLIFrameElement;
135 | const root = iframe.contentDocument;
136 |
137 | if (!root) {
138 | throw new Error('Unable to get iframe content document');
139 | }
140 |
141 | root.write(iframeHtml);
142 |
143 | const iframeInput = root.querySelector('input') as HTMLInputElement;
144 | const iframeButton = root.querySelector('button') as HTMLButtonElement;
145 | const input = document.querySelector('input') as HTMLInputElement;
146 | const button = document.querySelector('button') as HTMLButtonElement;
147 |
148 | focusSolver(document.body, null)?.node?.focus();
149 | expect(document.activeElement).toBe(input);
150 |
151 | focusNextElement(input);
152 | expect(document.activeElement).toBe(button);
153 | focusNextElement(button);
154 | expect(root.activeElement).toBe(iframeButton);
155 | focusNextElement(iframeButton);
156 | expect(root.activeElement).toBe(iframeInput);
157 | });
158 | });
159 |
--------------------------------------------------------------------------------
/__tests__/return-focus.spec.ts:
--------------------------------------------------------------------------------
1 | import { captureFocusRestore } from '../src/return-focus';
2 |
3 | const getb = () => {
4 | const b1 = document.getElementById('b1')! as HTMLButtonElement;
5 | const restore = captureFocusRestore(b1);
6 |
7 | return { b1, restore };
8 | };
9 |
10 | test('does nothing for nothing', () => {
11 | document.body.innerHTML = `
12 |
13 | `;
14 |
15 | const restore = captureFocusRestore(document.body);
16 | expect(restore()).toBe(undefined);
17 | });
18 |
19 | test('returns focus to the original location - single node', () => {
20 | document.body.innerHTML = `
21 |
22 | `;
23 |
24 | const { b1, restore } = getb();
25 | expect(restore()).toBe(b1);
26 | });
27 |
28 | test('returns focus to the original location - first of two', () => {
29 | document.body.innerHTML = `
30 |
31 | `;
32 |
33 | const { b1, restore } = getb();
34 | expect(restore()).toBe(b1);
35 | });
36 |
37 | test('returns focus to the original location - second of two', () => {
38 | document.body.innerHTML = `
39 |
40 | `;
41 |
42 | const { b1, restore } = getb();
43 | expect(restore()).toBe(b1);
44 | });
45 |
46 | test('on deletion returns focus to the element to the right location', () => {
47 | document.body.innerHTML = `
48 |
49 | `;
50 |
51 | const { b1, restore } = getb();
52 | b1.parentElement!.removeChild(b1);
53 | expect(restore()).toBe(document.getElementById('b3'));
54 | });
55 |
56 | test('on deletion returns focus to the element to the right location with spaces', () => {
57 | document.body.innerHTML = `
58 |
59 | `;
60 |
61 | const { b1, restore } = getb();
62 | b1.parentElement!.removeChild(b1);
63 | expect(restore()).toBe(document.getElementById('b3'));
64 | });
65 |
66 | test('on deletion returns focus to the focusable element', () => {
67 | document.body.innerHTML = `
68 |
69 | `;
70 |
71 | const { b1, restore } = getb();
72 | b1.parentElement!.removeChild(b1);
73 | expect(restore()).toBe(document.getElementById('b0'));
74 | });
75 |
76 | test('moves focus when default element becomes non focusable', () => {
77 | document.body.innerHTML = `
78 |
79 | `;
80 |
81 | const { b1, restore } = getb();
82 | b1.disabled = true;
83 | expect(restore()).toBe(document.getElementById('b3'));
84 | });
85 |
86 | test('on deletion returns where possible to the left', () => {
87 | document.body.innerHTML = `
88 |