From bfcb041770d9763d60ed0b1f8c9563f3d70f36b0 Mon Sep 17 00:00:00 2001
From: Nikki Gonzales
 <38495263+nikkithelegendarypokemonster@users.noreply.github.com>
Date: Fri, 6 Sep 2024 12:46:39 +0800
Subject: [PATCH] HtmlEditor: add aria-readonly attribute if readOnly property
 is initially set to true (T1248155) (#27990)

---
 .../ui/html_editor/m_html_editor.ts           |  1 +
 .../htmlEditorParts/markup.tests.js           | 38 +++++++++++++++++++
 2 files changed, 39 insertions(+)

diff --git a/packages/devextreme/js/__internal/ui/html_editor/m_html_editor.ts b/packages/devextreme/js/__internal/ui/html_editor/m_html_editor.ts
index 1a731bd81da5..6851206ef51b 100644
--- a/packages/devextreme/js/__internal/ui/html_editor/m_html_editor.ts
+++ b/packages/devextreme/js/__internal/ui/html_editor/m_html_editor.ts
@@ -255,6 +255,7 @@ const HtmlEditor = Editor.inherit({
     this._prepareConverters();
 
     this.callBase();
+    this._toggleReadOnlyState();
   },
 
   _prepareQuillRegistrator() {
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 cfb070ee11c4..7460ebc0f16b 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
@@ -109,6 +109,44 @@ export default function() {
     });
 
     QUnit.module('Accessibility', () => {
+        test('aria-readonly should be set on initialization if readOnly=true (T1248155)', function(assert) {
+            const $element = $('#htmlEditor');
+
+            $element.dxHtmlEditor({
+                readOnly: true
+            });
+
+            const $editorContent = $element.find(`.${HTML_EDITOR_CONTENT_CLASS}`);
+            const isQuillRendered = !!$editorContent.length;
+
+            assert.expect(isQuillRendered ? 1 : 0);
+
+            if(isQuillRendered) {
+                assert.strictEqual($editorContent.attr('aria-readonly'), 'true', 'aria-readonly is set on initialization');
+            }
+        });
+
+        test('aria-readonly should be set if readOnly property is set to true on runtime (T1248155) (T1248155)', function(assert) {
+            const $element = $('#htmlEditor');
+
+            $element.dxHtmlEditor({
+                readOnly: false
+            });
+            const instance = $element.dxHtmlEditor('instance');
+
+            const $editorContent = $element.find(`.${HTML_EDITOR_CONTENT_CLASS}`);
+            const isQuillRendered = !!$editorContent.length;
+
+            assert.expect(isQuillRendered ? 2 : 0);
+
+            if(isQuillRendered) {
+                assert.strictEqual($editorContent.attr('aria-readonly'), undefined, 'aria-readonly is properly set on initialization');
+
+                instance.option('readOnly', true);
+                assert.strictEqual($editorContent.attr('aria-readonly'), 'true', 'aria-readonly is properly set on runtime');
+            }
+        });
+
         test('accessibility roles', function(assert) {
             const $element = $('#htmlEditor');