From 649db4caba8c54b9b537c3876d88f0e4778f4c59 Mon Sep 17 00:00:00 2001 From: Arman Boyakhchyan Date: Fri, 24 Jul 2026 08:35:40 +0400 Subject: [PATCH 1/7] HtmlEditor: Add Keyboard Trap Fix Info --- .../1 Configuration/customizeModules.md | 165 ++++++++++-------- .../10 Accessibility Standards Compliance.md | 5 - .../15 Keyboard Navigation.md | 103 +++++++++-- 3 files changed, 187 insertions(+), 86 deletions(-) diff --git a/api-reference/10 UI Components/dxHtmlEditor/1 Configuration/customizeModules.md b/api-reference/10 UI Components/dxHtmlEditor/1 Configuration/customizeModules.md index 7c2cc3e1fc..f8fc80a3b8 100644 --- a/api-reference/10 UI Components/dxHtmlEditor/1 Configuration/customizeModules.md +++ b/api-reference/10 UI Components/dxHtmlEditor/1 Configuration/customizeModules.md @@ -13,118 +13,147 @@ Module configurations. The DevExtreme Quill modules and the API you can use to customize them are described in the Modules documentation section. For example, the History module, which handles the undo and redo operations, can be customized as follows: --- + ##### jQuery - $(function() { - $("#htmlEditorContainer").dxHtmlEditor({ - // ... - customizeModules: function(config) { - config.history = { - delay: 0, - maxStack: 5000 - }; - } - }); + $("#html-editor").dxHtmlEditor({ + customizeModules(config) { + config.history = { + delay: 0, + maxStack: 5000 + }; + } }); ##### Angular - 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, }; } } - - 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 ##### React - + import React from 'react'; + import { HtmlEditor } from 'devextreme-react/html-editor'; + + export default function App() { + const customizeQuillModules = useCallback((config) => { + config.history = { + delay: 0, + maxStack: 5000, + }; + }, []); + + return ( + + ); + } - import 'devextreme/dist/css/dx.fluent.blue.light.css'; +--- + +You can configure **customizeModules** to modify the [keyboard navigation](/Documentation/Guide/UI_Components/HtmlEditor/Accessibility/#Keyboard_Navigation) behavior of HtmlEditor using `keyboard.inlineTabInsertion`: - import HtmlEditor from 'devextreme-react/html-editor'; +--- +##### jQuery - class App extends React.Component { - render() { - return ( - - ); + + $("#html-editor").dxHtmlEditor({ + customizeModules(config) { + config.keyboard.inlineTabInsertion = false; } + }); + +##### Angular + + + + + + + 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 + + + + + + +##### React + + + import React from 'react'; + import { HtmlEditor } from 'devextreme-react/html-editor'; + + export default function App() { + const customizeQuillModules = useCallback((config) => { + config.keyboard.inlineTabInsertion = false; + }, []); + + return ( + + ); + } --- diff --git a/concepts/05 UI Components/HtmlEditor/03 Accessibility/10 Accessibility Standards Compliance.md b/concepts/05 UI Components/HtmlEditor/03 Accessibility/10 Accessibility Standards Compliance.md index a48eb0f841..e0280043e4 100644 --- a/concepts/05 UI Components/HtmlEditor/03 Accessibility/10 Accessibility Standards Compliance.md +++ b/concepts/05 UI Components/HtmlEditor/03 Accessibility/10 Accessibility Standards Compliance.md @@ -16,11 +16,6 @@ The HTML Editor component meets a variety of - PC - Mac + PC + Mac Action @@ -50,25 +50,34 @@ A user can use the following keys to interact with the HTML Editor component: Insert a line break (in the same paragraph) - Tab - Nest current list item (when in a list) + Tab + + 1. Indent list items
+ 2. Focus the next cell in tables
+ 3. Insert a tab character (\t) in text. If keyboard.inlineTabInsertion is disabled, focuses the next focusable element on the page. + - Increase indentation (when at the start of a paragraph) + Shift + Tab + + 1. Dedent list items
+ 2. Focus the previous cell in tables
+ 3. Remove a tab character (\t) from text. If keyboard.inlineTabInsertion is disabled or text contains no tab characters, focuses the previous focusable element in the component. + - Move the cursor to the next table cell - - - Shift + Tab - Move the cursor to the previous table cell + Arrow Keys + Navigate through the table - Decrease indentation (when at the start of a paragraph) + Ctrl + Shift + Up Arrow + ⌘ + Shift + Up Arrow + Focuses the previous focusable element in the component. - Arrow Keys - Navigate through the table + Ctrl + Shift + Down Arrow + ⌘ + Shift + Down Arrow + Focuses the next focusable element on the page. Enter @@ -84,4 +93,72 @@ A user can use the following keys to interact with the HTML Editor component: +To toggle `keyboard.inlineTabInsertion`, configure [customizeModules](/Documentation/ApiReference/UI_Components/dxHtmlEditor/Configuration/#customizeModules): + +--- + +##### jQuery + + + $("#html-editor").dxHtmlEditor({ + customizeModules(config) { + config.keyboard.inlineTabInsertion = false; + } + }); + +##### Angular + + + + + + + import { Component } from '@angular/core'; + import { DxHtmlEditorModule } from 'devextreme-angular/ui/html-editor'; + + // ... + export class AppComponent { + customizeQuillModules(config) { + config.keyboard.inlineTabInsertion = false; + } + } + +##### Vue + + + + + + +##### React + + + import React from 'react'; + import { HtmlEditor } from 'devextreme-react/html-editor'; + + export default function App() { + const customizeQuillModules = useCallback((config) => { + config.keyboard.inlineTabInsertion = false; + }, []); + + return ( + + ); + } + +--- + #include common-code-register-key-handler \ No newline at end of file From f3dd94afd37a9acb7154e94036d872001ccd02f9 Mon Sep 17 00:00:00 2001 From: Arman Boyakhchyan Date: Fri, 24 Jul 2026 09:41:59 +0400 Subject: [PATCH 2/7] Add Minor Updates --- .../dxHtmlEditor/1 Configuration/customizeModules.md | 5 +++-- .../HtmlEditor/03 Accessibility/15 Keyboard Navigation.md | 8 ++++---- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/api-reference/10 UI Components/dxHtmlEditor/1 Configuration/customizeModules.md b/api-reference/10 UI Components/dxHtmlEditor/1 Configuration/customizeModules.md index f8fc80a3b8..9f8815eee3 100644 --- a/api-reference/10 UI Components/dxHtmlEditor/1 Configuration/customizeModules.md +++ b/api-reference/10 UI Components/dxHtmlEditor/1 Configuration/customizeModules.md @@ -70,7 +70,7 @@ The DevExtreme Quill modules and the API you can use to customize them are descr ##### React - import React from 'react'; + import React, { useCallback } from 'react'; import { HtmlEditor } from 'devextreme-react/html-editor'; export default function App() { @@ -93,6 +93,7 @@ The DevExtreme Quill modules and the API you can use to customize them are descr You can configure **customizeModules** to modify the [keyboard navigation](/Documentation/Guide/UI_Components/HtmlEditor/Accessibility/#Keyboard_Navigation) behavior of HtmlEditor using `keyboard.inlineTabInsertion`: --- + ##### jQuery @@ -140,7 +141,7 @@ You can configure **customizeModules** to modify the [keyboard navigation](/Docu ##### React - import React from 'react'; + import React, { useCallback } from 'react'; import { HtmlEditor } from 'devextreme-react/html-editor'; export default function App() { diff --git a/concepts/05 UI Components/HtmlEditor/03 Accessibility/15 Keyboard Navigation.md b/concepts/05 UI Components/HtmlEditor/03 Accessibility/15 Keyboard Navigation.md index 62ed050bf0..618e7ee3e6 100644 --- a/concepts/05 UI Components/HtmlEditor/03 Accessibility/15 Keyboard Navigation.md +++ b/concepts/05 UI Components/HtmlEditor/03 Accessibility/15 Keyboard Navigation.md @@ -72,12 +72,12 @@ A user can use the following keys to interact with the HTML Editor component: Ctrl + Shift + Up Arrow ⌘ + Shift + Up Arrow - Focuses the previous focusable element in the component. + Focus the previous focusable element in the component. Ctrl + Shift + Down Arrow ⌘ + Shift + Down Arrow - Focuses the next focusable element on the page. + Focus the next focusable element on the page. Enter @@ -93,7 +93,7 @@ A user can use the following keys to interact with the HTML Editor component: -To toggle `keyboard.inlineTabInsertion`, configure [customizeModules](/Documentation/ApiReference/UI_Components/dxHtmlEditor/Configuration/#customizeModules): +Configure [customizeModules](/Documentation/ApiReference/UI_Components/dxHtmlEditor/Configuration/#customizeModules) to toggle `keyboard.inlineTabInsertion`: --- @@ -144,7 +144,7 @@ To toggle `keyboard.inlineTabInsertion`, configure [customizeModules](/Documenta ##### React - import React from 'react'; + import React, { useCallback } from 'react'; import { HtmlEditor } from 'devextreme-react/html-editor'; export default function App() { From e7e18a6e85e72a68d99bd22d6d508aaf070e9a42 Mon Sep 17 00:00:00 2001 From: Arman Boyakhchyan Date: Fri, 24 Jul 2026 09:44:14 +0400 Subject: [PATCH 3/7] Add Vue Fixes --- .../dxHtmlEditor/1 Configuration/customizeModules.md | 4 ++-- .../HtmlEditor/03 Accessibility/15 Keyboard Navigation.md | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/api-reference/10 UI Components/dxHtmlEditor/1 Configuration/customizeModules.md b/api-reference/10 UI Components/dxHtmlEditor/1 Configuration/customizeModules.md index 9f8815eee3..013f6e754c 100644 --- a/api-reference/10 UI Components/dxHtmlEditor/1 Configuration/customizeModules.md +++ b/api-reference/10 UI Components/dxHtmlEditor/1 Configuration/customizeModules.md @@ -56,7 +56,7 @@ The DevExtreme Quill modules and the API you can use to customize them are descr /> - @@ -146,7 +146,7 @@ You can configure **customizeModules** to modify the [keyboard navigation](/Docu export default function App() { const customizeQuillModules = useCallback((config) => { - config.keyboard.inlineTabInsertion = false; + config.keyboard.inlineTabInsertion = true; }, []); return ( diff --git a/concepts/05 UI Components/HtmlEditor/03 Accessibility/15 Keyboard Navigation.md b/concepts/05 UI Components/HtmlEditor/03 Accessibility/15 Keyboard Navigation.md index f6b80216f1..801e5da928 100644 --- a/concepts/05 UI Components/HtmlEditor/03 Accessibility/15 Keyboard Navigation.md +++ b/concepts/05 UI Components/HtmlEditor/03 Accessibility/15 Keyboard Navigation.md @@ -55,7 +55,7 @@ A user can use the following keys to interact with the HTML Editor component:
  • Indent list items
  • Focus the next cell in tables
    • -
  • Insert a tab character (\t) in text. If keyboard.inlineTabInsertion is disabled, focus the next focusable element on the page.
    • +
  • Focus the next focusable element on the page. If keyboard.inlineTabInsertion is enabled, insert a tab character (\t) in text.
@@ -66,11 +66,12 @@ A user can use the following keys to interact with the HTML Editor component:
  • Dedent list items
  • Focus the previous cell in tables
  • - Remove a tab character (\t) from text. If keyboard.inlineTabInsertion is disabled or text contains no tab characters, focus one of the following elements: + Focus one of the following elements: + If text contains tab characters (\t) and keyboard.inlineTabInsertion is enabled, remove a tab character from text.
    • @@ -112,7 +113,7 @@ Configure [customizeModules](/Documentation/ApiReference/UI_Components/dxHtmlEdi $("#html-editor").dxHtmlEditor({ customizeModules(config) { - config.keyboard.inlineTabInsertion = false; + config.keyboard.inlineTabInsertion = true; } }); @@ -130,7 +131,7 @@ Configure [customizeModules](/Documentation/ApiReference/UI_Components/dxHtmlEdi // ... export class AppComponent { customizeQuillModules(config) { - config.keyboard.inlineTabInsertion = false; + config.keyboard.inlineTabInsertion = true; } } @@ -147,7 +148,7 @@ Configure [customizeModules](/Documentation/ApiReference/UI_Components/dxHtmlEdi import { DxHtmlEditor } from 'devextreme-vue/html-editor'; function customizeQuillModules(config) { - config.keyboard.inlineTabInsertion = false; + config.keyboard.inlineTabInsertion = true; } @@ -159,7 +160,7 @@ Configure [customizeModules](/Documentation/ApiReference/UI_Components/dxHtmlEdi export default function App() { const customizeQuillModules = useCallback((config) => { - config.keyboard.inlineTabInsertion = false; + config.keyboard.inlineTabInsertion = true; }, []); return (