fix: exclude hidden type inputs from focusable selector (#467)

* fix(tab): exclude hidden type inputs from focusable selector

* make test leaner

Co-authored-by: Michael Mitchell <michael.mitchell@mongodb.com>

src/__tests__/focus.js

@@ -43,6 +43,15 @@ test('no events fired on a disabled focusable input', () => {
   expect(element).not.toHaveFocus()
 })
 
+test('no events fired on a hidden input', () => {
+  const {element, getEventSnapshot} = setup(`<input type="hidden" />`)
+  focus(element)
+  expect(getEventSnapshot()).toMatchInlineSnapshot(
+    `No events were fired on: input[value=""]`,
+  )
+  expect(element).not.toHaveFocus()
+})
+
 test('no events fired if the element is already focused', () => {
   const {element, getEventSnapshot, clearEventCalls} = setup(`<button />`)
   focus(element)

src/__tests__/tab.js

@@ -221,7 +221,7 @@ test('should respect tab index order, then DOM order', () => {
   expect(checkbox).toHaveFocus()
 })
 
-test('should suport a mix of elements with/without tab index', () => {
+test('should support a mix of elements with/without tab index', () => {
   setup(`
     <div>
       <input data-testid="element" tabIndex="0" type="checkbox" />
@@ -287,6 +287,24 @@ test('should not tab to <a> with no href', () => {
   expect(link).toHaveFocus()
 })
 
+test('should not tab to <input> with type="hidden"', () => {
+  const {
+    elements: [checkbox, , text],
+  } = setup(`
+    <input tabIndex="0" type="checkbox" />
+    <input type="hidden" />
+    <input type="text" />
+  `)
+
+  userEvent.tab()
+
+  expect(checkbox).toHaveFocus()
+
+  userEvent.tab()
+
+  expect(text).toHaveFocus()
+})
+
 test('should stay within a focus trap', () => {
   setup(`
     <>

src/utils.js

@@ -219,7 +219,7 @@ function setSelectionRangeIfNecessary(
 }
 
 const FOCUSABLE_SELECTOR = [
-  'input:not([disabled])',
+  'input:not([type=hidden]):not([disabled])',
   'button:not([disabled])',
   'select:not([disabled])',
   'textarea:not([disabled])',