From 63162f476da6561c6365ddf86b39a8b43c8de423 Mon Sep 17 00:00:00 2001
From: Raushen <andrey.dolzhikov@devexpress.com>
Date: Wed, 15 Jul 2026 00:32:51 +0300
Subject: [PATCH 1/9] Extract ALL_FOCUSABLE_ELEMENTS_SELECTOR

---
 .../js/__internal/core/utils/m_selectors.ts   | 26 ++++++++++++++++++-
 .../grid_core/keyboard_navigation/const.ts    | 20 +-------------
 2 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/packages/devextreme/js/__internal/core/utils/m_selectors.ts b/packages/devextreme/js/__internal/core/utils/m_selectors.ts
index 493a3255b01a..da11f2b0c5df 100644
--- a/packages/devextreme/js/__internal/core/utils/m_selectors.ts
+++ b/packages/devextreme/js/__internal/core/utils/m_selectors.ts
@@ -1,6 +1,26 @@
 import domAdapter from '@js/core/dom_adapter';
 import $ from '@js/core/renderer';
 
+const notInert = ':not([inert]):not([inert] *)';
+const notNegTabIndex = ':not([tabindex^="-"])';
+const notDisabled = ':not(:disabled)';
+
+export const ALL_FOCUSABLE_ELEMENTS_SELECTOR = [
+  `a[href]${notInert}${notNegTabIndex}`,
+  `area[href]${notInert}${notNegTabIndex}`,
+  `input:not([type="hidden"]):not([type="radio"])${notInert}${notNegTabIndex}${notDisabled}`,
+  `input[type="radio"]${notInert}${notNegTabIndex}${notDisabled}`,
+  `select${notInert}${notNegTabIndex}${notDisabled}`,
+  `textarea${notInert}${notNegTabIndex}${notDisabled}`,
+  `button${notInert}${notNegTabIndex}${notDisabled}`,
+  `details${notInert} > summary:first-of-type${notNegTabIndex}`,
+  `iframe${notInert}${notNegTabIndex}`,
+  `audio[controls]${notInert}${notNegTabIndex}`,
+  `video[controls]${notInert}${notNegTabIndex}`,
+  `[contenteditable]${notInert}${notNegTabIndex}`,
+  `[tabindex]${notInert}${notNegTabIndex}`,
+].join(',');
+
 const focusableFn = (element, tabIndex) => {
   if (!visible(element)) {
     return false;
@@ -29,6 +49,8 @@ function visible(element) {
   return $element.is(':visible') && $element.css('visibility') !== 'hidden' && $element.parents().css('visibility') !== 'hidden';
 }
 
+export const isElementVisible = (element: Element): boolean => visible(element);
+
 export const focusable = (index, element) => focusableFn(element, $(element).attr('tabIndex'));
 export const tabbable = (index, element) => {
   const tabIndex = $(element).attr('tabIndex');
@@ -42,4 +64,6 @@ export const focused = ($element) => {
   return domAdapter.getActiveElement(element) === element;
 };
 
-export default { focusable, tabbable, focused };
+export default {
+  focusable, tabbable, focused, isElementVisible, ALL_FOCUSABLE_ELEMENTS_SELECTOR,
+};
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/keyboard_navigation/const.ts b/packages/devextreme/js/__internal/grids/new/grid_core/keyboard_navigation/const.ts
index 58b1f88bbb62..50cd7cd61bf5 100644
--- a/packages/devextreme/js/__internal/grids/new/grid_core/keyboard_navigation/const.ts
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/keyboard_navigation/const.ts
@@ -1,19 +1 @@
-const notInert = ':not([inert]):not([inert] *)';
-const notNegTabIndex = ':not([tabindex^="-"])';
-const notDisabled = ':not(:disabled)';
-
-export const ALL_FOCUSABLE_ELEMENTS_SELECTOR = [
-  `a[href]${notInert}${notNegTabIndex}`,
-  `area[href]${notInert}${notNegTabIndex}`,
-  `input:not([type="hidden"]):not([type="radio"])${notInert}${notNegTabIndex}${notDisabled}`,
-  `input[type="radio"]${notInert}${notNegTabIndex}${notDisabled}`,
-  `select${notInert}${notNegTabIndex}${notDisabled}`,
-  `textarea${notInert}${notNegTabIndex}${notDisabled}`,
-  `button${notInert}${notNegTabIndex}${notDisabled}`,
-  `details${notInert} > summary:first-of-type${notNegTabIndex}`,
-  `iframe${notInert}${notNegTabIndex}`,
-  `audio[controls]${notInert}${notNegTabIndex}`,
-  `video[controls]${notInert}${notNegTabIndex}`,
-  `[contenteditable]${notInert}${notNegTabIndex}`,
-  `[tabindex]${notInert}${notNegTabIndex}`,
-].join(',');
+export { ALL_FOCUSABLE_ELEMENTS_SELECTOR } from '@ts/core/utils/m_selectors';

From 19a78b06e403aa4327449a7d0bc8badee1567024 Mon Sep 17 00:00:00 2001
From: Raushen <andrey.dolzhikov@devexpress.com>
Date: Wed, 15 Jul 2026 00:34:43 +0300
Subject: [PATCH 2/9] Fix linter issue

---
 packages/devextreme/js/__internal/ui/popover/popover.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/devextreme/js/__internal/ui/popover/popover.ts b/packages/devextreme/js/__internal/ui/popover/popover.ts
index 6e5676cf2189..6697bd3b2b65 100644
--- a/packages/devextreme/js/__internal/ui/popover/popover.ts
+++ b/packages/devextreme/js/__internal/ui/popover/popover.ts
@@ -200,7 +200,7 @@ class Popover<
       const { visible } = this.option();
 
       const overlayStack = this._overlayStack();
-      const isTopOverlay = overlayStack[overlayStack.length - 1] === this;
+      const isTopOverlay = (overlayStack[overlayStack.length - 1] as unknown) === this;
 
       if (normalizeKeyName(e) === ESC_KEY_NAME && visible && isTopOverlay) {
         // eslint-disable-next-line @typescript-eslint/no-floating-promises

From 06a4fafd9d8b2bf3c553da1bc9680a40f58fdc2e Mon Sep 17 00:00:00 2001
From: Raushen <andrey.dolzhikov@devexpress.com>
Date: Wed, 15 Jul 2026 00:37:48 +0300
Subject: [PATCH 3/9] Core implementation

---
 .../js/__internal/core/utils/focus.ts         | 54 +++++++++++++++++++
 .../__internal/ui/html_editor/html_editor.ts  | 39 ++++++++++++--
 .../ui/html_editor/modules/m_toolbar.ts       |  6 ++-
 .../js/__internal/ui/toolbar/toolbar.ts       | 13 +++++
 4 files changed, 108 insertions(+), 4 deletions(-)
 create mode 100644 packages/devextreme/js/__internal/core/utils/focus.ts

diff --git a/packages/devextreme/js/__internal/core/utils/focus.ts b/packages/devextreme/js/__internal/core/utils/focus.ts
new file mode 100644
index 000000000000..d40fae5eb2d2
--- /dev/null
+++ b/packages/devextreme/js/__internal/core/utils/focus.ts
@@ -0,0 +1,54 @@
+import domAdapter from '@js/core/dom_adapter';
+import { ALL_FOCUSABLE_ELEMENTS_SELECTOR, isElementVisible } from '@ts/core/utils/m_selectors';
+
+const DOCUMENT_POSITION_PRECEDING = 2;
+const DOCUMENT_POSITION_FOLLOWING = 4;
+
+export function getFirstFocusableElement(
+  root: HTMLElement | null | undefined,
+): HTMLElement | null {
+  if (!root) {
+    return null;
+  }
+
+  const candidates = Array.from(
+    root.querySelectorAll<HTMLElement>(ALL_FOCUSABLE_ELEMENTS_SELECTOR),
+  );
+
+  return candidates.find((candidate) => isElementVisible(candidate)) ?? null;
+}
+
+function getFocusableElementsOutside(
+  containerNode: HTMLElement,
+  doc: Document,
+): HTMLElement[] {
+  return Array.from(
+    doc.querySelectorAll<HTMLElement>(ALL_FOCUSABLE_ELEMENTS_SELECTOR),
+  ).filter((element) => !containerNode.contains(element) && isElementVisible(element));
+}
+
+export function getNextFocusableElement(
+  containerNode: HTMLElement,
+  doc: Document = domAdapter.getDocument(),
+): HTMLElement | null {
+  return getFocusableElementsOutside(containerNode, doc)
+    .find((element) => {
+      const position = containerNode.compareDocumentPosition(element);
+      // eslint-disable-next-line no-bitwise
+      return Boolean(position & DOCUMENT_POSITION_FOLLOWING);
+    }) ?? null;
+}
+
+export function getPreviousFocusableElement(
+  containerNode: HTMLElement,
+  doc: Document = domAdapter.getDocument(),
+): HTMLElement | null {
+  const precedingElements = getFocusableElementsOutside(containerNode, doc)
+    .filter((element) => {
+      const position = containerNode.compareDocumentPosition(element);
+      // eslint-disable-next-line no-bitwise
+      return Boolean(position & DOCUMENT_POSITION_PRECEDING);
+    });
+
+  return precedingElements[precedingElements.length - 1] ?? null;
+}
diff --git a/packages/devextreme/js/__internal/ui/html_editor/html_editor.ts b/packages/devextreme/js/__internal/ui/html_editor/html_editor.ts
index efaac05e9405..25f5da265b40 100644
--- a/packages/devextreme/js/__internal/ui/html_editor/html_editor.ts
+++ b/packages/devextreme/js/__internal/ui/html_editor/html_editor.ts
@@ -5,10 +5,11 @@ import { Event as dxEvent } from '@js/common/core/events';
 import eventsEngine from '@js/common/core/events/core/events_engine';
 import scrollEvents from '@js/common/core/events/gesture/emitter.gesture.scroll';
 import pointerEvents from '@js/common/core/events/pointer';
-import { addNamespace } from '@js/common/core/events/utils/index';
+import { addNamespace, normalizeKeyName } from '@js/common/core/events/utils/index';
 import registerComponent from '@js/core/component_registrator';
 import config from '@js/core/config';
 import devices from '@js/core/devices';
+import domAdapter from '@js/core/dom_adapter';
 import { getPublicElement } from '@js/core/element';
 import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
@@ -28,6 +29,7 @@ import { isDefined, isFunction } from '@js/core/utils/type';
 import type { DxEvent } from '@js/events';
 import type { Properties as FormProperties } from '@js/ui/form';
 import type { Converter, HtmlEditorFormat, Properties } from '@js/ui/html_editor';
+import { getNextFocusableElement, getPreviousFocusableElement } from '@ts/core/utils/focus';
 import type { OptionChanged } from '@ts/core/widget/types';
 import type { ValueChangedEvent } from '@ts/ui/editor/editor';
 import Editor from '@ts/ui/editor/editor';
@@ -357,6 +359,37 @@ class HtmlEditor extends Editor<Properties> {
 
   _keyDownHandler(e: ValueChangedEvent): void {
     this._saveValueChangeEvent(e);
+    this._handleFocusEscape(e as unknown as KeyboardEvent);
+  }
+
+  _handleFocusEscape(e: KeyboardEvent): void {
+    if (!e.ctrlKey || !e.shiftKey) {
+      return;
+    }
+
+    const keyName = normalizeKeyName(e);
+
+    if (keyName !== 'upArrow' && keyName !== 'downArrow') {
+      return;
+    }
+
+    const isBackward = keyName === 'upArrow';
+
+    e.preventDefault();
+
+    if (isBackward && this._applyToolbarMethod('focusFirstItem')) {
+      return;
+    }
+
+    const editorNode = this.$element().get(0) as HTMLElement;
+    const target = (
+      isBackward
+        ? getPreviousFocusableElement(editorNode)
+        : getNextFocusableElement(editorNode)
+    )
+      ?? domAdapter.getBody();
+
+    target.focus();
   }
 
   _renderHtmlEditor(): void {
@@ -771,8 +804,8 @@ class HtmlEditor extends Editor<Properties> {
     }
   }
 
-  _applyToolbarMethod(methodName: string): void {
-    this.getModule('toolbar')?.[methodName]();
+  _applyToolbarMethod(methodName: string): unknown {
+    return this.getModule('toolbar')?.[methodName]();
   }
 
   addCleanCallback(callback: () => unknown): void {
diff --git a/packages/devextreme/js/__internal/ui/html_editor/modules/m_toolbar.ts b/packages/devextreme/js/__internal/ui/html_editor/modules/m_toolbar.ts
index afc71c31e703..c8f5d32dd9d8 100644
--- a/packages/devextreme/js/__internal/ui/html_editor/modules/m_toolbar.ts
+++ b/packages/devextreme/js/__internal/ui/html_editor/modules/m_toolbar.ts
@@ -17,10 +17,10 @@ import {
 import type { AICommandName, AICustomCommand, AIToolbarItem } from '@js/ui/html_editor';
 import type { ContentReadyEvent, ItemClickEvent } from '@js/ui/menu';
 import type { Item } from '@js/ui/toolbar';
-import Toolbar from '@js/ui/toolbar';
 import errors from '@js/ui/widget/ui.errors';
 import { capitalize } from '@ts/core/utils/capitalize';
 import { DX_MENU_ITEM_CLASS } from '@ts/ui/menu/menu';
+import Toolbar from '@ts/ui/toolbar/toolbar';
 import Quill from 'devextreme-quill';
 
 import type { CommandsMap } from '../utils/ai';
@@ -237,6 +237,10 @@ if (Quill) {
       this.toolbarInstance && this.toolbarInstance.repaint();
     }
 
+    focusFirstItem(): boolean {
+      return this.toolbarInstance?.focusFirstItem() ?? false;
+    }
+
     _getContainer() {
       const $container = $('<div>');
 
diff --git a/packages/devextreme/js/__internal/ui/toolbar/toolbar.ts b/packages/devextreme/js/__internal/ui/toolbar/toolbar.ts
index ae02af7499e3..1fe8dff5e135 100644
--- a/packages/devextreme/js/__internal/ui/toolbar/toolbar.ts
+++ b/packages/devextreme/js/__internal/ui/toolbar/toolbar.ts
@@ -1,6 +1,7 @@
 import registerComponent from '@js/core/component_registrator';
 import type { dxElementWrapper } from '@js/core/renderer';
 import type { Item } from '@js/ui/toolbar';
+import { getFirstFocusableElement } from '@ts/core/utils/focus';
 import type { OptionChanged } from '@ts/core/widget/types';
 
 import { MultiLineStrategy } from './strategy/toolbar.multiline';
@@ -160,6 +161,18 @@ class Toolbar extends ToolbarBase<Properties> {
     this._getToolbarItems().forEach((item) => toggleItemFocusableElementTabIndex(this, item));
   }
 
+  focusFirstItem(): boolean {
+    if (this.option('disabled')) {
+      return false;
+    }
+
+    const target = getFirstFocusableElement(this.$element().get(0) as HTMLElement);
+
+    target?.focus();
+
+    return Boolean(target);
+  }
+
   _isMenuItem(itemData: Item): boolean {
     return itemData.locateInMenu === 'always';
   }

From 19e92851895fec92265111d952015af78f7a116c Mon Sep 17 00:00:00 2001
From: Raushen <andrey.dolzhikov@devexpress.com>
Date: Wed, 15 Jul 2026 00:39:49 +0300
Subject: [PATCH 4/9] Refactor RootToolbar test model

---
 .../tests/accessibility/htmlEditor.ts             |  2 +-
 .../tests/editors/htmlEditor/common.ts            |  2 +-
 .../dialogs/addImage/addImageFromDevice.ts        |  4 ++--
 .../htmlEditor/dialogs/addImage/addImageUrl.ts    | 10 +++++-----
 .../editors/htmlEditor/dialogs/addImage/common.ts | 12 ++++++------
 .../editors/htmlEditor/dialogs/aiDialog/common.ts |  2 +-
 .../testcafe-models/htmlEditor/rootToolbar.ts     |  7 ++++---
 packages/testcafe-models/toolbar/toolbarItem.ts   | 15 +++++++++++++++
 8 files changed, 35 insertions(+), 19 deletions(-)
 create mode 100644 packages/testcafe-models/toolbar/toolbarItem.ts

diff --git a/e2e/testcafe-devextreme/tests/accessibility/htmlEditor.ts b/e2e/testcafe-devextreme/tests/accessibility/htmlEditor.ts
index 612d4c145957..0f22a4d4287f 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/htmlEditor.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/htmlEditor.ts
@@ -61,7 +61,7 @@ const aiCreated = async (t: TestController): Promise<void> => {
   await t.click(Selector(defaultSelector));
 
   await t
-    .click(htmlEditor.toolbar.getItemByName('ai'))
+    .click(htmlEditor.toolbar.getItemByName('ai').element)
     .click(Selector(`.${SUBMENU_CLASS} .${MENU_ITEM_CLASS}`).nth(4));
 
   await t
diff --git a/e2e/testcafe-devextreme/tests/editors/htmlEditor/common.ts b/e2e/testcafe-devextreme/tests/editors/htmlEditor/common.ts
index 3943c19d719a..fbe4655f863b 100644
--- a/e2e/testcafe-devextreme/tests/editors/htmlEditor/common.ts
+++ b/e2e/testcafe-devextreme/tests/editors/htmlEditor/common.ts
@@ -60,7 +60,7 @@ test('AI toolbar item', async (t) => {
   await testScreenshot(t, takeScreenshot, 'htmleditor-ai-toolbar-item.png', { element: '#container' });
 
   await t
-    .click(htmlEditor.toolbar.getItemByName('ai'))
+    .click(htmlEditor.toolbar.getItemByName('ai').element)
     .click(Selector(`.${SUBMENU_CLASS}`).find(`.${MENU_ITEM_CLASS}`).nth(5));
 
   await testScreenshot(t, takeScreenshot, 'htmleditor-ai-toolbar-item-expanded.png', { element: '#container' });
diff --git a/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/addImage/addImageFromDevice.ts b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/addImage/addImageFromDevice.ts
index f56d98555d70..bdf32967abb2 100644
--- a/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/addImage/addImageFromDevice.ts
+++ b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/addImage/addImageFromDevice.ts
@@ -14,7 +14,7 @@ test('Image from device should be inserted', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
   const htmlEditor = new HtmlEditor('#container');
 
-  await t.click(htmlEditor.toolbar.getItemByName('image'));
+  await t.click(htmlEditor.toolbar.getItemByName('image').element);
 
   await t
     .expect(htmlEditor.dialog.footerToolbar.addButton.isDisabled)
@@ -73,7 +73,7 @@ test('Image should be validated and inserted from device', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
   const htmlEditor = new HtmlEditor('#container');
 
-  await t.click(htmlEditor.toolbar.getItemByName('image'));
+  await t.click(htmlEditor.toolbar.getItemByName('image').element);
 
   const { fileUploader } = htmlEditor.dialog.addImageFileForm;
 
diff --git a/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/addImage/addImageUrl.ts b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/addImage/addImageUrl.ts
index 8e5bb86edbee..d182656550c1 100644
--- a/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/addImage/addImageUrl.ts
+++ b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/addImage/addImageUrl.ts
@@ -15,7 +15,7 @@ test('Image uploader from url appearance', async (t) => {
   const htmlEditor = new HtmlEditor('#container');
 
   await t
-    .click(htmlEditor.toolbar.getItemByName('image'));
+    .click(htmlEditor.toolbar.getItemByName('image').element);
 
   await t
     .click(htmlEditor.dialog.addImageUrlForm.lockButton.element);
@@ -38,7 +38,7 @@ test('Image url should be validate before wil be inserted by add button click',
   const htmlEditor = new HtmlEditor('#container');
 
   await t
-    .click(htmlEditor.toolbar.getItemByName('image'))
+    .click(htmlEditor.toolbar.getItemByName('image').element)
     .click(htmlEditor.dialog.footerToolbar.addButton.element);
 
   await t
@@ -71,7 +71,7 @@ test('Image url should be validate before wil be inserted by add enter press', a
   const htmlEditor = new HtmlEditor('#container');
 
   await t
-    .click(htmlEditor.toolbar.getItemByName('image'));
+    .click(htmlEditor.toolbar.getItemByName('image').element);
 
   await t
     .pressKey('enter')
@@ -104,7 +104,7 @@ test('Image url should be updated', async (t) => {
   const htmlEditor = new HtmlEditor('#container');
 
   await t
-    .click(htmlEditor.toolbar.getItemByName('image'))
+    .click(htmlEditor.toolbar.getItemByName('image').element)
 
     .expect(htmlEditor.dialog.footerToolbar.addButton.text)
     .eql(isMaterial() ? 'ADD' : 'Add');
@@ -118,7 +118,7 @@ test('Image url should be updated', async (t) => {
   await testScreenshot(t, takeScreenshot, 'editor-add-url-image-before-updated.png', { element: htmlEditor.content });
 
   await t
-    .click(htmlEditor.toolbar.getItemByName('image'))
+    .click(htmlEditor.toolbar.getItemByName('image').element)
 
     .expect(htmlEditor.dialog.footerToolbar.addButton.text)
     .eql(isMaterial() ? 'UPDATE' : 'Update');
diff --git a/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/addImage/common.ts b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/addImage/common.ts
index 94d4623ce7b3..9868e6e65619 100644
--- a/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/addImage/common.ts
+++ b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/addImage/common.ts
@@ -16,7 +16,7 @@ test('TabPanel in HtmlEditor must have correct borders', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
   const htmlEditor = new HtmlEditor('#container');
 
-  await t.click(htmlEditor.toolbar.getItemByName('image'));
+  await t.click(htmlEditor.toolbar.getItemByName('image').element);
 
   await testScreenshot(t, takeScreenshot, 'tabpanel-in-htmleditor.png', {
     element: ADD_IMAGE_POPUP_CONTENT_SELECTOR,
@@ -40,7 +40,7 @@ test('Add button should be enabled after switch to url form', async (t) => {
   const htmlEditor = new HtmlEditor('#container');
 
   await t
-    .click(htmlEditor.toolbar.getItemByName('image'))
+    .click(htmlEditor.toolbar.getItemByName('image').element)
 
     .expect(htmlEditor.dialog.footerToolbar.addButton.isDisabled)
     .eql(true);
@@ -70,7 +70,7 @@ test('Add button should be disable after switch to image upload form', async (t)
   const htmlEditor = new HtmlEditor('#container');
 
   await t
-    .click(htmlEditor.toolbar.getItemByName('image'))
+    .click(htmlEditor.toolbar.getItemByName('image').element)
 
     .expect(htmlEditor.dialog.footerToolbar.addButton.isDisabled)
     .notOk()
@@ -109,7 +109,7 @@ test('AddImage form shouldn\'t lead to side effects in other forms', async (t) =
   const htmlEditor = new HtmlEditor('#container');
 
   await t
-    .click(htmlEditor.toolbar.getItemByName('image'))
+    .click(htmlEditor.toolbar.getItemByName('image').element)
 
     .expect(htmlEditor.dialog.footerToolbar.addButton.isDisabled)
     .ok()
@@ -120,7 +120,7 @@ test('AddImage form shouldn\'t lead to side effects in other forms', async (t) =
     .click(htmlEditor.dialog.footerToolbar.cancelButton.element);
 
   await t
-    .click(htmlEditor.toolbar.getItemByName('link'))
+    .click(htmlEditor.toolbar.getItemByName('link').element)
 
     .expect(htmlEditor.dialog.footerToolbar.addButton.isDisabled)
     .notOk()
@@ -131,7 +131,7 @@ test('AddImage form shouldn\'t lead to side effects in other forms', async (t) =
     .click(htmlEditor.dialog.footerToolbar.addButton.element);
 
   await t
-    .click(htmlEditor.toolbar.getItemByName('color'))
+    .click(htmlEditor.toolbar.getItemByName('color').element)
 
     .expect(htmlEditor.dialog.footerToolbar.addButton.isDisabled)
     .notOk()
diff --git a/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/common.ts b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/common.ts
index 90a346bc74a9..b0138f5ec8ae 100644
--- a/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/common.ts
+++ b/e2e/testcafe-devextreme/tests/editors/htmlEditor/dialogs/aiDialog/common.ts
@@ -26,7 +26,7 @@ export async function openAIDialog(
 ): Promise<HtmlEditor> {
   const htmlEditor = new HtmlEditor('#container');
   await t
-    .click(htmlEditor.toolbar.getItemByName('ai'))
+    .click(htmlEditor.toolbar.getItemByName('ai').element)
     .click(Selector(`.${SUBMENU_CLASS} .${MENU_ITEM_CLASS}`).nth(command));
 
   if (option !== undefined) {
diff --git a/packages/testcafe-models/htmlEditor/rootToolbar.ts b/packages/testcafe-models/htmlEditor/rootToolbar.ts
index 31d504c8384b..14066c96a633 100644
--- a/packages/testcafe-models/htmlEditor/rootToolbar.ts
+++ b/packages/testcafe-models/htmlEditor/rootToolbar.ts
@@ -1,17 +1,18 @@
 import Toolbar from '../toolbar';
+import ToolbarItem from '../toolbar/toolbarItem';
 
 const CLASS = {
   ROOT: '.dx-htmleditor-toolbar',
 };
 
-type ToolbarItemName = 'image' | 'color' | 'link' | 'ai';
+type ToolbarItemName = 'image' | 'color' | 'link' | 'ai' | 'bold' | 'italic';
 
 export default class RootToolbar extends Toolbar {
   constructor() {
     super(CLASS.ROOT);
   }
 
-  public getItemByName(itemName: ToolbarItemName): Selector {
-    return this.element.find(`.dx-${itemName}-format`).parent().parent();
+  public getItemByName(itemName: ToolbarItemName): ToolbarItem {
+    return new ToolbarItem(this.element.find(`.dx-${itemName}-format`));
   }
 }
diff --git a/packages/testcafe-models/toolbar/toolbarItem.ts b/packages/testcafe-models/toolbar/toolbarItem.ts
new file mode 100644
index 000000000000..6d92340aea31
--- /dev/null
+++ b/packages/testcafe-models/toolbar/toolbarItem.ts
@@ -0,0 +1,15 @@
+import CollectionItem from '../internal/collectionItem';
+
+const CLASS = {
+  focused: 'dx-state-focused',
+};
+
+export default class ToolbarItem extends CollectionItem {
+  isFocused: Promise<boolean>;
+
+  constructor(element: Selector) {
+    super(element);
+
+    this.isFocused = element.hasClass(CLASS.focused);
+  }
+}

From 9ed57f5dcd2bf06ea4d54511d83ad879a72ec56d Mon Sep 17 00:00:00 2001
From: Raushen <andrey.dolzhikov@devexpress.com>
Date: Wed, 15 Jul 2026 00:40:20 +0300
Subject: [PATCH 5/9] Add e2e tests

---
 e2e/testcafe-devextreme/helpers/domUtils.ts   | 15 ++++++
 .../tests/editors/htmlEditor/keyboard.ts      | 53 +++++++++++++++++++
 2 files changed, 68 insertions(+)
 create mode 100644 e2e/testcafe-devextreme/tests/editors/htmlEditor/keyboard.ts

diff --git a/e2e/testcafe-devextreme/helpers/domUtils.ts b/e2e/testcafe-devextreme/helpers/domUtils.ts
index 1c0b4f9570c7..af65b0fe4d56 100644
--- a/e2e/testcafe-devextreme/helpers/domUtils.ts
+++ b/e2e/testcafe-devextreme/helpers/domUtils.ts
@@ -137,6 +137,21 @@ export const addFocusableElementBefore = ClientFunction((
   return button.id;
 });
 
+export const addFocusableElementAfter = ClientFunction((
+  targetSelector: string,
+  elementId = 'focusable-end',
+) => {
+  const existing = document.getElementById(elementId);
+  existing?.remove();
+
+  const target = document.querySelector(targetSelector);
+  const button = document.createElement('button');
+  button.id = elementId;
+  button.textContent = 'End';
+  target?.parentElement?.insertBefore(button, target.nextElementSibling);
+  return button.id;
+});
+
 export const hasHorizontalScroll = ClientFunction((selector) => {
   const element = selector();
 
diff --git a/e2e/testcafe-devextreme/tests/editors/htmlEditor/keyboard.ts b/e2e/testcafe-devextreme/tests/editors/htmlEditor/keyboard.ts
new file mode 100644
index 000000000000..5c5621ab61f3
--- /dev/null
+++ b/e2e/testcafe-devextreme/tests/editors/htmlEditor/keyboard.ts
@@ -0,0 +1,53 @@
+import { Selector } from 'testcafe';
+import HtmlEditor from 'devextreme-testcafe-models/htmlEditor';
+import url from '../../../helpers/getPageUrl';
+import { createWidget } from '../../../helpers/createWidget';
+import { addFocusableElementBefore, addFocusableElementAfter } from '../../../helpers/domUtils';
+
+fixture`HtmlEditor - focus escape`
+  .page(url(__dirname, '../../container-extended.html'));
+
+test('Ctrl+Shift+Down should move focus to the next focusable element outside the editor', async (t) => {
+  const htmlEditor = new HtmlEditor('#container');
+
+  await t
+    .click(htmlEditor.content)
+    .pressKey('ctrl+shift+down')
+    .expect(Selector('#focusable-end').focused)
+    .ok();
+}).before(async () => {
+  await createWidget('dxHtmlEditor', { value: '<p>test</p>' });
+  await addFocusableElementBefore('#container');
+  await addFocusableElementAfter('#container');
+});
+
+test('Ctrl+Shift+Up should move focus to the previous focusable element when there is no toolbar', async (t) => {
+  const htmlEditor = new HtmlEditor('#container');
+
+  await t
+    .click(htmlEditor.content)
+    .pressKey('ctrl+shift+up')
+    .expect(Selector('#focusable-start').focused)
+    .ok();
+}).before(async () => {
+  await createWidget('dxHtmlEditor', { value: '<p>test</p>' });
+  await addFocusableElementBefore('#container');
+  await addFocusableElementAfter('#container');
+});
+
+test('Ctrl+Shift+Up should move focus into the toolbar when it is present', async (t) => {
+  const htmlEditor = new HtmlEditor('#container');
+
+  await t
+    .click(htmlEditor.content)
+    .pressKey('ctrl+shift+up')
+    .expect(htmlEditor.toolbar.getItemByName('bold').isFocused)
+    .ok();
+}).before(async () => {
+  await createWidget('dxHtmlEditor', {
+    value: '<p>test</p>',
+    toolbar: { items: ['bold', 'italic'] },
+  });
+  await addFocusableElementBefore('#container');
+  await addFocusableElementAfter('#container');
+});

From 005f3511005ab49cd564e48980eb7fe1d201df85 Mon Sep 17 00:00:00 2001
From: Raushen <andrey.dolzhikov@devexpress.com>
Date: Wed, 15 Jul 2026 00:44:35 +0300
Subject: [PATCH 6/9] Focus utils tests

---
 .../js/__internal/core/utils/focus.test.ts    | 123 ++++++++++++++++++
 1 file changed, 123 insertions(+)
 create mode 100644 packages/devextreme/js/__internal/core/utils/focus.test.ts

diff --git a/packages/devextreme/js/__internal/core/utils/focus.test.ts b/packages/devextreme/js/__internal/core/utils/focus.test.ts
new file mode 100644
index 000000000000..170572caa4a2
--- /dev/null
+++ b/packages/devextreme/js/__internal/core/utils/focus.test.ts
@@ -0,0 +1,123 @@
+import {
+  describe, expect, it, jest,
+} from '@jest/globals';
+
+import {
+  getFirstFocusableElement,
+  getNextFocusableElement,
+  getPreviousFocusableElement,
+} from './focus';
+
+jest.mock('@ts/core/utils/m_selectors', () => ({
+  ...jest.requireActual<typeof import('@ts/core/utils/m_selectors')>('@ts/core/utils/m_selectors'),
+  isElementVisible: jest.fn(() => true),
+}));
+
+const add = <T extends HTMLElement>(element: T, parent: Node = document.body): T => {
+  parent.appendChild(element);
+  return element;
+};
+
+const button = (id: string): HTMLButtonElement => {
+  const el = document.createElement('button');
+  el.id = id;
+  return el;
+};
+
+const setup = (): {
+  before: HTMLButtonElement;
+  container: HTMLDivElement;
+  after: HTMLButtonElement;
+} => {
+  document.body.innerHTML = '';
+  const before = add(button('before'));
+  const container = add(document.createElement('div'));
+  const after = add(button('after'));
+  return { before, container, after };
+};
+
+describe('getNextFocusableElement', () => {
+  it('returns the next focusable after the container', () => {
+    const { container, after } = setup();
+
+    expect(getNextFocusableElement(container)).toBe(after);
+  });
+
+  it('returns the closest neighbor when several elements are present', () => {
+    const { container, after } = setup();
+    const farAfter = add(button('far-after'));
+
+    expect(getNextFocusableElement(container)).toBe(after);
+    expect(getNextFocusableElement(container)).not.toBe(farAfter);
+  });
+
+  it('skips focusable elements located inside the container', () => {
+    const { container, after } = setup();
+    add(button('inside'), container);
+
+    expect(getNextFocusableElement(container)).toBe(after);
+  });
+
+  it('returns null when there is no focusable element after the container', () => {
+    const { container, after } = setup();
+    after.remove();
+
+    expect(getNextFocusableElement(container)).toBeNull();
+  });
+});
+
+describe('getPreviousFocusableElement', () => {
+  it('returns the previous focusable before the container', () => {
+    const { before, container } = setup();
+
+    expect(getPreviousFocusableElement(container)).toBe(before);
+  });
+
+  it('returns the closest neighbor when several elements are present', () => {
+    const { before, container } = setup();
+    const farBefore = add(button('far-before'), document.body);
+    document.body.insertBefore(farBefore, before);
+
+    expect(getPreviousFocusableElement(container)).toBe(before);
+    expect(getPreviousFocusableElement(container)).not.toBe(farBefore);
+  });
+
+  it('skips focusable elements located inside the container', () => {
+    const { before, container } = setup();
+    add(button('inside'), container);
+
+    expect(getPreviousFocusableElement(container)).toBe(before);
+  });
+
+  it('returns null when there is no focusable element before the container', () => {
+    const { before, container } = setup();
+    before.remove();
+
+    expect(getPreviousFocusableElement(container)).toBeNull();
+  });
+});
+
+describe('getFirstFocusableElement', () => {
+  it('returns the first focusable element inside the root', () => {
+    document.body.innerHTML = '';
+    const root = add(document.createElement('div'));
+    add(document.createElement('span'), root);
+    const first = add(button('first'), root);
+    add(button('second'), root);
+
+    expect(getFirstFocusableElement(root)).toBe(first);
+  });
+
+  it('returns null when the root has no focusable elements', () => {
+    document.body.innerHTML = '';
+    const root = add(document.createElement('div'));
+    add(document.createElement('span'), root);
+
+    expect(getFirstFocusableElement(root)).toBeNull();
+  });
+
+  it('returns null when the root is null or undefined', () => {
+    expect(getFirstFocusableElement(null)).toBeNull();
+    expect(getFirstFocusableElement(undefined)).toBeNull();
+  });
+});

From e9d1b2359822f3ea2b40fffdbca40ef326b7fbe3 Mon Sep 17 00:00:00 2001
From: Raushen <andrey.dolzhikov@devexpress.com>
Date: Wed, 15 Jul 2026 00:45:31 +0300
Subject: [PATCH 7/9] KBN unit tests

---
 .../__tests__/__mock__/model/html_editor.ts   |  35 ++++++
 .../__tests__/focus_escape.test.ts            | 102 ++++++++++++++++++
 2 files changed, 137 insertions(+)
 create mode 100644 packages/devextreme/js/__internal/ui/__tests__/__mock__/model/html_editor.ts
 create mode 100644 packages/devextreme/js/__internal/ui/html_editor/__tests__/focus_escape.test.ts

diff --git a/packages/devextreme/js/__internal/ui/__tests__/__mock__/model/html_editor.ts b/packages/devextreme/js/__internal/ui/__tests__/__mock__/model/html_editor.ts
new file mode 100644
index 000000000000..96f9355e0505
--- /dev/null
+++ b/packages/devextreme/js/__internal/ui/__tests__/__mock__/model/html_editor.ts
@@ -0,0 +1,35 @@
+const CLASSES = {
+  content: 'dx-htmleditor-content',
+  toolbarWrapper: 'dx-htmleditor-toolbar-wrapper',
+};
+
+export class HtmlEditorModel {
+  constructor(protected readonly root: HTMLElement) {}
+
+  public getContent(): HTMLElement {
+    return this.root.querySelector(`.${CLASSES.content}`) as HTMLElement;
+  }
+
+  public getToolbarWrapper(): HTMLElement {
+    return this.root.querySelector(`.${CLASSES.toolbarWrapper}`) as HTMLElement;
+  }
+
+  public moveFocusFromContent(direction: 'up' | 'down'): KeyboardEvent {
+    const key = direction === 'up' ? 'ArrowUp' : 'ArrowDown';
+
+    return this.pressKeyInContent(key, { ctrlKey: true, shiftKey: true });
+  }
+
+  public pressKeyInContent(
+    key: string,
+    { ctrlKey = false, shiftKey = false }: { ctrlKey?: boolean; shiftKey?: boolean } = {},
+  ): KeyboardEvent {
+    const event = new KeyboardEvent('keydown', {
+      key, ctrlKey, shiftKey, bubbles: true, cancelable: true,
+    });
+
+    this.getContent().dispatchEvent(event);
+
+    return event;
+  }
+}
diff --git a/packages/devextreme/js/__internal/ui/html_editor/__tests__/focus_escape.test.ts b/packages/devextreme/js/__internal/ui/html_editor/__tests__/focus_escape.test.ts
new file mode 100644
index 000000000000..ce3db2c637a8
--- /dev/null
+++ b/packages/devextreme/js/__internal/ui/html_editor/__tests__/focus_escape.test.ts
@@ -0,0 +1,102 @@
+import {
+  afterEach, describe, expect, it, jest,
+} from '@jest/globals';
+import $ from '@js/core/renderer';
+import { HtmlEditorModel } from '@ts/ui/__tests__/__mock__/model/html_editor';
+
+import HtmlEditor from '../html_editor';
+
+jest.mock('@ts/core/utils/m_selectors', () => ({
+  ...jest.requireActual<typeof import('@ts/core/utils/m_selectors')>('@ts/core/utils/m_selectors'),
+  isElementVisible: jest.fn(() => true),
+}));
+
+const editors: HtmlEditor[] = [];
+
+const createEditor = (options = {}): HtmlEditorModel => {
+  const $element = $('<div>').appendTo(document.body);
+  // @ts-expect-error direct instantiation is not typed
+  const instance = new HtmlEditor($element, options);
+
+  editors.push(instance);
+
+  return new HtmlEditorModel($element.get(0) as HTMLElement);
+};
+
+describe('HtmlEditor focus escape (Ctrl+Shift+Up/Down)', () => {
+  afterEach(() => {
+    editors.forEach((instance) => instance.dispose());
+    editors.length = 0;
+    document.body.innerHTML = '';
+  });
+
+  it('Ctrl+Shift+Down moves focus to the next focusable outside the editor', () => {
+    const before = $('<button>').attr('id', 'before').appendTo(document.body).get(0) as HTMLElement;
+    const model = createEditor();
+    const after = $('<button>').attr('id', 'after').appendTo(document.body).get(0) as HTMLElement;
+
+    model.moveFocusFromContent('down');
+
+    expect(document.activeElement).toBe(after);
+    expect(document.activeElement).not.toBe(before);
+  });
+
+  it('Ctrl+Shift+Up moves focus to the previous focusable outside the editor', () => {
+    const before = $('<button>').attr('id', 'before').appendTo(document.body).get(0) as HTMLElement;
+    const model = createEditor();
+    $('<button>').attr('id', 'after').appendTo(document.body);
+
+    model.moveFocusFromContent('up');
+
+    expect(document.activeElement).toBe(before);
+  });
+
+  it('Ctrl+Shift+Up moves focus into the toolbar when it is present', () => {
+    $('<button>').attr('id', 'before').appendTo(document.body);
+    const model = createEditor({ toolbar: { items: ['bold'] } });
+
+    model.moveFocusFromContent('up');
+
+    const activeElement = document.activeElement as HTMLElement;
+    expect(model.getToolbarWrapper()?.contains(activeElement)).toBe(true);
+  });
+
+  it('Ctrl+Shift+Up falls back to the previous focusable when the toolbar has no focusable item', () => {
+    const before = $('<button>').attr('id', 'before').appendTo(document.body).get(0) as HTMLElement;
+    const model = createEditor({ readOnly: true, toolbar: { items: ['bold'] } });
+
+    model.moveFocusFromContent('up');
+
+    expect(document.activeElement).toBe(before);
+  });
+
+  it('prevents the browser default on Ctrl+Shift+ArrowDown', () => {
+    $('<button>').attr('id', 'after').appendTo(document.body);
+    const model = createEditor();
+
+    const event = model.moveFocusFromContent('down');
+
+    expect(event.defaultPrevented).toBe(true);
+  });
+
+  it('does nothing without Ctrl+Shift modifiers', () => {
+    const before = $('<button>').attr('id', 'before').appendTo(document.body).get(0) as HTMLElement;
+    const model = createEditor();
+    const after = $('<button>').attr('id', 'after').appendTo(document.body).get(0) as HTMLElement;
+
+    const event = model.pressKeyInContent('ArrowDown');
+
+    expect(event.defaultPrevented).toBe(false);
+    expect(document.activeElement).not.toBe(after);
+    expect(document.activeElement).not.toBe(before);
+  });
+
+  it('does not react to other Ctrl+Shift key combinations', () => {
+    const model = createEditor();
+    $('<button>').attr('id', 'after').appendTo(document.body);
+
+    const event = model.pressKeyInContent('ArrowLeft', { ctrlKey: true, shiftKey: true });
+
+    expect(event.defaultPrevented).toBe(false);
+  });
+});

From 72e1b42f79f5cbee8525f6d0cd6274b6d48fa1de Mon Sep 17 00:00:00 2001
From: Raushen <andrey.dolzhikov@devexpress.com>
Date: Wed, 15 Jul 2026 15:58:24 +0300
Subject: [PATCH 8/9] Refactoring types

---
 .../devextreme/js/__internal/ui/html_editor/html_editor.ts   | 5 ++---
 packages/devextreme/js/__internal/ui/popover/popover.ts      | 3 ++-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/devextreme/js/__internal/ui/html_editor/html_editor.ts b/packages/devextreme/js/__internal/ui/html_editor/html_editor.ts
index 25f5da265b40..f79315cd5627 100644
--- a/packages/devextreme/js/__internal/ui/html_editor/html_editor.ts
+++ b/packages/devextreme/js/__internal/ui/html_editor/html_editor.ts
@@ -31,7 +31,6 @@ import type { Properties as FormProperties } from '@js/ui/form';
 import type { Converter, HtmlEditorFormat, Properties } from '@js/ui/html_editor';
 import { getNextFocusableElement, getPreviousFocusableElement } from '@ts/core/utils/focus';
 import type { OptionChanged } from '@ts/core/widget/types';
-import type { ValueChangedEvent } from '@ts/ui/editor/editor';
 import Editor from '@ts/ui/editor/editor';
 import ConverterController, { type BaseConverter } from '@ts/ui/html_editor/m_converterController';
 import { getQuill } from '@ts/ui/html_editor/m_quill_importer';
@@ -357,9 +356,9 @@ class HtmlEditor extends Editor<Properties> {
     eventsEngine.on(this._$htmlContainer, keyDownEvent, this._keyDownHandler.bind(this));
   }
 
-  _keyDownHandler(e: ValueChangedEvent): void {
+  _keyDownHandler(e: DxEvent<KeyboardEvent>): void {
     this._saveValueChangeEvent(e);
-    this._handleFocusEscape(e as unknown as KeyboardEvent);
+    this._handleFocusEscape(e);
   }
 
   _handleFocusEscape(e: KeyboardEvent): void {
diff --git a/packages/devextreme/js/__internal/ui/popover/popover.ts b/packages/devextreme/js/__internal/ui/popover/popover.ts
index 6697bd3b2b65..1baad14ec720 100644
--- a/packages/devextreme/js/__internal/ui/popover/popover.ts
+++ b/packages/devextreme/js/__internal/ui/popover/popover.ts
@@ -200,7 +200,8 @@ class Popover<
       const { visible } = this.option();
 
       const overlayStack = this._overlayStack();
-      const isTopOverlay = (overlayStack[overlayStack.length - 1] as unknown) === this;
+      // @ts-ignore expected: types Overlay<OverlayProperties> and this have no overlap
+      const isTopOverlay = overlayStack[overlayStack.length - 1] === this;
 
       if (normalizeKeyName(e) === ESC_KEY_NAME && visible && isTopOverlay) {
         // eslint-disable-next-line @typescript-eslint/no-floating-promises

From 1b449e988aea149cbaff5013adde8a092e1e7529 Mon Sep 17 00:00:00 2001
From: Raushen <andrey.dolzhikov@devexpress.com>
Date: Wed, 15 Jul 2026 18:16:54 +0300
Subject: [PATCH 9/9] Add navigation instruction

---
 .../js/__internal/ui/html_editor/themes/m_base.ts         | 6 +++++-
 packages/devextreme/js/localization/messages/ar.json      | 2 ++
 packages/devextreme/js/localization/messages/bg.json      | 2 ++
 packages/devextreme/js/localization/messages/ca.json      | 2 ++
 packages/devextreme/js/localization/messages/cs.json      | 2 ++
 packages/devextreme/js/localization/messages/da.json      | 2 ++
 packages/devextreme/js/localization/messages/de.json      | 2 ++
 packages/devextreme/js/localization/messages/el.json      | 2 ++
 packages/devextreme/js/localization/messages/en.json      | 2 ++
 packages/devextreme/js/localization/messages/es.json      | 2 ++
 packages/devextreme/js/localization/messages/fa.json      | 2 ++
 packages/devextreme/js/localization/messages/fi.json      | 2 ++
 packages/devextreme/js/localization/messages/fr.json      | 2 ++
 packages/devextreme/js/localization/messages/hi.json      | 2 ++
 packages/devextreme/js/localization/messages/hu.json      | 2 ++
 packages/devextreme/js/localization/messages/it.json      | 2 ++
 packages/devextreme/js/localization/messages/ja.json      | 2 ++
 packages/devextreme/js/localization/messages/ko.json      | 2 ++
 packages/devextreme/js/localization/messages/lt.json      | 2 ++
 packages/devextreme/js/localization/messages/lv.json      | 2 ++
 packages/devextreme/js/localization/messages/nb.json      | 2 ++
 packages/devextreme/js/localization/messages/nl.json      | 2 ++
 packages/devextreme/js/localization/messages/pl.json      | 2 ++
 packages/devextreme/js/localization/messages/pt-BR.json   | 2 ++
 packages/devextreme/js/localization/messages/pt-PT.json   | 2 ++
 packages/devextreme/js/localization/messages/pt.json      | 2 ++
 packages/devextreme/js/localization/messages/ro.json      | 2 ++
 packages/devextreme/js/localization/messages/ru.json      | 2 ++
 packages/devextreme/js/localization/messages/sl.json      | 2 ++
 packages/devextreme/js/localization/messages/sv.json      | 2 ++
 packages/devextreme/js/localization/messages/tr.json      | 2 ++
 packages/devextreme/js/localization/messages/uk.json      | 2 ++
 packages/devextreme/js/localization/messages/vi.json      | 2 ++
 packages/devextreme/js/localization/messages/zh-CN.json   | 2 ++
 packages/devextreme/js/localization/messages/zh-Hans.json | 2 ++
 packages/devextreme/js/localization/messages/zh-tw.json   | 2 ++
 packages/devextreme/js/localization/messages/zh.json      | 2 ++
 .../htmlEditorParts/markup.tests.js                       | 8 +++++++-
 38 files changed, 84 insertions(+), 2 deletions(-)

diff --git a/packages/devextreme/js/__internal/ui/html_editor/themes/m_base.ts b/packages/devextreme/js/__internal/ui/html_editor/themes/m_base.ts
index 4413935b549a..955fc90513c1 100644
--- a/packages/devextreme/js/__internal/ui/html_editor/themes/m_base.ts
+++ b/packages/devextreme/js/__internal/ui/html_editor/themes/m_base.ts
@@ -1,3 +1,4 @@
+import localizationMessage from '@js/common/core/localization/message';
 import Quill from 'devextreme-quill';
 
 // eslint-disable-next-line import/no-mutable-exports
@@ -11,7 +12,10 @@ if (Quill) {
       super(quill, options);
       this.quill.root.classList.add('dx-htmleditor-content');
       this.quill.root.setAttribute('role', 'textbox');
-      this.quill.root.setAttribute('aria-label', 'Editor content');
+      this.quill.root.setAttribute('aria-label', [
+        localizationMessage.format('dxHtmlEditor-editorAriaLabel'),
+        localizationMessage.format('dxHtmlEditor-ariaEscapeInstruction'),
+      ].join('. '));
       this.quill.root.setAttribute('aria-multiline', 'true');
     }
   };
diff --git a/packages/devextreme/js/localization/messages/ar.json b/packages/devextreme/js/localization/messages/ar.json
index 0c0bbb248d7a..8f49213bfffa 100644
--- a/packages/devextreme/js/localization/messages/ar.json
+++ b/packages/devextreme/js/localization/messages/ar.json
@@ -491,6 +491,8 @@
         "dxFilterBuilder-filterAriaItemOperation": "عملية العنصر",
         "dxFilterBuilder-filterAriaItemValue": "قيمة العنصر",
 
+        "dxHtmlEditor-editorAriaLabel": "Editor content",
+        "dxHtmlEditor-ariaEscapeInstruction": "Press Ctrl + Shift + Up arrow or Ctrl + Shift + Down arrow to move focus out of the editing area",
         "dxHtmlEditor-dialogColorCaption": "تغيير لون الخط",
         "dxHtmlEditor-dialogBackgroundCaption": "تغيير لون الخلفية",
         "dxHtmlEditor-dialogLinkCaption": "إضافة ارتباط",
diff --git a/packages/devextreme/js/localization/messages/bg.json b/packages/devextreme/js/localization/messages/bg.json
index 2f366d172a26..5d52f96c39e2 100644
--- a/packages/devextreme/js/localization/messages/bg.json
+++ b/packages/devextreme/js/localization/messages/bg.json
@@ -491,6 +491,8 @@
         "dxFilterBuilder-filterAriaItemOperation": "Операция на елемент",
         "dxFilterBuilder-filterAriaItemValue": "Стойност на елемент",
 
+        "dxHtmlEditor-editorAriaLabel": "Editor content",
+        "dxHtmlEditor-ariaEscapeInstruction": "Press Ctrl + Shift + Up arrow or Ctrl + Shift + Down arrow to move focus out of the editing area",
         "dxHtmlEditor-dialogColorCaption": "Промяна на цвета на шрифта",
         "dxHtmlEditor-dialogBackgroundCaption": "Промяна на фоновия цвят",
         "dxHtmlEditor-dialogLinkCaption": "Добавяне на връзка",
diff --git a/packages/devextreme/js/localization/messages/ca.json b/packages/devextreme/js/localization/messages/ca.json
index e6048fce76ea..a70bc21033c1 100644
--- a/packages/devextreme/js/localization/messages/ca.json
+++ b/packages/devextreme/js/localization/messages/ca.json
@@ -491,6 +491,8 @@
         "dxFilterBuilder-filterAriaItemOperation": "Operació d'element",
         "dxFilterBuilder-filterAriaItemValue": "Valor d'element",
 
+        "dxHtmlEditor-editorAriaLabel": "Editor content",
+        "dxHtmlEditor-ariaEscapeInstruction": "Press Ctrl + Shift + Up arrow or Ctrl + Shift + Down arrow to move focus out of the editing area",
         "dxHtmlEditor-dialogColorCaption": "Canvia el color de la lletra",
         "dxHtmlEditor-dialogBackgroundCaption": "Canvieu el color de fons",
         "dxHtmlEditor-dialogLinkCaption": "L’enllaç afegit",
diff --git a/packages/devextreme/js/localization/messages/cs.json b/packages/devextreme/js/localization/messages/cs.json
index 8b0101b4a5c4..61503d321ee9 100644
--- a/packages/devextreme/js/localization/messages/cs.json
+++ b/packages/devextreme/js/localization/messages/cs.json
@@ -491,6 +491,8 @@
         "dxFilterBuilder-filterAriaItemOperation": "Operace položky",
         "dxFilterBuilder-filterAriaItemValue": "Hodnota položky",
 
+        "dxHtmlEditor-editorAriaLabel": "Editor content",
+        "dxHtmlEditor-ariaEscapeInstruction": "Press Ctrl + Shift + Up arrow or Ctrl + Shift + Down arrow to move focus out of the editing area",
         "dxHtmlEditor-dialogColorCaption": "Změna barvy písma",
         "dxHtmlEditor-dialogBackgroundCaption": "Změna barvy pozadí",
         "dxHtmlEditor-dialogLinkCaption": "Vložit odkaz",
diff --git a/packages/devextreme/js/localization/messages/da.json b/packages/devextreme/js/localization/messages/da.json
index d7a4c2742cca..7d79e513cad5 100644
--- a/packages/devextreme/js/localization/messages/da.json
+++ b/packages/devextreme/js/localization/messages/da.json
@@ -491,6 +491,8 @@
         "dxFilterBuilder-filterAriaItemOperation": "Elementoperation",
         "dxFilterBuilder-filterAriaItemValue": "Elementværdi",
 
+        "dxHtmlEditor-editorAriaLabel": "Editor content",
+        "dxHtmlEditor-ariaEscapeInstruction": "Press Ctrl + Shift + Up arrow or Ctrl + Shift + Down arrow to move focus out of the editing area",
         "dxHtmlEditor-dialogColorCaption": "Skift skriftfarve",
         "dxHtmlEditor-dialogBackgroundCaption": "Skift baggrundsfarve",
         "dxHtmlEditor-dialogLinkCaption": "Tilføj link",
diff --git a/packages/devextreme/js/localization/messages/de.json b/packages/devextreme/js/localization/messages/de.json
index d14b0b30d688..154eae6fdda1 100644
--- a/packages/devextreme/js/localization/messages/de.json
+++ b/packages/devextreme/js/localization/messages/de.json
@@ -491,6 +491,8 @@
         "dxFilterBuilder-filterAriaItemOperation": "Item Operation",
         "dxFilterBuilder-filterAriaItemValue": "Elementwert",
 
+        "dxHtmlEditor-editorAriaLabel": "Editor content",
+        "dxHtmlEditor-ariaEscapeInstruction": "Press Ctrl + Shift + Up arrow or Ctrl + Shift + Down arrow to move focus out of the editing area",
         "dxHtmlEditor-dialogColorCaption": "Schriftfarbe ändern",
         "dxHtmlEditor-dialogBackgroundCaption": "Hintergrundfarbe ändern",
         "dxHtmlEditor-dialogLinkCaption": "Link hinzufügen",
diff --git a/packages/devextreme/js/localization/messages/el.json b/packages/devextreme/js/localization/messages/el.json
index 2ace941c689c..69442e1aa03a 100644
--- a/packages/devextreme/js/localization/messages/el.json
+++ b/packages/devextreme/js/localization/messages/el.json
@@ -491,6 +491,8 @@
         "dxFilterBuilder-filterAriaItemOperation": "Τελεστής στοιχείου",
         "dxFilterBuilder-filterAriaItemValue": "Τιμή στοιχείου",
 
+        "dxHtmlEditor-editorAriaLabel": "Editor content",
+        "dxHtmlEditor-ariaEscapeInstruction": "Press Ctrl + Shift + Up arrow or Ctrl + Shift + Down arrow to move focus out of the editing area",
         "dxHtmlEditor-dialogColorCaption": "Αλλαγή χρώματος γραμματοσειράς",
         "dxHtmlEditor-dialogBackgroundCaption": "Αλλαγή χρώματος φόντου",
         "dxHtmlEditor-dialogLinkCaption": "Προσθήκη συνδέσμου",
diff --git a/packages/devextreme/js/localization/messages/en.json b/packages/devextreme/js/localization/messages/en.json
index f7e629931ce9..011d0b20ae00 100644
--- a/packages/devextreme/js/localization/messages/en.json
+++ b/packages/devextreme/js/localization/messages/en.json
@@ -491,6 +491,8 @@
         "dxFilterBuilder-filterAriaItemOperation": "Item operation",
         "dxFilterBuilder-filterAriaItemValue": "Item value",
 
+        "dxHtmlEditor-editorAriaLabel": "Editor content",
+        "dxHtmlEditor-ariaEscapeInstruction": "Press Ctrl + Shift + Up arrow or Ctrl + Shift + Down arrow to move focus out of the editing area",
         "dxHtmlEditor-dialogColorCaption": "Change Font Color",
         "dxHtmlEditor-dialogBackgroundCaption": "Change Background Color",
         "dxHtmlEditor-dialogLinkCaption": "Add Link",
diff --git a/packages/devextreme/js/localization/messages/es.json b/packages/devextreme/js/localization/messages/es.json
index 9dc3543fe8fc..fc51ad07193a 100644
--- a/packages/devextreme/js/localization/messages/es.json
+++ b/packages/devextreme/js/localization/messages/es.json
@@ -491,6 +491,8 @@
         "dxFilterBuilder-filterAriaItemOperation": "Operación del elemento",
         "dxFilterBuilder-filterAriaItemValue": "Valor del elemento",
 
+        "dxHtmlEditor-editorAriaLabel": "Editor content",
+        "dxHtmlEditor-ariaEscapeInstruction": "Press Ctrl + Shift + Up arrow or Ctrl + Shift + Down arrow to move focus out of the editing area",
         "dxHtmlEditor-dialogColorCaption": "Cambiar el color de la fuente",
         "dxHtmlEditor-dialogBackgroundCaption": "Cambiar el color de fondo",
         "dxHtmlEditor-dialogLinkCaption": "Añadir enlace",
diff --git a/packages/devextreme/js/localization/messages/fa.json b/packages/devextreme/js/localization/messages/fa.json
index 3191cfcc8315..26a8f250163b 100644
--- a/packages/devextreme/js/localization/messages/fa.json
+++ b/packages/devextreme/js/localization/messages/fa.json
@@ -491,6 +491,8 @@
         "dxFilterBuilder-filterAriaItemOperation": "عملیات مورد",
         "dxFilterBuilder-filterAriaItemValue": "مقدار مورد",
 
+        "dxHtmlEditor-editorAriaLabel": "Editor content",
+        "dxHtmlEditor-ariaEscapeInstruction": "Press Ctrl + Shift + Up arrow or Ctrl + Shift + Down arrow to move focus out of the editing area",
         "dxHtmlEditor-dialogColorCaption": "تغییر رنگ قلم",
         "dxHtmlEditor-dialogBackgroundCaption": "تغییر رنگ پس زمینه",
         "dxHtmlEditor-dialogLinkCaption": "افزودن پیوند",
diff --git a/packages/devextreme/js/localization/messages/fi.json b/packages/devextreme/js/localization/messages/fi.json
index 8e90fb99eebf..3ee166c4a290 100644
--- a/packages/devextreme/js/localization/messages/fi.json
+++ b/packages/devextreme/js/localization/messages/fi.json
@@ -491,6 +491,8 @@
         "dxFilterBuilder-filterAriaItemOperation": "Kohteen toiminto",
         "dxFilterBuilder-filterAriaItemValue": "Kohteen arvo",
 
+        "dxHtmlEditor-editorAriaLabel": "Editor content",
+        "dxHtmlEditor-ariaEscapeInstruction": "Press Ctrl + Shift + Up arrow or Ctrl + Shift + Down arrow to move focus out of the editing area",
         "dxHtmlEditor-dialogColorCaption": "Muuta fontin väriä",
         "dxHtmlEditor-dialogBackgroundCaption": "Muuta taustaväriä",
         "dxHtmlEditor-dialogLinkCaption": "Lisää linkki",
diff --git a/packages/devextreme/js/localization/messages/fr.json b/packages/devextreme/js/localization/messages/fr.json
index fd4c092b2250..1d9e0904a484 100644
--- a/packages/devextreme/js/localization/messages/fr.json
+++ b/packages/devextreme/js/localization/messages/fr.json
@@ -491,6 +491,8 @@
         "dxFilterBuilder-filterAriaItemOperation": "Opération",
         "dxFilterBuilder-filterAriaItemValue": "Valeur",
 
+        "dxHtmlEditor-editorAriaLabel": "Editor content",
+        "dxHtmlEditor-ariaEscapeInstruction": "Press Ctrl + Shift + Up arrow or Ctrl + Shift + Down arrow to move focus out of the editing area",
         "dxHtmlEditor-dialogColorCaption": "Changer la couleur du texte",
         "dxHtmlEditor-dialogBackgroundCaption": "Changer la couleur d'arrière-plan",
         "dxHtmlEditor-dialogLinkCaption": "Ajouter un hyperlien",
diff --git a/packages/devextreme/js/localization/messages/hi.json b/packages/devextreme/js/localization/messages/hi.json
index 1c1f79392548..2094f1055023 100644
--- a/packages/devextreme/js/localization/messages/hi.json
+++ b/packages/devextreme/js/localization/messages/hi.json
@@ -491,6 +491,8 @@
         "dxFilterBuilder-filterAriaItemOperation": "आइटम संचालन",
         "dxFilterBuilder-filterAriaItemValue": "आइटम मान",
 
+        "dxHtmlEditor-editorAriaLabel": "Editor content",
+        "dxHtmlEditor-ariaEscapeInstruction": "Press Ctrl + Shift + Up arrow or Ctrl + Shift + Down arrow to move focus out of the editing area",
         "dxHtmlEditor-dialogColorCaption": "फ़ॉन्ट का रंग बदलें",
         "dxHtmlEditor-dialogBackgroundCaption": "पृष्ठभूमि का रंग बदलें",
         "dxHtmlEditor-dialogLinkCaption": "लिंक जोड़ें",
diff --git a/packages/devextreme/js/localization/messages/hu.json b/packages/devextreme/js/localization/messages/hu.json
index f94c9113dc64..bc71d9af6e7a 100644
--- a/packages/devextreme/js/localization/messages/hu.json
+++ b/packages/devextreme/js/localization/messages/hu.json
@@ -491,6 +491,8 @@
         "dxFilterBuilder-filterAriaItemOperation": "Elem művelete",
         "dxFilterBuilder-filterAriaItemValue": "Elem értéke",
 
+        "dxHtmlEditor-editorAriaLabel": "Editor content",
+        "dxHtmlEditor-ariaEscapeInstruction": "Press Ctrl + Shift + Up arrow or Ctrl + Shift + Down arrow to move focus out of the editing area",
         "dxHtmlEditor-dialogColorCaption": "Betűszín választás",
         "dxHtmlEditor-dialogBackgroundCaption": "Háttérszín választás",
         "dxHtmlEditor-dialogLinkCaption": "Link hozzáadása",
diff --git a/packages/devextreme/js/localization/messages/it.json b/packages/devextreme/js/localization/messages/it.json
index 9318c530353e..672b3490585b 100644
--- a/packages/devextreme/js/localization/messages/it.json
+++ b/packages/devextreme/js/localization/messages/it.json
@@ -491,6 +491,8 @@
         "dxFilterBuilder-filterAriaItemOperation": "Operazione elemento",
         "dxFilterBuilder-filterAriaItemValue": "Valore elemento",
 
+        "dxHtmlEditor-editorAriaLabel": "Editor content",
+        "dxHtmlEditor-ariaEscapeInstruction": "Press Ctrl + Shift + Up arrow or Ctrl + Shift + Down arrow to move focus out of the editing area",
         "dxHtmlEditor-dialogColorCaption": "Cambia il colore del testo",
         "dxHtmlEditor-dialogBackgroundCaption": "Cambia il colore di sfondo",
         "dxHtmlEditor-dialogLinkCaption": "Aggiungi Link",
diff --git a/packages/devextreme/js/localization/messages/ja.json b/packages/devextreme/js/localization/messages/ja.json
index 80b25947b215..80674b65f36c 100644
--- a/packages/devextreme/js/localization/messages/ja.json
+++ b/packages/devextreme/js/localization/messages/ja.json
@@ -491,6 +491,8 @@
         "dxFilterBuilder-filterAriaItemOperation": "アイテム操作",
         "dxFilterBuilder-filterAriaItemValue": "アイテムの値",
 
+        "dxHtmlEditor-editorAriaLabel": "Editor content",
+        "dxHtmlEditor-ariaEscapeInstruction": "Press Ctrl + Shift + Up arrow or Ctrl + Shift + Down arrow to move focus out of the editing area",
         "dxHtmlEditor-dialogColorCaption": "フォントの色を変更",
         "dxHtmlEditor-dialogBackgroundCaption": "背景色を変更",
         "dxHtmlEditor-dialogLinkCaption": "リンクの追加",
diff --git a/packages/devextreme/js/localization/messages/ko.json b/packages/devextreme/js/localization/messages/ko.json
index cf9d06164045..f60317a15a2f 100644
--- a/packages/devextreme/js/localization/messages/ko.json
+++ b/packages/devextreme/js/localization/messages/ko.json
@@ -491,6 +491,8 @@
         "dxFilterBuilder-filterAriaItemOperation": "항목 연산",
         "dxFilterBuilder-filterAriaItemValue": "항목 값",
 
+        "dxHtmlEditor-editorAriaLabel": "Editor content",
+        "dxHtmlEditor-ariaEscapeInstruction": "Press Ctrl + Shift + Up arrow or Ctrl + Shift + Down arrow to move focus out of the editing area",
         "dxHtmlEditor-dialogColorCaption": "글꼴 색 변경",
         "dxHtmlEditor-dialogBackgroundCaption": "배경색 변경",
         "dxHtmlEditor-dialogLinkCaption": "링크 추가",
diff --git a/packages/devextreme/js/localization/messages/lt.json b/packages/devextreme/js/localization/messages/lt.json
index 3c8e76cb9281..5b168ec6ea74 100644
--- a/packages/devextreme/js/localization/messages/lt.json
+++ b/packages/devextreme/js/localization/messages/lt.json
@@ -491,6 +491,8 @@
         "dxFilterBuilder-filterAriaItemOperation": "Elemento operacija",
         "dxFilterBuilder-filterAriaItemValue": "Elemento reikšmė",
 
+        "dxHtmlEditor-editorAriaLabel": "Editor content",
+        "dxHtmlEditor-ariaEscapeInstruction": "Press Ctrl + Shift + Up arrow or Ctrl + Shift + Down arrow to move focus out of the editing area",
         "dxHtmlEditor-dialogColorCaption": "Pakeisti šrifto spalvą",
         "dxHtmlEditor-dialogBackgroundCaption": "Pakeisti fono spalvą",
         "dxHtmlEditor-dialogLinkCaption": "Pridėti nuorodą",
diff --git a/packages/devextreme/js/localization/messages/lv.json b/packages/devextreme/js/localization/messages/lv.json
index 0d440c827f0d..393420c7d27c 100644
--- a/packages/devextreme/js/localization/messages/lv.json
+++ b/packages/devextreme/js/localization/messages/lv.json
@@ -491,6 +491,8 @@
         "dxFilterBuilder-filterAriaItemOperation": "Elementa operācija",
         "dxFilterBuilder-filterAriaItemValue": "Elementa vērtība",
 
+        "dxHtmlEditor-editorAriaLabel": "Editor content",
+        "dxHtmlEditor-ariaEscapeInstruction": "Press Ctrl + Shift + Up arrow or Ctrl + Shift + Down arrow to move focus out of the editing area",
         "dxHtmlEditor-dialogColorCaption": "Nomainīt fonta krāsu",
         "dxHtmlEditor-dialogBackgroundCaption": "Nomainīt fona krāsu",
         "dxHtmlEditor-dialogLinkCaption": "Pievienot saiti",
diff --git a/packages/devextreme/js/localization/messages/nb.json b/packages/devextreme/js/localization/messages/nb.json
index 0c547e60b574..5578851fbdd3 100644
--- a/packages/devextreme/js/localization/messages/nb.json
+++ b/packages/devextreme/js/localization/messages/nb.json
@@ -491,6 +491,8 @@
         "dxFilterBuilder-filterAriaItemOperation": "Elementoperasjon",
         "dxFilterBuilder-filterAriaItemValue": "Elementverdi",
 
+        "dxHtmlEditor-editorAriaLabel": "Editor content",
+        "dxHtmlEditor-ariaEscapeInstruction": "Press Ctrl + Shift + Up arrow or Ctrl + Shift + Down arrow to move focus out of the editing area",
         "dxHtmlEditor-dialogColorCaption": "Skift fontfarge",
         "dxHtmlEditor-dialogBackgroundCaption": "Skift bakgrunnsfarge",
         "dxHtmlEditor-dialogLinkCaption": "Legg til link",
diff --git a/packages/devextreme/js/localization/messages/nl.json b/packages/devextreme/js/localization/messages/nl.json
index 4a7387378b25..235a224df538 100644
--- a/packages/devextreme/js/localization/messages/nl.json
+++ b/packages/devextreme/js/localization/messages/nl.json
@@ -491,6 +491,8 @@
         "dxFilterBuilder-filterAriaItemOperation": "Itembewerking",
         "dxFilterBuilder-filterAriaItemValue": "Itemwaarde",
 
+        "dxHtmlEditor-editorAriaLabel": "Editor content",
+        "dxHtmlEditor-ariaEscapeInstruction": "Press Ctrl + Shift + Up arrow or Ctrl + Shift + Down arrow to move focus out of the editing area",
         "dxHtmlEditor-dialogColorCaption": "Tekstkleur wijzigen",
         "dxHtmlEditor-dialogBackgroundCaption": "Achtergrondkleur wijzigen",
         "dxHtmlEditor-dialogLinkCaption": "Link toevoegen",
diff --git a/packages/devextreme/js/localization/messages/pl.json b/packages/devextreme/js/localization/messages/pl.json
index 91610788ae6b..a46682284c8b 100644
--- a/packages/devextreme/js/localization/messages/pl.json
+++ b/packages/devextreme/js/localization/messages/pl.json
@@ -491,6 +491,8 @@
         "dxFilterBuilder-filterAriaItemOperation": "Operacja elementu",
         "dxFilterBuilder-filterAriaItemValue": "Wartość elementu",
 
+        "dxHtmlEditor-editorAriaLabel": "Editor content",
+        "dxHtmlEditor-ariaEscapeInstruction": "Press Ctrl + Shift + Up arrow or Ctrl + Shift + Down arrow to move focus out of the editing area",
         "dxHtmlEditor-dialogColorCaption": "Zmień kolor czcionki",
         "dxHtmlEditor-dialogBackgroundCaption": "Zmień kolor tła",
         "dxHtmlEditor-dialogLinkCaption": "Dodaj link",
diff --git a/packages/devextreme/js/localization/messages/pt-BR.json b/packages/devextreme/js/localization/messages/pt-BR.json
index df9a1caec94b..583583aa6bd0 100644
--- a/packages/devextreme/js/localization/messages/pt-BR.json
+++ b/packages/devextreme/js/localization/messages/pt-BR.json
@@ -491,6 +491,8 @@
         "dxFilterBuilder-filterAriaItemOperation": "Operação do item",
         "dxFilterBuilder-filterAriaItemValue": "Valor do item",
 
+        "dxHtmlEditor-editorAriaLabel": "Editor content",
+        "dxHtmlEditor-ariaEscapeInstruction": "Press Ctrl + Shift + Up arrow or Ctrl + Shift + Down arrow to move focus out of the editing area",
         "dxHtmlEditor-dialogColorCaption": "Alterar cor da fonte",
         "dxHtmlEditor-dialogBackgroundCaption": "Alterar cor de plano de fundo",
         "dxHtmlEditor-dialogLinkCaption": "Adicionar link",
diff --git a/packages/devextreme/js/localization/messages/pt-PT.json b/packages/devextreme/js/localization/messages/pt-PT.json
index 8ede950af7c7..c0d40ff340e3 100644
--- a/packages/devextreme/js/localization/messages/pt-PT.json
+++ b/packages/devextreme/js/localization/messages/pt-PT.json
@@ -491,6 +491,8 @@
         "dxFilterBuilder-filterAriaItemOperation": "Operação do item",
         "dxFilterBuilder-filterAriaItemValue": "Valor do item",
 
+        "dxHtmlEditor-editorAriaLabel": "Editor content",
+        "dxHtmlEditor-ariaEscapeInstruction": "Press Ctrl + Shift + Up arrow or Ctrl + Shift + Down arrow to move focus out of the editing area",
         "dxHtmlEditor-dialogColorCaption": "Alterar cor da fonte",
         "dxHtmlEditor-dialogBackgroundCaption": "Alterar cor de plano de fundo",
         "dxHtmlEditor-dialogLinkCaption": "Adicionar link",
diff --git a/packages/devextreme/js/localization/messages/pt.json b/packages/devextreme/js/localization/messages/pt.json
index 5637d420d6f3..d786078fe649 100644
--- a/packages/devextreme/js/localization/messages/pt.json
+++ b/packages/devextreme/js/localization/messages/pt.json
@@ -491,6 +491,8 @@
         "dxFilterBuilder-filterAriaItemOperation": "Operação do item",
         "dxFilterBuilder-filterAriaItemValue": "Valor do item",
 
+        "dxHtmlEditor-editorAriaLabel": "Editor content",
+        "dxHtmlEditor-ariaEscapeInstruction": "Press Ctrl + Shift + Up arrow or Ctrl + Shift + Down arrow to move focus out of the editing area",
         "dxHtmlEditor-dialogColorCaption": "Alterar cor da fonte",
         "dxHtmlEditor-dialogBackgroundCaption": "Alterar cor de plano de fundo",
         "dxHtmlEditor-dialogLinkCaption": "Adicionar link",
diff --git a/packages/devextreme/js/localization/messages/ro.json b/packages/devextreme/js/localization/messages/ro.json
index 2699cfbb2199..07deff4090b4 100644
--- a/packages/devextreme/js/localization/messages/ro.json
+++ b/packages/devextreme/js/localization/messages/ro.json
@@ -491,6 +491,8 @@
         "dxFilterBuilder-filterAriaItemOperation": "Operația elementului",
         "dxFilterBuilder-filterAriaItemValue": "Valoarea elementului",
 
+        "dxHtmlEditor-editorAriaLabel": "Editor content",
+        "dxHtmlEditor-ariaEscapeInstruction": "Press Ctrl + Shift + Up arrow or Ctrl + Shift + Down arrow to move focus out of the editing area",
         "dxHtmlEditor-dialogColorCaption": "Schimbă culoarea fontului",
         "dxHtmlEditor-dialogBackgroundCaption": "Schimbă culoarea de fundal",
         "dxHtmlEditor-dialogLinkCaption": "Adaugă Link",
diff --git a/packages/devextreme/js/localization/messages/ru.json b/packages/devextreme/js/localization/messages/ru.json
index d8fc74d72b0a..6ad3ae834ba5 100644
--- a/packages/devextreme/js/localization/messages/ru.json
+++ b/packages/devextreme/js/localization/messages/ru.json
@@ -491,6 +491,8 @@
         "dxFilterBuilder-filterAriaItemOperation": "Операция элемента",
         "dxFilterBuilder-filterAriaItemValue": "Значение элемента",
 
+        "dxHtmlEditor-editorAriaLabel": "Editor content",
+        "dxHtmlEditor-ariaEscapeInstruction": "Press Ctrl + Shift + Up arrow or Ctrl + Shift + Down arrow to move focus out of the editing area",
         "dxHtmlEditor-dialogColorCaption": "Изменить цвет текста",
         "dxHtmlEditor-dialogBackgroundCaption": "Изменить цвет фона",
         "dxHtmlEditor-dialogLinkCaption": "Добавить ссылку",
diff --git a/packages/devextreme/js/localization/messages/sl.json b/packages/devextreme/js/localization/messages/sl.json
index 334073c40a76..57055f986b75 100644
--- a/packages/devextreme/js/localization/messages/sl.json
+++ b/packages/devextreme/js/localization/messages/sl.json
@@ -491,6 +491,8 @@
         "dxFilterBuilder-filterAriaItemOperation": "Operacija elementa",
         "dxFilterBuilder-filterAriaItemValue": "Vrednost elementa",
 
+        "dxHtmlEditor-editorAriaLabel": "Editor content",
+        "dxHtmlEditor-ariaEscapeInstruction": "Press Ctrl + Shift + Up arrow or Ctrl + Shift + Down arrow to move focus out of the editing area",
         "dxHtmlEditor-dialogColorCaption": "Zamenjaj barvo pisave",
         "dxHtmlEditor-dialogBackgroundCaption": "Zamenjaj barvo ozadja",
         "dxHtmlEditor-dialogLinkCaption": "Dodaj povezavo",
diff --git a/packages/devextreme/js/localization/messages/sv.json b/packages/devextreme/js/localization/messages/sv.json
index 2045b9878b15..6458a82c823f 100644
--- a/packages/devextreme/js/localization/messages/sv.json
+++ b/packages/devextreme/js/localization/messages/sv.json
@@ -491,6 +491,8 @@
         "dxFilterBuilder-filterAriaItemOperation": "Åtgärd",
         "dxFilterBuilder-filterAriaItemValue": "Värde",
 
+        "dxHtmlEditor-editorAriaLabel": "Editor content",
+        "dxHtmlEditor-ariaEscapeInstruction": "Press Ctrl + Shift + Up arrow or Ctrl + Shift + Down arrow to move focus out of the editing area",
         "dxHtmlEditor-dialogColorCaption": "Ändra textfärg",
         "dxHtmlEditor-dialogBackgroundCaption": "Ändra bakgrundsfärg",
         "dxHtmlEditor-dialogLinkCaption": "Lägg till länk",
diff --git a/packages/devextreme/js/localization/messages/tr.json b/packages/devextreme/js/localization/messages/tr.json
index bcb5f6d3f6b2..7c2aa1199662 100644
--- a/packages/devextreme/js/localization/messages/tr.json
+++ b/packages/devextreme/js/localization/messages/tr.json
@@ -491,6 +491,8 @@
         "dxFilterBuilder-filterAriaItemOperation": "Öğe işlemi",
         "dxFilterBuilder-filterAriaItemValue": "Öğe değeri",
 
+        "dxHtmlEditor-editorAriaLabel": "Editor content",
+        "dxHtmlEditor-ariaEscapeInstruction": "Press Ctrl + Shift + Up arrow or Ctrl + Shift + Down arrow to move focus out of the editing area",
         "dxHtmlEditor-dialogColorCaption": "Yazı Tipi Rengini Değiştir",
         "dxHtmlEditor-dialogBackgroundCaption": "Arka Plan Rengini Değiştir",
         "dxHtmlEditor-dialogLinkCaption": "Link Ekle",
diff --git a/packages/devextreme/js/localization/messages/uk.json b/packages/devextreme/js/localization/messages/uk.json
index dc1d48262688..0cd4156c4d04 100644
--- a/packages/devextreme/js/localization/messages/uk.json
+++ b/packages/devextreme/js/localization/messages/uk.json
@@ -491,6 +491,8 @@
         "dxFilterBuilder-filterAriaItemOperation": "Операція елемента",
         "dxFilterBuilder-filterAriaItemValue": "Значення елемента",
 
+        "dxHtmlEditor-editorAriaLabel": "Editor content",
+        "dxHtmlEditor-ariaEscapeInstruction": "Press Ctrl + Shift + Up arrow or Ctrl + Shift + Down arrow to move focus out of the editing area",
         "dxHtmlEditor-dialogColorCaption": "Змінити колір тексту",
         "dxHtmlEditor-dialogBackgroundCaption": "Змінити колір фону",
         "dxHtmlEditor-dialogLinkCaption": "Додати посилання",
diff --git a/packages/devextreme/js/localization/messages/vi.json b/packages/devextreme/js/localization/messages/vi.json
index 82168e2b3296..62bf568d2806 100644
--- a/packages/devextreme/js/localization/messages/vi.json
+++ b/packages/devextreme/js/localization/messages/vi.json
@@ -491,6 +491,8 @@
         "dxFilterBuilder-filterAriaItemOperation": "Thao tác mục",
         "dxFilterBuilder-filterAriaItemValue": "Giá trị mục",
 
+        "dxHtmlEditor-editorAriaLabel": "Editor content",
+        "dxHtmlEditor-ariaEscapeInstruction": "Press Ctrl + Shift + Up arrow or Ctrl + Shift + Down arrow to move focus out of the editing area",
         "dxHtmlEditor-dialogColorCaption": "Đổi màu phông chữ",
         "dxHtmlEditor-dialogBackgroundCaption": "Đổi màu nền",
         "dxHtmlEditor-dialogLinkCaption": "Thêm Liên kết",
diff --git a/packages/devextreme/js/localization/messages/zh-CN.json b/packages/devextreme/js/localization/messages/zh-CN.json
index a60231563edf..4a85feebd51a 100644
--- a/packages/devextreme/js/localization/messages/zh-CN.json
+++ b/packages/devextreme/js/localization/messages/zh-CN.json
@@ -491,6 +491,8 @@
         "dxFilterBuilder-filterAriaItemOperation": "项目操作",
         "dxFilterBuilder-filterAriaItemValue": "项目值",
 
+        "dxHtmlEditor-editorAriaLabel": "Editor content",
+        "dxHtmlEditor-ariaEscapeInstruction": "Press Ctrl + Shift + Up arrow or Ctrl + Shift + Down arrow to move focus out of the editing area",
         "dxHtmlEditor-dialogColorCaption": "更改字体颜色",
         "dxHtmlEditor-dialogBackgroundCaption": "更改背景颜色",
         "dxHtmlEditor-dialogLinkCaption": "添加链接",
diff --git a/packages/devextreme/js/localization/messages/zh-Hans.json b/packages/devextreme/js/localization/messages/zh-Hans.json
index 6050b2769248..ebfdf56378a4 100644
--- a/packages/devextreme/js/localization/messages/zh-Hans.json
+++ b/packages/devextreme/js/localization/messages/zh-Hans.json
@@ -491,6 +491,8 @@
         "dxFilterBuilder-filterAriaItemOperation": "项目操作",
         "dxFilterBuilder-filterAriaItemValue": "项目值",
 
+        "dxHtmlEditor-editorAriaLabel": "Editor content",
+        "dxHtmlEditor-ariaEscapeInstruction": "Press Ctrl + Shift + Up arrow or Ctrl + Shift + Down arrow to move focus out of the editing area",
         "dxHtmlEditor-dialogColorCaption": "更改字体颜色",
         "dxHtmlEditor-dialogBackgroundCaption": "更改背景颜色",
         "dxHtmlEditor-dialogLinkCaption": "添加链接",
diff --git a/packages/devextreme/js/localization/messages/zh-tw.json b/packages/devextreme/js/localization/messages/zh-tw.json
index 2ffba427171f..2c4097cc8d54 100644
--- a/packages/devextreme/js/localization/messages/zh-tw.json
+++ b/packages/devextreme/js/localization/messages/zh-tw.json
@@ -491,6 +491,8 @@
         "dxFilterBuilder-filterAriaItemOperation": "項目操作",
         "dxFilterBuilder-filterAriaItemValue": "項目值",
 
+        "dxHtmlEditor-editorAriaLabel": "Editor content",
+        "dxHtmlEditor-ariaEscapeInstruction": "Press Ctrl + Shift + Up arrow or Ctrl + Shift + Down arrow to move focus out of the editing area",
         "dxHtmlEditor-dialogColorCaption": "更改字體顏色",
         "dxHtmlEditor-dialogBackgroundCaption": "更改背景顏色",
         "dxHtmlEditor-dialogLinkCaption": "新增連結",
diff --git a/packages/devextreme/js/localization/messages/zh.json b/packages/devextreme/js/localization/messages/zh.json
index 6885efa6b29c..d37186486b0a 100644
--- a/packages/devextreme/js/localization/messages/zh.json
+++ b/packages/devextreme/js/localization/messages/zh.json
@@ -491,6 +491,8 @@
         "dxFilterBuilder-filterAriaItemOperation": "项目操作",
         "dxFilterBuilder-filterAriaItemValue": "项目值",
 
+        "dxHtmlEditor-editorAriaLabel": "Editor content",
+        "dxHtmlEditor-ariaEscapeInstruction": "Press Ctrl + Shift + Up arrow or Ctrl + Shift + Down arrow to move focus out of the editing area",
         "dxHtmlEditor-dialogColorCaption": "更改字体颜色",
         "dxHtmlEditor-dialogBackgroundCaption": "更改背景颜色",
         "dxHtmlEditor-dialogLinkCaption": "添加链接",
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/markup.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/markup.tests.js
index 615902317a72..23cff7d87822 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/markup.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/markup.tests.js
@@ -2,6 +2,7 @@ import $ from 'jquery';
 
 import 'ui/html_editor';
 import config from 'core/config';
+import messageLocalization from 'localization/message';
 
 const HTML_EDITOR_CLASS = 'dx-htmleditor';
 const QUILL_CONTAINER_CLASS = 'dx-quill-container';
@@ -154,7 +155,12 @@ export default function() {
             assert.expect(isQuillRendered ? 1 : 0);
 
             if(isQuillRendered) {
-                assert.strictEqual($editorContent.attr('aria-label'), 'Editor content');
+                const expectedAriaLabel = [
+                    messageLocalization.format('dxHtmlEditor-editorAriaLabel'),
+                    messageLocalization.format('dxHtmlEditor-ariaEscapeInstruction'),
+                ].join('. ');
+
+                assert.strictEqual($editorContent.attr('aria-label'), expectedAriaLabel);
             }
         });