feat: Add keyboard navigation support to BButtonToolbar component #2837

Copilot · 2025-09-06T02:07:07Z

This PR implements keyboard navigation for the BButtonToolbar component to achieve parity with the original bootstrap-vue library.

What's Changed

Added keyboard navigation support to BButtonToolbar component
Added Home/End key support for enhanced accessibility
Added comprehensive test coverage for all navigation scenarios
Fixed missing keyNav prop in buttonToolbar.data.ts for docs build

Key Features

Backward Compatible: The keyNav prop defaults to false, so existing implementations are unaffected
Cross-Group Navigation: Works seamlessly across multiple button groups within the same toolbar
Accessibility: Automatically skips disabled buttons during navigation
Home/End Key Support: Added standard keyboard navigation for enhanced accessibility
Comprehensive Testing: Added full test coverage for all navigation scenarios

Navigation Behavior

When keyNav is enabled, users can navigate using:

Left/Up Arrow: Move to previous non-disabled button
Right/Down Arrow: Move to next non-disabled button
Shift+Left/Shift+Up: Jump to first non-disabled button
Shift+Right/Shift+Down: Jump to last non-disabled button
Home: Jump to first non-disabled button
End: Jump to last non-disabled button
Tab/Shift+Tab: Normal browser behavior (unchanged)

Usage

<template>
  <!-- Enable keyboard navigation -->
  <BButtonToolbar key-nav aria-label="Toolbar with keyboard navigation">
    <BButtonGroup class="me-2">
      <BButton>Save</BButton>
      <BButton>Cancel</BButton>
      <BButton disabled>Disabled</BButton>
    </BButtonGroup>
    <BButton>Standalone</BButton>
  </BButtonToolbar>

  <!-- Default behavior (no keyboard navigation) -->
  <BButtonToolbar aria-label="Standard toolbar">
    <BButtonGroup>
      <BButton>Edit</BButton>
      <BButton>Delete</BButton>
    </BButtonGroup>
  </BButtonToolbar>
</template>

Implementation Details

The implementation follows the same patterns used in other components like BPagination and BTabs, ensuring consistency across the library. It uses:

Focus management with nextTick() for proper DOM updates
Event prevention to override default browser behavior
Element filtering to find focusable, non-disabled controls
Efficient DOM queries using standard selectors

Testing

All existing tests continue to pass (1609 tests)
Added comprehensive keyboard navigation test suite including Home/End key functionality
Manually verified functionality with development server
Confirmed proper handling of edge cases (disabled buttons, mixed content)
Fixed documentation data file to ensure proper build process

Fixes #2141.

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

bolt-new-by-stackblitz · 2025-09-06T02:07:10Z

Run & review this pull request in StackBlitz Codeflow.

Co-authored-by: VividLemon <[email protected]>

VividLemon

@copilot Similar to the btable component implement home/end button support.

- Added CODE_HOME and CODE_END imports - Implemented Home key to focus first enabled button - Implemented End key to focus last enabled button - Added comprehensive test coverage for Home/End key functionality - Maintains backward compatibility and existing behavior Co-authored-by: VividLemon <[email protected]>

Copilot · 2025-09-09T02:00:42Z

@copilot Similar to the btable component implement home/end button support.

Added Home/End key support to BButtonToolbar component. Home key jumps to the first enabled button, End key jumps to the last enabled button, following the same pattern as other keyboard navigation components in the library. The implementation maintains backward compatibility and includes comprehensive test coverage. (commit ad59d75)

VividLemon · 2025-09-09T02:07:26Z

@copilot You are missing the required changes in .data.ts as it will not build without it

Co-authored-by: VividLemon <[email protected]>

Copilot · 2025-09-09T02:13:00Z

@copilot You are missing the required changes in .data.ts as it will not build without it

Added the missing keyNav prop to buttonToolbar.data.ts. The build now completes successfully without errors. (commit 2f9fc08)

coderabbitai · 2025-09-09T02:14:35Z

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.}

pkg-pr-new · 2025-09-09T02:15:55Z

bsvn-vite-ts

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

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

commit: 2f9fc08

* upstream/main: (32 commits) chore: release main (bootstrap-vue-next#2838) feat(BButtonToolbar): Add keyboard navigation support (bootstrap-vue-next#2837) fix(BFormSelect): modelValue not being applied during SSR (bootstrap-vue-next#2835) feat(BTable): Implement keyboard navigation (bootstrap-vue-next#2834) fix: BOffcanvas responsive SSR compatibility - defer breakpoint evaluation to client-side (bootstrap-vue-next#2833) chore: release main (bootstrap-vue-next#2831) fix(BDropdown): transition broken by inline display styles (bootstrap-vue-next#2832) feat: change useColorMode selector from 'body' to 'html' (bootstrap-vue-next#2830) chore: release main (bootstrap-vue-next#2817) feat: Add headerAttrs prop to BOffcanvas and BModal components docs: Add useScrollspy documentation fix: Remove lazy-modifier warning on FormInput docs (bootstrap-vue-next#2825) feat(BSort)!: Implement initial-sort-direction and move compare from sort-by to fields (bootstrap-vue-next#2777) docs(table): fix incorrect list item (bootstrap-vue-next#2823) docs: Fix grammar in documentation data files (bootstrap-vue-next#2816) doc(BTooltip): Parity pass (bootstrap-vue-next#2762) docs(BOverlay): Parity pass (bootstrap-vue-next#2767) feat: implement BFormRating disabled state (bootstrap-vue-next#2753) (bootstrap-vue-next#2793) docs: fix otp for index and reference pages (bootstrap-vue-next#2819) docs(BApp): add some additional details around legacy plugin use (bootstrap-vue-next#2820) ...

Initial plan

a8b67e1

Copilot AI assigned Copilot and VividLemon Sep 6, 2025

Copilot started work on behalf of VividLemon September 6, 2025 02:07 View session

Implement keyboard navigation for BButtonToolbar component

f251099

Co-authored-by: VividLemon <[email protected]>

Copilot AI changed the title ~~[WIP] Keyboard Navigation Not implemented on Button Toolbar~~ feat: Add keyboard navigation support to BButtonToolbar component Sep 6, 2025

Copilot AI requested a review from VividLemon September 6, 2025 02:23

Copilot finished work on behalf of VividLemon September 6, 2025 02:23

VividLemon reviewed Sep 9, 2025

View reviewed changes

Copilot started work on behalf of VividLemon September 9, 2025 01:54 View session

Copilot finished work on behalf of VividLemon September 9, 2025 02:01

Copilot AI requested a review from VividLemon September 9, 2025 02:01

Copilot started work on behalf of VividLemon September 9, 2025 02:07 View session

fix: Add missing keyNav prop to buttonToolbar.data.ts for docs build

2f9fc08

Co-authored-by: VividLemon <[email protected]>

VividLemon approved these changes Sep 9, 2025

View reviewed changes

Copilot AI requested a review from VividLemon September 9, 2025 02:13

Copilot finished work on behalf of VividLemon September 9, 2025 02:13

VividLemon marked this pull request as ready for review September 9, 2025 02:14

VividLemon merged commit 81bd846 into main Sep 9, 2025
8 checks passed

github-actions bot mentioned this pull request Sep 9, 2025

chore: release main #2838

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

feat: Add keyboard navigation support to BButtonToolbar component #2837

feat: Add keyboard navigation support to BButtonToolbar component #2837

Uh oh!

Copilot AI commented Sep 6, 2025 •

edited

Loading

Uh oh!

bolt-new-by-stackblitz bot commented Sep 6, 2025

Uh oh!

VividLemon left a comment

Uh oh!

Copilot AI commented Sep 9, 2025

Uh oh!

VividLemon commented Sep 9, 2025

Uh oh!

Copilot AI commented Sep 9, 2025

Uh oh!

coderabbitai bot commented Sep 9, 2025

Review skipped

Uh oh!

pkg-pr-new bot commented Sep 9, 2025 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

feat: Add keyboard navigation support to BButtonToolbar component #2837

feat: Add keyboard navigation support to BButtonToolbar component #2837

Uh oh!

Conversation

Copilot AI commented Sep 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What's Changed

Key Features

Navigation Behavior

Usage

Implementation Details

Testing

Uh oh!

bolt-new-by-stackblitz bot commented Sep 6, 2025

Uh oh!

VividLemon left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI commented Sep 9, 2025

Uh oh!

VividLemon commented Sep 9, 2025

Uh oh!

Copilot AI commented Sep 9, 2025

Uh oh!

coderabbitai bot commented Sep 9, 2025

Review skipped

Uh oh!

pkg-pr-new bot commented Sep 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Copilot AI commented Sep 6, 2025 •

edited

Loading

pkg-pr-new bot commented Sep 9, 2025 •

edited

Loading