@progress/wct-a11y-spec/dist/jquery/aria/file-box_aria.md

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

Out of the box, the Kendo UI for jQuery FileBox provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.


The FileBox is compliant with the [Web Content Accessibility Guidelines (WCAG) 2.2 AA](https://www.w3.org/TR/WCAG22/) standards and [Section 508](https://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 and is tested against the most popular screen readers.

## WAI-ARIA


This section lists the selectors, attributes, and behavior patterns supported by the component and its composite elements, if any.

### FileBox List


The FileBox component displays a list of files with actions for removal. It uses the list/listitem pattern for proper accessibility.

| Selector | Attribute | Usage |
| -------- | --------- | ----- |
| `.k-file-box-wrapper` | `role=list` | Explicitly sets the UL role to list. |
|  | `aria-label` | Provides an accessible name for the file list (e.g. "Attached files"). |
| `.k-file-box-wrapper .k-files-scroll` | `role=presentation` | The scrollable container between the list and its items is presentational, ensuring the list→listitem relationship is preserved in the accessibility tree. |
| `.k-file-box-wrapper .k-file-box` | `role=listitem` | Explicitly sets the LI role to listitem. |
|  | `tabindex=0/-1` | Makes the file box focusable. Uses roving tabindex: 0 for the focused item, -1 for the rest. |
|  | `aria-label` | Provides an accessible name describing the file. Can include the file name and size (e.g. "FileName.pdf 2MB"). |
| `.k-file-box-wrapper .k-file-box .k-icon` | `aria-hidden=true` | The file type icon is decorative and hidden from screen readers. |
| `.k-file-box-wrapper .k-file-box span.k-button` | `aria-hidden=true` | 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. |

## Resources

[WAI-ARIA Specification: List](https://www.w3.org/TR/wai-aria-1.2/#list)

[WAI-ARIA Specification: Listitem](https://www.w3.org/TR/wai-aria-1.2/#listitem)

## Section 508


The FileBox is fully compliant with the [Section 508 requirements](http://www.section508.gov/).

## Testing


The FileBox has been extensively tested automatically with [axe-core](https://github.com/dequelabs/axe-core) and manually with the most popular screen readers.

> To report any accessibility issues, contact the team through the [Telerik Support System](https://www.telerik.com/account/support-center).

### Screen Readers


The FileBox has been tested with the following screen readers and browsers combinations:

| Environment | Tool |
| ----------- | ---- |
| Firefox | NVDA |
| Chrome | JAWS |
| Microsoft Edge | JAWS |