Clickable: keyboard navigation improvements

[ascholerChemeketa]

This pull request significantly improves the keyboard accessibility of the ClickableArea interactive component by implementing a roving tab index pattern. Now, only one clickable area is in the tab order at a time, and users can navigate between choices using arrow keys, Home, and End, in line with accessibility best practices. The documentation, code, and tests have all been updated to reflect these changes.

Accessibility Improvements:

• Updated the keyboard navigation model so that only one clickable area is in the page tab order; arrow keys move focus between choices, and Home/End jump to the first/last choice. Tab leaves the group, matching ARIA best practices. (clickable.js, README.md) [1] [2]
• Improved screen reader instructions and documentation to accurately describe the new keyboard navigation. (README.md, clickable.js) [1] [2]

Code Enhancements:

• Refactored event handling and focus management by adding setActiveClickable, focusClickable, and moveClickableFocus methods to manage the roving tab index and keyboard interactions. (clickable.js)

Testing Updates:

• Updated and expanded tests to verify the new navigation model, including checks for arrow key navigation, Home/End keys, and correct tab index management. (clickable.test.js) [1] [2] [3] [4]
• Improved test event simulation to ensure keyboard events are cancelable and default behavior is correctly prevented or allowed. (clickable.test.js)

These changes make the interactive component more accessible and compliant with ARIA guidelines, providing a better experience for keyboard and screen reader users.

[Copilot]

Pull request overview

This pull request updates the ClickableArea interactive to use a roving tabindex keyboard navigation model, improving keyboard and screen reader accessibility by keeping only one choice in the page Tab order while enabling intra-group navigation via Arrow/Home/End keys.

Changes:

• Implemented roving tabindex focus management and Arrow/Home/End key navigation in ClickableArea.
• Updated screen reader instructions and README accessibility documentation to match the new interaction model.
• Expanded tests to validate focus movement, tabindex updates, and default-prevention behavior for relevant keys.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.

File	Description
bases/rsptx/interactives/runestone/clickableArea/js/clickable.js	Adds roving tabindex + focus utilities and keyboard handling for Arrow/Home/End, and focuses on click for consistent active choice behavior.
bases/rsptx/interactives/runestone/clickableArea/test/clickable.test.js	Updates event simulation to be cancelable and adds/updates assertions for roving tabindex and focus navigation behaviors.
bases/rsptx/interactives/runestone/clickableArea/README.md	Updates accessibility documentation to describe the new keyboard navigation model.

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.