From 661e9045f6332119c7153748e842827f29bb5166 Mon Sep 17 00:00:00 2001 From: Nikki Gonzales <38495263+nikkithelegendarypokemonster@users.noreply.github.com> Date: Tue, 3 Sep 2024 16:40:34 +0800 Subject: [PATCH 1/3] remove aria-readonly in progressBar --- packages/devextreme/js/__internal/ui/m_progress_bar.ts | 1 + .../tests/DevExpress.ui.widgets/progressBar.tests.js | 8 ++++++++ 2 files changed, 9 insertions(+) diff --git a/packages/devextreme/js/__internal/ui/m_progress_bar.ts b/packages/devextreme/js/__internal/ui/m_progress_bar.ts index 61f5004eb8d5..3b673944ad25 100644 --- a/packages/devextreme/js/__internal/ui/m_progress_bar.ts +++ b/packages/devextreme/js/__internal/ui/m_progress_bar.ts @@ -52,6 +52,7 @@ const ProgressBar = TrackBar.inherit({ this._$wrapper.addClass(PROGRESSBAR_WRAPPER_CLASS); this._$bar.addClass(PROGRESSBAR_CONTAINER_CLASS); + this.setAria('readonly', undefined); this.setAria('role', 'progressbar'); $('
').addClass(PROGRESSBAR_RANGE_CONTAINER_CLASS).appendTo(this._$wrapper).append(this._$bar); 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..156691d678a3 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,14 @@ QUnit.module('states', { }); QUnit.module('aria accessibility', () => { + QUnit.test('aria-readonly is removed in initialization', function(assert) { + const $element = $('#progressbar').dxProgressBar({ + readOnly: true, + }); + + assert.equal($element.attr('aria-readonly'), undefined, 'aria-readonly is removed'); + }); + QUnit.test('aria properties after options changed', function(assert) { const $element = $('#progressbar').dxProgressBar({ min: 32, From 05e919cb186612034a617ad9087045627c6f95a5 Mon Sep 17 00:00:00 2001 From: Nikki Gonzales <38495263+nikkithelegendarypokemonster@users.noreply.github.com> Date: Tue, 3 Sep 2024 17:04:27 +0800 Subject: [PATCH 2/3] add test for on value change and readOnly option change --- .../js/__internal/ui/m_progress_bar.ts | 4 +++ .../progressBar.tests.js | 29 +++++++++++++++++++ 2 files changed, 33 insertions(+) diff --git a/packages/devextreme/js/__internal/ui/m_progress_bar.ts b/packages/devextreme/js/__internal/ui/m_progress_bar.ts index 3b673944ad25..f6bf8f0e5406 100644 --- a/packages/devextreme/js/__internal/ui/m_progress_bar.ts +++ b/packages/devextreme/js/__internal/ui/m_progress_bar.ts @@ -185,6 +185,10 @@ const ProgressBar = TrackBar.inherit({ case 'statusPosition': this._toggleStatus(this.option('showStatus')); break; + case 'readOnly': + this.callBase(args); + this.setAria('readonly', undefined); + break; case 'onComplete': this._createCompleteAction(); break; 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 156691d678a3..ecc751d8de02 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/progressBar.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/progressBar.tests.js @@ -209,6 +209,35 @@ QUnit.module('aria accessibility', () => { assert.equal($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.equal($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.equal($element.attr('aria-readonly'), undefined, 'aria-readonly is removed'); + }); + QUnit.test('aria properties after options changed', function(assert) { const $element = $('#progressbar').dxProgressBar({ min: 32, From ab1c9f1c45526c7aeaee0d7864c1d5a772f50a40 Mon Sep 17 00:00:00 2001 From: Nikki Gonzales <38495263+nikkithelegendarypokemonster@users.noreply.github.com> Date: Tue, 3 Sep 2024 17:22:12 +0800 Subject: [PATCH 3/3] override the method in editor when setting up aria-readonly attribute --- packages/devextreme/js/__internal/ui/m_progress_bar.ts | 9 ++++----- .../tests/DevExpress.ui.widgets/progressBar.tests.js | 6 +++--- 2 files changed, 7 insertions(+), 8 deletions(-) diff --git a/packages/devextreme/js/__internal/ui/m_progress_bar.ts b/packages/devextreme/js/__internal/ui/m_progress_bar.ts index f6bf8f0e5406..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(); @@ -52,7 +56,6 @@ const ProgressBar = TrackBar.inherit({ this._$wrapper.addClass(PROGRESSBAR_WRAPPER_CLASS); this._$bar.addClass(PROGRESSBAR_CONTAINER_CLASS); - this.setAria('readonly', undefined); this.setAria('role', 'progressbar'); $('
').addClass(PROGRESSBAR_RANGE_CONTAINER_CLASS).appendTo(this._$wrapper).append(this._$bar); @@ -185,10 +188,6 @@ const ProgressBar = TrackBar.inherit({ case 'statusPosition': this._toggleStatus(this.option('showStatus')); break; - case 'readOnly': - this.callBase(args); - this.setAria('readonly', undefined); - break; case 'onComplete': this._createCompleteAction(); break; 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 ecc751d8de02..e1b4cf69eaf3 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/progressBar.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/progressBar.tests.js @@ -206,7 +206,7 @@ QUnit.module('aria accessibility', () => { readOnly: true, }); - assert.equal($element.attr('aria-readonly'), undefined, 'aria-readonly is removed'); + assert.strictEqual($element.attr('aria-readonly'), undefined, 'aria-readonly is removed'); }); QUnit.test('aria-readonly should not exist after value change', function(assert) { @@ -221,7 +221,7 @@ QUnit.module('aria accessibility', () => { value: 59 }); - assert.equal($element.attr('aria-readonly'), undefined, 'aria-readonly is removed'); + assert.strictEqual($element.attr('aria-readonly'), undefined, 'aria-readonly is removed'); }); QUnit.test('aria-readonly should not exist after readOnly option change', function(assert) { @@ -235,7 +235,7 @@ QUnit.module('aria accessibility', () => { readOnly: true, }); - assert.equal($element.attr('aria-readonly'), undefined, 'aria-readonly is removed'); + assert.strictEqual($element.attr('aria-readonly'), undefined, 'aria-readonly is removed'); }); QUnit.test('aria properties after options changed', function(assert) {