Skip to content

fix: add keyboard onkeydown handlers to interactive elements#2589

Merged
crivetimihai merged 1 commit intomainfrom
2167-add-keyboard-handlers-in-ui
Jan 31, 2026
Merged

fix: add keyboard onkeydown handlers to interactive elements#2589
crivetimihai merged 1 commit intomainfrom
2167-add-keyboard-handlers-in-ui

Conversation

@marekdano
Copy link
Copy Markdown
Collaborator

✨ Feature PR

🔗 Issue

Closes #2167


🚀 Summary

Add onkeydown handler (onkeypress handler is deprecated) to the HTML elements (div and span) that have onclick handlers to support keyboard users.

Now that we have added the handlers, we can switch to the interactive elements (div, span) on Overview, MCP Registery and Plugins pages with the Tab key:

navigate_with_tab_key-in_cf_ui.mov

🧪 Checks

  • make lint-web passes

Add onkeydown handlers to HTML elements (div and span) that have onclick
handlers to support keyboard users. This enables Tab navigation to
interactive elements on Overview, MCP Registry and Plugins pages.

The implementation:
- Adds a handleKeydown() utility function in admin.js that triggers
  callbacks on Enter or Space key presses
- Adds role="button", tabindex="0", and onkeydown attributes to
  interactive elements
- Includes event.preventDefault() to stop default browser behavior

Closes #2167

Signed-off-by: Marek Dano <mk.dano@gmail.com>
Signed-off-by: Mihai Criveti <crivetimihai@gmail.com>
@crivetimihai crivetimihai force-pushed the 2167-add-keyboard-handlers-in-ui branch from 90b01f4 to 8de3560 Compare January 31, 2026 15:32
@crivetimihai
Copy link
Copy Markdown
Member

Review Summary

Rebased onto main and squashed commits. Made one minor fix to the JSDoc type annotation ({string}{KeyboardEvent}).

Tested:

  • ✅ Keyboard navigation with Tab key works on Overview, MCP Registry, and Plugins pages
  • ✅ Enter key activates interactive elements
  • ✅ Space key activates interactive elements
  • event.preventDefault() correctly prevents page scrolling on Space
  • make lint-web passes

Implementation is correct:

  • Proper WAI-ARIA pattern with role="button" and tabindex="0"
  • aria-label added to Overview cards for screen reader support
  • Follows existing codebase patterns

LGTM! 🎉

Copy link
Copy Markdown
Member

@crivetimihai crivetimihai left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Approved - keyboard accessibility implementation is correct and well-tested.

@crivetimihai crivetimihai merged commit 4538c71 into main Jan 31, 2026
51 checks passed
@crivetimihai crivetimihai deleted the 2167-add-keyboard-handlers-in-ui branch January 31, 2026 15:46
@crivetimihai crivetimihai added this to the Release 1.0.0-RC1 milestone Jan 31, 2026
hughhennelly pushed a commit to hughhennelly/mcp-context-forge that referenced this pull request Feb 8, 2026
Add onkeydown handlers to HTML elements (div and span) that have onclick
handlers to support keyboard users. This enables Tab navigation to
interactive elements on Overview, MCP Registry and Plugins pages.

The implementation:
- Adds a handleKeydown() utility function in admin.js that triggers
  callbacks on Enter or Space key presses
- Adds role="button", tabindex="0", and onkeydown attributes to
  interactive elements
- Includes event.preventDefault() to stop default browser behavior

Closes IBM#2167

Signed-off-by: Marek Dano <mk.dano@gmail.com>
Signed-off-by: Mihai Criveti <crivetimihai@gmail.com>
Co-authored-by: Mihai Criveti <crivetimihai@gmail.com>
Signed-off-by: hughhennnelly <hughhennelly06@gmail.com>
kcostell06 pushed a commit to kcostell06/mcp-context-forge that referenced this pull request Feb 24, 2026
Add onkeydown handlers to HTML elements (div and span) that have onclick
handlers to support keyboard users. This enables Tab navigation to
interactive elements on Overview, MCP Registry and Plugins pages.

The implementation:
- Adds a handleKeydown() utility function in admin.js that triggers
  callbacks on Enter or Space key presses
- Adds role="button", tabindex="0", and onkeydown attributes to
  interactive elements
- Includes event.preventDefault() to stop default browser behavior

Closes IBM#2167

Signed-off-by: Marek Dano <mk.dano@gmail.com>
Signed-off-by: Mihai Criveti <crivetimihai@gmail.com>
Co-authored-by: Mihai Criveti <crivetimihai@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[FEATURE]: Add keyboard handlers to interactive elements

2 participants