A11y | Restore Sort focus and valid chip/category roles

[BrianGenisio]

Summary

Sort now keeps keyboard focus across render(), and its tray/category markup is valid ARIA (audits A4, A5, A6).

Closes #23, closes #24, closes #25.

Changes

Tray chips stay <button aria-pressed>. role="listitem" moves to a wrapper, which clears axe aria-allowed-attr.

Category cards are labeled role="group" rather than role="button" wrapping placed chip buttons. The heading is a real button and is the Enter/Space placement control. Click-to-place on the card (except chips) and drag-and-drop are unchanged.

render() captures the focused chip (data-item-index) or category head and restores it after the rebuild, so focus does not land on body.

Characterization tests lock the new contracts. Playwright CI asserts document.activeElement is not body/html after sort-chip-selected and sort-chip-placed. The placed setup always select-then-places, even if a prior run persisted a placement.

Axe dropped aria-allowed-attr and nested-interactive. Floor is aria-input-field-name 2 and color-contrast 25.

The resolution-plan issue map records A1 as Closed (PR #35).

Test plan

• npm test (A4/A5/A6 characterization flipped)
• npm run a11y:ci (floor aria-input-field-name 2, color-contrast 25; Sort focus check)
• Keyboard: select a tray chip, Tab to a category heading, Enter to place. Focus should stay on the chip or heading, not jump to the top of the page.
• Mouse click-to-place (card, not chip) and drag-and-drop still work.
• Confirm unit and axe PR checks stay green.

[coderabbitai]

Caution

Review failed

An error occurred during the review process. Please try again later.

---

_{Comment @coderabbitai help to get the list of available commands.}