From bf79add6f1384045561fa383acc19b0a44e71623 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=87etin?=
 <69278826+cetincakiroglu@users.noreply.github.com>
Date: Mon, 20 Nov 2023 15:20:51 +0300
Subject: [PATCH] Update Accessibility documentations & add missing props

---
 src/app/components/chart/chart.ts                    | 12 +++++++++++-
 .../organizationchart/organizationchart.ts           |  2 +-
 src/app/showcase/doc/chart/accessibilitydoc.ts       | 11 +++--------
 src/app/showcase/doc/dataview/accessibilitydoc.ts    |  5 ++---
 src/app/showcase/doc/dialog/accessibilitydoc.ts      |  9 ++++-----
 src/app/showcase/doc/dock/accessibilitydoc.ts        |  5 ++---
 src/app/showcase/doc/orderlist/accessibilitydoc.ts   |  9 ++++-----
 .../doc/organizationchart/accessibilitydoc.ts        |  5 ++---
 src/app/showcase/doc/overlay/accessibilitydoc.ts     |  5 ++---
 src/app/showcase/doc/paginator/accessibilitydoc.ts   |  5 ++---
 src/app/showcase/doc/picklist/accessibilitydoc.ts    | 11 +++++------
 src/app/showcase/doc/scroller/accessibilitydoc.ts    |  5 ++---
 src/app/showcase/doc/timeline/accessibilitydoc.ts    |  5 ++---
 src/app/showcase/doc/tree/accessibilitydoc.ts        |  5 ++---
 src/app/showcase/doc/treeselect/accessibilitydoc.ts  | 11 +++++------
 .../showcase/doc/virtualscroller/accessibilitydoc.ts |  5 ++---
 16 files changed, 51 insertions(+), 59 deletions(-)

diff --git a/src/app/components/chart/chart.ts b/src/app/components/chart/chart.ts
index 80ef6d465a5..2a364f11f9d 100755
--- a/src/app/components/chart/chart.ts
+++ b/src/app/components/chart/chart.ts
@@ -9,7 +9,7 @@ import Chart from 'chart.js/auto';
     selector: 'p-chart',
     template: `
         <div style="position:relative" [style.width]="responsive && !width ? null : width" [style.height]="responsive && !height ? null : height">
-            <canvas [attr.width]="responsive && !width ? null : width" [attr.height]="responsive && !height ? null : height" (click)="onCanvasClick($event)"></canvas>
+            <canvas role="img" [attr.aria-label]="ariaLabel" [attr.aria-labelledby]="ariaLabelledBy" [attr.width]="responsive && !width ? null : width" [attr.height]="responsive && !height ? null : height" (click)="onCanvasClick($event)"></canvas>
         </div>
     `,
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -44,6 +44,16 @@ export class UIChart implements AfterViewInit, OnDestroy {
      * @group Props
      */
     @Input() responsive: boolean = true;
+    /**
+     * Used to define a string that autocomplete attribute the current element.
+     * @group Props
+     */
+    @Input() ariaLabel: string | undefined;
+    /**
+     * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
+     * @group Props
+     */
+    @Input() ariaLabelledBy: string | undefined;
     /**
      * Data to display.
      * @group Props
diff --git a/src/app/components/organizationchart/organizationchart.ts b/src/app/components/organizationchart/organizationchart.ts
index d18dd374e89..4709714e1e7 100755
--- a/src/app/components/organizationchart/organizationchart.ts
+++ b/src/app/components/organizationchart/organizationchart.ts
@@ -24,7 +24,7 @@ import { OrganizationChartNodeCollapseEvent, OrganizationChartNodeExpandEvent, O
                         <div *ngIf="chart.getTemplateForNode(node)">
                             <ng-container *ngTemplateOutlet="chart.getTemplateForNode(node); context: { $implicit: node }"></ng-container>
                         </div>
-                        <a *ngIf="!leaf" tabindex="0" class="p-node-toggler" (click)="toggleNode($event, node)" (keydown.enter)="toggleNode($event, node)" [attr.data-pc-section]="'nodeToggler'">
+                        <a *ngIf="!leaf" tabindex="0" class="p-node-toggler" (click)="toggleNode($event, node)" (keydown.enter)="toggleNode($event, node)" (keydown.space)="toggleNode($event, node)" [attr.data-pc-section]="'nodeToggler'">
                             <ng-container *ngIf="!chart.togglerIconTemplate">
                                 <ChevronDownIcon *ngIf="node.expanded" [styleClass]="'p-node-toggler-icon'" [ngStyle]="{ display: 'inline' }" [attr.data-pc-section]="'nodeTogglerIcon'" />
                                 <ChevronUpIcon *ngIf="!node.expanded" [styleClass]="'p-node-toggler-icon'" [ngStyle]="{ display: 'inline' }" [attr.data-pc-section]="'nodeTogglerIcon'" />
diff --git a/src/app/showcase/doc/chart/accessibilitydoc.ts b/src/app/showcase/doc/chart/accessibilitydoc.ts
index 5e835d65c8d..b2010f1d35f 100644
--- a/src/app/showcase/doc/chart/accessibilitydoc.ts
+++ b/src/app/showcase/doc/chart/accessibilitydoc.ts
@@ -3,7 +3,7 @@ import { Code } from '../../domain/code';
 
 @Component({
     selector: 'accessibility-doc',
-    template: ` <app-developmentsection>
+    template: `
         <div>
             <app-docsectiontext [title]="title" [id]="id">
                 <div class="doc-section-description">
@@ -16,8 +16,7 @@ import { Code } from '../../domain/code';
                 </div>
             </app-docsectiontext>
             <app-code [code]="code" [hideToggleCode]="true"></app-code>
-        </div>
-    </app-developmentsection>`
+        </div>`
 })
 export class AccessibilityDoc {
     @Input() id: string;
@@ -25,10 +24,6 @@ export class AccessibilityDoc {
     @Input() title: string;
 
     code: Code = {
-        html: `<p-chart 
-    type="line" 
-    [data]="data" [
-    canvasProps]="{'role': 'img', 'aria-label': 'Data'}"
-></p-chart>`
+        html: `<p-chart type="line" [data]="data" ariaLabbel="Data"></p-chart>`
     };
 }
diff --git a/src/app/showcase/doc/dataview/accessibilitydoc.ts b/src/app/showcase/doc/dataview/accessibilitydoc.ts
index 9604d8a7e68..8387bb2a5ba 100644
--- a/src/app/showcase/doc/dataview/accessibilitydoc.ts
+++ b/src/app/showcase/doc/dataview/accessibilitydoc.ts
@@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core';
 
 @Component({
     selector: 'accessibility-doc',
-    template: ` <app-developmentsection>
+    template: `
         <div>
             <app-docsectiontext [title]="title" [id]="id">
                 <h3>Screen Reader</h3>
@@ -33,8 +33,7 @@ import { Component, Input } from '@angular/core';
                     </table>
                 </div>
             </app-docsectiontext>
-        </div>
-    </app-developmentsection>`
+        </div>`
 })
 export class AccessibilityDoc {
     @Input() id: string;
diff --git a/src/app/showcase/doc/dialog/accessibilitydoc.ts b/src/app/showcase/doc/dialog/accessibilitydoc.ts
index 9762175db2d..a881add0f38 100644
--- a/src/app/showcase/doc/dialog/accessibilitydoc.ts
+++ b/src/app/showcase/doc/dialog/accessibilitydoc.ts
@@ -3,7 +3,7 @@ import { Code } from '../../domain/code';
 
 @Component({
     selector: 'accessibility-doc',
-    template: ` <app-developmentsection>
+    template: `
         <div>
             <app-docsectiontext [title]="title" [id]="id">
                 <h3>Screen Reader</h3>
@@ -67,8 +67,7 @@ import { Code } from '../../domain/code';
                     </table>
                 </div>
             </app-docsectiontext>
-        </div>
-    </app-developmentsection>`
+        </div>`
 })
 export class AccessibilityDoc {
     @Input() id: string;
@@ -76,12 +75,12 @@ export class AccessibilityDoc {
     @Input() title: string;
 
     code: Code = {
-        html: `<p-button 
+        html: `<button pButton
     icon="pi pi-external-link" 
     (click)="visible = true" 
     aria-controls="{{visible ? 'dialog' : null}}" 
     aria-expanded="{{visible ? true : false}}"
-></p-button>
+></button>
 <p-dialog id="dialog" header="Header" [(visible)]="visible" [style]="{ width: '50vw' }" (onHide)="visible = false">
     <p>Content</p>
 </p-dialog>`
diff --git a/src/app/showcase/doc/dock/accessibilitydoc.ts b/src/app/showcase/doc/dock/accessibilitydoc.ts
index 7edea1c9d72..8daca1186d6 100644
--- a/src/app/showcase/doc/dock/accessibilitydoc.ts
+++ b/src/app/showcase/doc/dock/accessibilitydoc.ts
@@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core';
 
 @Component({
     selector: 'accessibility-doc',
-    template: ` <app-developmentsection>
+    template: `
         <div>
             <app-docsectiontext [title]="title" [id]="id">
                 <h3>Screen Reader</h3>
@@ -56,8 +56,7 @@ import { Component, Input } from '@angular/core';
                     </table>
                 </div>
             </app-docsectiontext>
-        </div>
-    </app-developmentsection>`
+        </div>`
 })
 export class AccessibilityDoc {
     @Input() id: string;
diff --git a/src/app/showcase/doc/orderlist/accessibilitydoc.ts b/src/app/showcase/doc/orderlist/accessibilitydoc.ts
index 00d265d5562..3a39411e848 100644
--- a/src/app/showcase/doc/orderlist/accessibilitydoc.ts
+++ b/src/app/showcase/doc/orderlist/accessibilitydoc.ts
@@ -3,7 +3,7 @@ import { Code } from '../../domain/code';
 
 @Component({
     selector: 'accessibility-doc',
-    template: ` <app-developmentsection>
+    template: `
         <app-docsectiontext [title]="title" [id]="id">
             <h3>Screen Reader</h3>
             <p>
@@ -104,8 +104,7 @@ import { Code } from '../../domain/code';
                     </tbody>
                 </table>
             </div>
-        </app-docsectiontext>
-    </app-developmentsection>`
+        </app-docsectiontext>`
 })
 export class AccessibilityDoc {
     @Input() id: string;
@@ -114,8 +113,8 @@ export class AccessibilityDoc {
 
     code: Code = {
         html: `<span id="lb">Options</span>        
-<p-orderList aria-labelledby="lb"></p-orderList>
+<p-orderList ariaLabelledBy="lb"></p-orderList>
 
-<p-orderList aria-label="City"></p-orderList>`
+<p-orderList ariaLabel="City"></p-orderList>`
     };
 }
diff --git a/src/app/showcase/doc/organizationchart/accessibilitydoc.ts b/src/app/showcase/doc/organizationchart/accessibilitydoc.ts
index 75e1285d3f0..1a2d053a25e 100644
--- a/src/app/showcase/doc/organizationchart/accessibilitydoc.ts
+++ b/src/app/showcase/doc/organizationchart/accessibilitydoc.ts
@@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core';
 
 @Component({
     selector: 'accessibility-doc',
-    template: ` <app-developmentsection>
+    template: `
         <app-docsectiontext [title]="title" [id]="id">
             <h3>Screen Reader</h3>
             <p>
@@ -34,8 +34,7 @@ import { Component, Input } from '@angular/core';
                     </tbody>
                 </table>
             </div>
-        </app-docsectiontext>
-    </app-developmentsection>`
+        </app-docsectiontext>`
 })
 export class AccessibilityDoc {
     @Input() id: string;
diff --git a/src/app/showcase/doc/overlay/accessibilitydoc.ts b/src/app/showcase/doc/overlay/accessibilitydoc.ts
index 8131dec68a5..a4acce5eef2 100644
--- a/src/app/showcase/doc/overlay/accessibilitydoc.ts
+++ b/src/app/showcase/doc/overlay/accessibilitydoc.ts
@@ -3,7 +3,7 @@ import { Code } from '../../domain/code';
 
 @Component({
     selector: 'accessibility-doc',
-    template: ` <app-developmentsection>
+    template: `
         <div>
             <app-docsectiontext [title]="title" [id]="id">
                 <h3>Screen Reader</h3>
@@ -63,8 +63,7 @@ import { Code } from '../../domain/code';
                     </table>
                 </div>
             </app-docsectiontext>
-        </div>
-    </app-developmentsection>`
+        </div>`
 })
 export class AccessibilityDoc {
     @Input() id: string;
diff --git a/src/app/showcase/doc/paginator/accessibilitydoc.ts b/src/app/showcase/doc/paginator/accessibilitydoc.ts
index 727fbd25fe9..9c9a8b8813b 100644
--- a/src/app/showcase/doc/paginator/accessibilitydoc.ts
+++ b/src/app/showcase/doc/paginator/accessibilitydoc.ts
@@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core';
 
 @Component({
     selector: 'accessibility-doc',
-    template: ` <app-developmentsection>
+    template: `
         <div>
             <app-docsectiontext [title]="title" [id]="id">
                 <h3>Screen Reader</h3>
@@ -49,8 +49,7 @@ import { Component, Input } from '@angular/core';
                 <h3>Rows Per Page Dropdown Keyboard Support</h3>
                 <p>Refer to the <a routerLink="/dropdown">dropdown</a> documentation for more details about keyboard support.</p>
             </app-docsectiontext>
-        </div>
-    </app-developmentsection>`
+        </div>`
 })
 export class AccessibilityDoc {
     @Input() id: string;
diff --git a/src/app/showcase/doc/picklist/accessibilitydoc.ts b/src/app/showcase/doc/picklist/accessibilitydoc.ts
index 63b73aacdf0..b7a93eaf9e8 100644
--- a/src/app/showcase/doc/picklist/accessibilitydoc.ts
+++ b/src/app/showcase/doc/picklist/accessibilitydoc.ts
@@ -3,11 +3,11 @@ import { Code } from '../../domain/code';
 
 @Component({
     selector: 'accessibility-doc',
-    template: ` <app-developmentsection>
+    template: `
         <app-docsectiontext [title]="title" [id]="id">
             <h3>Screen Reader</h3>
             <p>
-                Value to describe the source listbox and target listbox can be provided with <i>sourceListProps</i> and <i>targetListProps</i> by passing <i>aria-labelledby</i> or <i>aria-label</i> props. The list elements has a <i>listbox</i> role
+                Value to describe the source listbox and target listbox can be provided with <i>ariaLabelledBy</i> or <i>ariaLabel</i> props. The list elements has a <i>listbox</i> role
                 with the <i>aria-multiselectable</i> attribute. Each list item has an <i>option</i> role with <i>aria-selected</i> and <i>aria-disabled</i> as their attributes.
             </p>
             <p>
@@ -104,8 +104,7 @@ import { Code } from '../../domain/code';
                     </tbody>
                 </table>
             </div>
-        </app-docsectiontext>
-    </app-developmentsection>`
+        </app-docsectiontext>`
 })
 export class AccessibilityDoc {
     @Input() id: string;
@@ -114,8 +113,8 @@ export class AccessibilityDoc {
 
     code: Code = {
         html: `<span id="lb">Options</span>        
-<p-pickList aria-labelledby="lb"></p-pickList>
+<p-pickList ariaLabelledBy="lb"></p-pickList>
 
-<p-pickList aria-label="City"></p-pickList>`
+<p-pickList ariaLabel="City"></p-pickList>`
     };
 }
diff --git a/src/app/showcase/doc/scroller/accessibilitydoc.ts b/src/app/showcase/doc/scroller/accessibilitydoc.ts
index 592e5ab7a79..a7550d52f6c 100644
--- a/src/app/showcase/doc/scroller/accessibilitydoc.ts
+++ b/src/app/showcase/doc/scroller/accessibilitydoc.ts
@@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core';
 
 @Component({
     selector: 'accessibility-doc',
-    template: ` <app-developmentsection>
+    template: `
         <app-docsectiontext [title]="title" [id]="id">
             <h3>Screen Reader</h3>
             <p>
@@ -11,8 +11,7 @@ import { Component, Input } from '@angular/core';
             </p>
             <h4>Keyboard Support</h4>
             <p>Component does not include any built-in interactive elements.</p>
-        </app-docsectiontext>
-    </app-developmentsection>`
+        </app-docsectiontext>`
 })
 export class AccessibilityDoc {
     @Input() id: string;
diff --git a/src/app/showcase/doc/timeline/accessibilitydoc.ts b/src/app/showcase/doc/timeline/accessibilitydoc.ts
index 960a52a0f9b..a5a9ded0440 100644
--- a/src/app/showcase/doc/timeline/accessibilitydoc.ts
+++ b/src/app/showcase/doc/timeline/accessibilitydoc.ts
@@ -2,14 +2,13 @@ import { Component, Input } from '@angular/core';
 
 @Component({
     selector: 'accessibility-doc',
-    template: ` <app-developmentsection>
+    template: `
         <app-docsectiontext [title]="title" [id]="id">
             <h3>Screen Reader</h3>
             <p>Timeline uses a semantic ordered list element to list the events. No specific role is enforced, still you may use any aria role and attributes as any valid attribute is passed to the list element.</p>
             <h3>Keyboard Support</h3>
             <p>Component does not include any interactive elements.</p>
-        </app-docsectiontext>
-    </app-developmentsection>`
+        </app-docsectiontext>`
 })
 export class AccessibilityDoc {
     @Input() id: string;
diff --git a/src/app/showcase/doc/tree/accessibilitydoc.ts b/src/app/showcase/doc/tree/accessibilitydoc.ts
index 3c43719967d..917dd438a40 100644
--- a/src/app/showcase/doc/tree/accessibilitydoc.ts
+++ b/src/app/showcase/doc/tree/accessibilitydoc.ts
@@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core';
 
 @Component({
     selector: 'accessibility-doc',
-    template: ` <app-developmentsection>
+    template: `
         <app-docsectiontext [title]="title" [id]="id">
             <h3>Screen Reader</h3>
             <p>
@@ -62,8 +62,7 @@ import { Component, Input } from '@angular/core';
                     </tbody>
                 </table>
             </div>
-        </app-docsectiontext>
-    </app-developmentsection>`
+        </app-docsectiontext>`
 })
 export class AccessibilityDoc {
     @Input() id: string;
diff --git a/src/app/showcase/doc/treeselect/accessibilitydoc.ts b/src/app/showcase/doc/treeselect/accessibilitydoc.ts
index 51976e41941..a077bf93faf 100644
--- a/src/app/showcase/doc/treeselect/accessibilitydoc.ts
+++ b/src/app/showcase/doc/treeselect/accessibilitydoc.ts
@@ -3,12 +3,12 @@ import { Code } from '../../domain/code';
 
 @Component({
     selector: 'accessibility-doc',
-    template: ` <app-developmentsection>
+    template: `
         <div>
             <app-docsectiontext [title]="title" [id]="id">
                 <h3>Screen Reader</h3>
                 <p>
-                    Value to describe the component can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. The treeselect element has a <i>combobox</i> role in addition to <i>aria-haspopup</i> and
+                    Value to describe the component can either be provided with <i>ariaLabelledby</i> or <i>ariaLabel</i> props. The treeselect element has a <i>combobox</i> role in addition to <i>aria-haspopup</i> and
                     <i>aria-expanded</i> attributes. The relation between the combobox and the popup is created with <i>aria-controls</i> that refers to the id of the popup.
                 </p>
                 <p>
@@ -178,8 +178,7 @@ import { Code } from '../../domain/code';
                     </tbody>
                 </table>
             </div>
-        </div>
-    </app-developmentsection>`
+        </div>`
 })
 export class AccessibilityDoc {
     @Input() id: string;
@@ -188,8 +187,8 @@ export class AccessibilityDoc {
 
     code: Code = {
         basic: `<span id="dd1">Options</span>
-<p-treeSelect aria-labelledby="dd1"></p-treeSelect>
+<p-treeSelect ariaLabelledBy="dd1"></p-treeSelect>
 
-<p-treeSelect aria-label="Options"></p-treeSelect>`
+<p-treeSelect ariaLabel="Options"></p-treeSelect>`
     };
 }
diff --git a/src/app/showcase/doc/virtualscroller/accessibilitydoc.ts b/src/app/showcase/doc/virtualscroller/accessibilitydoc.ts
index 07bee64670c..89627afc480 100644
--- a/src/app/showcase/doc/virtualscroller/accessibilitydoc.ts
+++ b/src/app/showcase/doc/virtualscroller/accessibilitydoc.ts
@@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core';
 
 @Component({
     selector: 'accessibility-doc',
-    template: ` <app-developmentsection>
+    template: `
         <app-docsectiontext [title]="title" [id]="id">
             <h3>Screen Reader</h3>
             <p>
@@ -11,8 +11,7 @@ import { Component, Input } from '@angular/core';
             </p>
             <h4>Keyboard Support</h4>
             <p>Component does not include any built-in interactive elements.</p>
-        </app-docsectiontext>
-    </app-developmentsection>`
+        </app-docsectiontext>`
 })
 export class AccessibilityDoc {
     @Input() id: string;