HtmlEditor: Add Keyboard Trap Fix Info

[arman-boyakhchyan]

No description provided.

[Copilot]

Pull request overview

This PR updates the DevExtreme HtmlEditor documentation to explain how keyboard navigation avoids keyboard traps by documenting keyboard.inlineTabInsertion behavior and how to configure it via customizeModules.

Changes:

• Expanded the HtmlEditor keyboard navigation table (Tab / Shift+Tab behavior, focus movement shortcuts) and added customizeModules configuration examples for keyboard.inlineTabInsertion.
• Removed the “No Keyboard Trap” known-exception row from the accessibility standards compliance page.
• Updated the customizeModules API reference with refreshed framework examples and added a dedicated section for keyboard.inlineTabInsertion.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 12 comments.

File	Description
concepts/05 UI Components/HtmlEditor/03 Accessibility/15 Keyboard Navigation.md	Expands keyboard shortcut descriptions and adds examples for toggling keyboard.inlineTabInsertion.
concepts/05 UI Components/HtmlEditor/03 Accessibility/10 Accessibility Standards Compliance.md	Removes the previous keyboard-trap exception entry.
api-reference/10 UI Components/dxHtmlEditor/1 Configuration/customizeModules.md	Refreshes customizeModules examples and adds documentation for keyboard.inlineTabInsertion.

Comments suppressed due to low confidence (1)

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

• This action cell uses third-person ("Focuses...") while the rest of the table uses imperative verbs ("Copy", "Paste", "Insert"). Consider switching to imperative voice for consistency.

        <td>Focuses the next focusable element on the page.</td>

[Copilot]

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated 5 comments.

Comments suppressed due to low confidence (8)

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

• Same as above: replace manual numbering + <br> with a semantic ordered list for better accessibility and maintainability.

        <td>
            1. Dedent list items<br>
            2. Focus the previous cell in tables<br>
            3. Remove a tab character (<code>\t</code>) from text. If <code>keyboard.inlineTabInsertion</code> is disabled or text contains no tab characters, focuses the previous focusable element in the component.
        </td>    

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

• DxHtmlEditorModule is an NgModule import and is not used in app.component.ts. Elsewhere in the docs it is imported from devextreme-angular in app.module.ts (for example, concepts/05 UI Components/HtmlEditor/00 Getting Started with HtmlEditor/02 Create an HtmlEditor.md:54-69). Keeping it here is misleading and results in an unused import.

    import { Component } from '@angular/core';
    import { DxHtmlEditorModule } from 'devextreme-angular/ui/html-editor';

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

• The Vue snippet defines customizeQuillModules in a plain <script> block without export default, setup(), or <script setup>, so customizeQuillModules is not in template scope (:customize-modules="customizeQuillModules"). This makes the sample invalid as written.

    <script setup lang="ts">
    import { DxHtmlEditor } from 'devextreme-vue/html-editor';

    function customizeQuillModules(config) {
        config.keyboard.inlineTabInsertion = false;
    }
    </script>

api-reference/10 UI Components/dxHtmlEditor/1 Configuration/customizeModules.md:39

• DxHtmlEditorModule should not be imported from devextreme-angular/ui/html-editor inside app.component.ts (and it is unused here). Most other HTML Editor Angular snippets in this repo import it from devextreme-angular and reference it from an NgModule (for example, concepts/05 UI Components/HtmlEditor/00 Getting Started with HtmlEditor/02 Create an HtmlEditor.md:59-68).

    import { Component } from '@angular/core';
    import { DxHtmlEditorModule } from 'devextreme-angular/ui/html-editor';

api-reference/10 UI Components/dxHtmlEditor/1 Configuration/customizeModules.md:66

• The Vue sample defines customizeQuillModules in a plain <script> block without export default, setup(), or <script setup>, so :customize-modules="customizeQuillModules" will not resolve in the template scope. This makes the sample invalid.

    <script setup lang="ts">
    import { DxHtmlEditor } from 'devextreme-vue/html-editor';

    function customizeQuillModules(config) {
        config.history = {
            delay: 0,
            maxStack: 5000,
        }; 

api-reference/10 UI Components/dxHtmlEditor/1 Configuration/customizeModules.md:103

• Same jQuery issue as above: prefer $(function() { ... }) and the conventional #htmlEditorContainer selector for consistency and to avoid timing issues if the snippet is run before the element exists.

    <!-- tab: index.js -->
    $("#html-editor").dxHtmlEditor({
        customizeModules(config) {
            config.keyboard.inlineTabInsertion = false;
        }

api-reference/10 UI Components/dxHtmlEditor/1 Configuration/customizeModules.md:116

• Same Angular issue as above: DxHtmlEditorModule imported from devextreme-angular/ui/html-editor in app.component.ts is unused/misplaced and diverges from the repo’s documented Angular integration approach.

    import { Component } from '@angular/core';
    import { DxHtmlEditorModule } from 'devextreme-angular/ui/html-editor';

api-reference/10 UI Components/dxHtmlEditor/1 Configuration/customizeModules.md:139

• Same Vue scoping issue as above: customizeQuillModules is not exposed to the template from this <script> block. Use <script setup> (or export a component with setup() / methods) so the function is in template scope.

    <script setup lang="ts">
    import { DxHtmlEditor } from 'devextreme-vue/html-editor';

    function customizeQuillModules(config) {
        config.keyboard.inlineTabInsertion = false;
    }
    </script>

[Copilot]

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.

Comments suppressed due to low confidence (5)

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

• The Tab action cell uses manually numbered text with
  separators. Using a semantic ordered list (
  1. ) improves readability and accessibility (especially for screen readers).

        <td>
            1. Indent list items<br>
            2. Focus the next cell in tables<br>
            3. Insert a tab character (<code>\t</code>) in text. If <code>keyboard.inlineTabInsertion</code> is disabled, focuses the next focusable element on the page.
        </td>

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

• The Angular snippet imports DxHtmlEditorModule but does not show any NgModule usage (and the import is unused in this snippet). This can confuse readers about how to wire the component. Consider removing the unused module import here (or replacing it with a standalone component import + @Component imports list, if that is the intended pattern).

    import { Component } from '@angular/core';
    import { DxHtmlEditorModule } from 'devextreme-angular/ui/html-editor';

api-reference/10 UI Components/dxHtmlEditor/1 Configuration/customizeModules.md:93

• In this sentence, the component name is written as "HtmlEditor", but elsewhere in this file and guide it is referred to as "HTML Editor". Using consistent component naming improves searchability and avoids confusion.

You can configure **customizeModules** to modify the [keyboard navigation](/Documentation/Guide/UI_Components/HtmlEditor/Accessibility/#Keyboard_Navigation) behavior of HtmlEditor using `keyboard.inlineTabInsertion`:

api-reference/10 UI Components/dxHtmlEditor/1 Configuration/customizeModules.md:39

• The Angular snippet imports DxHtmlEditorModule from 'devextreme-angular/ui/html-editor', but the snippet does not show NgModule configuration and the import is unused. Consider removing it to avoid implying that this line is required for customizeModules usage.

    import { Component } from '@angular/core';
    import { DxHtmlEditorModule } from 'devextreme-angular/ui/html-editor';

api-reference/10 UI Components/dxHtmlEditor/1 Configuration/customizeModules.md:116

• Same issue as above: DxHtmlEditorModule is imported but unused in this snippet, and without NgModule/standalone context it may mislead. Removing the unused import keeps the sample focused.

    import { Component } from '@angular/core';
    import { DxHtmlEditorModule } from 'devextreme-angular/ui/html-editor';

[Copilot]

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.

Comments suppressed due to low confidence (7)

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

• The Shift+Tab behaviors are presented as an ordered list, but the items do not describe a sequence. Use an unordered list for correct HTML semantics, and keep punctuation consistent within list items.

            <ol>
                <li>Dedent list items</li>
                <li>Focus the previous cell in tables</li>
                <li>Remove a tab character (<code>\t</code>) from text. If <code>keyboard.inlineTabInsertion</code> is disabled or text contains no tab characters, focuses the previous focusable element in the component.</li>
            </ol>

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

• Action text in the table is inconsistent: most entries do not end with a period, but this one does. Consider removing the trailing period for consistency.

        <td>Focus the next focusable element on the page.</td>

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

• This Angular snippet imports DxHtmlEditorModule but does not show it being used (for example, in @Component imports for a standalone component, or in an NgModule). This is misleading; remove the unused import or show where it is registered.

    import { Component } from '@angular/core';
    import { DxHtmlEditorModule } from 'devextreme-angular/ui/html-editor';

api-reference/10 UI Components/dxHtmlEditor/1 Configuration/customizeModules.md:39

• This Angular snippet imports DxHtmlEditorModule but does not show it being used (for example, in @Component imports for a standalone component, or in an NgModule). This is misleading; remove the unused import or show where it is registered.

    import { Component } from '@angular/core';
    import { DxHtmlEditorModule } from 'devextreme-angular/ui/html-editor';

api-reference/10 UI Components/dxHtmlEditor/1 Configuration/customizeModules.md:116

• This Angular snippet imports DxHtmlEditorModule but does not show it being used (for example, in @Component imports for a standalone component, or in an NgModule). This is misleading; remove the unused import or show where it is registered.

    import { Component } from '@angular/core';
    import { DxHtmlEditorModule } from 'devextreme-angular/ui/html-editor';

api-reference/10 UI Components/dxHtmlEditor/1 Configuration/customizeModules.md:24

• In dxHtmlEditor API reference pages, jQuery examples consistently initialize the widget inside $(function() { ... }) and use the #htmlEditorContainer selector (for example, api-reference/10 UI Components/dxHtmlEditor/3 Methods/register(components).md:19-23). This snippet deviates and may confuse readers.

    $("#html-editor").dxHtmlEditor({
        customizeModules(config) {
            config.history = {
                delay: 0,
                maxStack: 5000

api-reference/10 UI Components/dxHtmlEditor/1 Configuration/customizeModules.md:103

• In dxHtmlEditor API reference pages, jQuery examples consistently initialize the widget inside $(function() { ... }) and use the #htmlEditorContainer selector (for example, api-reference/10 UI Components/dxHtmlEditor/1 Configuration/imageUpload/imageUpload.md:31-41). This snippet deviates and may confuse readers.

    $("#html-editor").dxHtmlEditor({
        customizeModules(config) {
            config.keyboard.inlineTabInsertion = false;
        }

[Copilot]

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.

Comments suppressed due to low confidence (7)

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

• Most action descriptions in this table do not end with a period; these two new entries add trailing periods. Remove the period for consistency.

        <td>Focus the previous focusable element in the component.</td>

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

• Most action descriptions in this table do not end with a period; these two new entries add trailing periods. Remove the period for consistency.

        <td>Focus the next focusable element on the page.</td>

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

• This Angular snippet imports DxHtmlEditorModule in app.component.ts, but the module is not used here and is typically imported in an NgModule (or in a standalone component's imports). Keeping this import in the component snippet can be misleading.

    import { DxHtmlEditorModule } from 'devextreme-angular/ui/html-editor';

api-reference/10 UI Components/dxHtmlEditor/1 Configuration/customizeModules.md:38

• This Angular snippet imports DxHtmlEditorModule in app.component.ts, but the module is not used here and is typically imported in an NgModule (or in a standalone component's imports). Keeping this import in the component snippet can be misleading.

    import { DxHtmlEditorModule } from 'devextreme-angular/ui/html-editor';

api-reference/10 UI Components/dxHtmlEditor/1 Configuration/customizeModules.md:115

• This Angular snippet imports DxHtmlEditorModule in app.component.ts, but the module is not used here and is typically imported in an NgModule (or in a standalone component's imports). Keeping this import in the component snippet can be misleading.

    import { DxHtmlEditorModule } from 'devextreme-angular/ui/html-editor';

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

• This list item mixes imperative and third-person verbs ("Insert" vs "focuses") and is missing an article ("in text"). Use imperative mood consistently to match the other items.

                <li>Insert a tab character (<code>\t</code>) in text. If <code>keyboard.inlineTabInsertion</code> is disabled, focuses the next focusable element on the page.</li>

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

• This list item mixes imperative and third-person verbs ("Remove" vs "focuses") and is missing an article ("or text contains..."). Use imperative mood consistently to match the other items.

                <li>Remove a tab character (<code>\t</code>) from text. If <code>keyboard.inlineTabInsertion</code> is disabled or text contains no tab characters, focuses the previous focusable element in the component.</li>

[Raushen]

config.keyboard.inlineTabInsertion = false - it is default HtmlEditor value. If user would change the default value, he would set it to true.

[Raushen]

If there is a Toolbar, the hotkey will focus it. But if there is no Toolbar, the previous focusable element will be focused.

[Copilot]

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.

Comments suppressed due to low confidence (3)

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

• The Angular snippet imports DxHtmlEditorModule in app.component.ts, but the module is not used in the snippet and is typically imported in app.module.ts (or in a standalone component's @Component({ imports: [...] })). Keeping this import here is misleading and will fail linting if copied as-is.

    import { DxHtmlEditorModule } from 'devextreme-angular/ui/html-editor';

api-reference/10 UI Components/dxHtmlEditor/1 Configuration/customizeModules.md:38

• The Angular example imports DxHtmlEditorModule from devextreme-angular/ui/html-editor, but the snippet does not use the symbol. This is misleading in a component file and will fail linting if copied.

    import { DxHtmlEditorModule } from 'devextreme-angular/ui/html-editor';

api-reference/10 UI Components/dxHtmlEditor/1 Configuration/customizeModules.md:115

• Same issue as above: DxHtmlEditorModule is imported but unused in this Angular snippet. Remove it (or show where it is actually used) so the sample is copy/paste friendly.

    import { DxHtmlEditorModule } from 'devextreme-angular/ui/html-editor';

[Copilot]

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.

Comments suppressed due to low confidence (6)

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

• This sentence says "toggle" but the examples only show enabling the option. Consider rewording to "enable" (or mention setting it to true/false).

Configure [customizeModules](/Documentation/ApiReference/UI_Components/dxHtmlEditor/Configuration/#customizeModules) to toggle `keyboard.inlineTabInsertion`:

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

• The jQuery example uses ES6 method shorthand (customizeModules(config) { ... }). Most jQuery option callbacks in this repo use property: function(...) { ... } syntax; switching keeps examples consistent and avoids issues in older environments.

        customizeModules(config) {

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

• DxHtmlEditorModule is imported in the Angular component snippet but is not used anywhere in the shown code. This can cause "unused import" errors and is confusing for copy/paste.

    import { Component } from '@angular/core';
    import { DxHtmlEditorModule } from 'devextreme-angular/ui/html-editor';

api-reference/10 UI Components/dxHtmlEditor/1 Configuration/customizeModules.md:39

• DxHtmlEditorModule is imported in the Angular component snippet but is not used in the shown code. Either remove it here or include the module/standalone-component configuration that consumes it to avoid confusing copy/paste.

    import { Component } from '@angular/core';
    import { DxHtmlEditorModule } from 'devextreme-angular/ui/html-editor';

api-reference/10 UI Components/dxHtmlEditor/1 Configuration/customizeModules.md:101

• The jQuery example uses ES6 method shorthand (customizeModules(config) { ... }). Use customizeModules: function(config) { ... } for consistency with other jQuery snippets in the docs.

        customizeModules(config) {

api-reference/10 UI Components/dxHtmlEditor/1 Configuration/customizeModules.md:116

• DxHtmlEditorModule is imported in the Angular component snippet but is not used in the shown code, which can lead to unused-import errors when copied.

    import { Component } from '@angular/core';
    import { DxHtmlEditorModule } from 'devextreme-angular/ui/html-editor';

[dirkpieterse]

Suggested change

The DevExtreme Quill modules and the API you can use to customize them are described in the <a href="https://github.com/DevExpress/devextreme-quill/tree/master/docs/modules" target="_blank">Modules</a> documentation section. For example, the <a href="https://github.com/DevExpress/devextreme-quill/blob/master/docs/modules/history.md" target="_blank">History</a> module, which handles the undo and redo operations, can be customized as follows:

The <a href="https://github.com/DevExpress/devextreme-quill/tree/master/docs/modules" target="_blank">Modules</a> documentation section describes the DevExtreme Quill modules and the API you can use to customize them. For example, the <a href="https://github.com/DevExpress/devextreme-quill/blob/master/docs/modules/history.md" target="_blank">History</a> module, which handles the undo and redo operations, can be customized as follows:

[dirkpieterse]

Suggested change

	You can configure **customizeModules** to modify the [keyboard navigation](/Documentation/Guide/UI_Components/HtmlEditor/Accessibility/#Keyboard_Navigation) behavior of HTML Editor using `keyboard.inlineTabInsertion`:
	Use **customizeModules** and `keyboard.inlineTabInsertion` to modify the HTML Editor's [keyboard navigation](/Documentation/Guide/UI_Components/HtmlEditor/Accessibility/#Keyboard_Navigation) behavior: