Skip to content

feat: add NumpadEnter support for BTable and BFormTags keyboard navigation (accessibility) #2884

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
VividLemon merged 2 commits into from
Oct 22, 2025
Merged

feat: add NumpadEnter support for BTable and BFormTags keyboard navigation (accessibility) #2884

VividLemon merged 2 commits into from
Oct 22, 2025

Conversation

Copy link
Contributor

Copilot AI commented Oct 22, 2025 •
edited
Loading

Description

Fixes an accessibility issue where BTable header sorting and row selection, as well as BFormTags tag addition, were not responding to the NumpadEnter key press. Users who prefer or rely on the numeric keypad for navigation could not interact with these components using the Enter key on the numpad.

Changes

Components Updated

BTableLite.vue

  • Enhanced handleHeaderKeydown to recognize NumpadEnter in addition to Enter for sortable header navigation
  • Enhanced handleRowKeydown to recognize NumpadEnter in addition to Enter for row selection and interaction

BFormTags.vue

  • Updated onKeydown to recognize NumpadEnter via e.code check as a fallback alongside the existing e.key === 'Enter' check

Testing

Added comprehensive test coverage in table-keyboard.spec.ts:

  • Sorting table headers with NumpadEnter
  • Clicking table rows with NumpadEnter
  • Row selection mode with NumpadEnter
  • Integration with existing sorting functionality

All 1637 existing tests continue to pass, plus 4 new tests specifically for NumpadEnter support.

Technical Details

The implementation uses the code property of KeyboardEvent to detect NumpadEnter, which is the standardized way to distinguish between the main Enter key (code: 'Enter') and the numpad Enter key (code: 'NumpadEnter'). Both keys report key: 'Enter', but have different code values.

Impact

  • ✅ No breaking changes
  • ✅ Fully backwards compatible
  • ✅ Improves keyboard accessibility
  • ✅ Follows WAI-ARIA keyboard navigation best practices

Closes #[issue_number]

Original prompt

This section details on the original issue you should resolve

<issue_title>[BTable] and other components key events handling 'Enter' key code should also handle 'NumpadEnter' key code (accessibility)</issue_title>
<issue_description>### Describe the bug

In a BTable header column with sort capabilities, pressing 'Enter' changes the sort order by if you press enter on the numpad it does nothing.
Key handling functions should take in account 'NumpadEnter' as well as 'Enter' key code

Reproduction

not needed

Used Package Manager

pnpm</issue_description>

Comments on the Issue (you are @copilot in this section)

Fixes #2876

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

@bolt-new-by-stackblitz
Copy link

bolt-new-by-stackblitz bot commented Oct 22, 2025

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

@coderabbitai
Copy link

coderabbitai bot commented Oct 22, 2025

Important

Review skipped

Bot user detected.

To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Comment @coderabbitai help to get the list of available commands and usage tips.

@VividLemon VividLemon marked this pull request as ready for review October 22, 2025 01:13
Copilot AI changed the title [WIP] Fix BTable key events to handle NumpadEnter feat: add NumpadEnter support for BTable and BFormTags keyboard navigation (accessibility) Oct 22, 2025
Copilot AI requested a review from VividLemon October 22, 2025 01:14
@pkg-pr-new
Copy link

pkg-pr-new bot commented Oct 22, 2025

bsvn-vite-ts

npm i https://pkg.pr.new/bootstrap-vue-next/bootstrap-vue-next@2884

npm i https://pkg.pr.new/bootstrap-vue-next/bootstrap-vue-next/@bootstrap-vue-next/nuxt@2884

commit: 53d142c

@VividLemon VividLemon merged commit bdf6fee into main Oct 22, 2025
5 checks passed
@github-actions github-actions bot mentioned this pull request Oct 22, 2025
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@VividLemon VividLemon Awaiting requested review from VividLemon

Assignees

@VividLemon VividLemon

Copilot code review Copilot

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[BTable] and other components key events handling 'Enter' key code should also handle 'NumpadEnter' key code (accessibility)

2 participants

@VividLemon