From aae83aace830c64bb3c7420e7ac6e1b54b5c4465 Mon Sep 17 00:00:00 2001
From: melloware <mellowaredev@gmail.com>
Date: Wed, 25 Jan 2023 12:52:16 -0500
Subject: [PATCH] Fix #3892: Charts add accesibility to canvas

---
 components/doc/chart/apidoc.js  | 8 ++++++--
 components/lib/chart/Chart.js   | 5 ++++-
 components/lib/chart/chart.d.ts | 5 +++++
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/components/doc/chart/apidoc.js b/components/doc/chart/apidoc.js
index 29c3d9ff62..ad94f0cda6 100644
--- 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
index b722127abe..545c2f14b2 100644
--- 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
index 67c5b57a9c..b5e60384d1 100644
--- 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