We have a table. It is for inputs. Two types of input. One text and one numbers. Numbers could be up to a max value or min value. Regarding text / string input, again there are set values.
Here is what I want you to do. Recreate this table. But I want it WCAG AA Accessible. I want to be able to use keyboard arrows (or tabs if you think this is better) to move to each cell to make an input. If I move to a number input, I want to be able to type a number, potentially up or down (may interfere with keyboard nav). But, if you enter a value that is above or below the min or max, you should get some sort of message saying, cannot save value. It should stop you from moving to the next until you enter a valid value or it is left empty (empty value is allowed). Regarding the string value - I want to click or tab to this field, it should then allow me to type, but also open up a menu. As you type, the options in the menu filter. If there is only one left, you can press enter and it will save that value and move you to the next one. If there is more than one, you can tab or use arrows to enter into the menu and press enter to use one of the values. If you enter in a string value that does not match anything, then again you cannot save. Does that make sense?
The idea is to elimate users entering in invalid fields!
Now let me read the existing project files to understand the current setup:
Now let me set up the project structure with a todo list and start building:
Let me update the theme and start building the components:
Now let me update the layout.tsx with proper metadata and fonts:
Now let me build the core data types and cell components. I'll create the grid data model, the number cell, and the autocomplete text cell:
Now build the Number Cell component:
Now the Text Cell with autocomplete:
Now let me build the main assessment grid component:
The Agent timed out. Type a new prompt to continue.
Got it - let me simplify everything down to a clean, focused demo. One row, a few columns, showing the number and text input logic clearly.
Good. Now let me clean out the old complex files and build one clean, simple page:
Now let me build the number cell component - clean and focused:
Now the text cell with autocomplete dropdown:
Now the main page - simple, one student row, 4 columns:
Here's what I've built -- a clean, focused assessment table with one student row and 4 columns (2 number inputs, 2 text/autocomplete inputs) demonstrating all your accessibility and validation logic:
Number cells (GPS Score 0-70, Reading Score 0-50): Type a number directly. If it's outside the min/max range, a red error tooltip appears and you're blocked from leaving the cell until you fix it or clear the field. Empty is allowed.
Text cells (GPS Grade, Reading Grade): When you focus the field, a dropdown of valid options appears. As you type, the list filters in real time. Use Arrow keys to highlight options and Enter to select. If only one match remains, Enter auto-selects it. If you type something that doesn't match any option, you're blocked from leaving.
Keyboard navigation: Tab moves forward through cells, Shift+Tab moves backward. Escape reverts your edits. The grid uses proper ARIA roles (grid, gridcell, combobox, spinbutton, role="alert") for screen reader support. A "Saved Values" panel below the table shows the current state of all fields so you can see the validation in action.