diff --git a/packages/devextreme/js/__internal/ui/m_progress_bar.ts b/packages/devextreme/js/__internal/ui/m_progress_bar.ts index 61f5004eb8d5..b0d47dbbc39b 100644 --- a/packages/devextreme/js/__internal/ui/m_progress_bar.ts +++ b/packages/devextreme/js/__internal/ui/m_progress_bar.ts @@ -42,6 +42,10 @@ const ProgressBar = TrackBar.inherit({ ]); }, + _toggleReadOnlyState() { + this.setAria('readonly', undefined); + }, + _initMarkup() { this._renderStatus(); this._createCompleteAction(); diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/progressBar.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/progressBar.tests.js index a90d503e1c40..e1b4cf69eaf3 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/progressBar.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/progressBar.tests.js @@ -201,6 +201,43 @@ QUnit.module('states', { }); QUnit.module('aria accessibility', () => { + QUnit.test('aria-readonly is removed in initialization', function(assert) { + const $element = $('#progressbar').dxProgressBar({ + readOnly: true, + }); + + assert.strictEqual($element.attr('aria-readonly'), undefined, 'aria-readonly is removed'); + }); + + QUnit.test('aria-readonly should not exist after value change', function(assert) { + const $element = $('#progressbar').dxProgressBar({ + readOnly: true, + value: 58 + }); + + const instance = $element.dxProgressBar('instance'); + + instance.option({ + value: 59 + }); + + assert.strictEqual($element.attr('aria-readonly'), undefined, 'aria-readonly is removed'); + }); + + QUnit.test('aria-readonly should not exist after readOnly option change', function(assert) { + const $element = $('#progressbar').dxProgressBar({ + readOnly: false, + }); + + const instance = $element.dxProgressBar('instance'); + + instance.option({ + readOnly: true, + }); + + assert.strictEqual($element.attr('aria-readonly'), undefined, 'aria-readonly is removed'); + }); + QUnit.test('aria properties after options changed', function(assert) { const $element = $('#progressbar').dxProgressBar({ min: 32,