Skip to content
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

enabled arrow navigation with Tabbable #33293

Draft
wants to merge 6 commits into
base: charting/web-components
Choose a base branch
from
Draft

enabled arrow navigation with Tabbable #33293

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
5e96a31
enabled arrow navigation with Tabbable
Anush2303 Nov 19, 2024
cc8670c
Merge branch 'charting/web-components' into usr/agupta/webc/tabbable
Anush2303 Nov 19, 2024
53eaa8b
revert change
Anush2303 Nov 19, 2024
f486cb3
Merge branch 'usr/agupta/webc/tabbable' of https://github.com/microso…
Anush2303 Nov 19, 2024
2674543
added id to chart container
Anush2303 Nov 19, 2024
6ae9f77
resolved comments
Anush2303 Nov 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion ...ges/charts/chart-web-components/src/horizontal-bar-chart/horizontal-bar-chart.template.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,12 @@ export function horizontalbarchartTemplate<T extends HorizontalBarChart>(): Elem
${when(
x => !x.hideLegends,
html<T>`
<div class="legendcontainer" role="listbox" aria-label="${x => x.legendListLabel || 'Legends'}">
<div
id="legend-div"
Anush2303 marked this conversation as resolved.
Show resolved Hide resolved
class="legendcontainer"
role="listbox"
aria-label="${x => x.legendListLabel || 'Legends'}"
>
${repeat(
x => x.uniqueLegends,
html<ChartDataPoint, T>` <button
Expand Down
66 changes: 64 additions & 2 deletions packages/charts/chart-web-components/src/horizontal-bar-chart/horizontal-bar-chart.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';

Expand Down Expand Up @@ -48,7 +49,6 @@ export class HorizontalBarChart extends FASTElement {

public rootDiv!: HTMLDivElement;
public chartContainer!: HTMLDivElement;

private _isRTL: boolean = false;
private barHeight: number = 12;
private _bars: SVGRectElement[] = [];
Expand All @@ -62,6 +62,8 @@ export class HorizontalBarChart extends FASTElement {

this.initializeData();
this.renderChart();

this.enableTabbability();
}

private initializeData() {
Expand All @@ -71,8 +73,68 @@ export class HorizontalBarChart extends FASTElement {
this.hydrateLegends();
}

public enableTabbability() {
requestAnimationFrame(() => {
const legendContainer = this.shadowRoot?.getElementById('legend-div') as HTMLElement;
if (legendContainer) {
const legendButtons = tabbable.tabbable(legendContainer);
Copy link
Contributor

Choose a reason for hiding this comment

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

do we really need tabbable for this? we already know which elements are focusable and we can select them easily.
you can refer to the implementations of the MenuList, RadioGroup, and Tablist web components to see how they handle this.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

yes, can select those elements directly also. That what is the functionality of Tabbale. It only helps in identifying the focusable elements.

let currentLegendIndex = 0;

legendContainer.addEventListener('keydown', (event: KeyboardEvent) => {
Anush2303 marked this conversation as resolved.
Show resolved Hide resolved
// Only handle Arrow keys for legend buttons
if (legendButtons.length > 0) {
currentLegendIndex = this.handleArrowNavigation(event, legendButtons, currentLegendIndex, this._isRTL);
}
});
}
// Handle navigation for tabbable elements inside root div
const rootDiv = this.shadowRoot?.getElementById('root-div');
if (rootDiv) {
const tabbableElements = tabbable.tabbable(rootDiv);
let currentIndex = 0;

rootDiv.addEventListener('keydown', (event: KeyboardEvent) => {
Copy link
Contributor

Choose a reason for hiding this comment

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

does pressing tab key still move focus to the next bar segment or does it move to elements in the next focusable group?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

It still moves to the next bar segment. Moving to the next bar is the functionality of Groupper which needs to be implemented separately like Arrow navigation.

if (tabbableElements.length > 0 && event.target && tabbableElements.includes(event.target as HTMLElement)) {
currentIndex = this.handleArrowNavigation(event, tabbableElements, currentIndex, this._isRTL);
}
});
}
});
}
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');
Anush2303 marked this conversation as resolved.
Show resolved Hide resolved
chartContainerDiv
.selectAll('div')
.data(this.data!)
Expand Down
Loading