Fix Keyboard Accessibility in Content-Type Builder

Issue Validated ✅

The reported accessibility issue exists in the Content-Type Builder. Keyboard and screen reader users cannot activate the Edit and Delete buttons for fields in the field list.

Root Cause

1. Event Handler Type Mismatch: The handleDelete event handler was typed as React.MouseEvent, which doesn't accept keyboard events.
2. Missing Keyboard Event Handlers: The Edit and Delete IconButton components didn't have explicit onKeyDown handlers to handle Enter and Space key presses.
3. Missing Keyboard Sensor: The drag-and-drop functionality only used PointerSensor, making it inaccessible to keyboard users.

Changes Made

1. AttributeRow.tsx (packages/core/content-type-builder/admin/src/components/AttributeRow.tsx)

Updated Event Handler Types

• Changed handleDelete to accept both React.MouseEvent | React.KeyboardEvent
• Changed handleClick to accept both React.MouseEvent | React.KeyboardEvent (optional parameter)

Added Keyboard Event Handlers

• Added handleEditKeyDown: Listens for Enter or Space key and triggers handleClick
• Added handleDeleteKeyDown: Listens for Enter or Space key and triggers handleDelete

Updated IconButtons

• Added onKeyDown={handleEditKeyDown} to Edit IconButton
• Added onKeyDown={handleDeleteKeyDown} to Delete IconButton

2. List.tsx (packages/core/content-type-builder/admin/src/components/List.tsx)

Added Keyboard Support for Drag and Drop

• Imported KeyboardSensor and sortableKeyboardCoordinates from @dnd-kit
• Updated sensors configuration to include both PointerSensor and KeyboardSensor
• Used sortableKeyboardCoordinates for proper sortable keyboard navigation

Testing Performed

✅ yarn lint - All checks passed
✅ yarn setup - Build completed successfully
✅ Code follows existing patterns from useKeyboardDragAndDrop hook

Expected User Impact

After this fix:

• ✅ Keyboard users can press Enter or Space on the Edit button to open the edit modal
• ✅ Keyboard users can press Enter or Space on the Delete button to delete a field
• ✅ Keyboard users can use arrow keys to reorder fields via drag and drop
• ✅ Screen readers will properly announce button actions
• ✅ Full WCAG 2.1 compliance for keyboard navigation

How to test

1. Navigate to Content-Type Builder
2. Create or open a content type with at least one field
3. Using only keyboard:
   • Tab to the Edit button on a field
   • Press Enter or Space - the edit modal should open ✅
   • Tab to the Delete button on a field
   • Press Enter or Space - the delete confirmation should appear ✅
   • Focus on the Drag button and use arrow keys to reorder fields ✅

Testing with Screen Reader

1. Enable a screen reader (NVDA/JAWS on Windows, VoiceOver on Mac)
2. Navigate to Content-Type Builder field list
3. Verify buttons are announced correctly
4. Verify Enter/Space keys activate buttons

Screenshots/Videos

Related issue(s)/PR(s) #24565

Let us know if this is related to any issue/pull request