From a716363c3f002723f126a070ace939f61b30e591 Mon Sep 17 00:00:00 2001
From: Melloware <mellowaredev@gmail.com>
Date: Thu, 27 Apr 2023 10:48:18 -0400
Subject: [PATCH] Fix #3982: Charts add accessibility to canvas (#3983)

* Fix #3892: Charts add accessibility to canvas

* Fix #3892: Charts add accessibility to canvas
---
 api-generator/components/chart.js | 6 ++++++
 components/lib/chart/Chart.js     | 4 +++-
 components/lib/chart/chart.d.ts   | 5 +++++
 3 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/api-generator/components/chart.js b/api-generator/components/chart.js
index 76c2c7ae49..121ea9db1c 100644
--- 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
index 8505d4ef5a..1179c03344 100644
--- 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
index 0083f1d39c..d5915b35b0 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