Build your web apps using Smart UI
Smart.DropDownButton - Accessibility
DropDownButton provides a built-in compliance with WAI-ARIA specification. This is achieved through attributes like role, aria-haspopup, aria-expanded 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 DropDownButton represents a button(s) that opens a popup when clicked. As such it has the role "button" applied along with additional ARIA attributes to describe the different components of the element and it's behavior.
The following ARIA attributes are used in the DropDownButton:
- aria-disabled - indicates that the interaction with the DropDownButton is disabled.
- aria-hidden - indicates that the element does not take part in the interaction with the DropDownButton and will not be mapped to the accessibility API. For example, the arrow icon inside the drop down button doesn't provide information for the assistive technology so it should be ignored.
- aria-haspopup - indicates that the DropDownButton has a popup that can be opened at any time.
- aria-orientation - applied to the ScrollBar elements inside the popup of the DropDownButton, this attribute indicates their orientation. For example, there is a horizontal and a vertical scrollbar inside the popup.
- aria-valuemax - applied to the ScrollBar elements inside the popup of the DropDownButton. Used to indicate the maximum scroll value.
- aria-valuemin - applied to the ScrollBar elements inside the popup of the DropDownButton. Indicates minimum scorll value of the element.
- aria-valuenow - applied to the ScrollBar elements inside the popup of the DropDownButton. Used to indicate the current scroll value of the element.
- aria-owns - used to indicate that the DropDownButton is the actual parent of the popup. DOM hierarchy cannot be used to represent the relationship between the popup and the DropDownButton so the property is used to indicate their visual, functional and contextual parent/child relationship.
- aria-describedby - identifies the element that describes the DropDownButton component.
- aria-labelledby - identifies the element that labels the DropDownButton.
- aria-expanded - indicates that the popup of the DropDownButton is expanded.
The following keyboard shortcuts are available to interact with the DropDownButton:
|Enter||Open/Close the popup.|
|End||Scrolls to the bottom of the popup container, if opened.|
|Home||Scrolls to the top of the popup container, if opened.|
|Page Down/Up||Scrolls the popup container to the next/previous page, if opened.|
|Space||Opens the popup.|
|Escape||Closes the popup.|
Additional information on WAI-ARIA for the SMART Framework can be found here.