fixes

Author: pharret31

packages/devextreme-scss/scss/widgets/base/scheduler/_common.scss

@@ -7,15 +7,6 @@ $scheduler-appointment-collector-margin: 3px;
 $scheduler-appointment-collector-height: 22px;
 $scheduler-popup-scrollable-content-padding: 20px;
 
-// NOTE: a11y aria-live container must be visible to allow screen readers read it
-.dx-scheduler-a11y-status-container {
-  position: fixed;
-  left: 0;
-  top: 0;
-  clip: rect(1px, 1px, 1px, 1px);
-  clip-path: polygon(0 0);
-}
-
 .dx-scheduler-legacy-appointment-popup {
   .dx-popup-content {
     padding-top: 0;

packages/devextreme/js/__internal/scheduler/__tests__/__mock__/model/scheduler.ts

@@ -26,7 +26,7 @@ export class SchedulerModel {
   }
 
   getStatusContent(): string {
-    return this.container.querySelector('.dx-scheduler-a11y-status-container')?.textContent ?? '';
+    return this.container.querySelector('.dx-screen-reader-only')?.textContent ?? '';
   }
 
   getAppointment(text?: string): AppointmentModel<HTMLDivElement | null> {

packages/devextreme/js/__internal/ui/m_validation_summary.ts

@@ -14,7 +14,7 @@ import ValidationEngine from './m_validation_engine';
 import type ValidationGroup from './m_validation_group';
 
 const VALIDATION_SUMMARY_CLASS = 'dx-validationsummary';
-const VALIDATION_SUMMARY_SCREEN_READER_ONLY = 'dx-screen-reader-only';
+const SCREEN_READER_ONLY_CLASS = 'dx-screen-reader-only';
 const ITEM_CLASS = `${VALIDATION_SUMMARY_CLASS}-item`;
 const ITEM_DATA_KEY = `${VALIDATION_SUMMARY_CLASS}-item-data`;
 
@@ -143,12 +143,24 @@ class ValidationSummary extends CollectionWidget<ValidationSummaryProperties> {
     }
   }
 
+  _removeAnnounceContainer(): void {
+    this._$announceContainer?.remove();
+    this._$announceContainer = undefined;
+  }
+
+  _renderAnnounceContainer(): void {
+    this._removeAnnounceContainer();
+
+    this._$announceContainer = $('<div>')
+      .addClass(SCREEN_READER_ONLY_CLASS)
+      .attr('role', 'alert')
+      .appendTo(this.element());
+  }
+
   _announceText(text: string): void {
-    if (!this._$announceContainer) {
-      return;
-    }
+    this._renderAnnounceContainer();
 
-    this._$announceContainer.text(text);
+    this._$announceContainer?.text(text);
   }
 
   _itemValidationHandler({ isValid, validator, brokenRules }): void {
@@ -197,11 +209,6 @@ class ValidationSummary extends CollectionWidget<ValidationSummaryProperties> {
   _initMarkup(): void {
     this.$element().addClass(VALIDATION_SUMMARY_CLASS);
 
-    this._$announceContainer = $('<div>')
-      .addClass(VALIDATION_SUMMARY_SCREEN_READER_ONLY)
-      .attr('role', 'alert')
-      .appendTo(this.element());
-
     super._initMarkup();
   }
 
@@ -230,6 +237,7 @@ class ValidationSummary extends CollectionWidget<ValidationSummaryProperties> {
   }
 
   _dispose(): void {
+    this._removeAnnounceContainer();
     super._dispose();
     this._unsubscribeGroup();
   }

packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/validationSummary.markup.tests.js

@@ -475,7 +475,7 @@ QUnit.module('Accessibility', {
                 message: messages[1],
                 validator: validator,
             }],
-            validators: [validator]
+            validators: [validator],
         });
 
         const items = summary.option('items');
@@ -488,6 +488,18 @@ QUnit.module('Accessibility', {
 
     QUnit.test('ValidationSummary announce container should have role=alert attribute', function(assert) {
         const summary = this.fixture.createSummary();
+        const validator = sinon.createStubInstance(Validator);
+
+        summary._groupValidationHandler({
+            isValid: false,
+            brokenRules: [{
+                type: 'async',
+                message: 'test message',
+                validator: validator,
+            }],
+            validators: [validator],
+        });
+
         const $announceContainer = summary.$element().find('.dx-screen-reader-only');
 
         assert.strictEqual($announceContainer.attr('role'), 'alert', 'role=alert is present');

packages/devextreme/testing/tests/DevExpress.ui.widgets.form/form.tests.js

@@ -4257,7 +4257,7 @@ QUnit.module('reset', () => {
 
         const validationItemsBeforeReset = $(`.${FORM_VALIDATION_SUMMARY}`).children();
 
-        assert.strictEqual(validationItemsBeforeReset.length, 2, 'form has validation summary items before reset');
+        assert.strictEqual(validationItemsBeforeReset.length, 3, 'form has validation summary items before reset');
 
         form.reset();
 
@@ -4284,7 +4284,7 @@ QUnit.module('reset', () => {
 
         const summaryItemsAfterValidate = $(`.${FORM_VALIDATION_SUMMARY}`).children();
 
-        assert.strictEqual(summaryItemsAfterValidate.length, 2, 'form has validation summary after validation');
+        assert.strictEqual(summaryItemsAfterValidate.length, 3, 'form has validation summary after validation');
     });
 
     [

packages/testcafe-models/scheduler/index.ts

@@ -34,7 +34,7 @@ export const CLASS = {
   workspaceBothScrollbar: 'dx-scheduler-work-space-both-scrollbar',
 
   workSpace: 'dx-scheduler-work-space',
-  statusContainer: 'dx-scheduler-a11y-status-container ',
+  statusContainer: 'dx-screen-reader-only',
 };
 
 const ViewTypeClassesMap = {