fix(utils): useTabFocusWrap when only one element

This makes it so that if you click within the area and hit tab, the item
will be correctly focused.

packages/utils/src/wia-aria/__tests__/useTabFocusWrap.tsx

@@ -8,13 +8,15 @@ interface Props {
   disableFocusCache?: boolean;
   onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
   count: 1 | 2 | 3;
+  tabIndex?: number;
 }
 
 function Test({
   onKeyDown,
   disableFocusCache,
   disabled,
   count,
+  tabIndex,
 }: Props): ReactElement {
   const handleKeyDown = useTabFocusWrap({
     onKeyDown,
@@ -23,7 +25,7 @@ function Test({
   });
 
   return (
-    <div onKeyDown={handleKeyDown} data-testid="div">
+    <div onKeyDown={handleKeyDown} data-testid="div" tabIndex={tabIndex}>
       {count >= 1 && <input data-testid="input-1" type="text" />}
       {count >= 2 && <input data-testid="input-2" type="text" />}
       {count >= 3 && <input data-testid="input-3" type="text" />}
@@ -33,16 +35,17 @@ function Test({
 
 describe("useTabFocusWrap", () => {
   it("should not focus a different element if there is only one focusable child", () => {
-    const { getByTestId } = render(<Test count={1} />);
+    const { getByTestId } = render(<Test count={1} tabIndex={-1} />);
 
     const input = getByTestId("input-1");
     input.focus();
     expect(document.activeElement).toBe(input);
 
-    const inputFocus = jest.spyOn(input, "focus");
-
     fireEvent.keyDown(input, { key: "Tab" });
-    expect(inputFocus).not.toBeCalled();
+    expect(document.activeElement).toBe(input);
+
+    const container = getByTestId("div");
+    fireEvent.keyDown(container, { key: "Tab" });
     expect(document.activeElement).toBe(input);
   });
 

packages/utils/src/wia-aria/useTabFocusWrap.ts

@@ -60,6 +60,7 @@ export function useTabFocusWrap<E extends HTMLElement>({
 
       if (l === 1) {
         event.preventDefault();
+        elements[0].focus();
       } else if (elements[0] === event.target && event.shiftKey) {
         event.preventDefault();
         elements[l - 1].focus();