-
Notifications
You must be signed in to change notification settings - Fork 64
feat: add keyboard navigation for select charts #4481
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.
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
base: main
Are you sure you want to change the base?
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
cd27015 to
f140d09
Compare
ac285a3 to
136469b
Compare
f140d09 to
0c9700a
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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"andtabindex="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.
0c9700a to
cb35c53
Compare
Signed-off-by: Gordon Smith <GordonJSmith@gmail.com>
cb35c53 to
da0acab
Compare
jeclrsg
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@GordonSmith looked good. Just one nitpick about some comments and console.logs that got left behind?
Was taking a while to get through, until I remembered to tick the "hide whitespace" checkbox. I wish you could get GH to save that as a preference or something
| window.__scatter?.resize()?.render(); | ||
| } | ||
|
|
||
| // Add event listener for the checkbox |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
nitpick, a few unnecessary comments and console.logs here
Checklist:
Testing: