HtmlEditor: add aria-readonly attribute if readOnly property is initi…

…ally set to true (T1248155) (#27990)
DevExpress · Sep 6, 2024 · abd451a · abd451a
1 parent 22ff217
commit abd451a
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 0 deletions.
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
@@ -262,6 +262,7 @@ const HtmlEditor = Editor.inherit({
     this._prepareConverters();
 
     this.callBase();
+    this._toggleReadOnlyState();
   },
 
   _prepareQuillRegistrator() {

diff --git a/...devextreme/testing/tests/DevExpress.ui.widgets.htmlEditor/htmlEditorParts/markup.tests.js b/...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');