From bcb341000f49b2a7983281b1b8b19a301cfe791d Mon Sep 17 00:00:00 2001
From: kyybo <106741733+kyybo@users.noreply.github.com>
Date: Thu, 5 Sep 2024 13:42:36 +0200
Subject: [PATCH] Fix #7118 : Updating Chart accessibility documentation
 (#7119)

Fix #7118 : Updating Chart accessibility documentation

The documentation mentions a 'canvasProps' property which is not available in PrimeReact.
To define aria roles and properties, the 'pt' property must be used insteed.
---
 components/doc/chart/accessibilitydoc.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/doc/chart/accessibilitydoc.js b/components/doc/chart/accessibilitydoc.js
index db4391b50d..a8769f49da 100644
--- a/components/doc/chart/accessibilitydoc.js
+++ b/components/doc/chart/accessibilitydoc.js
@@ -4,7 +4,7 @@ import { DocSectionText } from '@/components/doc/common/docsectiontext';
 export function AccessibilityDoc() {
     const code = {
         basic: `
-<Chart type="line" data={data} canvasProps={{'role': 'img', 'aria-label': 'Data'}} />
+<Chart type="line" data={data} pt={canvas: {'role': 'img', 'aria-label': 'Data'}}} />
 
 <Chart type="line" data={data}>
     <DataTable />
@@ -20,8 +20,8 @@ export function AccessibilityDoc() {
                 <a className="text-primary hover:underline font-medium" href="https://www.chartjs.org/docs/latest/general/accessibility.html">
                     Chart.js accessibility
                 </a>{' '}
-                guide for more information. The canvas element can be customized with <i>canvasProps</i> property to define aria roles and properties, in addition any content inside the component is directly passed as a child of the canvas to be able
-                to provide fallback content like a table.
+                guide for more information. The canvas element can be customized with <i>pt</i> property to define aria roles and properties, in addition any content inside the component is directly passed as a child of the canvas to be able to
+                provide fallback content like a table.
             </p>
             <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </DocSectionText>