Emoji Selector with Keyboard Navigation

Build an interactive emoji selector component that allows users to browse and select emojis using comprehensive keyboard navigation. The component should support full keyboard accessibility including arrow key navigation, search functionality, and emoji selection.

Requirements

Core Functionality

The emoji selector should:

1. Display a grid of emojis that users can browse through
2. Include a search input field to filter emojis by name
3. Support full keyboard navigation without requiring a mouse
4. Provide visual feedback for the currently focused emoji
5. Allow users to select emojis and display the selected emoji

Keyboard Navigation Requirements

The component must support the following keyboard interactions:

Arrow Key Navigation:

• ArrowUp: Move focus one row up in the emoji grid
• ArrowDown: Move focus one row down in the emoji grid
• ArrowLeft: Move focus one emoji to the left
• ArrowRight: Move focus one emoji to the right
• Arrow keys should wrap appropriately (e.g., moving right from the last emoji in a row goes to the first emoji of the next row)

Selection and Search:

• Enter: Select the currently focused emoji
• Escape: Clear the search input and return focus to it
• Alphanumeric keys (a-z, 0-9): Automatically focus the search input and type the character
• Ignore shortcuts when modifier keys (Ctrl, Cmd, Alt) are pressed

Standard Navigation:

• Tab and Shift+Tab: Navigate through interactive elements in standard order

Display Requirements

• Show a visual indicator (border, background color, or outline) for the currently focused emoji
• Display the selected emoji in a prominent location (e.g., above or below the grid)
• Ensure the search input is clearly visible
• The emoji grid should be organized in rows and columns

Implementation Notes

• You may use a subset of emojis (at least 30-40 emojis) for the grid
• The grid should have a reasonable layout (e.g., 6-8 emojis per row)
• Focus management should be handled properly to ensure smooth navigation
• The component should be self-contained and testable

Test Cases

1. Arrow key navigation works correctly @test

   • Given the emoji grid is rendered and first emoji is focused
   • When the user presses ArrowRight
   • Then focus should move to the second emoji in the grid

2. Enter key selects focused emoji @test

   • Given an emoji has focus in the grid
   • When the user presses Enter
   • Then the focused emoji should be selected and displayed

3. Escape key clears search @test

   • Given the search input contains text
   • When the user presses Escape
   • Then the search input should be cleared and focused

4. Alphanumeric keys focus and type in search @test

   • Given focus is on an emoji in the grid
   • When the user presses an alphanumeric key (e.g., 's')
   • Then focus should move to the search input and the character should be typed

Dependencies { .dependencies }

emoji-picker-react { .dependency }

Provides a comprehensive emoji picker component with keyboard navigation support.

Implementation

@generates