Fix #3982: Charts add accessibility to canvas (#3983)

* Fix #3892: Charts add accessibility to canvas * Fix #3892: Charts add accessibility to canvas
primefaces · Apr 27, 2023 · a716363 · a716363
1 parent 3538ecd
commit a716363
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 1 deletion.
diff --git a/api-generator/components/chart.js b/api-generator/components/chart.js
@@ -52,6 +52,12 @@ const ChartProps = [
         type: 'string',
         default: 'null',
         description: 'Style class of the element.'
+    },
+    {
+        name: 'ariaLabel',
+        type: 'string',
+        default: 'options.plugins.title.text',
+        description: ' ARIA label for the chart canvas. Defaults to options.plugins.title.text if available.'
     }
 ];
 

diff --git a/components/lib/chart/Chart.js b/components/lib/chart/Chart.js
@@ -84,10 +84,12 @@ const PrimeReactChart = React.memo(
         const otherProps = ChartBase.getOtherProps(props);
         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>
         );
     }),

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