Fix primefaces#3892: Charts add accessibility to canvas

melloware · Jan 25, 2023 · 1b6b7f3 · 1b6b7f3
1 parent 2e55e7b
commit 1b6b7f3
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 3 deletions.
diff --git a/components/doc/chart/apidoc.js b/components/doc/chart/apidoc.js
@@ -1,7 +1,5 @@
-import { DevelopmentSection } from '../common/developmentsection';
 import { DocSectionText } from '../common/docsectiontext';
 import { DocSubSection } from '../common/docsubsection';
-import { CodeHighlight } from '../common/codehighlight';
 
 export function ApiDoc(props) {
     return (
@@ -73,6 +71,12 @@ export function ApiDoc(props) {
                                 <td>null</td>
                                 <td>Style class of the element.</td>
                             </tr>
+                            <tr>
+                                <td>ariaLabel</td>
+                                <td>string</td>
+                                <td>options.plugins.title.text</td>
+                                <td>ARIA label for the chart canvas. Defaults to options.plugins.title.text if available.</td>
+                            </tr>
                         </tbody>
                     </table>
                 </div>

diff --git a/components/lib/chart/Chart.js b/components/lib/chart/Chart.js
@@ -81,10 +81,12 @@ const PrimeReactChart = React.memo(
         const otherProps = ObjectUtils.findDiffKeys(props, PrimeReactChart.defaultProps);
         const className = classNames('p-chart', props.className);
         const style = Object.assign({ width: props.width, height: props.height }, props.style);
+        const title = props.options && props.options.plugins && props.options.plugins.title && props.options.plugins.title.text;
+        const ariaLabel = props.ariaLabel || title;
 
         return (
             <div id={props.id} ref={elementRef} style={style} className={className} {...otherProps}>
-                <canvas ref={canvasRef} width={props.width} height={props.height}></canvas>
+                <canvas ref={canvasRef} width={props.width} height={props.height} role="img" aria-label={ariaLabel}></canvas>
             </div>
         );
     }),
@@ -102,6 +104,7 @@ PrimeReactChart.defaultProps = {
     width: null,
     height: null,
     style: null,
+    ariaLabel: null,
     className: null
 };
 

diff --git a/components/lib/chart/chart.d.ts b/components/lib/chart/chart.d.ts
@@ -50,6 +50,11 @@ export interface ChartProps {
      * Style class of the element.
      */
     className?: string | undefined;
+    /**
+     * ARIA label for the chart canvas. Defaults to options.plugins.title.text if available.
+     * @default options.plugins.title.text
+     */
+    ariaLabel?: string | undefined;
     /**
      * Used to get the child elements of the component.
      * @readonly