Declined
Last Updated: 29 Aug 2024 14:25 by ADMIN
eDAD
Created on: 27 Aug 2024 07:09
Category: KendoReact
Type: Bug Report
0
Accessibility bug: Screen reader is not announcing the complete data points information of the "Displaying Time Series" bar graph.
Title: Screen reader is not announcing the complete data points information of the "Displaying Time Series" bar graph.

 

Test Environment:  

Windows11 24H2 Os Build 26100.1301
Browser: New Edge Version 127.0.2651.86 (Official build) (64-bit)
AT: NVDA, JAWS, Narrator
 
Repro steps:  
  1. Open URL: https://www.telerik.com/kendo-react-ui/components/charts/chart/elements/axes/#toc-displaying-time-series 
  2. Kendo React home page will appear.
  3. Navigate to the "Displaying Time Series" bar graph using tab key.
  4. Navigate using arrow keys through the chart controls.
  5. Verify whether the Screen reader is announcing the complete data points information of the "Displaying time Series" bar graph or not. 
Actual Result:
Screen reader is not announcing the complete data points information i.e x axis and y value information also what those points indicate of the "Displaying time series" graph.

Observation: While navigating the graph data points using arrow keys, screen reader JAWS only announces as "3.3 point, 5.2 point" when focus lands on those graph points.
NOTE: Issue is repro'ing with all 3 Screen Readers.
Please Refer Attachment- Screen reader is not announcing the complete data points information on the graph.

Expected Result:
Screen reader should announce the complete data points information of the "Displaying time series" graph such as screen reader announce as the x-axis value along with what information the data points are representing as "Daily max (C) Chart X-axis value 1/1 Y-axis value 3.3 point".

1 comment
ADMIN
Ivaylo
Posted on: 29 Aug 2024 14:25

Hello, 

Thank you for the provided detailed information.

The ChartSeriesItem does not have access to categories for generating the desired label. That's why we need to pass labels with the all information needed:

const labelsAriaContent = (e) =>
  `${e.series.name} in ${e.category} is ${e.value}`;
        <ChartSeriesItem
          key={idx}
          type="column"
          data={item.data}
          name={item.name}
          labels={{
            content: labelsAriaContent,
            visible: false,
          }}
        />

The `labelsAriaContent` template will be set as aria-label of the series point and the screen reader will announce it on focus. This can be seen in action in the following example:

Please review the implementation above and let me know in case further assistance is required.

Regards,
Ivaylo
Progress Telerik

Do you have a stake in the designеr-developer collaboration process? If so, take our survey to share your perspective and become part of this global research. You’ll be among the first to know once the results are out.
-> Start The State of Designer-Developer Collaboration Survey 2024