tip #48: Keyboard navigation in the item-picker

tips/2026-09-22-048-a11y-keyboard-navigation-in-the-item-picker.md

@@ -0,0 +1,22 @@
+---
+tip_number: 48
+date: 2026-09-22
+category: a11y
+status: pending
+---
+
+# Tip #48 — Keyboard navigation in the item-picker
+
+**Date:** 2026-09-22  
+**Category:** a11y  
+**Source:** MC-Survival Wiki Daily Tip (cron @ 18:00 MESZ)
+
+## Keyboard navigation in the item-picker
+
+Add full keyboard support to the item picker: arrow keys to move focus across the grid, Enter to select, Escape to close, type-to-search to jump to the first matching item, and proper aria-activedescendant for screen-reader announcements. It solves the mouse-only bottleneck that locks out both power users and screen-reader users, who currently cannot use the picker efficiently. The signal is a measurable share of edits and advanced searches coming from keyboard-heavy users (server-side we can see editor workflows that repeatedly open the picker). Visible focus rings are not optional — without them, the keyboard support is invisible to the user.
+
+## Implementation tips
+
+1. Arrow keys move the focus grid, Enter selects, Escape closes, type-to-search jumps to first match.
+2. Visible focus rings on the focused item (not just default outline — match the theme).
+3. Add aria-activedescendant to the picker container so screen readers announce the focused item.