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: `
- +
`, 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
- + 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: ` + template: `
@@ -16,8 +16,7 @@ import { Code } from '../../domain/code';
-
-
` + ` }) export class AccessibilityDoc { @Input() id: string; @@ -25,10 +24,6 @@ export class AccessibilityDoc { @Input() title: string; code: Code = { - html: `` + html: `` }; } 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: ` + template: `

Screen Reader

@@ -33,8 +33,7 @@ import { Component, Input } from '@angular/core';
- -
` + ` }) 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: ` + template: `

Screen Reader

@@ -67,8 +67,7 @@ import { Code } from '../../domain/code';
- -
` + ` }) export class AccessibilityDoc { @Input() id: string; @@ -76,12 +75,12 @@ export class AccessibilityDoc { @Input() title: string; code: Code = { - html: ` +>

Content

` 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: ` + template: `

Screen Reader

@@ -56,8 +56,7 @@ import { Component, Input } from '@angular/core';
- -
` + ` }) 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: ` + template: `

Screen Reader

@@ -104,8 +104,7 @@ import { Code } from '../../domain/code'; - - ` + ` }) export class AccessibilityDoc { @Input() id: string; @@ -114,8 +113,8 @@ export class AccessibilityDoc { code: Code = { html: `Options - + -` +` }; } 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: ` + template: `

Screen Reader

@@ -34,8 +34,7 @@ import { Component, Input } from '@angular/core'; - - ` + ` }) 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: ` + template: `

Screen Reader

@@ -63,8 +63,7 @@ import { Code } from '../../domain/code';
- -
` + ` }) 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: ` + template: `

Screen Reader

@@ -49,8 +49,7 @@ import { Component, Input } from '@angular/core';

Rows Per Page Dropdown Keyboard Support

Refer to the dropdown documentation for more details about keyboard support.

-
- ` + ` }) 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: ` + template: `

Screen Reader

- Value to describe the source listbox and target listbox can be provided with sourceListProps and targetListProps by passing aria-labelledby or aria-label props. The list elements has a listbox role + Value to describe the source listbox and target listbox can be provided with ariaLabelledBy or ariaLabel props. The list elements has a listbox role with the aria-multiselectable attribute. Each list item has an option role with aria-selected and aria-disabled as their attributes.

@@ -104,8 +104,7 @@ import { Code } from '../../domain/code'; - - ` + ` }) export class AccessibilityDoc { @Input() id: string; @@ -114,8 +113,8 @@ export class AccessibilityDoc { code: Code = { html: `Options - + -` +` }; } 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: ` + template: `

Screen Reader

@@ -11,8 +11,7 @@ import { Component, Input } from '@angular/core';

Keyboard Support

Component does not include any built-in interactive elements.

-
-
` + ` }) 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: ` + template: `

Screen Reader

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.

Keyboard Support

Component does not include any interactive elements.

-
-
` + ` }) 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: ` + template: `

Screen Reader

@@ -62,8 +62,7 @@ import { Component, Input } from '@angular/core'; - - ` + ` }) 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: ` + template: `

Screen Reader

- Value to describe the component can either be provided with aria-labelledby or aria-label props. The treeselect element has a combobox role in addition to aria-haspopup and + Value to describe the component can either be provided with ariaLabelledby or ariaLabel props. The treeselect element has a combobox role in addition to aria-haspopup and aria-expanded attributes. The relation between the combobox and the popup is created with aria-controls that refers to the id of the popup.

@@ -178,8 +178,7 @@ import { Code } from '../../domain/code';

- -
` + ` }) export class AccessibilityDoc { @Input() id: string; @@ -188,8 +187,8 @@ export class AccessibilityDoc { code: Code = { basic: `Options - + -` +` }; } 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: ` + template: `

Screen Reader

@@ -11,8 +11,7 @@ import { Component, Input } from '@angular/core';

Keyboard Support

Component does not include any built-in interactive elements.

-
-
` + ` }) export class AccessibilityDoc { @Input() id: string;