Testing Keyboard Navigation with Jest and TypeScript

Ensuring your application is accessible and usable via keyboard is crucial for a positive user experience, especially for users with motor impairments or those who prefer keyboard navigation. This challenge asks you to create a Jest test suite to verify that a simple component can be navigated using the keyboard (Tab, Shift+Tab, Arrow keys). This exercise will help you understand how to simulate keyboard events in a testing environment and validate accessibility features.

Problem Description

You are given a React component called KeyboardNavComponent. This component renders a simple list of elements (divs) that should be navigable using the Tab key. The goal is to write a Jest test suite that verifies the following keyboard navigation behaviors:

• Tab Key: Pressing the Tab key should move focus to the next element in the list.
• Shift+Tab Key: Pressing Shift+Tab should move focus to the previous element in the list.
• Arrow Keys (Left/Right): While this is a simplified test, pressing the left and right arrow keys should not change the focus. The focus should remain on the currently selected element.

The component itself is already implemented (provided below). Your task is to write the tests. You'll need to use user-event to simulate keyboard events within your tests.

Key Requirements:

• Use Jest and React Testing Library.
• Use user-event for simulating keyboard events.
• Verify that the tabIndex attribute of the elements changes as expected when navigating with Tab and Shift+Tab.
• Ensure that arrow key presses do not alter the tabIndex of the currently focused element.
• The tests should be robust and handle potential edge cases (e.g., navigating to the first or last element).

Expected Behavior:

The tests should pass if the component's focus management behaves as described above. Failure indicates an issue with the component's keyboard navigation implementation.

Edge Cases to Consider:

• Navigating to the first element with Tab: Focus should not move beyond the first element.
• Navigating to the last element with Tab: Focus should not move beyond the last element.
• Navigating from the first element with Shift+Tab: Focus should move to the second element.
• Navigating from the last element with Shift+Tab: Focus should move to the second-to-last element.
• Arrow key presses should not change focus regardless of the current element.

Examples

Example 1:

Input: Component rendered, initial focus on the first element (tabIndex = 0). Press Tab.
Output: Second element has tabIndex = 0, first element has tabIndex = -1.
Explanation: Tab key moved focus to the next element, updating tabIndex accordingly.

Example 2:

Input: Component rendered, focus on the last element (tabIndex = 0). Press Tab.
Output: No change in tabIndex of any element.
Explanation: Pressing Tab at the last element should not move focus beyond the list.

Example 3:

Input: Component rendered, focus on the first element (tabIndex = 0). Press Left Arrow.
Output: First element still has tabIndex = 0.
Explanation: Arrow key presses should not change focus.

Constraints

• The component KeyboardNavComponent is provided and should not be modified.
• Tests should be written using TypeScript.
• The solution should use user-event for simulating keyboard events.
• Tests should be reasonably performant (avoid unnecessary re-renders or complex setups).

Notes

• You'll need to install the necessary dependencies: npm install --save-dev @testing-library/react @testing-library/user-event jest ts-jest @types/jest
• Consider using within from React Testing Library to target specific elements within the component.
• The tabIndex attribute is used to track focus. A value of 0 indicates the element has focus, while -1 indicates it does not.
• Think about how to reliably determine which element currently has focus within your tests.

// KeyboardNavComponent.tsx (Provided - DO NOT MODIFY)
import React from 'react';

const KeyboardNavComponent: React.FC = () => {
  const elements = Array.from({ length: 5 }, (_, i) => (
    <div key={i} tabIndex={-1}>
      Element {i + 1}
    </div>
  ));

  return <div>{elements}</div>;
};

export default KeyboardNavComponent;