Update Accessibility documentations & add missing props

primefaces · Nov 20, 2023 · bf79add · bf79add
1 parent 097e3b2
commit bf79add
Show file tree

Hide file tree

Showing 16 changed files with 51 additions and 59 deletions.
diff --git 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
@@ -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
@@ -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,19 +16,14 @@ 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;
 
     @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
@@ -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
@@ -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,21 +67,20 @@ import { Code } from '../../domain/code';
                     </table>
                 </div>
             </app-docsectiontext>
-        </div>
-    </app-developmentsection>`
+        </div>`
 })
 export class AccessibilityDoc {
     @Input() id: string;
 
     @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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;