fix: tab focus on disabled elements false positive (#202)

Co-authored-by: Ben Monro <ben.monro@gmail.com>

__tests__/react/tab.js

@@ -245,3 +245,23 @@ describe("userEvent.tab", () => {
     });
   });
 });
+
+it("should not focus disabled elements", () => {
+  const { getByTestId } = render(
+    <div>
+      <input data-testid="one" />
+      <input tabIndex={-1} />
+      <button disabled>click</button>
+      <input disabled />
+      <input data-testid="five" />
+    </div>
+  );
+
+  const [one, five] = [getByTestId("one"), getByTestId("five")];
+
+  userEvent.tab();
+  expect(one).toHaveFocus();
+
+  userEvent.tab();
+  expect(five).toHaveFocus();
+});

src/index.js

@@ -241,8 +241,9 @@ const userEvent = {
     const focusableElements = focusTrap.querySelectorAll(
       "input, button, select, textarea, a[href], [tabindex]"
     );
+
     let list = Array.prototype.filter.call(focusableElements, function (item) {
-      return item.getAttribute("tabindex") !== "-1";
+      return item.getAttribute("tabindex") !== "-1"&& !item.disabled;
     }).map((el, idx) => ({ el, idx }))
       .sort((a, b) => {
         const tabIndexA = a.el.getAttribute("tabindex");