Toolbar KBN Improvements: Add Info to A11y Docs

[arman-boyakhchyan]

No description provided.

[Copilot]

🟡 Changes recommended

Several examples do not compile or function as documented, and the override selector logic is incorrect.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Pull request overview

Adds Toolbar keyboard-navigation guidance across DevExtreme accessibility and API documentation.

Changes:

• Documents Arrow, Home, End, and Tab behavior.
• Adds framework-specific configuration examples.
• Expands shared toolbar preparation samples.

File summaries

File	Description
includes/toolbar-kbn-behavior-defaultoptions-override.md	Adds reusable Toolbar override examples.
includes/datagrid-ontoolbarpreparing-jquery.md	Expands toolbar preparation examples.
concepts/05 UI Components/TreeList/05 Accessibility/15 Keyboard Navigation.md	Documents TreeList toolbar navigation.
concepts/05 UI Components/Toolbar/05 Accessibility/15 Keyboard Navigation.md	Explains Toolbar behavior and customization.
concepts/05 UI Components/Scheduler/10 Accessibility/15 Keyboard Navigation.md	Adds Scheduler toolbar shortcuts.
concepts/05 UI Components/HtmlEditor/03 Accessibility/15 Keyboard Navigation.md	Adds HTML Editor toolbar shortcuts.
concepts/05 UI Components/Diagram/45 Keyboard Support.md	Adds Diagram toolbar guidance.
concepts/05 UI Components/DataGrid/05 Accessibility/15 Keyboard Navigation.md	Documents DataGrid toolbar navigation.
concepts/05 UI Components/CardView/10 Accessibility/15 Keyboard Navigation.md	Adds CardView toolbar guidance.
api-reference/10 UI Components/GridBase/1 Configuration/onToolbarPreparing.md	Uses the expanded shared example.
api-reference/10 UI Components/dxTreeList/1 Configuration/onToolbarPreparing.md	Uses the expanded shared example.
api-reference/10 UI Components/dxDataGrid/1 Configuration/onToolbarPreparing.md	Uses the expanded shared example.

Review details

Suppressed comments (5)

concepts/05 UI Components/CardView/10 Accessibility/15 Keyboard Navigation.md:39

• These Toolbar actions are currently inside the Header Panel > Navigation table, so the page presents them as header-panel shortcuts. Move both entries into the Toolbar table above.

        <td>Moves focus between header panel items.<br>Moves focus between toolbar items.</td>
    </tr>
    <tr>
        <td>Home<br/>End</td>
        <td>Moves focus to the first/last item in the toolbar.</td>

concepts/05 UI Components/HtmlEditor/03 Accessibility/15 Keyboard Navigation.md:84

• These two parallel list items are sentence fragments, but only the newly added item ends with a period. Remove it to keep the list punctuation consistent.

                <li>Move focus between toolbar items (left and right arrow keys only).</li>

concepts/05 UI Components/Scheduler/10 Accessibility/15 Keyboard Navigation.md:17

• The Toolbar row omits the supported Home and End navigation documented for Toolbar and added to the other component pages in this change. Add that shortcut here so the Scheduler table does not provide an incomplete key list.

        <td><a href="/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/toolbar/">Toolbar</a></td>
        <td>Left Arrow or Right Arrow</td>        
        <td>Shifts focus between toolbar items.</td>

includes/datagrid-ontoolbarpreparing-jquery.md:131

• The binding does not invoke handleToolbarPreparing, so this Angular example never sets allowKeyboardNavigation. Pass $event to the handler as in the repository's other Angular event bindings.

        (onToolbarPreparing)="handleToolbarPreparing"

includes/toolbar-kbn-behavior-defaultoptions-override.md:21

• This Angular sample does not compile: this import defines neither dxToolbar nor DxToolbarTypes, although both are used below. Import the Toolbar class and its Angular event types instead.

    import {WidgetName}, { Properties } from "devextreme/ui/{widget_name}";

• Files reviewed: 12/12 changed files
• Comments generated: 4
• Review effort level: Balanced

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.