Build your web apps using Smart UI
Smart.MultilineTextBox - Accessibility
MultilineTextBox provides a built-in compliance with WAI-ARIA specification. This is achieved through attributes like role, aria-multiline, aria-controls and others. They are applied to the corresponding elements inside the template of the components.
The purpose of the ARIA attributes is to help disabled people by providing the information specific to the component to assistive technology in the screen readers.
The MultilineTextBox represents a multiline input that allows free-form text as it's value. The element accepts line breaks within the input as in HTML textarea. It has the role "textbox" applied to indicate the corresponding behavior.
The following ARIA attributes are used in the MultilineTextBox:
- aria-disabled - indicates that the interaction with the MultilineTextBox is disabled.
- aria-multiline - indicates that the MultilineTextBox accepts multiple lines of input or only a single line.
- aria-controls - applied to the scrollbars inside the MultilineTextBox to indicate that they control the input. The attributes points to the id of the input.
- aria-describedby - identifies the element that describes the MultilineTextBox component by it's id. A separate element is used to hold the description for the MultilineTextBox. It appears below the element when focused.
- aria-label - since the MultilineTextBox has a placeholder property, it allows to label the element. This attribute is also used to label the resize indicator that appears in the bottom right corner of the element when resizable proeprty is set.
- aria-labelledby - identifies the element that labels the MultilineTextBox by it's id. A separate element that contains the label is displayed above the MultilineTextBox when the label property is applied.
The following keyboard shortcuts are available to interact with the MultilineTextBox:
|Home||Scrolls to the top of the popup container and selects/focuses the first item from the list, if opened.|
|End||Sets the caret at the end of the line.|
Depending on the enterKeyBehavior property modes:
Depending on the escKeyMode property modes:
|Home||Sets the caret at the beginning of the line.|
|Page Down/Up||Scrolls the input content to the next/previous page.|
Additional information on WAI-ARIA for the SMART Framework can be found here.