Mirror: React hooks for accessible, common web interactions. UI super powers without the UI.
Add test for nested useMenuFocus hooks
+59
+59
src/__tests__/useMenuFocus.test.tsx
+59
src/__tests__/useMenuFocus.test.tsx
···
142
142
cy.realPress('Escape');
143
143
cy.get('@input').should('have.focus');
144
144
});
145
+
146
+
it('behaves nicely for nested menus', () => {
147
+
const InnerMenu = () => {
148
+
const ref = useRef<HTMLUListElement>(null);
149
+
useMenuFocus(ref);
150
+
151
+
return (
152
+
<ul ref={ref}>
153
+
<li tabIndex={0}>Inner #1</li>
154
+
<li tabIndex={0}>Inner #2</li>
155
+
</ul>
156
+
);
157
+
};
158
+
159
+
const OuterMenu = () => {
160
+
const ref = useRef<HTMLUListElement>(null);
161
+
useMenuFocus(ref);
162
+
163
+
return (
164
+
<ul ref={ref}>
165
+
<li tabIndex={0}>Outer #1</li>
166
+
<InnerMenu />
167
+
</ul>
168
+
);
169
+
};
170
+
171
+
mount(
172
+
<main>
173
+
<button tabIndex={-1}>Start</button>
174
+
<OuterMenu />
175
+
</main>
176
+
);
177
+
178
+
// Moves into the inner menu as needed
179
+
cy.get('button').first().focus();
180
+
cy.focused().contains('Start');
181
+
cy.realPress('Tab');
182
+
cy.focused().contains('Outer #1');
183
+
cy.realPress('Tab');
184
+
cy.focused().contains('Inner #1');
185
+
cy.realPress('Tab');
186
+
cy.focused().contains('Inner #2');
187
+
cy.realPress('ArrowDown');
188
+
cy.focused().contains('Inner #1');
189
+
cy.realPress('Escape');
190
+
cy.focused().contains('Start');
191
+
192
+
// Can move from outer to inner seamlessly
193
+
cy.get('button').first().focus();
194
+
cy.focused().contains('Start');
195
+
cy.realPress('Tab');
196
+
cy.focused().contains('Outer #1');
197
+
cy.realPress('ArrowDown');
198
+
cy.focused().contains('Inner #1');
199
+
cy.realPress('ArrowDown');
200
+
cy.focused().contains('Inner #2');
201
+
cy.realPress('ArrowDown');
202
+
cy.focused().contains('Inner #1');
203
+
});