HtmlEditor: Add Keyboard Trap Fix Info

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

@@ -13,118 +13,148 @@ Module configurations.
 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:
 
 ---
+
 ##### jQuery
 
     <!-- tab: index.js -->
-    $(function() {
-        $("#htmlEditorContainer").dxHtmlEditor({
-            // ...
-            customizeModules: function(config) {
-                config.history = {
-                    delay: 0,
-                    maxStack: 5000
-                }; 
-            }
-        });
+    $("#html-editor").dxHtmlEditor({
+        customizeModules(config) {
+            config.history = {
+                delay: 0,
+                maxStack: 5000
+            };
+        }
     });
 
 ##### Angular
 
     <!-- tab: app.component.html -->
-    <dx-html-editor ...
+    <dx-html-editor
         [customizeModules]="customizeQuillModules">
     </dx-html-editor>
 
     <!-- tab: app.component.ts -->
     import { Component } from '@angular/core';
+    import { DxHtmlEditorModule } from 'devextreme-angular/ui/html-editor';
 
-    @Component({
-        selector: 'app-root',
-        templateUrl: './app.component.html',
-        styleUrls: ['./app.component.css']
-    })
+    // ...
     export class AppComponent {
         customizeQuillModules(config) {
             config.history = {
                 delay: 0,
-                maxStack: 5000
+                maxStack: 5000,
             }; 
         }
     }
 
-    <!-- tab: app.module.ts -->
-    import { BrowserModule } from '@angular/platform-browser';
-    import { NgModule } from '@angular/core';
-    import { AppComponent } from './app.component';
-
-    import { DxHtmlEditorModule } from 'devextreme-angular';
-    @NgModule({
-        declarations: [
-            AppComponent
-        ],
-        imports: [
-            BrowserModule,
-            DxHtmlEditorModule
-        ],
-        providers: [ ],
-        bootstrap: [AppComponent]
-    })
-    export class AppModule { }
-
 ##### Vue
 
     <!-- tab: App.vue -->
     <template>
-        <DxHtmlEditor ...
+        <DxHtmlEditor
             :customize-modules="customizeQuillModules"
         />
     </template>
 
-    <script>
-    import 'devextreme/dist/css/dx.fluent.blue.light.css';
-
-    import DxHtmlEditor from 'devextreme-vue/html-editor';
-
-    export default {
-        components: {
-            DxHtmlEditor
-        },
-        methods: {
-            customizeQuillModules(config) {
-                config.history = {
-                    delay: 0,
-                    maxStack: 5000
-                }; 
-            }
-        }
+    <script setup lang="ts">
+    import { DxHtmlEditor } from 'devextreme-vue/html-editor';
+
+    function customizeQuillModules(config) {
+        config.history = {
+            delay: 0,
+            maxStack: 5000,
+        }; 
     }
     </script>
 
 ##### React
 
-    <!-- tab: App.js -->
-    import React from 'react';
+    <!-- tab: App.tsx -->
+    import React, { useCallback } from 'react';
+    import { HtmlEditor } from 'devextreme-react/html-editor';
 
-    import 'devextreme/dist/css/dx.fluent.blue.light.css';
+    export default function App() {
+        const customizeQuillModules = useCallback((config) => {
+            config.history = {
+                delay: 0,
+                maxStack: 5000,
+            };
+        }, []);
+
+        return (
+            <HtmlEditor
+                customizeModules={customizeQuillModules}
+            />
+        );
+    }
+
+---
 
-    import HtmlEditor from 'devextreme-react/html-editor';
+You can configure **customizeModules** to modify the [keyboard navigation](/Documentation/Guide/UI_Components/HtmlEditor/Accessibility/#Keyboard_Navigation) behavior of HTML Editor using `keyboard.inlineTabInsertion`:
 
-    class App extends React.Component {
-        render() {
-            return (
-                <HtmlEditor ...
-                    customizeModules={this.customizeQuillModules}
-                />
-            );
+---
+
+##### jQuery
+
+    <!-- tab: index.js -->
+    $("#html-editor").dxHtmlEditor({
+        customizeModules(config) {
+            config.keyboard.inlineTabInsertion = false;
         }
+    });
+
+##### Angular
+
+    <!-- tab: app.component.html -->
+    <dx-html-editor
+        [customizeModules]="customizeQuillModules">
+    </dx-html-editor>
+
+    <!-- tab: app.component.ts -->
+    import { Component } from '@angular/core';
+    import { DxHtmlEditorModule } from 'devextreme-angular/ui/html-editor';
+
+    // ...
+    export class AppComponent {
         customizeQuillModules(config) {
-            config.history = {
-                delay: 0,
-                maxStack: 5000
-            }; 
+            config.keyboard.inlineTabInsertion = false;
         }
     }
-    export default App;
+
+##### Vue
+
+    <!-- tab: App.vue -->
+    <template>
+        <DxHtmlEditor
+            :customize-modules="customizeQuillModules"
+        />
+    </template>
+
+    <script setup lang="ts">
+    import { DxHtmlEditor } from 'devextreme-vue/html-editor';
+
+    function customizeQuillModules(config) {
+        config.keyboard.inlineTabInsertion = false;
+    }
+    </script>
+
+##### React
+
+    <!-- tab: App.tsx -->
+    import React, { useCallback } from 'react';
+    import { HtmlEditor } from 'devextreme-react/html-editor';
+
+    export default function App() {
+        const customizeQuillModules = useCallback((config) => {
+            config.keyboard.inlineTabInsertion = false;
+        }, []);
+
+        return (
+            <HtmlEditor
+                customizeModules={customizeQuillModules}
+            />
+        );
+    }
 
 ---
 

concepts/05 UI Components/HtmlEditor/03 Accessibility/10 Accessibility Standards Compliance.md

@@ -16,11 +16,6 @@ The HTML Editor component meets a variety of <a href="https://www.access-board.g
         <td>2.1.1 Keyboard (Level A) <br> 11.5.2.12 Execution of available actions</td>
         <td>Users cannot resize images, Popup, and Resizable controls within HTML Editor.</td>
     </tr>
-    <tr>
-        <td>501 (Web)(Software) <br> 504.2 (Authoring Tool) <br> 602.3 (Support Docs)</td>
-        <td>2.1.2 No Keyboard Trap (Level A)</td>
-        <td>The keyboard shortcut to focus out of the component does not exist.</td>
-    </tr>
     <tr>
         <td>-</td>
         <td>4.1.2 Name, Role, Value</td>

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

@@ -2,8 +2,8 @@ A user can use the following keys to interact with the HTML Editor component:
 
 <table class="dx-table">
     <tr>
-        <th>PC</th>
-        <th>Mac</th>
+        <th style="min-width: 64px;">PC</th>
+        <th style="min-width: 64px;">Mac</th>
         <th>Action</th>
     </tr>
     <tr>
@@ -50,25 +50,44 @@ A user can use the following keys to interact with the HTML Editor component:
         <td>Insert a line break (in the same paragraph)</td>
     </tr>
     <tr>
-        <td colspan="2" rowspan="3">Tab</td>
-        <td>Nest current list item (when in a list)</td>
+        <td colspan="2">Tab</td>
+        <td>
+            <ul>
+                <li>Indent list items</li>
+                <li>Focus the next cell in tables</li>
+                <li>Insert a tab character (<code>\t</code>) in text. If <code>keyboard.inlineTabInsertion</code> is disabled, focus the next focusable element on the page.</li>
+            </ul>
+        </td>
+    </tr>
+    <tr>
+        <td colspan="2">Shift + Tab</td>
+        <td>
+            <ul>
+                <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, focus one of the following elements:
+                    <ul>
+                        <li>The previous focusable element on the page</li>
+                        <li>The HTML Editor <a href="/Documentation/ApiReference/UI_Components/dxHtmlEditor/Configuration/toolbar/">toolbar</a> (if configured)</li>
+                    </ul>
+                </li>
+            </ul>
+        </td>    
     </tr>
     <tr>
-        <td>Increase indentation (when at the start of a paragraph)</td>    
-    </tr>
-    <tr>
-        <td>Move the cursor to the next table cell</td>
+        <td colspan="2">Arrow Keys</td>
+        <td>Navigate through the table</td>
     </tr>
     <tr>
-        <td colspan="2" rowspan="2">Shift + Tab</td>
-        <td>Move the cursor to the previous table cell</td>
+        <td>Ctrl + Shift + Up&nbsp;Arrow</td>
+        <td>&#8984; + Shift + Up&nbsp;Arrow</td>
+        <td>Focus the previous focusable element on the page or the HTML Editor <a href="/Documentation/ApiReference/UI_Components/dxHtmlEditor/Configuration/toolbar/">toolbar</a> (if configured)</td>
     </tr>
     <tr>
-        <td>Decrease indentation (when at the start of a paragraph)</td>    
-    </tr>
-    <tr>
-        <td colspan="2">Arrow Keys</td>
-        <td>Navigate through the table</td>
+        <td>Ctrl + Shift + Down&nbsp;Arrow</td>
+        <td>&#8984; + Shift + Down&nbsp;Arrow</td>
+        <td>Focus the next focusable element on the page</td>
     </tr>
     <tr>
         <td colspan="2">Enter</td>
@@ -84,4 +103,72 @@ A user can use the following keys to interact with the HTML Editor component:
     </tr>
 </table>
 
+Configure [customizeModules](/Documentation/ApiReference/UI_Components/dxHtmlEditor/Configuration/#customizeModules) to toggle `keyboard.inlineTabInsertion`:
+
+---
+
+##### jQuery
+
+    <!-- tab: index.js -->
+    $("#html-editor").dxHtmlEditor({
+        customizeModules(config) {
+            config.keyboard.inlineTabInsertion = false;
+        }
+    });
+
+##### Angular
+
+    <!-- tab: app.component.html -->
+    <dx-html-editor
+        [customizeModules]="customizeQuillModules">
+    </dx-html-editor>
+
+    <!-- tab: app.component.ts -->
+    import { Component } from '@angular/core';
+    import { DxHtmlEditorModule } from 'devextreme-angular/ui/html-editor';
+
+    // ...
+    export class AppComponent {
+        customizeQuillModules(config) {
+            config.keyboard.inlineTabInsertion = false;
+        }
+    }
+
+##### Vue
+
+    <!-- tab: App.vue -->
+    <template>
+        <DxHtmlEditor
+            :customize-modules="customizeQuillModules"
+        />
+    </template>
+
+    <script setup lang="ts">
+    import { DxHtmlEditor } from 'devextreme-vue/html-editor';
+
+    function customizeQuillModules(config) {
+        config.keyboard.inlineTabInsertion = false;
+    }
+    </script>
+
+##### React
+
+    <!-- tab: App.tsx -->
+    import React, { useCallback } from 'react';
+    import { HtmlEditor } from 'devextreme-react/html-editor';
+
+    export default function App() {
+        const customizeQuillModules = useCallback((config) => {
+            config.keyboard.inlineTabInsertion = false;
+        }, []);
+
+        return (
+            <HtmlEditor
+                customizeModules={customizeQuillModules}
+            />
+        );
+    }
+
+---
+
 #include common-code-register-key-handler