Keyboard-Accessible Help System

Build a keyboard-accessible help system component that displays contextual help information for form inputs. The system should be fully navigable using only keyboard controls (Tab, Shift+Tab, and Escape keys) and should meet accessibility standards for screen reader users.

Requirements

Basic Functionality

Create a HelpfulInput component that wraps a form input field with contextual help. The help information should:

• Appear automatically when the input receives keyboard focus (via Tab navigation)
• Disappear when the input loses focus (blur event)
• Disappear immediately when the Escape key is pressed
• Not appear or interfere with mouse/pointer interactions

Accessibility Requirements

The component must be accessible to screen reader users:

• Help content must be properly announced to screen readers when it appears
• The relationship between the input and its help content must be semantically correct
• The help content should have the appropriate ARIA role

Test Cases

• When tabbing to an input field, the help content appears automatically @test
• When tabbing away from an input field, the help content disappears @test
• When pressing Escape while focused on an input, the help content disappears immediately @test
• The help content has role="tooltip" for screen readers @test

Implementation

@generates

API

import React from 'react';

export interface HelpfulInputProps {
  /** The label for the input field */
  label: string;
  /** The help text to display when the input is focused */
  helpText: string;
  /** The input placeholder text */
  placeholder?: string;
  /** The input name attribute */
  name: string;
}

/**
 * A form input component with keyboard-accessible contextual help.
 * Shows help information when the input receives focus via keyboard navigation.
 */
export function HelpfulInput(props: HelpfulInputProps): React.ReactElement;

Dependencies { .dependencies }

@radix-ui/react-tooltip { .dependency }

Provides accessible tooltip components with keyboard navigation support.