@progress/wct-a11y-spec/dist/design-system/Sortable.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 Sortable provides extensive accessibility support and enables users with disabilities to acquire complete control over its features."
    },
    {
        "p": "The Sortable 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": "`n/a - wrapper element`",
                    "Attribute": "`role=list`",
                    "Usage": "Sets the proper role for Sortable."
                },
                {
                    "Selector": "`n/a - list item element within the wrapper`",
                    "Attribute": "`role=listitem`",
                    "Usage": "Sets the proper role for Sortable items."
                },
                {
                    "Selector": "",
                    "Attribute": "`aria-label=Consists of text description of the item, information about the current item index and the total number of items, and indication that the item is movable`",
                    "Usage": "Sets the proper label for the Sortable item."
                },
                {
                    "Selector": "",
                    "Attribute": "`tabindex=The focused item gets tabindex '0' (if wrapper element is not a focusable DOM element), all other items - '-1' (if the element is a focusable DOM element) or the attribute is removed.`",
                    "Usage": "Sets tabindex 0 to the active item."
                },
                {
                    "Selector": "",
                    "Attribute": "`aria-grabbed=true/false`",
                    "Usage": "Sets the aria-grabbed attribute value to indicate dragging."
                },
                {
                    "Selector": "",
                    "Attribute": "`aria-dropeffect=move`",
                    "Usage": "Sets the aria-dropeffect attribute value."
                },
                {
                    "Selector": "",
                    "Attribute": "`aria-keyshortcuts=Control+ArrowLeft Control+ArrowRight Meta+ArrowLeft Meta+ArrowRight`",
                    "Usage": "Sets the aria-keyshortcuts attribute value to announce available keyboard shortcuts. Some are omitted for brevity."
                },
                {
                    "Selector": "`n/a - disabled list item element within the wrapper`",
                    "Attribute": "`aria-disabled=true/false`",
                    "Usage": "Sets the aria-disabled attribute value."
                }
            ]
        }
    },
    {
        "h3": "Managing the Focus"
    },
    {
        "p": "The Sortable component is a single tab-stop. When focused with the keyboard (tabbed into), the first (or last focused) item gets focused. Tab or shift-tab moves focus to the next/previous focusable item on the page. Enter moves the focus to the first focusable element within the currently focused item (if such) and traps and wraps the focus which allows tabbing through the focusable elements within the item content (if any). Escape returns focus to the Sortable item."
    },
    {
        "h3": "Keyboard Shortcuts"
    },
    {
        "table": {
            "headers": [
                "Shortcut",
                "Behavior"
            ],
            "rows": [
                {
                    "Shortcut": "`Right/Down Arrow`",
                    "Behavior": "Sets the focus on the next available item."
                },
                {
                    "Shortcut": "`Left/Up Arrow`",
                    "Behavior": "Sets the focus on the previously available item."
                },
                {
                    "Shortcut": "`Ctrl/⌘`+`Right/Down Arrow`",
                    "Behavior": "Moves the focused item after the next item."
                },
                {
                    "Shortcut": "`Ctrl/⌘`+`Left/Up Arrow`",
                    "Behavior": "Moves the focused item before the previous item."
                },
                {
                    "Shortcut": "`Enter`",
                    "Behavior": "Focuses the first focusable element within the item's content (if any). Focus is trapped and wrapped within the item content."
                },
                {
                    "Shortcut": "`Escape`",
                    "Behavior": "When focus is on an internal element within a Sortable item, returns the focus to the item wrapper."
                }
            ]
        }
    },
    {
        "h3": "Testing"
    },
    {
        "p": "The Sortable 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 Sortable has been tested with the following screen readers and browsers combinations:"
    },
    {
        "table": {
            "headers": [
                "Environment",
                "Tool"
            ],
            "rows": [
                [
                    "Firefox",
                    "NVDA"
                ],
                [
                    "Chrome",
                    "JAWS"
                ],
                [
                    "Microsoft Edge",
                    "JAWS"
                ]
            ]
        }
    }
]