From 143c9b0a5cd9d687312795e699306acb3c2cd1ab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Wed, 1 Nov 2023 16:59:13 +0300 Subject: [PATCH] Code format --- .../animateonscroll/animateonscroll.ts | 35 +- .../components/autocomplete/autocomplete.ts | 2 +- .../components/cascadeselect/cascadeselect.ts | 46 +- src/app/components/contextmenu/contextmenu.ts | 4 +- src/app/components/password/password.ts | 4 +- src/app/components/rating/rating.ts | 36 +- .../components/selectbutton/selectbutton.ts | 2 +- .../doc/animateonscroll/accessibilitydoc.ts | 22 +- .../doc/autocomplete/accessibilitydoc.ts | 255 ++++++----- .../showcase/doc/calendar/accessibilitydoc.ts | 430 +++++++++--------- .../doc/cascadeselect/accessibilitydoc.ts | 225 +++++---- .../showcase/doc/checkbox/accessibilitydoc.ts | 71 ++- .../showcase/doc/chips/accessibilitydoc.ts | 157 ++++--- .../doc/colorpicker/accessibilitydoc.ts | 213 +++++---- .../showcase/doc/dropdown/accessibilitydoc.ts | 323 +++++++------ .../showcase/doc/editor/accessibilitydoc.ts | 17 +- .../doc/inputmask/accessibilitydoc.ts | 59 ++- .../doc/inputnumber/accessibilitydoc.ts | 107 +++-- .../doc/inputswitch/accessibilitydoc.ts | 71 ++- .../doc/inputtext/accessibilitydoc.ts | 59 ++- .../doc/inputtextarea/accessibilitydoc.ts | 59 ++- .../doc/keyfilter/accessibilitydoc.ts | 11 +- src/app/showcase/doc/knob/accessibilitydoc.ts | 143 +++--- .../doc/multiselect/accessibilitydoc.ts | 413 +++++++++-------- src/app/showcase/doc/multiselect/groupdoc.ts | 4 +- .../showcase/doc/password/accessibilitydoc.ts | 71 ++- .../doc/radiobutton/accessibilitydoc.ts | 107 +++-- .../showcase/doc/rating/accessibilitydoc.ts | 109 +++-- .../doc/selectbutton/accessibilitydoc.ts | 69 ++- .../showcase/doc/slider/accessibilitydoc.ts | 143 +++--- .../doc/togglebutton/accessibilitydoc.ts | 73 ++- .../doc/tristatecheckbox/accessibilitydoc.ts | 85 ++-- 32 files changed, 1705 insertions(+), 1720 deletions(-) diff --git a/src/app/components/animateonscroll/animateonscroll.ts b/src/app/components/animateonscroll/animateonscroll.ts index 705a9d794ed..e55257033a6 100644 --- a/src/app/components/animateonscroll/animateonscroll.ts +++ b/src/app/components/animateonscroll/animateonscroll.ts @@ -33,7 +33,7 @@ export class AnimateOnScroll implements OnInit, AfterViewInit { * Specifies the root option of the IntersectionObserver API. * @group Props */ - @Input() root: HTMLElement | undefined | null; + @Input() root: HTMLElement | undefined | null; /** * Specifies the rootMargin option of the IntersectionObserver API. * @group Props @@ -63,13 +63,13 @@ export class AnimateOnScroll implements OnInit, AfterViewInit { constructor(@Inject(DOCUMENT) private document: Document, @Inject(PLATFORM_ID) private platformId: any, private host: ElementRef, public el: ElementRef, public renderer: Renderer2) {} ngOnInit() { - if(isPlatformBrowser(this.platformId)){ + if (isPlatformBrowser(this.platformId)) { this.renderer.setStyle(this.host.nativeElement, 'opacity', this.enterClass ? '0' : ''); } } ngAfterViewInit() { - if(isPlatformBrowser(this.platformId)){ + if (isPlatformBrowser(this.platformId)) { this.bindIntersectionObserver(); } } @@ -79,16 +79,16 @@ export class AnimateOnScroll implements OnInit, AfterViewInit { root: this.root, rootMargin: this.rootMargin, threshold: this.threshold - } + }; } bindIntersectionObserver() { this.observer = new IntersectionObserver(([entry]) => { - if(this.isObserverActive) { - if(entry.boundingClientRect.top > 0) { + if (this.isObserverActive) { + if (entry.boundingClientRect.top > 0) { entry.isIntersecting ? this.enter() : this.leave(); } - } else if(entry.isIntersecting) { + } else if (entry.isIntersecting) { this.enter(); } @@ -99,16 +99,19 @@ export class AnimateOnScroll implements OnInit, AfterViewInit { // Reset - this.resetObserver = new IntersectionObserver(([entry]) => { - if (entry.boundingClientRect.top > 0 && !entry.isIntersecting) { - this.host.nativeElement.style.opacity = this.enterClass ? '0' : ''; - DomHandler.removeMultipleClasses(this.host.nativeElement, [this.enterClass, this.leaveClass]); + this.resetObserver = new IntersectionObserver( + ([entry]) => { + if (entry.boundingClientRect.top > 0 && !entry.isIntersecting) { + this.host.nativeElement.style.opacity = this.enterClass ? '0' : ''; + DomHandler.removeMultipleClasses(this.host.nativeElement, [this.enterClass, this.leaveClass]); - this.resetObserver.unobserve(this.host.nativeElement); - } + this.resetObserver.unobserve(this.host.nativeElement); + } - this.animationState = undefined; - }, {...this.options, threshold: 0}) + this.animationState = undefined; + }, + { ...this.options, threshold: 0 } + ); } enter() { @@ -141,7 +144,7 @@ export class AnimateOnScroll implements OnInit, AfterViewInit { DomHandler.removeMultipleClasses(this.host.nativeElement, [this.enterClass, this.leaveClass]); !this.once && this.resetObserver.observe(this.host.nativeElement); this.unbindAnimationEvents(); - }) + }); } } diff --git a/src/app/components/autocomplete/autocomplete.ts b/src/app/components/autocomplete/autocomplete.ts index 7409e04cc67..07cfcf70bae 100755 --- a/src/app/components/autocomplete/autocomplete.ts +++ b/src/app/components/autocomplete/autocomplete.ts @@ -1531,7 +1531,7 @@ export class AutoComplete implements AfterViewChecked, AfterContentInit, OnDestr } getOptionLabel(option: any) { - return this.field || this.optionLabel ? ObjectUtils.resolveFieldData(option, this.field || this.optionLabel) : option && option.label != undefined ? option.label : option; + return this.field || this.optionLabel ? ObjectUtils.resolveFieldData(option, this.field || this.optionLabel) : option && option.label != undefined ? option.label : option; } getOptionValue(option) { diff --git a/src/app/components/cascadeselect/cascadeselect.ts b/src/app/components/cascadeselect/cascadeselect.ts index fb6578a31d3..249530d350a 100755 --- a/src/app/components/cascadeselect/cascadeselect.ts +++ b/src/app/components/cascadeselect/cascadeselect.ts @@ -45,24 +45,18 @@ export const CASCADESELECT_VALUE_ACCESSOR: any = { template: `
- AnimateOnScroll does not require any roles and attributes. -
-- Component does not include any interactive elements. -
-AnimateOnScroll does not require any roles and attributes.
+Component does not include any interactive elements.
+- Value to describe the component can either be provided via label tag combined with inputId prop or using ariaLabelledBy, ariaLabel props. The input element has combobox role in addition to - aria-autocomplete, aria-haspopup and aria-expanded attributes. The relation between the input and the popup is created with aria-controls and aria-activedescendant attribute is used to instruct - screen reader which option to read during keyboard navigation within the popup list. -
-In multiple mode, chip list uses listbox role whereas each chip has the option role with aria-label set to the label of the chip.
-- The popup list has an id that refers to the aria-controls attribute of the input element and uses listbox as the role. Each list item has option role and an id to match the aria-activedescendant of the - input element. -
-+ Value to describe the component can either be provided via label tag combined with inputId prop or using ariaLabelledBy, ariaLabel props. The input element has combobox role in addition to + aria-autocomplete, aria-haspopup and aria-expanded attributes. The relation between the input and the popup is created with aria-controls and aria-activedescendant attribute is used to instruct + screen reader which option to read during keyboard navigation within the popup list. +
+In multiple mode, chip list uses listbox role whereas each chip has the option role with aria-label set to the label of the chip.
++ The popup list has an id that refers to the aria-controls attribute of the input element and uses listbox as the role. Each list item has option role and an id to match the aria-activedescendant of the + input element. +
+Key | -Function | -
---|---|
- tab - | -Moves focus to the input element when popup is not visible. If the popup is open and an item is highlighted then popup gets closed, item gets selected and focus moves to the next focusable element. | -
- up arrow - | -Highlights the previous item if popup is visible. | -
- down arrow - | -Highlights the next item if popup is visible. | -
- enter - | -Selects the highlighted item and closes the popup if popup is visible. | -
- home - | -Highlights the first item if popup is visible. | -
- end - | -Highlights the last item if popup is visible. | -
- escape - | -Hides the popup. | -
Key | +Function | +
---|---|
+ tab + | +Moves focus to the input element when popup is not visible. If the popup is open and an item is highlighted then popup gets closed, item gets selected and focus moves to the next focusable element. | +
+ up arrow + | +Highlights the previous item if popup is visible. | +
+ down arrow + | +Highlights the next item if popup is visible. | +
+ enter + | +Selects the highlighted item and closes the popup if popup is visible. | +
+ home + | +Highlights the first item if popup is visible. | +
+ end + | +Highlights the last item if popup is visible. | +
+ escape + | +Hides the popup. | +
Key | -Function | -
---|---|
- backspace - | -Deletes the previous chip if the input field is empty. | -
- left arrow - | -Moves focus to the previous chip if available and input field is empty. | -
Key | +Function | +
---|---|
+ backspace + | +Deletes the previous chip if the input field is empty. | +
+ left arrow + | +Moves focus to the previous chip if available and input field is empty. | +
Key | -Function | -
---|---|
- left arrow - | -Moves focus to the previous chip if available. | -
- right arrow - | -Moves focus to the next chip, if there is none then input field receives the focus. | -
- backspace - | -Deletes the chips and adds focus to the input field. | -
Key | +Function | +
---|---|
+ left arrow + | +Moves focus to the previous chip if available. | +
+ right arrow + | +Moves focus to the next chip, if there is none then input field receives the focus. | +
+ backspace + | +Deletes the chips and adds focus to the input field. | +
- Value to describe the component can either be provided via label tag combined with inputId prop or using aria-labelledby, aria-label props. The input element has combobox role in addition to - aria-autocomplete as "none", aria-haspopup as "dialog" and aria-expanded attributes. The relation between the input and the popup is created with aria-controls attribute that refers to the id of the - popup. -
-- The optional calendar button requires includes aria-haspopup, aria-expanded for states along with aria-controls to define the relation between the popup and the button. The value to read is retrieved from the - chooseDate - key of the aria property from the locale API. This label is also used for the aria-label of the popup as well. When there is a value selected, it is formatted and appended to the label - to be able to notify users about the current value. -
+ template: `+ Value to describe the component can either be provided via label tag combined with inputId prop or using aria-labelledby, aria-label props. The input element has combobox role in addition to + aria-autocomplete as "none", aria-haspopup as "dialog" and aria-expanded attributes. The relation between the input and the popup is created with aria-controls attribute that refers to the id of the popup. +
++ The optional calendar button requires includes aria-haspopup, aria-expanded for states along with aria-controls to define the relation between the popup and the button. The value to read is retrieved from the + chooseDate + key of the aria property from the locale API. This label is also used for the aria-label of the popup as well. When there is a value selected, it is formatted and appended to the label to be + able to notify users about the current value. +
-- Popup has a dialog role along with aria-modal and aria-label. The navigation buttons at the header has an aria-label retrieved from the prevYear, nextYear, prevMonth, - nextMonth,prevDecade and nextDecade keys of the locale aria API. Similarly month picker button uses the chooseMonth and year picker button uses the chooseYear keys. -
++ Popup has a dialog role along with aria-modal and aria-label. The navigation buttons at the header has an aria-label retrieved from the prevYear, nextYear, prevMonth, + nextMonth,prevDecade and nextDecade keys of the locale aria API. Similarly month picker button uses the chooseMonth and year picker button uses the chooseYear keys. +
-- Main date table uses grid role that contains th elements with col as the scope along with abbr tag resolving to the full name of the month. Each date cell has an aria-label referring to the full date - value. Buttons at the footer utilize their readable labels as aria-label as well. Selected date also receives the aria-selected attribute. -
++ Main date table uses grid role that contains th elements with col as the scope along with abbr tag resolving to the full name of the month. Each date cell has an aria-label referring to the full date value. + Buttons at the footer utilize their readable labels as aria-label as well. Selected date also receives the aria-selected attribute. +
-- Timepicker spinner buttons get their labels for aria-label from the aria locale API using the prevHour, nextHour, prevMinute, nextMinute, prevSecond, nextSecond, am and - pm keys. -
++ Timepicker spinner buttons get their labels for aria-label from the aria locale API using the prevHour, nextHour, prevMinute, nextMinute, prevSecond, nextSecond, am and + pm keys. +
-Calendar also includes a hidden section that is only available to screen readers with aria-live as "polite". This element is updated when the selected date changes to instruct the user about the current date selected.
-Calendar also includes a hidden section that is only available to screen readers with aria-live as "polite". This element is updated when the selected date changes to instruct the user about the current date selected.
+ -Key | -Function | -
---|---|
- space - | -Opens popup and moves focus to the selected date, if there is none focuses on today. | -
- enter - | -Opens popup and moves focus to the selected date, if there is none focuses on today. | -
Key | +Function | +
---|---|
+ space + | +Opens popup and moves focus to the selected date, if there is none focuses on today. | +
+ enter + | +Opens popup and moves focus to the selected date, if there is none focuses on today. | +
Key | -Function | -
---|---|
- escape - | -Closes the popup and moves focus to the input element. | -
- tab - | -Moves focus to the next focusable element within the popup. | -
shift + tab | -Moves focus to the next focusable element within the popup. | -
Key | +Function | +
---|---|
+ escape + | +Closes the popup and moves focus to the input element. | +
+ tab + | +Moves focus to the next focusable element within the popup. | +
shift + tab | +Moves focus to the next focusable element within the popup. | +
Key | -Function | -
---|---|
- enter - | -Triggers the button action. | -
- space - | -Triggers the button action. | -
Key | +Function | +
---|---|
+ enter + | +Triggers the button action. | +
+ space + | +Triggers the button action. | +
Key | -Function | -
---|---|
- enter - | -Selects the date, closes the popup and moves focus to the input element. | -
- space - | -Selects the date, closes the popup and moves focus to the input element. | -
- up arrow - | -Moves focus to the same day of the previous week. | -
- down arrow - | -Moves focus to the same day of the next week. | -
- right arrow - | -Moves focus to the next day. | -
- left arrow - | -Moves focus to the previous day. | -
- home - | -Moves focus to the first day of the current week. | -
- end - | -Moves focus to the last day of the current week. | -
- page up - | -Changes the date to previous month in date picker mode. Moves to previous year in month picker mode and previous decade in year picker. | -
shift + page up | -Changes the date to previous year in date picker mode. Has no effect in month or year picker | -
- page down - | -Changes the date to next month in date picker mode. Moves to next year in month picker mode and next decade in year picker. | -
shift + page down | -Changes the date to next year in date picker mode. Has no effect in month or year picker | -
Key | +Function | +
---|---|
+ enter + | +Selects the date, closes the popup and moves focus to the input element. | +
+ space + | +Selects the date, closes the popup and moves focus to the input element. | +
+ up arrow + | +Moves focus to the same day of the previous week. | +
+ down arrow + | +Moves focus to the same day of the next week. | +
+ right arrow + | +Moves focus to the next day. | +
+ left arrow + | +Moves focus to the previous day. | +
+ home + | +Moves focus to the first day of the current week. | +
+ end + | +Moves focus to the last day of the current week. | +
+ page up + | +Changes the date to previous month in date picker mode. Moves to previous year in month picker mode and previous decade in year picker. | +
shift + page up | +Changes the date to previous year in date picker mode. Has no effect in month or year picker | +
+ page down + | +Changes the date to next month in date picker mode. Moves to next year in month picker mode and next decade in year picker. | +
shift + page down | +Changes the date to next year in date picker mode. Has no effect in month or year picker | +
Key | -Function | -
---|---|
- enter - | -Triggers the button action. | -
- space - | -Triggers the button action. | -
Key | +Function | +
---|---|
+ enter + | +Triggers the button action. | +
+ space + | +Triggers the button action. | +
- Value to describe the component can either be provided with ariaLabelledBy or ariaLabel props. The cascadeselect 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. 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: `+ Value to describe the component can either be provided with ariaLabelledBy or ariaLabel props. The cascadeselect 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. 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.
+ -Key | -Function | -
---|---|
- tab - | -Moves focus to the cascadeselect element. | -
- space - | -Opens the popup and moves visual focus to the selected option, if there is none then first option 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. | -
Key | +Function | +
---|---|
+ tab + | +Moves focus to the cascadeselect element. | +
+ space + | +Opens the popup and moves visual focus to the selected option, if there is none then first option 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. | +
Key | -Function | -
---|---|
- tab - | -Hides the popup and moves focus to the next tabbable element. | -
shift + tab | -Hides the popup and moves focus to the previous tabbable element. | -
- enter - | -Selects the focused option and closes the popup. | -
- space - | -Selects the focused option and closes the popup. | -
- escape - | -Closes the popup, moves focus to the cascadeselect element. | -
- down arrow - | -Moves focus to the next option. | -
- up arrow - | -Moves focus to the previous option. | -
- right arrow - | -If option is closed, opens the option otherwise moves focus to the first child option. | -
- left arrow - | -If option is open, closes the option otherwise moves focus to the parent option. | -
Key | +Function | +
---|---|
+ tab + | +Hides the popup and moves focus to the next tabbable element. | +
shift + tab | +Hides the popup and moves focus to the previous tabbable element. | +
+ enter + | +Selects the focused option and closes the popup. | +
+ space + | +Selects the focused option and closes the popup. | +
+ escape + | +Closes the popup, moves focus to the cascadeselect element. | +
+ down arrow + | +Moves focus to the next option. | +
+ up arrow + | +Moves focus to the previous option. | +
+ right arrow + | +If option is closed, opens the option otherwise moves focus to the first child option. | +
+ left arrow + | +If option is open, closes the option otherwise moves focus to the parent option. | +
- Checkbox component uses a hidden native checkbox element internally that is only visible to screen readers. Value to describe the component can either be provided via label tag combined with inputId prop or using - ariaLabelledBy, ariaLabel props. -
-+ Checkbox component uses a hidden native checkbox element internally that is only visible to screen readers. Value to describe the component can either be provided via label tag combined with inputId prop or using + ariaLabelledBy, ariaLabel props. +
+Key | -Function | -
---|---|
- tab - | -Moves focus to the checkbox. | -
- space - | -Toggles the checked state. | -
Key | +Function | +
---|---|
+ tab + | +Moves focus to the checkbox. | +
+ space + | +Toggles the checked state. | +
- Value to describe the component can either be provided via label tag combined with inputId prop or using ariaLabelledBy, ariaLabel props. Chip list uses listbox role with - aria-orientation set to horizontal whereas each chip has the option role with aria-label set to the label of the chip. -
-+ Value to describe the component can either be provided via label tag combined with inputId prop or using ariaLabelledBy, ariaLabel props. Chip list uses listbox role with aria-orientation set + to horizontal whereas each chip has the option role with aria-label set to the label of the chip. +
+Key | -Function | -
---|---|
- tab - | -Moves focus to the input element | -
- enter - | -Adds a new chips using the input field value. | -
- backspace - | -Deletes the previous chip if the input field is empty. | -
- left arrow - | -Moves focus to the previous chip if available and input field is empty. | -
Key | +Function | +
---|---|
+ tab + | +Moves focus to the input element | +
+ enter + | +Adds a new chips using the input field value. | +
+ backspace + | +Deletes the previous chip if the input field is empty. | +
+ left arrow + | +Moves focus to the previous chip if available and input field is empty. | +
Key | -Function | -
---|---|
- left arrow - | -Moves focus to the previous chip if available. | -
- right arrow - | -Moves focus to the next chip, if there is none then input field receives the focus. | -
- backspace - | -Deletes the chips and adds focus to the input field. | -
Key | +Function | +
---|---|
+ left arrow + | +Moves focus to the previous chip if available. | +
+ right arrow + | +Moves focus to the next chip, if there is none then input field receives the focus. | +
+ backspace + | +Deletes the chips and adds focus to the input field. | +
- Specification does not cover a color picker yet and using a semantic native color picker is not consistent across browsers so currently component is not compatible with screen - readers. In the upcoming versions, text fields will be introduced below the slider section to be able to pick a color using accessible text boxes in hsl, rgba and hex formats. -
-+ Specification does not cover a color picker yet and using a semantic native color picker is not consistent across browsers so currently component is not compatible with screen + readers. In the upcoming versions, text fields will be introduced below the slider section to be able to pick a color using accessible text boxes in hsl, rgba and hex formats. +
+Key | -Function | -
---|---|
- tab - | -Moves focus to the color picker button. | -
- space - | -Opens the popup and moves focus to the color slider. | -
Key | +Function | +
---|---|
+ tab + | +Moves focus to the color picker button. | +
+ space + | +Opens the popup and moves focus to the color slider. | +
Key | -Function | -
---|---|
- enter - | -Selects the color and closes the popup. | -
- space - | -Selects the color and closes the popup. | -
- escape - | -Closes the popup, moves focus to the input. | -
Key | +Function | +
---|---|
+ enter + | +Selects the color and closes the popup. | +
+ space + | +Selects the color and closes the popup. | +
+ escape + | +Closes the popup, moves focus to the input. | +
Key | -Function | -
---|---|
- arrow keys - | -Changes color. | -
Key | +Function | +
---|---|
+ arrow keys + | +Changes color. | +
Key | -Function | -
---|---|
- - up arrow - down arrow - - | -Changes hue. | -
Key | +Function | +
---|---|
+ + up arrow + down arrow + + | +Changes hue. | +
- Value to describe the component can either be provided with ariaLabelledBy or ariaLabel props. The dropdown element has a combobox role in addition to aria-haspopup and - aria-expanded attributes. If the editable option is enabled aria-autocomplete is also added. The relation between the combobox and the popup is created with aria-controls and - aria-activedescendant attribute is used to instruct screen reader which option to read during keyboard navigation within the popup list. -
-- The popup list has an id that refers to the aria-controls attribute of the combobox element and uses listbox as the role. Each list item has an option role, an id to match the - aria-activedescendant of the input element along with aria-label, aria-selected and aria-disabled attributes. -
+ template: `+ Value to describe the component can either be provided with ariaLabelledBy or ariaLabel props. The dropdown element has a combobox role in addition to aria-haspopup and aria-expanded attributes. If + the editable option is enabled aria-autocomplete is also added. The relation between the combobox and the popup is created with aria-controls and aria-activedescendant attribute is used to instruct screen reader + which option to read during keyboard navigation within the popup list. +
++ The popup list has an id that refers to the aria-controls attribute of the combobox element and uses listbox as the role. Each list item has an option role, an id to match the + aria-activedescendant of the input element along with aria-label, aria-selected and aria-disabled attributes. +
-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.
+ -Key | -Function | -
---|---|
- tab - | -Moves focus to the dropdown element. | -
- space - | -Opens the popup and moves visual focus to the selected option, if there is none then first option 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. | -
- up arrow - | -Opens the popup and moves visual focus to the selected option, if there is none then last option receives the focus. | -
Key | +Function | +
---|---|
+ tab + | +Moves focus to the dropdown element. | +
+ space + | +Opens the popup and moves visual focus to the selected option, if there is none then first option 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. | +
+ up arrow + | +Opens the popup and moves visual focus to the selected option, if there is none then last option receives the focus. | +
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 and closes the popup. | -
- space - | -Selects the focused option and closes the popup. | -
- escape - | -Closes the popup, moves focus to the dropdown element. | -
- down arrow - | -Moves focus to the next option, if there is none then visual focus does not change. | -
- up arrow - | -Moves focus to the previous option, if there is none then visual focus does not change. | -
- right arrow - | -If the dropdown is editable, removes the visual focus from the current option and moves input cursor to one character left. | -
- left arrow - | -If the dropdown is editable, removes the visual focus from the current option and moves input cursor to one character right. | -
- home - | -If the dropdown is editable, moves input cursor at the end, if not then moves focus to the first option. | -
- end - | -If the dropdown is editable, moves input cursor at the beginning, if not then moves focus to the last option. | -
- any printable character - | -Moves focus to the option whose label starts with the characters being typed if dropdown is not editable. | -
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 and closes the popup. | +
+ space + | +Selects the focused option and closes the popup. | +
+ escape + | +Closes the popup, moves focus to the dropdown element. | +
+ down arrow + | +Moves focus to the next option, if there is none then visual focus does not change. | +
+ up arrow + | +Moves focus to the previous option, if there is none then visual focus does not change. | +
+ right arrow + | +If the dropdown is editable, removes the visual focus from the current option and moves input cursor to one character left. | +
+ left arrow + | +If the dropdown is editable, removes the visual focus from the current option and moves input cursor to one character right. | +
+ home + | +If the dropdown is editable, moves input cursor at the end, if not then moves focus to the first option. | +
+ end + | +If the dropdown is editable, moves input cursor at the beginning, if not then moves focus to the last option. | +
+ any printable character + | +Moves focus to the option whose label starts with the characters being typed if dropdown is not editable. | +
Key | -Function | -
---|---|
- enter - | -Closes the popup and moves focus to the dropdown element. | -
- escape - | -Closes the popup and moves focus to the dropdown element. | -
Key | +Function | +
---|---|
+ enter + | +Closes the popup and moves focus to the dropdown element. | +
+ escape + | +Closes the popup and moves focus to the dropdown element. | +
- Quill performs generally well in terms of accessibility. The elements in the toolbar can be tabbed and have the necessary ARIA roles/attributes for screen readers. One known limitation is the lack of arrow key support for - dropdowns in the toolbar that may be overcome with a custom toolbar. -
-+ Quill performs generally well in terms of accessibility. The elements in the toolbar can be tabbed and have the necessary ARIA roles/attributes for screen readers. One known limitation is the lack of arrow key support for + dropdowns in the toolbar that may be overcome with a custom toolbar. +
+- InputMask component renders a native input element that implicitly includes any passed prop. Value to describe the component can either be provided via label tag combined with id prop or using ariaLabelledBy, - ariaLabel props. -
-+ InputMask component renders a native input element that implicitly includes any passed prop. Value to describe the component can either be provided via label tag combined with id prop or using ariaLabelledBy, + ariaLabel props. +
+Key | -Function | -
---|---|
- tab - | -Moves focus to the input. | -
Key | +Function | +
---|---|
+ tab + | +Moves focus to the input. | +
- Value to describe the component can either be provided via label tag combined with inputId prop or using ariaLabelledBy, ariaLabel props. The input element uses spinbutton role in addition to - the aria-valuemin, aria-valuemax and aria-valuenow attributes. -
-+ Value to describe the component can either be provided via label tag combined with inputId prop or using ariaLabelledBy, ariaLabel props. The input element uses spinbutton role in addition to the + aria-valuemin, aria-valuemax and aria-valuenow attributes. +
+Key | -Function | -
---|---|
- tab - | -Moves focus to the input. | -
- up arrow - | -Increments the value. | -
- down arrow - | -Decrements the value. | -
- home - | -Set the minimum value if provided. | -
- end - | -Set the maximum value if provided. | -
Key | +Function | +
---|---|
+ tab + | +Moves focus to the input. | +
+ up arrow + | +Increments the value. | +
+ down arrow + | +Decrements the value. | +
+ home + | +Set the minimum value if provided. | +
+ end + | +Set the maximum value if provided. | +
- InputSwitch component uses a hidden native checkbox element with switch role internally that is only visible to screen readers. Value to describe the component can either be provided via label tag combined with - inputId prop or using ariaLabelledBy, ariaLabel props. -
-+ InputSwitch component uses a hidden native checkbox element with switch role internally that is only visible to screen readers. Value to describe the component can either be provided via label tag combined with + inputId prop or using ariaLabelledBy, ariaLabel props. +
+Key | -Function | -
---|---|
- tab - | -Moves focus to the switch. | -
- space - | -Toggles the checked state. | -
Key | +Function | +
---|---|
+ tab + | +Moves focus to the switch. | +
+ space + | +Toggles the checked state. | +
- InputText component renders a native input element that implicitly includes any passed prop. Value to describe the component can either be provided via label tag combined with id prop or using aria-labelledby, - aria-label props. -
-+ InputText component renders a native input element that implicitly includes any passed prop. Value to describe the component can either be provided via label tag combined with id prop or using aria-labelledby, + aria-label props. +
+Key | -Function | -
---|---|
- tab - | -Moves focus to the input. | -
Key | +Function | +
---|---|
+ tab + | +Moves focus to the input. | +
- InputTextarea component renders a native textarea element that implicitly includes any passed prop. Value to describe the component can either be provided via label tag combined with id prop or using - aria-labelledby, aria-label props. -
-+ InputTextarea component renders a native textarea element that implicitly includes any passed prop. Value to describe the component can either be provided via label tag combined with id prop or using + aria-labelledby, aria-label props. +
+Key | -Function | -
---|---|
- tab - | -Moves focus to the input. | -
Key | +Function | +
---|---|
+ tab + | +Moves focus to the input. | +
Refer to InputText for accessibility as KeyFilter is a built-in add-on of the InputText.
-Refer to InputText for accessibility as KeyFilter is a built-in add-on of the InputText.
+- Knob element component uses slider role in addition to the aria-valuemin, aria-valuemax and aria-valuenow attributes. Value to describe the component can be defined using ariaLabelledBy and - ariaLabel props. -
-+ Knob element component uses slider role in addition to the aria-valuemin, aria-valuemax and aria-valuenow attributes. Value to describe the component can be defined using ariaLabelledBy and + ariaLabel props. +
+Key | -Function | -
---|---|
- tab - | -Moves focus to the slider. | -
- - left arrow - down arrow - - | -Decrements the value. | -
- - right arrow - up arrow - - | -Increments the value. | -
- home - | -Set the minimum value. | -
- end - | -Set the maximum value. | -
- page up - | -Increments the value by 10 steps. | -
- page down - | -Decrements the value by 10 steps. | -
Key | +Function | +
---|---|
+ tab + | +Moves focus to the slider. | +
+ + left arrow + down arrow + + | +Decrements the value. | +
+ + right arrow + up arrow + + | +Increments the value. | +
+ home + | +Set the minimum value. | +
+ end + | +Set the maximum value. | +
+ page up + | +Increments the value by 10 steps. | +
+ page down + | +Decrements the value by 10 steps. | +
- Value to describe the component can either be provided with ariaLabelledBy or ariaLabel props. The multiselect component 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 attribute that refers to the id of the popup listbox. -
-The popup listbox uses listbox as the role with aria-multiselectable enabled. Each list item has an option role along with aria-label, aria-selected and aria-disabled attributes.
+ template: `+ Value to describe the component can either be provided with ariaLabelledBy or ariaLabel props. The multiselect component 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 attribute that refers to the id of the popup listbox. +
+The popup listbox uses listbox as the role with aria-multiselectable enabled. Each list item has an option role along with aria-label, aria-selected and aria-disabled attributes.
-- Checkbox component at the header uses a hidden native checkbox element internally that is only visible to screen readers. Value to read is defined with the selectAll and unselectAll keys of the aria property - from the locale API. -
++ Checkbox component at the header uses a hidden native checkbox element internally that is only visible to screen readers. Value to read is defined with the selectAll and unselectAll keys of the aria property from + the locale API. +
-If filtering is enabled, filterInputProps can be defined to give aria-* props to the input element.
+If filtering is enabled, filterInputProps can be defined to give aria-* props to the input element.
-Close button uses close key of the aria property from the locale API as the aria-label by default, this can be overriden with the closeButtonProps.
-Close button uses close key of the aria property from the locale API as the aria-label by default, this can be overriden with the closeButtonProps.
+ -Key | -Function | -
---|---|
- tab - | -Moves focus to the multiselect element. | -
- space - | -Opens the popup and moves visual focus to the selected option, if there is none then first option 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. | -
- up arrow - | -Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus. | -
Key | +Function | +
---|---|
+ tab + | +Moves focus to the multiselect element. | +
+ space + | +Opens the popup and moves visual focus to the selected option, if there is none then first option 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. | +
+ up arrow + | +Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus. | +
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 - | -Toggles the selection state of the focused option. | -
- space - | -Toggles the selection state of the focused option. | -
- escape - | -Closes the popup, moves focus to the multiselect element. | -
- down arrow - | -Moves focus to the next option, if there is none then visual focus does not change. | -
- up arrow - | -Moves focus to the previous option, if there is none then visual focus does not change. | -
- home - | -Moves focus to the first option. | -
- end - | -Moves focus to the last option. | -
- any printable character - | -Moves focus to the option whose label starts with the characters being typed if dropdown is not editable. | -
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 + | +Toggles the selection state of the focused option. | +
+ space + | +Toggles the selection state of the focused option. | +
+ escape + | +Closes the popup, moves focus to the multiselect element. | +
+ down arrow + | +Moves focus to the next option, if there is none then visual focus does not change. | +
+ up arrow + | +Moves focus to the previous option, if there is none then visual focus does not change. | +
+ home + | +Moves focus to the first option. | +
+ end + | +Moves focus to the last option. | +
+ any printable character + | +Moves focus to the option whose label starts with the characters being typed if dropdown is not editable. | +
Key | -Function | -
---|---|
- space - | -Toggles the checked state. | -
- escape - | -Closes the popup. | -
Key | +Function | +
---|---|
+ space + | +Toggles the checked state. | +
+ escape + | +Closes the popup. | +
Key | -Function | -
---|---|
- enter - | -Closes the popup and moves focus to the multiselect element. | -
- escape - | -Closes the popup and moves focus to the multiselect element. | -
Key | +Function | +
---|---|
+ enter + | +Closes the popup and moves focus to the multiselect element. | +
+ escape + | +Closes the popup and moves focus to the multiselect element. | +
Key | -Function | -
---|---|
- enter - | -Closes the popup and moves focus to the multiselect element. | -
- space - | -Closes the popup and moves focus to the multiselect element. | -
- escape - | -Closes the popup and moves focus to the multiselect element. | -
Key | +Function | +
---|---|
+ enter + | +Closes the popup and moves focus to the multiselect element. | +
+ space + | +Closes the popup and moves focus to the multiselect element. | +
+ escape + | +Closes the popup and moves focus to the multiselect element. | +
- Options can be grouped when a nested data structures is provided. -
+Options can be grouped when a nested data structures is provided.
- Value to describe the component can either be provided via label tag combined with id prop or using ariaLabelledBy, ariaLabel props. Screen reader is notified about the changes to the strength of the - password using a section that has aria-live while typing. -
-+ Value to describe the component can either be provided via label tag combined with id prop or using ariaLabelledBy, ariaLabel props. Screen reader is notified about the changes to the strength of the + password using a section that has aria-live while typing. +
+Key | -Function | -
---|---|
- tab - | -Moves focus to the input. | -
- escape - | -Hides the strength meter if open. | -
Key | +Function | +
---|---|
+ tab + | +Moves focus to the input. | +
+ escape + | +Hides the strength meter if open. | +
- RadioButton component uses a hidden native radio button element internally that is only visible to screen readers. Value to describe the component can either be provided via label tag combined with inputId prop or - using ariaLabelledBy, ariaLabel props. -
-+ RadioButton component uses a hidden native radio button element internally that is only visible to screen readers. Value to describe the component can either be provided via label tag combined with inputId prop or using + ariaLabelledBy, ariaLabel props. +
+Key | -Function | -
---|---|
- tab - | -Moves focus to the checked radio button, if there is none within the group then first radio button receives the focus. | -
- - left arrow - up arrow - - | -Moves focus to the previous radio button, if there is none then last radio button receives the focus. | -
- - right arrow - down arrow - - | -Moves focus to the next radio button, if there is none then first radio button receives the focus. | -
- space - | -If the focused radio button is unchecked, changes the state to checked. | -
Key | +Function | +
---|---|
+ tab + | +Moves focus to the checked radio button, if there is none within the group then first radio button receives the focus. | +
+ + left arrow + up arrow + + | +Moves focus to the previous radio button, if there is none then last radio button receives the focus. | +
+ + right arrow + down arrow + + | +Moves focus to the next radio button, if there is none then first radio button receives the focus. | +
+ space + | +If the focused radio button is unchecked, changes the state to checked. | +
- Rating component internally uses radio buttons that are only visible to screen readers. The value to read for item is retrieved from the locale API via star and stars of the - aria - property. -
-+ Rating component internally uses radio buttons that are only visible to screen readers. The value to read for item is retrieved from the locale API via star and stars of the + aria + property. +
+Keyboard interaction is derived from the native browser handling of radio buttons in a group.
-Key | -Function | -
---|---|
- tab - | -Moves focus to the star representing the value, if there is none then first star receives the focus. | -
- - left arrow - up arrow - - | -Moves focus to the previous star, if there is none then last radio button receives the focus. | -
- - right arrow - down arrow - - | -Moves focus to the next star, if there is none then first star receives the focus. | -
- space - | -If the focused star does not represent the value, changes the value to the star value. | -
Keyboard interaction is derived from the native browser handling of radio buttons in a group.
+Key | +Function | +
---|---|
+ tab + | +Moves focus to the star representing the value, if there is none then first star receives the focus. | +
+ + left arrow + up arrow + + | +Moves focus to the previous star, if there is none then last radio button receives the focus. | +
+ + right arrow + down arrow + + | +Moves focus to the next star, if there is none then first star receives the focus. | +
+ space + | +If the focused star does not represent the value, changes the value to the star value. | +
- The container element that wraps the buttons has a group role whereas each button element uses button role and aria-pressed is updated depending on selection state. Value to describe an option is automatically - set using the ariaLabel property that refers to the label of an option so it is still suggested to define a label even the option display consists of presentational content like icons only. -
-+ The container element that wraps the buttons has a group role whereas each button element uses button role and aria-pressed is updated depending on selection state. Value to describe an option is automatically set + using the ariaLabel property that refers to the label of an option so it is still suggested to define a label even the option display consists of presentational content like icons only. +
+Key | -Function | -
---|---|
- tab - | -Moves focus to the buttons. | -
- space - | -Toggles the checked state of a button. | -
Key | +Function | +
---|---|
+ tab + | +Moves focus to the buttons. | +
+ space + | +Toggles the checked state of a button. | +
- Slider element component uses slider role on the handle in addition to the aria-orientation, aria-valuemin, aria-valuemax and aria-valuenow attributes. Value to describe the component can be - defined using ariaLabelledBy and ariaLabel props. -
-+ Slider element component uses slider role on the handle in addition to the aria-orientation, aria-valuemin, aria-valuemax and aria-valuenow attributes. Value to describe the component can be defined + using ariaLabelledBy and ariaLabel props. +
+Key | -Function | -
---|---|
- tab - | -Moves focus to the slider. | -
- - left arrow - up arrow - - | -Decrements the value. | -
- - right arrow - down arrow - - | -Increments the value. | -
- home - | -Set the minimum value. | -
- end - | -Set the maximum value. | -
- page up - | -Increments the value by 10 steps. | -
- page down - | -Decrements the value by 10 steps. | -
Key | +Function | +
---|---|
+ tab + | +Moves focus to the slider. | +
+ + left arrow + up arrow + + | +Decrements the value. | +
+ + right arrow + down arrow + + | +Increments the value. | +
+ home + | +Set the minimum value. | +
+ end + | +Set the maximum value. | +
+ page up + | +Increments the value by 10 steps. | +
+ page down + | +Decrements the value by 10 steps. | +
- ToggleButton component uses an element with button role and updates aria-pressed state for screen readers. Value to describe the component can be defined with ariaLabelledBy or ariaLabel props, it is - highly suggested to use either of these props as the component changes the label displayed which will result in screen readers to read different labels when the component receives focus. To prevent this, always provide an aria - label that does not change related to state. -
-+ ToggleButton component uses an element with button role and updates aria-pressed state for screen readers. Value to describe the component can be defined with ariaLabelledBy or ariaLabel props, it is highly + suggested to use either of these props as the component changes the label displayed which will result in screen readers to read different labels when the component receives focus. To prevent this, always provide an aria label that + does not change related to state. +
+Key | -Function | -
---|---|
- tab - | -Moves focus to the button. | -
- space - | -Toggles the checked state. | -
Key | +Function | +
---|---|
+ tab + | +Moves focus to the button. | +
+ space + | +Toggles the checked state. | +
- TriStateCheckbox component uses an element with checkbox role. Value to describe the component can either be provided with ariaLabelledBy or ariaLabel props. Component adds an element with - aria-live attribute that is only visible to screen readers to read the value displayed. Values to read are defined with the trueLabel, falseLabel and nullLabel keys of the aria property from the - locale API. This is an example of a custom accessibility implementation as there is no one to one mapping between the component design and the WCAG specification. -
-+ TriStateCheckbox component uses an element with checkbox role. Value to describe the component can either be provided with ariaLabelledBy or ariaLabel props. Component adds an element with + aria-live attribute that is only visible to screen readers to read the value displayed. Values to read are defined with the trueLabel, falseLabel and nullLabel keys of the aria property from the + locale API. This is an example of a custom accessibility implementation as there is no one to one mapping between the component design and the WCAG specification. +
+Key | -Function | -
---|---|
- tab - | -Moves focus to the checkbox. | -
- space - | -Toggles between the values. | -
- enter - | -Toggles between the values. | -
Key | +Function | +
---|---|
+ tab + | +Moves focus to the checkbox. | +
+ space + | +Toggles between the values. | +
+ enter + | +Toggles between the values. | +