@progress/wct-a11y-spec/dist/design-system/FileBox.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 FileBox provides extensive accessibility support and enables users with disabilities to acquire complete control over its features."
    },
    {
        "p": "The FileBox 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."
    },
    {
        "h4": "FileBox List"
    },
    {
        "p": "The FileBox component displays a list of files with actions for removal. It uses the list/listitem pattern for proper accessibility."
    },
    {
        "table": {
            "headers": [
                "Selector",
                "Attribute",
                "Usage"
            ],
            "rows": [
                {
                    "Selector": "`.k-file-box-wrapper`",
                    "Attribute": "`role=list`",
                    "Usage": "Explicitly sets the UL role to list."
                },
                {
                    "Selector": "",
                    "Attribute": "`aria-label`",
                    "Usage": "Provides an accessible name for the file list (e.g. \"Attached files\")."
                },
                {
                    "Selector": "`.k-file-box-wrapper .k-files-scroll`",
                    "Attribute": "`role=presentation`",
                    "Usage": "The scrollable container between the list and its items is presentational, ensuring the list→listitem relationship is preserved in the accessibility tree."
                },
                {
                    "Selector": "`.k-file-box-wrapper .k-file-box`",
                    "Attribute": "`role=listitem`",
                    "Usage": "Explicitly sets the LI role to listitem."
                },
                {
                    "Selector": "",
                    "Attribute": "`tabindex=0/-1`",
                    "Usage": "Makes the file box focusable. Uses roving tabindex: 0 for the focused item, -1 for the rest."
                },
                {
                    "Selector": "",
                    "Attribute": "`aria-label`",
                    "Usage": "Provides an accessible name describing the file. Can include the file name and size (e.g. \"FileName.pdf 2MB\")."
                },
                {
                    "Selector": "`.k-file-box-wrapper .k-file-box .k-icon`",
                    "Attribute": "`aria-hidden=true`",
                    "Usage": "The file type icon is decorative and hidden from screen readers."
                },
                {
                    "Selector": "`.k-file-box-wrapper .k-file-box span.k-button`",
                    "Attribute": "`aria-hidden=true`",
                    "Usage": "The remove button is rendered as a decorative span and hidden from screen readers. File removal is handled by keyboard interaction on the listitem itself."
                }
            ]
        }
    },
    {
        "h3": "Managing the Focus"
    },
    {
        "p": "The FileBox is a single tab-stop component and implements the roving tabindex strategy. By default, the first file item is part of the page tab sequence. To move the focus to another file item, arrow keys must be used."
    },
    {
        "h3": "Keyboard Shortcuts"
    },
    {
        "table": {
            "headers": [
                "Shortcut",
                "Behavior"
            ],
            "rows": [
                {
                    "Shortcut": "`Right Arrow`",
                    "Behavior": "Focuses the next file in the list. If the focus is on the last file, the focus does not move."
                },
                {
                    "Shortcut": "`Left Arrow`",
                    "Behavior": "Focuses the previous file in the list. If the focus is on the first file, the focus does not move."
                },
                {
                    "Shortcut": "`Home`",
                    "Behavior": "Focuses the first file in the list."
                },
                {
                    "Shortcut": "`End`",
                    "Behavior": "Focuses the last file in the list."
                },
                {
                    "Shortcut": "`Delete` or `Backspace`",
                    "Behavior": "Removes the currently focused file. After removal, the focus moves to the next file in the list if available, or to the previous file if the last file was removed."
                }
            ]
        }
    },
    {
        "h3": "Testing"
    },
    {
        "p": "The FileBox 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 FileBox 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/#list",
                    "title": "WAI-ARIA Specification: List"
                }
            },
            {
                "link": {
                    "source": "https://www.w3.org/TR/wai-aria-1.2/#listitem",
                    "title": "WAI-ARIA Specification: Listitem"
                }
            },
            {
                "link": {
                    "source": "https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex",
                    "title": "ARIA Authoring Practices: Roving Tabindex"
                }
            }
        ]
    }
]