React TreeList - Accessibility

Accessibility Features Overview

NOTE
The overall accessibility level of your application depends on the TreeList features that you use.
Accessibility Requirement Support Level
Right-to-Left Support
Keyboard Navigation Support
Screen Reader Support
Contrast Color Theme
Mobile Device Support
Lighthouse Accessibility Validation
Axe Accessibility Validation
WAVE Accessibility Validation
Section 508 Support
WCAG 2.x Support
  • - All component features meet the requirement
  • - Some component features may not meet the requirement
  • - Accessibility requirement is not supported

Accessibility Standards Compliance

The TreeList component meets a variety of Section 508 and WCAG 2.x compliance standards. Known exceptions:

Section 508 criteria WCAG 2.x criteria Exception description
501 (Web)(Software)
504.2 (Authoring Tool)
602.3 (Support Docs)		 1.1.1 Non-text Content (Level A)
  • Drag icons do not have alt or aria-label attributes.
  • AI Assistant: Message status icons and command-result indicators do not have alt or aria-label attributes.
501 (Web)(Software)
504.2 (Authoring Tool)
602.3 (Support Docs)		 1.3.1 Info and Relationships (Level A) The filter menu button in filter row does not supply any accessibility information.
501 (Web)(Software)
504.2 (Authoring Tool)
602.3 (Support Docs)		 1.4.3 Contrast (Minimum) (Level AA)
1.4.11 Non-text Contrast (Level AA 2.1 and 2.2)		 TreeList does not support Windows High Contrast themes.
11.5.2.12 Execution of available actions 2.1.1 Keyboard (Level A)
  • ColumnChooser items in 'drag' mode do not support keyboard navigation.
  • Users cannot resize columns using the keyboard (when allowColumnResizing is enabled).
  • AI Assistant: The "Regenerate" button is not keyboard accessible.
501 (Web)(Software)
504.2 (Authoring Tool)
602.3 (Support Docs)		 2.4.3 Focus Order (Level A)
  • AI Assistant: Focus does not return to the toolbar button after the pop-up is closed.
  • AI Assistant: Focus does not return to the chat input after a request is completed.
- 2.5.7 Dragging Movements (Level AA 2.2 only) ColumnChooser in 'drag' mode.
- 2.5.8 Target Size (Minimum) (Level AA 2.2 only)
  • Selection checkboxes and the ‘Select all’ checkbox.
  • Command buttons and icons.
  • Column separators when allowColumnResizing is enabled.
501 (Web)(Software)
504.2 (Authoring Tool)
602.3 (Support Docs)		 4.1.2 Name, Role, Value (Level A) AI Assistant: The "Regenerate" button does not expose a name or role to assistive technologies.
11.5.2.15 Change notification 4.1.3 Status Messages (Level AA 2.1 and 2.2) TreeList summaries when recalculateWhileEditing is enabled.

The component also complies with the European Accessibility Act (EAA) and Americans with Disabilities Act (ADA) directives.

Keyboard Navigation

The TreeList offers different keyboard controls depending on what action users wish to perform.

Navigation

Key Action
Arrow Keys Moves focus between cells.
Moves focus between toolbar items (left and right arrow keys only).
Tab
Shift + Tab		 Moves focus forward/backward between all TreeList items.
Ctrl + Right Arrow
Ctrl + Left Arrow		 Expands/collapses the focused row.
Ctrl + Up Arrow
Ctrl + Down Arrow		 Moves focus between component areas, such as the data area, column headers area, group panel, and others.
Shift + Mouse Wheel Scrolls content left/right if horizontal scrolling is active.
Enter When focused on a cell, moves focus to the next cell if keyboardNavigation.enterKeyAction is set to "moveFocus". The next cell is determined by keyboardNavigation.enterKeyDirection.
Home
End		 Moves focus to the first/last cell of the current row.
Moves focus to the first/last item in the toolbar.
Ctrl + Home
Ctrl + End		 Moves focus to the first cell of the first row/last cell of the last row.
PageUp
PageDown		 Navigates to the component's previous/next page.
Ctrl + F When focused on a cell, moves focus to the search panel if searchPanel.visible is set to true.
NOTE
  • When scrolling.columnRenderingMode is set to "virtual", the filter row does not support keyboard navigation.

  • To navigate between toolbar items using the Tab key, disable the allowKeyboardNavigation property of the built-in TreeList toolbar. Configure onToolbarPreparing as follows:

    JavaScript
    onToolbarPreparing(e) {
    e.toolbarOptions.allowKeyboardNavigation = false;
}

    If you disable allowKeyboardNavigation, the TreeList toolbar no longer follows the W3C ARIA APG Toolbar Pattern. Your application will be less accessible to users who rely on keyboard navigation.

Column Sorting and Reordering

Key Action
Enter
Space		 When focused on a column header, enables/cycles between sorting options (ascending/descending).
Shift + Enter
Shift + Space
Shift + Click		 Enables/cycles focused column sorting without clearing previous sorting options if sorting.mode is set to "multiple".
Ctrl + Enter
Ctrl + Space
Ctrl + Click		 Disables focused column sorting. Does not clear previous sorting options if sorting.mode is set to "multiple".
Ctrl + Right Arrow
Ctrl + Left Arrow		 Moves the focused column header right/left if columns[].allowReordering is enabled.

Editing

Key Action
Enter When focused on a cell in normal mode, switches the component to edit mode if keyboardNavigation.enterKeyAction is set to "startEdit".
When focused on a cell in edit mode, saves changes and switches the component to normal mode.
When focused on a button in a command column, triggers the focused command button.
F2 When focused on a cell in normal mode, switches the component to edit mode unless the focused cell's editing.mode is set to "popup".
Alt + Down Arrow Opens drop-down editors such as select boxes in edit mode.
Arrow Keys When focused on a cell in edit mode, moves the cursor in the focused cell or increases/decreases its value.
Esc When in edit mode, cancels unsaved changes and switches to normal mode.

Selection

Key Action
Space Selects the focused cell's row if selection.mode is set to either "multiple" or "single".
Shift + Space
Shift + Click		 Selects all items between the last selected row and the focused cell's row if selection.mode is set to "multiple".
Ctrl + A Selects all rows if selection.mode is set to "multiple" and selection.allowSelectAll is set to true.

You can override these shortcuts or create your own shortcuts using the onKeyDown event handler.

NOTE
On macOS, Cmd replaces the Ctrl key.

Screen Reader Support

The TreeList component supports screen readers and complies to WAI-ARIA standards. Known exceptions are listed in the Accessibility Standards Compliance topic.