# DatAInsights Composer Accessibility

The DatAInsights Composer supports keyboard navigation and provides accessible names, roles, and focus management for its controls, data-source popups, History, and generated visualizations.

## Keyboard Navigation

The prompt and actions use the standard keyboard behavior of the KendoReact [PromptBox](https://www.telerik.com/kendo-react-ui-develop/components/conversationalui/promptbox) and [Button](https://www.telerik.com/kendo-react-ui-develop/components/buttons/button). Use `Tab` to move through them and `Enter` or `Space` to activate buttons.

### Dataset Chips

| Key                       | Action                                                                |
| ------------------------- | --------------------------------------------------------------------- |
| `Tab`                     | Enters the group at its active chip; the next `Tab` leaves the group. |
| `Shift+Tab`               | Moves from the active chip to the previous focusable item.            |
| `ArrowLeft`, `ArrowRight` | Move between chips.                                                   |
| `Enter`, `Space`          | Open the popup for the focused dataset.                               |

### Data Source Popups

The **Data Source** button opens a searchable dataset tree. Focus starts in the search box. `ArrowDown` moves to the first tree item; `ArrowUp` from that item returns to search. The tree supports the [standard TreeView keyboard navigation](https://www.telerik.com/kendo-react-ui-develop/components/treeview). `Tab` from search moves into the tree; `Tab` from a tree item closes the popup and returns focus to the button. `Escape` also closes it and returns focus.

When a dataset chip opens its field list, focus moves to the first field. Use the arrow keys to move between fields, or `Home` and `End` to move to the first and last fields. `Tab`, `Shift+Tab`, or `Escape` closes the popup and returns focus to the chip.

### History

Activate the **History** button with `Enter` or `Space` to open or close its popup. When it opens, focus moves to the first checkpoint.

| Key                    | Action                                                                                                     |
| ---------------------- | ---------------------------------------------------------------------------------------------------------- |
| `ArrowUp`, `ArrowDown` | Move between checkpoints. `Home` and `End` move to the first and last checkpoint.                          |
| `Tab`                  | Moves from a checkpoint to its restore button; the next `Tab` leaves the popup and returns to History.     |
| `Shift+Tab`            | Moves from a restore button to its checkpoint; from a checkpoint, leaves the popup and returns to History. |
| `Enter`, `Space`       | Activate a focused restore button to restore that checkpoint.                                              |
| `Escape`               | Closes the popup and returns focus to the History button.                                                  |

The selected checkpoint has no restore button, so `Tab` from it leaves the popup.

## Focus Management

* **Refine** moves focus to the refine prompt. When edit mode closes, focus returns to **Refine** unless the user has focused another element in the meantime.
* **Escape** closes an open popup and returns focus to the control that opened it.

## WAI-ARIA Support

* Prompt and report titles are level-two headings. The prompt has an accessible name; the refine prompt is labelled by its visible title.
* Action buttons have `aria-label` and `title`. **Refine** and **Remove** are icon-only; **Confirm**, **Discard**, and **History** also display text. The prompt action remains focusable with `aria-disabled="true"` when the prompt is empty.
* The dataset-chip group has an accessible name and `role="group"`. Each chip is a button with `aria-haspopup="true"` and roving `tabindex`.
* The **Data Source** button announces the dataset count and exposes `aria-expanded` and `aria-controls`. Its popup is a labelled region; the search box and TreeView have accessible names. Field labels are presentational, not buttons.
* The History button exposes `aria-haspopup="listbox"`, `aria-expanded`, and `aria-controls`. Its labelled listbox contains `option` checkpoints with `aria-selected`; restore buttons are labelled with the checkpoint prompt.
* When a single report is shown, its output has `role="group"` and is labelled by the report title.
* Only error messages use `role="alert"`; clarification and unsupported-request messages are not announced as alerts.

Accessible names and messages are localizable through the [component messages](https://www.telerik.com/kendo-react-ui-develop/components/datainsights-composer/globalization).

## Testing

The [Kendo Themes accessibility specification](https://github.com/telerik/kendo-themes/blob/develop/packages/html/docs/datainsights-composer.md) documents WCAG 2.2 and Section 508 support, axe-core checks, and manual screen-reader testing with Firefox and NVDA, Chrome and JAWS, and Edge and JAWS.

## Suggested Links

* [DatAInsights Composer Editing and History](https://www.telerik.com/kendo-react-ui-develop/components/datainsights-composer/editing)
* [DatAInsights Composer Globalization](https://www.telerik.com/kendo-react-ui-develop/components/datainsights-composer/globalization)
* [API Reference of the DatAInsights Composer](https://www.telerik.com/kendo-react-ui-develop/components/datainsights-composer/api)