@progress/wct-a11y-spec/dist/design-system/ToolBar.json

Contains accessibility and keyboard navigation specification of Telerik and Kendo web components.

[
    {
        "h2": "Accessibility Support"
    },
    {
        "p": "Out of the box, the Telerik and Kendo UI ToolBar provides extensive accessibility support and enables users with disabilities to acquire complete control over its features."
    },
    {
        "p": "The ToolBar is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 standards](https://www.w3.org/TR/WCAG22/) and [Section 508](http://www.section508.gov/) requirements, follows the [Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA)](https://www.w3.org/WAI/ARIA/apg/) best practices for implementing the [keyboard navigation](#keyboard-navigation) for its `component` role, provides options for [managing its focus](#managing-the-focus) and is tested against the most popular [screen readers](#screen-readers)."
    },
    {
        "h3": "WAI-ARIA"
    },
    {
        "p": "This section lists the selectors, attributes, and behavior patterns supported by the component and its composite elements, if any."
    },
    {
        "table": {
            "headers": [
                "Selector",
                "Attribute",
                "Usage"
            ],
            "rows": [
                {
                    "Selector": "`.k-toolbar`",
                    "Attribute": "`role=toolbar`",
                    "Usage": "The component role."
                },
                {
                    "Selector": "",
                    "Attribute": "`aria-label` or `aria-labelledby`",
                    "Usage": "Must be supplied on each toolbar only when the application contains more than one toolbars."
                }
            ]
        }
    },
    {
        "h3": "Managing the Focus"
    },
    {
        "p": "The ToolBar is a single tab stop component. All focus movements inside the ToolBar are managed according to the logic of the roving tabindex. When the user navigates through the tabs, the ToolBar focuses either the first tool or the tool that was focused last."
    },
    {
        "h3": "Keyboard Shortcuts"
    },
    {
        "p": "For scenarios where inputs, or comboboxes appear in the ToolBar, you must wrap them in focusable wrappers. To activate the inner component navigation, the user must press `Enter`. To return the focus to the wrapper and activate again the TolBar navigation, the user must press `Esc`."
    },
    {
        "p": "For nested ToolBar components, refer to their respective keyboard navigation specification. The CommandOverflow menu must acquire the same behavior as the DropDownButton."
    },
    {
        "h4": "ToolBar"
    },
    {
        "table": {
            "headers": [
                "Shortcut",
                "Behavior"
            ],
            "rows": [
                {
                    "Shortcut": "`Tab`",
                    "Behavior": "Moves the focus to and from the ToolBar."
                },
                {
                    "Shortcut": "`Right Arrow`",
                    "Behavior": "Moves the focus to the next focusable element in the ToolBar. Focuses the first element if the end of the ToolBar is reached."
                },
                {
                    "Shortcut": "`Left Arrow`",
                    "Behavior": "Moves the focus to the previous focusable element in the ToolBar. Focuses the last element if the beginning of the ToolBar is reached."
                },
                {
                    "Shortcut": "`Home`",
                    "Behavior": "Moves the focus to the first focusable element."
                },
                {
                    "Shortcut": "`End`",
                    "Behavior": "Moves the focus to the last focusable element."
                },
                {
                    "Shortcut": "`Enter`",
                    "Behavior": "Clicks the currently active button or changes the state of the currently active toggleable button. If the active tool is represented by an `<input>` element, enters the inner navigation mode of the tool."
                },
                {
                    "Shortcut": "`Esc`",
                    "Behavior": "If the active tool is represented by an `<input>` element and its inner navigation is active, deactivates the tool navigation and returns the focus to the ToolBar."
                },
                {
                    "Shortcut": "`Alt` + `Down Arrow`",
                    "Behavior": "Opens the currently active SplitButton, DropDownButton, or CommandOverflow."
                },
                {
                    "Shortcut": "`Alt` + `Up Arrow`",
                    "Behavior": "Closes the currently active SplitButton, DropDownButton, or CommandOverflow."
                }
            ]
        }
    },
    {
        "h3": "Testing"
    },
    {
        "p": "The ToolBar has been extensively tested automatically with [axe-core](https://github.com/dequelabs/axe-core) and manually with the most popular screen readers."
    },
    {
        "h3": "Screen Readers"
    },
    {
        "p": "The ToolBar has been tested with the following screen readers and browsers combinations:"
    },
    {
        "table": {
            "headers": [
                "Environment",
                "Tool"
            ],
            "rows": [
                [
                    "Firefox",
                    "NVDA"
                ],
                [
                    "Chrome",
                    "JAWS"
                ],
                [
                    "Microsoft Edge",
                    "JAWS"
                ]
            ]
        }
    },
    {
        "h3": "Resources"
    },
    {
        "ul": [
            {
                "link": {
                    "source": "https://www.w3.org/TR/wai-aria-1.2/#toolbar",
                    "title": "WAI-ARIA Specification for the ToolBar"
                }
            },
            {
                "link": {
                    "source": "https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/",
                    "title": "WAI-ARIA Authoring Practices: Toolbar Pattern"
                }
            }
        ]
    }
]