Skip to content

Commit cd27015

Browse files
GordonSmithGordonSmith
committed
feat: add keyboard navigation for select charts
Signed-off-by: Gordon Smith <[email protected]>
1 parent bfefa70 commit cd27015

File tree

10 files changed

+550
-264
lines changed

10 files changed

+550
-264
lines changed

‎packages/chart/index.html‎

Lines changed: 120 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,42 @@
1616
margin-top: 50px;
1717
}
1818

19-
#placeholder {
19+
.controls {
20+
max-width: 800px;
21+
margin: 20px auto;
22+
padding: 15px;
23+
background-color: #fff;
24+
border-radius: 5px;
25+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
26+
}
27+
28+
.control-group {
29+
margin: 10px 0;
30+
}
31+
32+
.control-group label {
33+
display: flex;
34+
align-items: center;
35+
cursor: pointer;
36+
font-size: 14px;
37+
}
38+
39+
.control-group input[type="checkbox"] {
40+
margin-right: 10px;
41+
cursor: pointer;
42+
width: 18px;
43+
height: 18px;
44+
}
45+
46+
.control-group .description {
47+
margin-left: 28px;
48+
font-size: 12px;
49+
color: #666;
50+
font-style: italic;
51+
}
52+
53+
#placeholder,
54+
#placeholder2 {
2055
width: 100%;
2156
height: 500px;
2257
background-color: #fff;
@@ -29,9 +64,31 @@
2964

3065
<body onresize="doResize()">
3166
<h1>ESM Quick Test</h1>
32-
<div id="placeholder"></div>
67+
68+
<div class="controls">
69+
<div class="control-group">
70+
<label>
71+
<input type="checkbox" id="tabNavigationToggle">
72+
Enable Tab Navigation for Column Chart
73+
</label>
74+
<div class="description">
75+
When enabled, you can use Tab to navigate through columns and Space/Enter to select them
76+
</div>
77+
</div>
78+
<div class="control-group">
79+
<label>
80+
<input type="checkbox" id="tabNavigationTogglePie">
81+
Enable Tab Navigation for Pie Chart
82+
</label>
83+
<div class="description">
84+
When enabled, you can use Tab to navigate through slices and Space/Enter to select them
85+
</div>
86+
</div>
87+
</div>
88+
89+
<div id="placeholder" tabindex="0"></div>
3390
<script type="module">
34-
import { Area, Column } from "@hpcc-js/chart";
91+
import { Area, Bar, Column, Pie } from "./src/index.ts";
3592

3693
const simple = {
3794
ND: {
@@ -57,7 +114,7 @@ <h1>ESM Quick Test</h1>
57114
}
58115
};
59116

60-
window.__widget = new Column()
117+
window.__column = new Column()
61118
.target("placeholder")
62119
.columns(["Category", "Series-1", "Series-2"])
63120
.data([
@@ -70,14 +127,71 @@ <h1>ESM Quick Test</h1>
70127
])
71128
.tooltipValueFormat(",.0f")
72129
.showValue(true)
73-
.xAxisFocus(true)
130+
.xAxisFocus(false)
131+
.tabNavigation(false) // Start with tab navigation disabled
132+
.render()
133+
;
134+
135+
// window.__column = new Pie()
136+
// .target("placeholder")
137+
// .columns(["Category", "Series-1", "Series-2"])
138+
// .data([
139+
// ["B", 55],
140+
// ["C", 54],
141+
// ["D", 80],
142+
// ["E", 86],
143+
// ["A", 34],
144+
// ["F", 144]
145+
// ])
146+
// .render()
147+
// ;
148+
</script>
149+
150+
<div id="placeholder2" tabindex="0"></div>
151+
<script type="module">
152+
import { Area, Column, Pie } from "./src/index.ts";
153+
154+
window.__pie = new Pie()
155+
.target("placeholder2")
156+
.columns(["Category", "Series-1", "Series-2"])
157+
.data([
158+
["B", 55],
159+
["C", 54],
160+
["D", 80],
161+
["E", 86],
162+
["A", 34],
163+
["F", 144]
164+
])
165+
.tabNavigation(false)
74166
.render()
75167
;
76168
</script>
77169
<script>
170+
78171
function doResize() {
79-
window.__widget?.resize()?.render();
172+
window.__column?.resize()?.render();
173+
window.__pie?.resize()?.render();
80174
}
175+
176+
// Add event listener for the checkbox
177+
document.getElementById('tabNavigationToggle').addEventListener('change', function (e) {
178+
window.__column
179+
.tabNavigation(e.target.checked)
180+
.lazyRender()
181+
;
182+
console.log('Tab Navigation:', e.target.checked);
183+
});
184+
185+
// Add event listener for the checkbox
186+
document.getElementById('tabNavigationTogglePie').addEventListener('change', function (e) {
187+
window.__pie
188+
.tabNavigation(e.target.checked)
189+
.lazyRender()
190+
;
191+
console.log('Tab Navigation:', e.target.checked);
192+
});
193+
194+
81195
</script>
82196
</body>
83197

‎packages/chart/src/Column.css‎

Lines changed: 42 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,48 @@
99

1010
.chart_Column .columnRect {
1111
stroke: transparent;
12-
border-width: 1.5px;
12+
border-width: 2px;
1313
}
1414

15-
.chart_Column .columnRect.selected {
16-
stroke: red;
15+
.chart_Column .dataCell.selected .columnRect {
16+
stroke: #dc3545 !important;
17+
stroke-width: 3px !important;
18+
paint-order: fill stroke !important;
19+
filter: drop-shadow(0 0 3px rgba(220, 53, 69, 0.4));
20+
transition: all 0.2s ease;
21+
}
22+
23+
.chart_Column .dataCell:hover .columnRect {
24+
stroke: rgba(108, 117, 125, 0.6);
25+
stroke-width: 2px;
26+
filter: brightness(1.05);
27+
}
28+
29+
.chart_Column .dataCell:focus .columnRect {
30+
stroke: #007bff !important;
31+
stroke-width: 3px !important;
32+
paint-order: fill stroke !important;
33+
filter: drop-shadow(0 0 3px rgba(0, 123, 255, 0.4));
34+
transition: all 0.2s ease;
35+
}
36+
37+
.chart_Column .dataCell.selected:focus .columnRect {
38+
stroke: #6f42c1 !important;
39+
filter: drop-shadow(0 0 3px rgba(111, 66, 193, 0.5));
40+
}
41+
42+
.chart_Column .dataCell:focus-visible {
43+
outline: none;
44+
}
45+
46+
.chart_Column .dataCell[data-tabster-focusable] {
47+
outline: none !important;
48+
}
49+
50+
.chart_Column .dataCell:focus {
51+
outline: none !important;
52+
}
53+
54+
.chart_Column .dataCell:active {
55+
outline: none !important;
1756
}

0 commit comments

Comments
 (0)