enabled arrow navigation with Tabbable

packages/charts/chart-web-components/src/horizontal-bar-chart/horizontal-bar-chart.template.ts

@@ -7,14 +7,21 @@ import { ChartDataPoint } from './horizontal-bar-chart.options.js';
  *
  * @public
  */
-export function horizontalbarchartTemplate<T extends HorizontalBarChart>(): ElementViewTemplate<T> {
+export function horizontalbarchartTemplate<T extends HorizontalBarChart>(this: any): ElementViewTemplate<T> {
   return html<T>`
     <template ${ref('rootDiv')}>
-      <div ${ref('chartContainer')}></div>
+      <div ${ref('chartContainer')} @keydown="${(x, c) => x.handleRootDivKeydown(c.event as KeyboardEvent)}"></div>
       ${when(
         x => !x.hideLegends,
         html<T>`
-          <div class="legendcontainer" role="listbox" aria-label="${x => x.legendListLabel || 'Legends'}">
+          <div
+            ${ref('legendContainer')}
+            id="legend-div"
+            class="legendcontainer"
+            role="listbox"
+            aria-label="${x => x.legendListLabel || 'Legends'}"
+            @keydown="${(x, c) => x.handleLegendKeydown(c.event as KeyboardEvent)}"
+          >
             ${repeat(
               x => x.uniqueLegends,
               html<ChartDataPoint, T>` <button

packages/charts/chart-web-components/src/horizontal-bar-chart/horizontal-bar-chart.ts

@@ -1,5 +1,6 @@
 import { attr, FASTElement, observable } from '@microsoft/fast-element';
 import { create as d3Create, select as d3Select } from 'd3-selection';
+import * as tabbable from 'tabbable';
 import { getRTL, jsonConverter, SVG_NAMESPACE_URI, validateChartPropsArray } from '../utils/chart-helpers.js';
 import { ChartDataPoint, ChartProps, Variant } from './horizontal-bar-chart.options.js';
 
@@ -48,10 +49,12 @@ export class HorizontalBarChart extends FASTElement {
 
   public rootDiv!: HTMLDivElement;
   public chartContainer!: HTMLDivElement;
-
+  public legendContainer!: HTMLDivElement;
   private _isRTL: boolean = false;
   private barHeight: number = 12;
   private _bars: SVGRectElement[] = [];
+  public currentLegendIndex: number = 0;
+  public currentRootdivIndex: number = 0;
 
   connectedCallback() {
     super.connectedCallback();
@@ -70,9 +73,40 @@ export class HorizontalBarChart extends FASTElement {
     }
     this.hydrateLegends();
   }
+  private handleArrowNavigation(
+    event: KeyboardEvent,
+    elements: tabbable.FocusableElement[],
+    currentIndex: number,
+    isRTL: boolean,
+  ): number {
+    let nextIndex = currentIndex;
+
+    // Handle ArrowRight and ArrowLeft
+    switch (event.key) {
+      case 'ArrowRight':
+        event.preventDefault();
+        nextIndex = isRTL
+          ? (currentIndex - 1 + elements.length) % elements.length
+          : (currentIndex + 1) % elements.length;
+        break;
+
+      case 'ArrowLeft':
+        event.preventDefault();
+        nextIndex = isRTL
+          ? (currentIndex + 1) % elements.length
+          : (currentIndex - 1 + elements.length) % elements.length;
+        break;
+
+      default:
+        return currentIndex;
+    }
 
+    // Focus the next element
+    elements[nextIndex]?.focus();
+    return nextIndex;
+  }
   public renderChart() {
-    const chartContainerDiv = d3Select(this.chartContainer);
+    const chartContainerDiv = d3Select(this.chartContainer).attr('id', 'root-div');
     chartContainerDiv
       .selectAll('div')
       .data(this.data!)
@@ -451,4 +485,25 @@ export class HorizontalBarChart extends FASTElement {
       });
     }
   };
+
+  // Legend keydown event handler
+  public handleLegendKeydown(event: KeyboardEvent): void {
+    const legendButtons = tabbable.tabbable(this.legendContainer);
+    if (legendButtons.length > 0) {
+      this.currentLegendIndex = this.handleArrowNavigation(event, legendButtons, this.currentLegendIndex, this._isRTL);
+    }
+  }
+
+  // Root div keydown event handler
+  public handleRootDivKeydown(event: KeyboardEvent): void {
+    const tabbableElements = tabbable.tabbable(this.chartContainer);
+    if (tabbableElements.length > 0 && event.target && tabbableElements.includes(event.target as HTMLElement)) {
+      this.currentRootdivIndex = this.handleArrowNavigation(
+        event,
+        tabbableElements,
+        this.currentRootdivIndex,
+        this._isRTL,
+      );
+    }
+  }
 }