This PR implements comprehensive keyboard accessibility for BTable components, bringing the functionality in line with the original Bootstrap-vue implementation. The keyboard navigation enables users to interact with tables using only the keyboard, improving accessibility for users with disabilities and keyboard-only workflows.

Features Implemented

Header Navigation

• Automatic tabindex management: Sortable headers automatically receive tabindex="0" for keyboard focus
• Keyboard activation: Enter and Space keys trigger header sorting functionality
• Seamless integration: Works with all existing sorting features without breaking changes

Row Navigation

• Conditional tabindex: Data rows receive tabindex="0" when table is in selectable mode
• Arrow key navigation:
  • Up/Down arrows move focus between rows
  • Home/End keys jump to first/last row
  • Shift+Up/Down also jump to first/last row
• Row activation: Enter/Space keys trigger row selection and row-clicked events
• Focus management: Programmatic focus movement maintains proper keyboard navigation state

Technical Implementation

The implementation uses Vue 3's provide/inject mechanism for internal communication between BTable and BTableLite components. BTable provides keyboard navigation state through a tableKeyboardNavigationKey injection, which BTableLite consumes to determine when to enable keyboard functionality based on:

• Headers: Enabled when fields are sortable
• Rows: Enabled when table is in selectable mode (selectable: true and noSelectOnClick: false)

Key technical details:

• Uses provide/inject pattern for clean internal component communication
• Event handlers prevent default browser behavior for navigation keys
• DOM queries use table ID for efficient row selection
• Full TypeScript support with proper typing
• Minimal performance overhead
• Backward compatible with all existing features

Testing

Added comprehensive test suite (table-keyboard.spec.ts) covering:

• Tabindex management for headers and rows
• Keyboard event handling (Enter, Space, Arrow keys)
• Integration with selection and sorting features
• Edge cases and error conditions

Demo

The screenshot shows the working keyboard navigation demo with:

• Sortable headers that can be activated with Tab + Enter/Space
• Selectable rows that support arrow key navigation
• Real-time feedback showing selected items and events

Usage Example

<template>
  <!-- Headers are automatically keyboard accessible when sortable -->
  <!-- Rows are automatically keyboard accessible when selectable -->
  <BTable
    :items="items"
    :fields="fields" 
    selectable
    v-model:selected-items="selectedItems"
  />
</template>

Keyboard interactions:

• Tab to navigate to headers/rows
• Enter/Space to sort headers or select rows
• Arrow keys to navigate between rows
• Home/End to jump to first/last row

Fixes #1259.

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.