Build your web apps using Smart UI
Smart.Window - Accessibility
Window provides a built-in compliance with WAI-ARIA specification via attributes like role, aria-modal, aria-label and others.
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 Window component has a role dialog and as such it is a descendant window of the primary window of a web application. Dialogs are most often used to prompt the user to enter or respond to information. A dialog that is designed to interrupt workflow is usually modal.
The Window component has a header section that can hold multiple button controls with role button that can trigger an action.
The following ARIA attributes are used in the Window:
- aria-disabled - indicates that the interaction with the Window is disabled.
- aria-modal - indicates whether or not the Window is modal.
- aria-label - applied to the buttons located in the header section of the Window. Each button contains only an icon. That is why it needs a label attribute to provide a textual explanation of it's purpose, for example collapse, minimize, maximize, pin, etc.
- aria-labelledby - indicates that there is another element that labels the Window. That element is the header and the attribute points to it's id.
- aria-level - applied to the header section of the Window, indicates that the header is nested at level 1.
The following keyboard shortcuts are available to interact with the Window:
|Arrow Down/Up/Left/Right||Draggs the window in the corresponding direction, if the window is not pinned.|
|Control + Arrow Down/Up/Left/Right||Resizes the window in the corresponding direction, according to the resizeMode property.|
|Alt + Arrow Down/Up/Left/Right||Maximizes/Minimizes/Restores the window depending on the current state and the headerPosition property of the Window. When headerPosition is 'left' or 'right', Arrow Left/ Arrow Right will trigger the operations and vice versa.|
|Escape||Closes the window.|
|Enter/Space||Selects a header button, if focused.|
|ALT + C||Collapses/Expands the Window.|
|ALT + M||Minimizes/Restores the Window.|
|ALT + P||Pin/Unpin the Window.|
Additional information on WAI-ARIA for the SMART Framework can be found here.