feat: add keyboard navigation for select charts #4481

GordonSmith · 2025-10-23T12:55:34Z

Checklist:

Testing:

Copilot

Pull Request Overview

This PR adds keyboard navigation functionality to Column and Pie chart components, enabling users to navigate and interact with chart elements using the Tab key and Space/Enter keys for selection. The changes also update repository references from "trunk" to "main" branch across multiple package.json files.

Key changes:

Adds keyboard navigation support with Tab, Space, and Enter keys for Column and Pie charts
Implements ARIA attributes and focus states for improved accessibility
Updates CSS styling for hover, focus, and selection states with visual feedback
Updates homepage URLs from "trunk" to "main" branch in package.json files

Reviewed Changes

Copilot reviewed 9 out of 10 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
packages/util/package.json	Updated homepage URL from trunk to main branch
packages/observablehq-compiler/package.json	Updated homepage URL from trunk to main branch
packages/markdown-it-plugins/package.json	Updated homepage URL from trunk to main branch (with typo)
packages/dataflow/package.json	Updated homepage URL from trunk to main branch
packages/chart/src/Pie.ts	Added keyboard navigation, ARIA attributes, and slice padding functionality to Pie chart
packages/chart/src/Pie.css	Added CSS for focus states, hover effects, and keyboard navigation styling
packages/chart/src/Column.ts	Added keyboard navigation, ARIA attributes, and Tabster integration to Column chart
packages/chart/src/Column.css	Updated CSS for selected state, added focus and hover styles
packages/chart/index.html	Added demo controls for testing keyboard navigation on both chart types

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-10-23T12:57:11Z

packages/markdown-it-plugins/package.json

        "url": "https://github.com/hpcc-systems/Visualization/issues"
    },
-    "homepage": "https://github.com/hpcc-systems/Visualization/tree/trunk/packages/markdonw-it-plugins"
+    "homepage": "https://github.com/hpcc-systems/Visualization/tree/main/packages/markdonw-it-plugins"


Corrected spelling of 'markdonw' to 'markdown' in the homepage URL path.

Suggested change

"homepage": "https://github.com/hpcc-systems/Visualization/tree/main/packages/markdonw-it-plugins"

"homepage": "https://github.com/hpcc-systems/Visualization/tree/main/packages/markdown-it-plugins"

Copilot · 2025-10-23T12:57:12Z

packages/chart/src/Pie.ts

        this._totalValue = this.calcTotalValue();
-        const innerRadius = this.calcInnerRadius();
        const outerRadius = this.calcOuterRadius();
+        const innerRadius = Math.max(this.calcInnerRadius(), Math.min(outerRadius / 30, 6));


The magic numbers 30 and 6 should be defined as named constants to clarify their purpose (e.g., MIN_INNER_RADIUS_RATIO = 30, MIN_INNER_RADIUS_PIXELS = 6).

Copilot · 2025-10-23T12:57:12Z

packages/chart/src/Pie.ts

+        const paddingValue = this.slicePadding();
+
+        // Use a small pad angle for visual separation
+        const padAngleRadians = paddingValue > 0 ? Math.min(paddingValue, 0.05) : 0;


The magic number 0.05 should be defined as a named constant (e.g., MAX_PAD_ANGLE = 0.05) to clarify the maximum allowed pad angle.

Copilot · 2025-10-23T12:57:12Z

packages/chart/src/Column.ts

            .domain(context.layerColumns(host).filter(function (_d, idx) { return idx > 0; }))
            .rangeRound(isHorizontal ? [0, dataLen] : [dataLen, 0])
-            .paddingInner(this.xAxisSeriesPaddingInner())
+            .paddingInner(Math.max(this.xAxisSeriesPaddingInner(), 0.05))


The magic number 0.05 should be defined as a named constant (e.g., MIN_SERIES_PADDING = 0.05) to clarify the minimum padding value.

Copilot

Pull request overview

Copilot reviewed 17 out of 18 changed files in this pull request and generated 24 comments.

Comments suppressed due to low confidence (2)

packages/common/src/TitleBar.ts:36

The button element (anchor tag) should have role="button" and tabindex="0" attributes for proper accessibility. While anchor tags are naturally focusable, explicitly setting these attributes ensures correct ARIA semantics when the element behaves as a button rather than a link.

        this._i = this._element
            .attr("href", "#")
            .on("click", function () {
                context.click();
                d3Event.preventDefault();
            })
            .on("keydown", function (this: HTMLElement) {
                if (d3Event.key === " " || d3Event.key === "Spacebar" || d3Event.code === "Space") {
                    this.click();
                    d3Event.preventDefault();
                }
            })
            .on("mousemove", this.mouseMove)
            .on("mouseout", this.mouseOut)
            .append("i")
            ;

packages/graph/tests/test6.ts:75

Unused variable g.

        const g = genData2();

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review for a chance to win a $100 gift card. Take the survey.

Copilot · 2025-11-26T14:10:05Z

packages/graph/tests/test6.ts


    constructor() {
        super();
+        const g = genData2();


This variable g is assigned but never used. It appears to be dead code that should be removed.

Suggested change

const g = genData2();

Copilot · 2025-11-26T14:10:06Z

packages/common/src/TitleBar.css

+.common_IconBar {
+    display: flex;
+    flex-flow: row;
+    justify-content: space-between;
+}
+
+.common_IconBar .icon-bar {
+    display: flex;
+    opacity: 0.95;
+    flex-wrap: nowrap;
+    margin: 0px;
+    white-space: nowrap;
+    line-height: 28px;
+    z-index: 1;
+}
+
+.common_IconBar .icon-bar a {
+    position: relative;
+    z-index: 0;
+    text-align: center;
+    padding-top: 4px;
+    padding-left: 2px;
+    padding-right: 2px;
+    padding-bottom: 4px;
+    transition: all 0.3s ease;
+    color: darkgray;
+}
+
+.common_IconBar .icon-bar a:focus,
+.common_IconBar .icon-bar a:focus-visible {
+    outline: 2px solid #0078d4;
+    outline-offset: 2px;
+    z-index: 2;
+}
+
+.common_IconBar .icon-bar a.disabled {
+    opacity: 0.3;
+    pointer-events: none;
+    color: darkgray;
+}
+
+.common_IconBar .icon-bar a:hover {
+    background-color: whitesmoke;
+}
+
+.common_IconBar .icon-bar a {
+    background-color: white;
+}
+
+.common_IconBar .icon-bar a.selected {
+    background-color: #efe5e5;
 }



This CSS block is completely duplicated from lines 1-56. The entire section from .common_IconBar through .common_IconBar .icon-bar a.selected is repeated. This duplication should be removed to improve maintainability and reduce file size.

Suggested change

.common_IconBar {

display: flex;

flex-flow: row;

justify-content: space-between;

}

.common_IconBar .icon-bar {

display: flex;

opacity: 0.95;

flex-wrap: nowrap;

margin: 0px;

white-space: nowrap;

line-height: 28px;

z-index: 1;

}

.common_IconBar .icon-bar a {

position: relative;

z-index: 0;

text-align: center;

padding-top: 4px;

padding-left: 2px;

padding-right: 2px;

padding-bottom: 4px;

transition: all 0.3s ease;

color: darkgray;

}

.common_IconBar .icon-bar a:focus,

.common_IconBar .icon-bar a:focus-visible {

outline: 2px solid #0078d4;

outline-offset: 2px;

z-index: 2;

}

.common_IconBar .icon-bar a.disabled {

opacity: 0.3;

pointer-events: none;

color: darkgray;

}

.common_IconBar .icon-bar a:hover {

background-color: whitesmoke;

}

.common_IconBar .icon-bar a {

background-color: white;

}

.common_IconBar .icon-bar a.selected {

background-color: #efe5e5;

}

Copilot · 2025-11-26T14:10:06Z

packages/chart/src/Column.ts

 import { format as d3Format } from "d3-format";
 import { scaleBand as d3ScaleBand } from "d3-scale";
 import { local as d3Local, select as d3Select } from "d3-selection";
+// import { createTabster, getGroupper, getTabster, type Types as TabsterTypes } from "tabster";


This commented import for tabster should be removed if it's not being used. Leaving commented-out imports reduces code clarity.

Suggested change

// import { createTabster, getGroupper, getTabster, type Types as TabsterTypes } from "tabster";

Copilot · 2025-11-26T14:10:07Z

packages/chart/src/Column.ts

    private textLocal = d3Local<Text>();
    private stackedTextLocal = d3Local<Text>();
    private isHorizontal: boolean;
+    // protected _tabster: TabsterTypes.TabsterCore | null = null;


This commented-out protected property for tabster should be removed if it's not being used. Leaving commented-out code reduces maintainability.

Suggested change

// protected _tabster: TabsterTypes.TabsterCore | null = null;

Copilot · 2025-11-26T14:10:07Z

packages/chart/src/Column.ts

+                columnGEnter.merge(columnGRect as any)
+                    .attr("tabindex", context.tabNavigation() ? 0 : undefined) // Tabster Groupper manages these inner focusables
+                    .attr("role", context.tabNavigation() ? "button" : undefined) // ARIA role for accessibility
+                    .attr("aria-label", context.tabNavigation() ? (d: any) => `${d.column}: ${d.value instanceof Array ? d.value[1] - d.value[0] : d.value}` : undefined) // ARIA label for screen readers


The aria-label for column data should include the category/label from the domain (d.origRow[0]) to provide better context. For example: ${d.origRow[0]} - ${d.column}: ${...} would be more descriptive than just the column name and value.

Suggested change

.attr("aria-label", context.tabNavigation() ? (d: any) => `${d.column}: ${d.value instanceof Array ? d.value[1] - d.value[0] : d.value}` : undefined) // ARIA label for screen readers

.attr("aria-label", context.tabNavigation() ? (d: any) => `${d.origRow[0]} - ${d.column}: ${d.value instanceof Array ? d.value[1] - d.value[0] : d.value}` : undefined) // ARIA label for screen readers

Copilot · 2025-11-26T14:10:12Z

packages/chart/src/Pie.ts


        this.d3Pie
-            .padAngle(0.0025)
+            .padAngle(0) // No geometric padding - CSS-only solution


This line sets padAngle to 0, but in the update method (lines 206-209, 215), the padAngle is calculated from slicePadding() and applied to d3Arc. There's a conflict: d3Pie.padAngle(0) here will be overridden by the calculated padAngle in the arc generator. Either remove this line or reconcile the padding logic between the pie generator and arc generator. The comment "No geometric padding - CSS-only solution" appears outdated given the new slicePadding implementation.

Copilot · 2025-11-26T14:10:12Z

packages/chart/index.html

+
    <script type="module">
-        import { Area, Column } from "@hpcc-js/chart";
+        import { Area, Bar, Column, Pie } from "./src/index.ts";


Unused imports Area, Bar, Pie.

Suggested change

import { Area, Bar, Column, Pie } from "./src/index.ts";

import { Column } from "./src/index.ts";

Copilot · 2025-11-26T14:10:12Z

packages/chart/index.html

+    </script>
+
+    <script type="module">
+        import { Area, Column, Pie } from "./src/index.ts";


Unused imports Area, Column.

Suggested change

import { Area, Column, Pie } from "./src/index.ts";

import { Pie } from "./src/index.ts";

Copilot · 2025-11-26T14:10:13Z

packages/chart/src/Scatter.ts

@@ -1,5 +1,5 @@
 import { INDChart, ITooltip } from "@hpcc-js/api";
-import { InputField } from "@hpcc-js/common";
+import { d3Event, InputField, SVGWidget } from "@hpcc-js/common";


Unused import SVGWidget.

Suggested change

import { d3Event, InputField, SVGWidget } from "@hpcc-js/common";

import { d3Event, InputField } from "@hpcc-js/common";

Copilot · 2025-11-26T14:10:13Z

packages/common/index.html

-            .text("Hello World")
-            .render()
-            ;
+        const iconBar = new IconBar()


Unused variable iconBar.

Suggested change

const iconBar = new IconBar()

new IconBar()

Signed-off-by: Gordon Smith <GordonJSmith@gmail.com>

GordonSmith requested a review from Copilot October 23, 2025 12:55

Copilot AI reviewed Oct 23, 2025

View reviewed changes

GordonSmith force-pushed the KB_NAV_III branch from cd27015 to f140d09 Compare October 23, 2025 12:59

GordonSmith force-pushed the main branch 3 times, most recently from ac285a3 to 136469b Compare October 29, 2025 15:37

GordonSmith force-pushed the KB_NAV_III branch from f140d09 to 0c9700a Compare November 26, 2025 13:59

GordonSmith requested a review from Copilot November 26, 2025 14:00

Copilot started reviewing on behalf of GordonSmith November 26, 2025 14:00 View session

GordonSmith marked this pull request as ready for review November 26, 2025 14:05

Copilot finished reviewing on behalf of GordonSmith November 26, 2025 14:05

Copilot AI reviewed Nov 26, 2025

View reviewed changes

feat: add keyboard navigation for select charts

cb35c53

Signed-off-by: Gordon Smith <GordonJSmith@gmail.com>

GordonSmith force-pushed the KB_NAV_III branch from 0c9700a to cb35c53 Compare November 26, 2025 14:53

	"homepage": "https://github.com/hpcc-systems/Visualization/tree/main/packages/markdonw-it-plugins"
	"homepage": "https://github.com/hpcc-systems/Visualization/tree/main/packages/markdown-it-plugins"

	.attr("aria-label", context.tabNavigation() ? (d: any) => `${d.column}: ${d.value instanceof Array ? d.value[1] - d.value[0] : d.value}` : undefined) // ARIA label for screen readers
	.attr("aria-label", context.tabNavigation() ? (d: any) => `${d.origRow[0]} - ${d.column}: ${d.value instanceof Array ? d.value[1] - d.value[0] : d.value}` : undefined) // ARIA label for screen readers

	import { Area, Bar, Column, Pie } from "./src/index.ts";
	import { Column } from "./src/index.ts";

	import { Area, Column, Pie } from "./src/index.ts";
	import { Pie } from "./src/index.ts";

	import { d3Event, InputField, SVGWidget } from "@hpcc-js/common";
	import { d3Event, InputField } from "@hpcc-js/common";

feat: add keyboard navigation for select charts #4481

Are you sure you want to change the base?

feat: add keyboard navigation for select charts #4481

Uh oh!

Conversation

GordonSmith commented Oct 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Checklist:

Testing:

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Oct 23, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 23, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 23, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 23, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Nov 26, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 26, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 26, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 26, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 26, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 26, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 26, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 26, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 26, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 26, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

GordonSmith commented Oct 23, 2025 •

edited

Loading