feat(charts): Improve accessibility with keyboard interaction#1964
feat(charts): Improve accessibility with keyboard interaction#1964akashsonune wants to merge 3 commits into
Conversation
akashsonune
force-pushed
the
feat/charts-keyboard-interaction
branch
from
b356d7e to
2edee9c
Compare
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request implements accessibility features for charts, including keyboard navigation for data points, zoom sliders, and legends, as well as ARIA support and live announcements. The review feedback identifies several TypeScript style guide violations regarding the use of the any type and suggests improvements for ARIA label redundancy and legend navigation logic.
akashsonune
force-pushed
the
feat/charts-keyboard-interaction
branch
4 times, most recently
from
1778050 to
e3e5eba
Compare
akashsonune
force-pushed
the
feat/charts-keyboard-interaction
branch
2 times, most recently
from
83b4548 to
c311421
Compare
|
Focus is barely visible, needs to be in our focus color. Why not just have the focus border around the whole element? |
akashsonune
force-pushed
the
feat/charts-keyboard-interaction
branch
from
c311421 to
21eb1b1
Compare
done. Not sure about focusing the whole element, I see that the other libs like carbon focus just the legend icon. Maybe we can discuss this along with ux |
akashsonune
force-pushed
the
feat/charts-keyboard-interaction
branch
from
21eb1b1 to
790fd7c
Compare
akashsonune
force-pushed
the
feat/charts-keyboard-interaction
branch
from
790fd7c to
0f8f511
Compare
akashsonune
force-pushed
the
feat/charts-keyboard-interaction
branch
from
0f8f511 to
aa74c74
Compare
akashsonune
force-pushed
the
feat/charts-keyboard-interaction
branch
from
aa74c74 to
a222173
Compare
|
@dr-itz can you take a look |
|
@dr-itz can you review |
dr-itz
left a comment
dr-itz
left a comment
There was a problem hiding this comment.
Examples aren't live any more, so I cannot test. Also, please squash the commits
| host: { | ||
| '[attr.tabindex]': '!showCustomLegend() ? 0 : null', | ||
| '[attr.role]': '!showCustomLegend() ? "application" : null', | ||
| '[attr.aria-label]': '!showCustomLegend() ? (title() || "Chart") : null', |
| legendItems[legendIdx + 1]?.focus(); | ||
| } else if (event.key === 'ArrowLeft') { | ||
| event.preventDefault(); | ||
| legendItems[legendIdx - 1]?.focus(); |
There was a problem hiding this comment.
does this need different direction in case of RTL?
3 participants
Escapeto close tooltipShift +/-Shift arrowshometo operate zoom sliderDocumentation.
Examples.
Dashboards Demo.
Playwright report.
Coverage Reports: