diff --git a/src/app/showcase/doc/listbox/virtualscrolldoc.ts b/src/app/showcase/doc/listbox/virtualscrolldoc.ts
index 237de69f5db..e302b3e5c08 100644
--- a/src/app/showcase/doc/listbox/virtualscrolldoc.ts
+++ b/src/app/showcase/doc/listbox/virtualscrolldoc.ts
@@ -38,7 +38,7 @@ export class VirtualScrollDoc {
@Input() title: string;
- items = Array.from({ length: 100000 }, (_, i) => ({ label: `Item #${i}`, value: i }))
+ items = Array.from({ length: 100000 }, (_, i) => ({ label: `Item #${i}`, value: i }));
selectedItems!: any[];
@@ -50,8 +50,8 @@ export class VirtualScrollDoc {
}
onChange(event) {
- const { value } = event
- if(value) this.selectAll = value.length === this.items.length;
+ const { value } = event;
+ if (value) this.selectAll = value.length === this.items.length;
}
code: Code = {
diff --git a/src/app/showcase/doc/multiselect/virtualscrolldoc.ts b/src/app/showcase/doc/multiselect/virtualscrolldoc.ts
index 6156be455e8..428ead48b97 100644
--- a/src/app/showcase/doc/multiselect/virtualscrolldoc.ts
+++ b/src/app/showcase/doc/multiselect/virtualscrolldoc.ts
@@ -34,7 +34,7 @@ export class VirtualScrollDoc {
@Input() title: string;
- items = Array.from({ length: 100000 }, (_, i) => ({ label: `Item #${i}`, value: i }))
+ items = Array.from({ length: 100000 }, (_, i) => ({ label: `Item #${i}`, value: i }));
selectedItems!: any[];
@@ -46,8 +46,8 @@ export class VirtualScrollDoc {
}
onChange(event) {
- const { value } = event
- if(value) this.selectAll = value.length === this.items.length;
+ const { value } = event;
+ if (value) this.selectAll = value.length === this.items.length;
}
code: Code = {
diff --git a/src/app/showcase/doc/orderlist/accessibilitydoc.ts b/src/app/showcase/doc/orderlist/accessibilitydoc.ts
index 3a39411e848..9c63a9e3234 100644
--- a/src/app/showcase/doc/orderlist/accessibilitydoc.ts
+++ b/src/app/showcase/doc/orderlist/accessibilitydoc.ts
@@ -3,108 +3,107 @@ import { Code } from '../../domain/code';
@Component({
selector: 'accessibility-doc',
- 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
- with the aria-multiselectable attribute. Each list item has an option role with aria-selected and aria-disabled as their attributes.
-
-
- Controls buttons are button elements with an aria-label that refers to the aria.moveTop, aria.moveUp, aria.moveDown, aria.moveBottom,aria.moveTo, aria.moveAllTo,
- aria.moveFrom and aria.moveAllFrom properties of the locale API by default, alternatively you may usemoveTopButtonProps, moveUpButtonProps, moveDownButtonProps,
- moveToButtonProps, moveAllToButtonProps, moveFromButtonProps, moveFromButtonProps and moveAllFromButtonProps to customize the buttons like overriding the default aria-label attributes.
-
+ 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 with
+ the aria-multiselectable attribute. Each list item has an option role with aria-selected and aria-disabled as their attributes.
+
+
+ Controls buttons are button elements with an aria-label that refers to the aria.moveTop, aria.moveUp, aria.moveDown, aria.moveBottom,aria.moveTo, aria.moveAllTo,
+ aria.moveFrom and aria.moveAllFrom properties of the locale API by default, alternatively you may usemoveTopButtonProps, moveUpButtonProps, moveDownButtonProps,
+ moveToButtonProps, moveAllToButtonProps, moveFromButtonProps, moveFromButtonProps and moveAllFromButtonProps to customize the buttons like overriding the default aria-label attributes.
+
-
+
- OrderList Keyboard Support
-
-
-
-
- | Key |
- Function |
-
-
-
-
- | tab |
- Moves focus to the first selected option, if there is none then first option receives the focus. |
-
-
- | up arrow |
- Moves focus to the previous option. |
-
-
- | down arrow |
- Moves focus to the next option. |
-
-
- | enter |
- Toggles the selected state of the focused option. |
-
-
- | space |
- Toggles the selected state of the focused option. |
-
-
- | home |
- Moves focus to the first option. |
-
-
- | end |
- Moves focus to the last option. |
-
-
- | shift + down arrow |
- Moves focus to the next option and toggles the selection state. |
-
-
- | shift + up arrow |
- Moves focus to the previous option and toggles the selection state. |
-
-
- | shift + space |
- Selects the items between the most recently selected option and the focused option. |
-
-
- | control + shift + home |
- Selects the focused options and all the options up to the first one. |
-
-
- | control + shift + end |
- Selects the focused options and all the options down to the first one. |
-
-
- | control + a |
- Selects all options. |
-
-
-
-
Buttons Keyboard Support
-
-
-
-
- | Key |
- Function |
-
-
-
-
- | enter |
- Executes button action. |
-
-
- | space |
- Executes button action. |
-
-
-
-
OrderList Keyboard Support
+
+
+
+
+ | Key |
+ Function |
+
+
+
+
+ | tab |
+ Moves focus to the first selected option, if there is none then first option receives the focus. |
+
+
+ | up arrow |
+ Moves focus to the previous option. |
+
+
+ | down arrow |
+ Moves focus to the next option. |
+
+
+ | enter |
+ Toggles the selected state of the focused option. |
+
+
+ | space |
+ Toggles the selected state of the focused option. |
+
+
+ | home |
+ Moves focus to the first option. |
+
+
+ | end |
+ Moves focus to the last option. |
+
+
+ | shift + down arrow |
+ Moves focus to the next option and toggles the selection state. |
+
+
+ | shift + up arrow |
+ Moves focus to the previous option and toggles the selection state. |
+
+
+ | shift + space |
+ Selects the items between the most recently selected option and the focused option. |
+
+
+ | control + shift + home |
+ Selects the focused options and all the options up to the first one. |
+
+
+ | control + shift + end |
+ Selects the focused options and all the options down to the first one. |
+
+
+ | control + a |
+ Selects all options. |
+
+
+
+
Buttons Keyboard Support
+
+
+
+
+ | Key |
+ Function |
+
+
+
+
+ | enter |
+ Executes button action. |
+
+
+ | space |
+ Executes button action. |
+
+
+
+
`
})
export class AccessibilityDoc {
@Input() id: string;
diff --git a/src/app/showcase/doc/organizationchart/accessibilitydoc.ts b/src/app/showcase/doc/organizationchart/accessibilitydoc.ts
index 1a2d053a25e..dcf7b456fff 100644
--- a/src/app/showcase/doc/organizationchart/accessibilitydoc.ts
+++ b/src/app/showcase/doc/organizationchart/accessibilitydoc.ts
@@ -2,39 +2,38 @@ import { Component, Input } from '@angular/core';
@Component({
selector: 'accessibility-doc',
- template: `
-
- Screen Reader
-
- Component currently uses a table based implementation and does not provide high level of screen reader support, a nested list implementation replacement is planned with aria roles and attributes aligned to a tree widget for high level
- of reader support in the upcoming versions.
-
- Keyboard Support
-
-
-
-
- | Key |
- Function |
-
-
-
-
- | tab |
- Moves focus through the focusable elements within the chart. |
-
-
- | enter |
- Toggles the expanded state of a node. |
-
-
- | space |
- Toggles the expanded state of a node. |
-
-
-
-
`
+ template: `
+ Screen Reader
+
+ Component currently uses a table based implementation and does not provide high level of screen reader support, a nested list implementation replacement is planned with aria roles and attributes aligned to a tree widget for high level of
+ reader support in the upcoming versions.
+
+ Keyboard Support
+
+
+
+
+ | Key |
+ Function |
+
+
+
+
+ | tab |
+ Moves focus through the focusable elements within the chart. |
+
+
+ | enter |
+ Toggles the expanded state of a node. |
+
+
+ | space |
+ Toggles the expanded state of a node. |
+
+
+
+
`
})
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 a4acce5eef2..95c4898a13f 100644
--- a/src/app/showcase/doc/overlay/accessibilitydoc.ts
+++ b/src/app/showcase/doc/overlay/accessibilitydoc.ts
@@ -3,67 +3,66 @@ import { Code } from '../../domain/code';
@Component({
selector: 'accessibility-doc',
- template: `
-
-
- Screen Reader
-
- Overlay component uses dialog role and since any attribute is passed to the root element you may define attributes like aria-label or aria-labelledby to describe the popup contents. In addition
- aria-modal is added since focus is kept within the popup.
-
-
- It is recommended to use a trigger component that can be accessed with keyboard such as a button, if not adding tabIndex would be necessary. Overlay adds aria-expanded state attribute and aria-controls to the
- trigger so that the relation between the trigger and the popup is defined.
-
- Overlay Keyboard Support
- When the popup gets opened, the first focusable element receives the focus and this can be customized by adding autofocus to an element within the popup.
-
-
-
-
- | Key |
- Function |
-
-
-
-
- | tab |
- Moves focus to the next the focusable element within the popup. |
-
-
- | shift + tab |
- Moves focus to the previous the focusable element within the popup. |
-
-
- | escape |
- Closes the popup and moves focus to the trigger. |
-
-
-
-
Close Button Keyboard Support
-
-
-
-
- | Key |
- Function |
-
-
-
-
- | enter |
- Closes the popup and moves focus to the trigger. |
-
-
- | space |
- Closes the popup and moves focus to the trigger. |
-
-
-
-
-
`
+ template: `
+
+ Screen Reader
+
+ Overlay component uses dialog role and since any attribute is passed to the root element you may define attributes like aria-label or aria-labelledby to describe the popup contents. In addition
+ aria-modal is added since focus is kept within the popup.
+
+
+ It is recommended to use a trigger component that can be accessed with keyboard such as a button, if not adding tabIndex would be necessary. Overlay adds aria-expanded state attribute and aria-controls to the
+ trigger so that the relation between the trigger and the popup is defined.
+
+ Overlay Keyboard Support
+ When the popup gets opened, the first focusable element receives the focus and this can be customized by adding autofocus to an element within the popup.
+
+
+
+
+ | Key |
+ Function |
+
+
+
+
+ | tab |
+ Moves focus to the next the focusable element within the popup. |
+
+
+ | shift + tab |
+ Moves focus to the previous the focusable element within the popup. |
+
+
+ | escape |
+ Closes the popup and moves focus to the trigger. |
+
+
+
+
Close Button Keyboard Support
+
+
+
+
+ | Key |
+ Function |
+
+
+
+
+ | enter |
+ Closes the popup and moves focus to the trigger. |
+
+
+ | space |
+ Closes the popup and moves focus to the trigger. |
+
+
+
+
+
`
})
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 9c9a8b8813b..401715573f0 100644
--- a/src/app/showcase/doc/paginator/accessibilitydoc.ts
+++ b/src/app/showcase/doc/paginator/accessibilitydoc.ts
@@ -2,54 +2,53 @@ import { Component, Input } from '@angular/core';
@Component({
selector: 'accessibility-doc',
- template: `
-
-
- Screen Reader
- Paginator is placed inside a nav element to indicate a navigation section. All of the paginator elements can be customized using templating however the default behavious is listed below.
-
- First, previous, next and last page navigators elements with aria-label attributes referring to the aria.firstPageLabel, aria.prevPageLabel, aria.nextPageLabel and aria.lastPageLabelproperties of
- the locale API respectively.
-
-
- Page links are also button elements with an aria-label attribute derived from the aria.pageLabel of the locale API. Current page is marked with aria-current set to "page"
- as well.
-
- Current page report uses aria-live="polite" to instruct screen reader about the changes to the pagination state.
-
- Rows per page dropdown internally uses a dropdown component, refer to the dropdown documentation for accessibility details. Additionally, the dropdown uses an aria-labelfrom the
- aria.rowsPerPage property of the locale API.
-
- Jump to page input is an input element with an aria-label that refers to the aria.jumpToPage property of the locale API.
- Keyboard Support
-
-
-
-
- | Key |
- Function |
-
-
-
-
- | tab |
- Moves focus through the paginator elements. |
-
-
- | enter |
- Executes the paginator element action. |
-
-
- | space |
- Executes the paginator element action. |
-
-
-
-
Rows Per Page Dropdown Keyboard Support
- Refer to the dropdown documentation for more details about keyboard support.
-
-
`
+ template: `
+
+ Screen Reader
+ Paginator is placed inside a nav element to indicate a navigation section. All of the paginator elements can be customized using templating however the default behavious is listed below.
+
+ First, previous, next and last page navigators elements with aria-label attributes referring to the aria.firstPageLabel, aria.prevPageLabel, aria.nextPageLabel and aria.lastPageLabelproperties of the
+ locale API respectively.
+
+
+ Page links are also button elements with an aria-label attribute derived from the aria.pageLabel of the locale API. Current page is marked with aria-current set to "page" as
+ well.
+
+ Current page report uses aria-live="polite" to instruct screen reader about the changes to the pagination state.
+
+ Rows per page dropdown internally uses a dropdown component, refer to the dropdown documentation for accessibility details. Additionally, the dropdown uses an aria-labelfrom the
+ aria.rowsPerPage property of the locale API.
+
+ Jump to page input is an input element with an aria-label that refers to the aria.jumpToPage property of the locale API.
+ Keyboard Support
+
+
+
+
+ | Key |
+ Function |
+
+
+
+
+ | tab |
+ Moves focus through the paginator elements. |
+
+
+ | enter |
+ Executes the paginator element action. |
+
+
+ | space |
+ Executes the paginator element action. |
+
+
+
+
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 b7a93eaf9e8..383b6ea2712 100644
--- a/src/app/showcase/doc/picklist/accessibilitydoc.ts
+++ b/src/app/showcase/doc/picklist/accessibilitydoc.ts
@@ -3,108 +3,107 @@ import { Code } from '../../domain/code';
@Component({
selector: 'accessibility-doc',
- template: `
-
- Screen Reader
-
- 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.
-
-
- Controls buttons are button elements with an aria-label that refers to the aria.moveTop, aria.moveUp, aria.moveDown, aria.moveBottom,aria.moveTo, aria.moveAllTo,
- aria.moveFrom and aria.moveAllFrom properties of the locale API by default, alternatively you may usemoveTopButtonProps, moveUpButtonProps, moveDownButtonProps,
- moveToButtonProps, moveAllToButtonProps, moveFromButtonProps, moveFromButtonProps and moveAllFromButtonProps to customize the buttons like overriding the default aria-label attributes.
-
+ template: `
+ Screen Reader
+
+ 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.
+
+
+ Controls buttons are button elements with an aria-label that refers to the aria.moveTop, aria.moveUp, aria.moveDown, aria.moveBottom,aria.moveTo, aria.moveAllTo,
+ aria.moveFrom and aria.moveAllFrom properties of the locale API by default, alternatively you may usemoveTopButtonProps, moveUpButtonProps, moveDownButtonProps,
+ moveToButtonProps, moveAllToButtonProps, moveFromButtonProps, moveFromButtonProps and moveAllFromButtonProps to customize the buttons like overriding the default aria-label attributes.
+
-
+
- PickList Keyboard Support
-
-
-
-
- | Key |
- Function |
-
-
-
-
- | tab |
- Moves focus to the first selected option, if there is none then first option receives the focus. |
-
-
- | up arrow |
- Moves focus to the previous option. |
-
-
- | down arrow |
- Moves focus to the next option. |
-
-
- | enter |
- Toggles the selected state of the focused option. |
-
-
- | space |
- Toggles the selected state of the focused option. |
-
-
- | home |
- Moves focus to the first option. |
-
-
- | end |
- Moves focus to the last option. |
-
-
- | shift + down arrow |
- Moves focus to the next option and toggles the selection state. |
-
-
- | shift + up arrow |
- Moves focus to the previous option and toggles the selection state. |
-
-
- | shift + space |
- Selects the items between the most recently selected option and the focused option. |
-
-
- | control + shift + home |
- Selects the focused options and all the options up to the first one. |
-
-
- | control + shift + end |
- Selects the focused options and all the options down to the first one. |
-
-
- | control + a |
- Selects all options. |
-
-
-
-
Buttons Keyboard Support
-
-
-
-
- | Key |
- Function |
-
-
-
-
- | enter |
- Executes button action. |
-
-
- | space |
- Executes button action. |
-
-
-
-
PickList Keyboard Support
+
+
+
+
+ | Key |
+ Function |
+
+
+
+
+ | tab |
+ Moves focus to the first selected option, if there is none then first option receives the focus. |
+
+
+ | up arrow |
+ Moves focus to the previous option. |
+
+
+ | down arrow |
+ Moves focus to the next option. |
+
+
+ | enter |
+ Toggles the selected state of the focused option. |
+
+
+ | space |
+ Toggles the selected state of the focused option. |
+
+
+ | home |
+ Moves focus to the first option. |
+
+
+ | end |
+ Moves focus to the last option. |
+
+
+ | shift + down arrow |
+ Moves focus to the next option and toggles the selection state. |
+
+
+ | shift + up arrow |
+ Moves focus to the previous option and toggles the selection state. |
+
+
+ | shift + space |
+ Selects the items between the most recently selected option and the focused option. |
+
+
+ | control + shift + home |
+ Selects the focused options and all the options up to the first one. |
+
+
+ | control + shift + end |
+ Selects the focused options and all the options down to the first one. |
+
+
+ | control + a |
+ Selects all options. |
+
+
+
+
Buttons Keyboard Support
+
+
+
+
+ | Key |
+ Function |
+
+
+
+
+ | enter |
+ Executes button action. |
+
+
+ | space |
+ Executes button action. |
+
+
+
+
`
})
export class AccessibilityDoc {
@Input() id: string;
diff --git a/src/app/showcase/doc/scroller/accessibilitydoc.ts b/src/app/showcase/doc/scroller/accessibilitydoc.ts
index a7550d52f6c..fb1ec166488 100644
--- a/src/app/showcase/doc/scroller/accessibilitydoc.ts
+++ b/src/app/showcase/doc/scroller/accessibilitydoc.ts
@@ -2,16 +2,15 @@ import { Component, Input } from '@angular/core';
@Component({
selector: 'accessibility-doc',
- template: `
-
- Screen Reader
-
- Scroller uses a semantic list element to list the items. No specific role is enforced, still you may use any aria role and attributes as any valid attribute is passed to the container element. List element can be also customized for
- accessibility using listProps property.
-
- Keyboard Support
- Component does not include any built-in interactive elements.
- `
+ template: `
+ Screen Reader
+
+ Scroller uses a semantic list element to list the items. No specific role is enforced, still you may use any aria role and attributes as any valid attribute is passed to the container element. List element can be also customized for
+ accessibility using listProps property.
+
+ Keyboard Support
+ Component does not include any built-in interactive elements.
+ `
})
export class AccessibilityDoc {
@Input() id: string;
diff --git a/src/app/showcase/doc/table/accessibilitydoc.ts b/src/app/showcase/doc/table/accessibilitydoc.ts
index 0dd79a59070..dba407153d2 100644
--- a/src/app/showcase/doc/table/accessibilitydoc.ts
+++ b/src/app/showcase/doc/table/accessibilitydoc.ts
@@ -2,150 +2,148 @@ import { Component, Input } from '@angular/core';
@Component({
selector: 'accessibility-doc',
- template: `
-
-
- Screen Reader
-
- Default role of the table is table. Header, body and footer elements use rowgroup, rows use row role, header cells have columnheader and body cells use cell roles. Sortable headers
- utilizer aria-sort attribute either set to "ascending" or "descending".
-
- Table rows and table cells should be specified by users using the aria-posinset, aria-setsize, aria-label, and aria-describedby attributes, as they are determined through templating.
-
- Built-in checkbox and radiobutton components for row selection use checkbox and radiobutton. The label to describe them is retrieved from the aria.selectRow and aria.unselectRow properties of the
- locale API. Similarly header checkbox uses selectAll and unselectAll keys. When a row is selected, aria-selected is set to true on a row.
-
-
- The element to expand or collapse a row is a button with aria-expanded and aria-controls properties. Value to describe the buttons is derived from aria.expandRow and aria.collapseRow properties
- of the locale API.
-
-
- The filter menu button use aria.showFilterMenu and aria.hideFilterMenu properties as aria-label in addition to the aria-haspopup, aria-expanded and aria-controls to define the relation
- between the button and the overlay. Popop menu has dialog role with aria-modal as focus is kept within the overlay. The operator dropdown use aria.filterOperator and filter constraints dropdown use
- aria.filterConstraint properties. Buttons to add rules on the other hand utilize aria.addRule and aria.removeRule properties. The footer buttons similarly use aria.clear and
- aria.apply properties. filterInputProps of the Column component can be used to define aria labels for the built-in filter components, if a custom component is used with templating you also may define your own aria
- labels as well.
-
-
- Editable cells use custom templating so you need to manage aria roles and attributes manually if required. The row editor controls are button elements with aria.editRow, aria.cancelEdit and aria.saveEdit used
- for the aria-label.
-
- Paginator is a standalone component used inside the Table, refer to the paginator for more information about the accessibility features.
- Keyboard Support
- Any button element inside the Table used for cases like filter, row expansion, edit are tabbable and can be used with space and enter keys.
- Sortable Headers Keyboard Support
-
-
-
-
- | Key |
- Function |
-
-
-
-
- | tab |
- Moves through the headers. |
-
-
- | enter |
- Sorts the column. |
-
-
- | space |
- Sorts the column. |
-
-
-
-
Filter Menu Keyboard Support
-
-
-
-
- | Key |
- Function |
-
-
-
-
- | tab |
- Moves through the elements inside the popup. |
-
-
- | escape |
- Hides the popup. |
-
-
-
-
Selection Keyboard Support
-
-
-
-
- | Key |
- Function |
-
-
-
-
- | tab |
- Moves focus to the first selected row, if there is none then first row receives the focus. |
-
-
- | up arrow |
- Moves focus to the previous row. |
-
-
- | down arrow |
- Moves focus to the next row. |
-
-
- | enter |
- Toggles the selected state of the focused row depending on the metaKeySelection setting. |
-
-
- | space |
- Toggles the selected state of the focused row depending on the metaKeySelection setting. |
-
-
- | home |
- Moves focus to the first row. |
-
-
- | end |
- Moves focus to the last row. |
-
-
- | shift + down arrow |
- Moves focus to the next row and toggles the selection state. |
-
-
- | shift + up arrow |
- Moves focus to the previous row and toggles the selection state. |
-
-
- | shift + space |
- Selects the rows between the most recently selected row and the focused row. |
-
-
- | control + shift + home |
- Selects the focused rows and all the options up to the first one. |
-
-
- | control + shift + end |
- Selects the focused rows and all the options down to the last one. |
-
-
- | control + a |
- Selects all rows. |
-
-
-
-
-
`
+ template: `
+
+ Screen Reader
+
+ Default role of the table is table. Header, body and footer elements use rowgroup, rows use row role, header cells have columnheader and body cells use cell roles. Sortable headers utilizer
+ aria-sort attribute either set to "ascending" or "descending".
+
+ Table rows and table cells should be specified by users using the aria-posinset, aria-setsize, aria-label, and aria-describedby attributes, as they are determined through templating.
+
+ Built-in checkbox and radiobutton components for row selection use checkbox and radiobutton. The label to describe them is retrieved from the aria.selectRow and aria.unselectRow properties of the
+ locale API. Similarly header checkbox uses selectAll and unselectAll keys. When a row is selected, aria-selected is set to true on a row.
+
+
+ The element to expand or collapse a row is a button with aria-expanded and aria-controls properties. Value to describe the buttons is derived from aria.expandRow and aria.collapseRow properties of
+ the locale API.
+
+
+ The filter menu button use aria.showFilterMenu and aria.hideFilterMenu properties as aria-label in addition to the aria-haspopup, aria-expanded and aria-controls to define the relation between
+ the button and the overlay. Popop menu has dialog role with aria-modal as focus is kept within the overlay. The operator dropdown use aria.filterOperator and filter constraints dropdown use
+ aria.filterConstraint properties. Buttons to add rules on the other hand utilize aria.addRule and aria.removeRule properties. The footer buttons similarly use aria.clear and aria.apply properties.
+ filterInputProps of the Column component can be used to define aria labels for the built-in filter components, if a custom component is used with templating you also may define your own aria labels as well.
+
+
+ Editable cells use custom templating so you need to manage aria roles and attributes manually if required. The row editor controls are button elements with aria.editRow, aria.cancelEdit and aria.saveEdit used for
+ the aria-label.
+
+ Paginator is a standalone component used inside the Table, refer to the paginator for more information about the accessibility features.
+ Keyboard Support
+ Any button element inside the Table used for cases like filter, row expansion, edit are tabbable and can be used with space and enter keys.
+ Sortable Headers Keyboard Support
+
+
+
+
+ | Key |
+ Function |
+
+
+
+
+ | tab |
+ Moves through the headers. |
+
+
+ | enter |
+ Sorts the column. |
+
+
+ | space |
+ Sorts the column. |
+
+
+
+
Filter Menu Keyboard Support
+
+
+
+
+ | Key |
+ Function |
+
+
+
+
+ | tab |
+ Moves through the elements inside the popup. |
+
+
+ | escape |
+ Hides the popup. |
+
+
+
+
Selection Keyboard Support
+
+
+
+
+ | Key |
+ Function |
+
+
+
+
+ | tab |
+ Moves focus to the first selected row, if there is none then first row receives the focus. |
+
+
+ | up arrow |
+ Moves focus to the previous row. |
+
+
+ | down arrow |
+ Moves focus to the next row. |
+
+
+ | enter |
+ Toggles the selected state of the focused row depending on the metaKeySelection setting. |
+
+
+ | space |
+ Toggles the selected state of the focused row depending on the metaKeySelection setting. |
+
+
+ | home |
+ Moves focus to the first row. |
+
+
+ | end |
+ Moves focus to the last row. |
+
+
+ | shift + down arrow |
+ Moves focus to the next row and toggles the selection state. |
+
+
+ | shift + up arrow |
+ Moves focus to the previous row and toggles the selection state. |
+
+
+ | shift + space |
+ Selects the rows between the most recently selected row and the focused row. |
+
+
+ | control + shift + home |
+ Selects the focused rows and all the options up to the first one. |
+
+
+ | control + shift + end |
+ Selects the focused rows and all the options down to the last one. |
+
+
+ | control + a |
+ Selects all rows. |
+
+
+
+
+
`
})
export class AccessibilityDoc {
@Input() id: string;
diff --git a/src/app/showcase/doc/table/columntoggledoc.ts b/src/app/showcase/doc/table/columntoggledoc.ts
index 5c6a49407b8..882cb2bae86 100644
--- a/src/app/showcase/doc/table/columntoggledoc.ts
+++ b/src/app/showcase/doc/table/columntoggledoc.ts
@@ -14,27 +14,27 @@ interface Column {
This demo uses a multiselect component to implement toggleable columns.
-
-
-
-
-
-
- | Code |
-
- {{ col.header }}
- |
-
-
-
-
- | {{ product.code }} |
-
- {{ product[col.field] }}
- |
-
-
-
+
+
+
+
+
+
+ | Code |
+
+ {{ col.header }}
+ |
+
+
+
+
+ | {{ product.code }} |
+
+ {{ product[col.field] }}
+ |
+
+
+
`,
diff --git a/src/app/showcase/doc/timeline/accessibilitydoc.ts b/src/app/showcase/doc/timeline/accessibilitydoc.ts
index a5a9ded0440..71d3b8f52b1 100644
--- a/src/app/showcase/doc/timeline/accessibilitydoc.ts
+++ b/src/app/showcase/doc/timeline/accessibilitydoc.ts
@@ -2,13 +2,12 @@ import { Component, Input } from '@angular/core';
@Component({
selector: 'accessibility-doc',
- 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.
- `
+ 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 917dd438a40..53258824a3e 100644
--- a/src/app/showcase/doc/tree/accessibilitydoc.ts
+++ b/src/app/showcase/doc/tree/accessibilitydoc.ts
@@ -2,67 +2,66 @@ import { Component, Input } from '@angular/core';
@Component({
selector: 'accessibility-doc',
- template: `
-
- Screen Reader
-
- Value to describe the component can either be provided with aria-labelledby or aria-label props. The root list element has a tree role whereas each list item has a treeitem role along with
- aria-label, aria-selected and aria-expanded attributes. In checkbox selection, aria-checked is used instead of aria-selected. The container element of a treenode has the group role. Checkbox
- and toggle icons are hidden from screen readers as their parent element with treeitem role and attributes are used instead for readers and keyboard support. The aria-setsize, aria-posinset and
- aria-level attributes are calculated implicitly and added to each treeitem.
-
- Keyboard Support
-
-
-
-
- | Key |
- Function |
-
-
-
-
- | tab |
-
- Moves focus to the first selected node when focus enters the component, if there is none then first element receives the focus. If focus is already inside the component, moves focus to the next focusable element in the
- page tab sequence.
- |
-
-
- | shift + tab |
-
- Moves focus to the last selected node when focus enters the component, if there is none then first element receives the focus. If focus is already inside the component, moves focus to the previous focusable element in
- the page tab sequence.
- |
-
-
- | enter |
- Selects the focused treenode. |
-
-
- | space |
- Selects the focused treenode. |
-
-
- | down arrow |
- Moves focus to the next treenode. |
-
-
- | up arrow |
- Moves focus to the previous treenode. |
-
-
- | right arrow |
- If node is closed, opens the node otherwise moves focus to the first child node. |
-
-
- | left arrow |
- If node is open, closes the node otherwise moves focus to the parent node. |
-
-
-
-
`
+ template: `
+ Screen Reader
+
+ Value to describe the component can either be provided with aria-labelledby or aria-label props. The root list element has a tree role whereas each list item has a treeitem role along with aria-label,
+ aria-selected and aria-expanded attributes. In checkbox selection, aria-checked is used instead of aria-selected. The container element of a treenode has the group role. Checkbox and toggle icons are
+ hidden from screen readers as their parent element with treeitem role and attributes are used instead for readers and keyboard support. The aria-setsize, aria-posinset and aria-level attributes are calculated
+ implicitly and added to each treeitem.
+
+ Keyboard Support
+
+
+
+
+ | Key |
+ Function |
+
+
+
+
+ | tab |
+
+ Moves focus to the first selected node when focus enters the component, if there is none then first element receives the focus. If focus is already inside the component, moves focus to the next focusable element in the
+ page tab sequence.
+ |
+
+
+ | shift + tab |
+
+ Moves focus to the last selected node when focus enters the component, if there is none then first element receives the focus. If focus is already inside the component, moves focus to the previous focusable element in the
+ page tab sequence.
+ |
+
+
+ | enter |
+ Selects the focused treenode. |
+
+
+ | space |
+ Selects the focused treenode. |
+
+
+ | down arrow |
+ Moves focus to the next treenode. |
+
+
+ | up arrow |
+ Moves focus to the previous treenode. |
+
+
+ | right arrow |
+ If node is closed, opens the node otherwise moves focus to the first child node. |
+
+
+ | left arrow |
+ If node is open, closes the node otherwise moves focus to the parent node. |
+
+
+
+
`
})
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 a077bf93faf..7decf47114a 100644
--- a/src/app/showcase/doc/treeselect/accessibilitydoc.ts
+++ b/src/app/showcase/doc/treeselect/accessibilitydoc.ts
@@ -3,182 +3,181 @@ import { Code } from '../../domain/code';
@Component({
selector: 'accessibility-doc',
- template: `
-
-
- Screen Reader
-
- 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.
-
-
- The popup list has an id that refers to the aria-controls attribute of the combobox element and uses tree as the role. Each list item has a treeitem role along with aria-label,
- aria-selected and aria-expanded attributes. In checkbox selection, aria-checked is used instead of aria-selected. Checkbox and toggle icons are hidden from screen readers as their parent element with
- treeitem role and attributes are used instead for readers and keyboard support. The container element of a treenode has the group role. The aria-setsize, aria-posinset and aria-level attributes
- are calculated implicitly and added to each treeitem.
-
+ template: `
+
+ Screen Reader
+
+ 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.
+
+
+ The popup list has an id that refers to the aria-controls attribute of the combobox element and uses tree as the role. Each list item has a treeitem role along with aria-label,
+ aria-selected and aria-expanded attributes. In checkbox selection, aria-checked is used instead of aria-selected. Checkbox and toggle icons are hidden from screen readers as their parent element with
+ treeitem role and attributes are used instead for readers and keyboard support. The container element of a treenode has the group role. The aria-setsize, aria-posinset and aria-level attributes are
+ calculated implicitly and added to each treeitem.
+
- If filtering is enabled, filterInputProps can be defined to give aria-* props to the filter input element.
-
+
If filtering is enabled, filterInputProps can be defined to give aria-* props to the filter input element.
+
-
+
-
Closed State Keyboard Support
-
-
-
-
- | Key |
- Function |
-
-
-
-
- |
- tab
- |
- Moves focus to the treeselect element. |
-
-
- |
- space
- |
- Opens the popup and moves visual focus to the selected treenode, if there is none then first treenode receives the focus. |
-
-
- |
- down arrow
- |
- Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus. |
-
-
-
-
+
Closed State Keyboard Support
+
+
+
+
+ | Key |
+ Function |
+
+
+
+
+ |
+ tab
+ |
+ Moves focus to the treeselect element. |
+
+
+ |
+ space
+ |
+ Opens the popup and moves visual focus to the selected treenode, if there is none then first treenode receives the focus. |
+
+
+ |
+ down arrow
+ |
+ Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus. |
+
+
+
+
-
Popup Keyboard Support
-
-
-
-
- | Key |
- Function |
-
-
-
-
- |
- tab
- |
- Moves focus to the next focusable element in the popup, if there is none then first focusable element receives the focus. |
-
-
- | shift + tab |
- Moves focus to the previous focusable element in the popup, if there is none then last focusable element receives the focus. |
-
-
- |
- enter
- |
- Selects the focused option, closes the popup if selection mode is single. |
-
-
- |
- space
- |
- Selects the focused option, closes the popup if selection mode is single. |
-
-
- |
- escape
- |
- Closes the popup, moves focus to the treeselect element. |
-
-
- |
- down arrow
- |
- Moves focus to the next treenode. |
-
-
- |
- up arrow
- |
- Moves focus to the previous treenode. |
-
-
- |
- right arrow
- |
- If node is closed, opens the node otherwise moves focus to the first child node. |
-
-
- |
- left arrow
- |
- If node is open, closes the node otherwise moves focus to the parent node. |
-
-
-
-
+
Popup Keyboard Support
+
+
+
+
+ | Key |
+ Function |
+
+
+
+
+ |
+ tab
+ |
+ Moves focus to the next focusable element in the popup, if there is none then first focusable element receives the focus. |
+
+
+ | shift + tab |
+ Moves focus to the previous focusable element in the popup, if there is none then last focusable element receives the focus. |
+
+
+ |
+ enter
+ |
+ Selects the focused option, closes the popup if selection mode is single. |
+
+
+ |
+ space
+ |
+ Selects the focused option, closes the popup if selection mode is single. |
+
+
+ |
+ escape
+ |
+ Closes the popup, moves focus to the treeselect element. |
+
+
+ |
+ down arrow
+ |
+ Moves focus to the next treenode. |
+
+
+ |
+ up arrow
+ |
+ Moves focus to the previous treenode. |
+
+
+ |
+ right arrow
+ |
+ If node is closed, opens the node otherwise moves focus to the first child node. |
+
+
+ |
+ left arrow
+ |
+ If node is open, closes the node otherwise moves focus to the parent node. |
+
+
+
+
-
Filter Input Keyboard Support
-
-
-
-
- | Key |
- Function |
-
-
-
-
- |
- enter
- |
- Closes the popup and moves focus to the treeselect element. |
-
-
- |
- escape
- |
- Closes the popup and moves focus to the treeselect element. |
-
-
-
-
+
Filter Input Keyboard Support
+
+
+
+
+ | Key |
+ Function |
+
+
+
+
+ |
+ enter
+ |
+ Closes the popup and moves focus to the treeselect element. |
+
+
+ |
+ escape
+ |
+ Closes the popup and moves focus to the treeselect element. |
+
+
+
+
-
Close Button Keyboard Support
-
-
-
-
- | Key |
- Function |
-
-
-
-
- |
- enter
- |
- Closes the popup and moves focus to the treeselect element. |
-
-
- |
- space
- |
- Closes the popup and moves focus to the treeselect element. |
-
-
- |
- escape
- |
- Closes the popup and moves focus to the treeselect element. |
-
-
-
-
-
Close Button Keyboard Support
+
+
+
+
+ | Key |
+ Function |
+
+
+
+
+ |
+ enter
+ |
+ Closes the popup and moves focus to the treeselect element. |
+
+
+ |
+ space
+ |
+ Closes the popup and moves focus to the treeselect element. |
+
+
+ |
+ escape
+ |
+ Closes the popup and moves focus to the treeselect element. |
+
+
+
+
`
})
export class AccessibilityDoc {
@Input() id: string;
diff --git a/src/app/showcase/doc/treetable/accessibilitydoc.ts b/src/app/showcase/doc/treetable/accessibilitydoc.ts
index 8126cb9f043..26284f242db 100644
--- a/src/app/showcase/doc/treetable/accessibilitydoc.ts
+++ b/src/app/showcase/doc/treetable/accessibilitydoc.ts
@@ -2,93 +2,96 @@ import { Component, Input } from '@angular/core';
@Component({
selector: 'accessibility-doc',
- template: `
-
- Screen Reader
- Default role of the table is table. Header, body and footer elements use rowgroup, rows use row role, header cells have columnheader and body cells use cell roles. Sortable headers
- utilizer aria-sort attribute either set to "ascending" or "descending".
-
- Row elements manage aria-expanded for state and aria-level attribute to define the hierachy by ttRow directive. Table rows and table cells should be specified by users using the aria-posinset, aria-setsize, aria-label, and aria-describedby attributes, as they are determined through templating.
- When selection is enabled, ttSelectableRow directive sets aria-selected to true on a row. In checkbox mode, the built-in checkbox component use checkbox role with aria-checked state attribute.
- Editable cells use custom templating so you need to manage aria roles and attributes manually if required.
- Paginator is a standalone component used inside the TreeTable, refer to the paginator for more information about the accessibility features.
- Sortable Headers Keyboard Support
-
-
-
-
- | Key |
- Function |
-
-
-
-
- | tab |
- Moves through the headers. |
-
-
- | enter |
- Sorts the column. |
-
-
- | space |
- Sorts the column. |
-
-
-
-
Keyboard Support
-
-
-
-
- | Key |
- Function |
-
-
-
-
- | tab |
-
- Moves focus to the first selected node when focus enters the component, if there is none then first element receives the focus. If focus is already inside the component, moves focus to the next focusable element in the
- page tab sequence.
- |
-
-
- | shift + tab |
-
- Moves focus to the last selected node when focus enters the component, if there is none then first element receives the focus. If focus is already inside the component, moves focus to the previous focusable element in
- the page tab sequence.
- |
-
-
- | enter |
- Selects the focused treenode. |
-
-
- | space |
- Selects the focused treenode. |
-
-
- | down arrow |
- Moves focus to the next treenode. |
-
-
- | up arrow |
- Moves focus to the previous treenode. |
-
-
- | right arrow |
- If node is closed, opens the node otherwise moves focus to the first child node. |
-
-
- | left arrow |
- If node is open, closes the node otherwise moves focus to the parent node. |
-
-
-
-
`
+ template: `
+ Screen Reader
+
+ Default role of the table is table. Header, body and footer elements use rowgroup, rows use row role, header cells have columnheader and body cells use cell roles. Sortable headers utilizer
+ aria-sort attribute either set to "ascending" or "descending".
+
+
+ Row elements manage aria-expanded for state and aria-level attribute to define the hierachy by ttRow directive. Table rows and table cells should be specified by users using the aria-posinset,
+ aria-setsize, aria-label, and aria-describedby attributes, as they are determined through templating.
+
+ When selection is enabled, ttSelectableRow directive sets aria-selected to true on a row. In checkbox mode, the built-in checkbox component use checkbox role with aria-checked state attribute.
+ Editable cells use custom templating so you need to manage aria roles and attributes manually if required.
+ Paginator is a standalone component used inside the TreeTable, refer to the paginator for more information about the accessibility features.
+ Sortable Headers Keyboard Support
+
+
+
+
+ | Key |
+ Function |
+
+
+
+
+ | tab |
+ Moves through the headers. |
+
+
+ | enter |
+ Sorts the column. |
+
+
+ | space |
+ Sorts the column. |
+
+
+
+
Keyboard Support
+
+
+
+
+ | Key |
+ Function |
+
+
+
+
+ | tab |
+
+ Moves focus to the first selected node when focus enters the component, if there is none then first element receives the focus. If focus is already inside the component, moves focus to the next focusable element in the
+ page tab sequence.
+ |
+
+
+ | shift + tab |
+
+ Moves focus to the last selected node when focus enters the component, if there is none then first element receives the focus. If focus is already inside the component, moves focus to the previous focusable element in the
+ page tab sequence.
+ |
+
+
+ | enter |
+ Selects the focused treenode. |
+
+
+ | space |
+ Selects the focused treenode. |
+
+
+ | down arrow |
+ Moves focus to the next treenode. |
+
+
+ | up arrow |
+ Moves focus to the previous treenode. |
+
+
+ | right arrow |
+ If node is closed, opens the node otherwise moves focus to the first child node. |
+
+
+ | left arrow |
+ If node is open, closes the node otherwise moves focus to the parent node. |
+
+
+
+
`
})
export class AccessibilityDoc {
@Input() id: string;
diff --git a/src/app/showcase/doc/treetable/basicdoc.ts b/src/app/showcase/doc/treetable/basicdoc.ts
index 1b024d18612..893502603ca 100644
--- a/src/app/showcase/doc/treetable/basicdoc.ts
+++ b/src/app/showcase/doc/treetable/basicdoc.ts
@@ -48,7 +48,7 @@ export class BasicDoc implements OnInit {
ngOnInit() {
this.nodeService.getFilesystem().then((files) => {
- this.files = files.slice(0,5)
+ this.files = files.slice(0, 5);
this.cd.markForCheck();
});
}
diff --git a/src/app/showcase/doc/virtualscroller/accessibilitydoc.ts b/src/app/showcase/doc/virtualscroller/accessibilitydoc.ts
index 89627afc480..08a7078d11b 100644
--- a/src/app/showcase/doc/virtualscroller/accessibilitydoc.ts
+++ b/src/app/showcase/doc/virtualscroller/accessibilitydoc.ts
@@ -2,16 +2,15 @@ import { Component, Input } from '@angular/core';
@Component({
selector: 'accessibility-doc',
- template: `
-
- Screen Reader
-
- VirtualScroller uses a semantic list element to list the items. No specific role is enforced, still you may use any aria role and attributes as any valid attribute is passed to the container element. List element can be also
- customized for accessibility using listProps property.
-
- Keyboard Support
- Component does not include any built-in interactive elements.
- `
+ template: `
+ Screen Reader
+
+ VirtualScroller uses a semantic list element to list the items. No specific role is enforced, still you may use any aria role and attributes as any valid attribute is passed to the container element. List element can be also customized
+ for accessibility using listProps property.
+
+ Keyboard Support
+ Component does not include any built-in interactive elements.
+ `
})
export class AccessibilityDoc {
@Input() id: string;