ValidationSummary: add accessibility support

[pharret31]

No description provided.

[Copilot]

Pull request overview

This PR adds accessibility support to the ValidationSummary widget by implementing a screen reader announcement container and refactoring multiple components to use a shared CSS class for screen reader-only content.

Changes:

• Adds an ARIA live region (role="alert") to ValidationSummary to announce validation errors to screen readers
• Introduces a new shared CSS class dx-screen-reader-only for consistent screen reader-only styling across components
• Refactors scheduler and grid accessibility status containers to use the new shared CSS class
• Updates test descriptions to remove unnecessary apostrophes and escapes

Reviewed changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
packages/devextreme/js/__internal/ui/m_validation_summary.ts	Adds announce container initialization, text announcement logic, and state tracking for screen reader announcements
packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/validationSummary.markup.tests.js	Updates test descriptions for consistency and adds new accessibility tests for announce container
packages/devextreme-scss/scss/widgets/base/_ui.scss	Adds new shared dx-screen-reader-only CSS class with standard visually-hidden pattern
packages/devextreme-scss/scss/widgets/base/_gridBase.scss	Removes old grid-specific screen reader CSS class in favor of shared class
packages/devextreme/js/__internal/scheduler/a11y_status/a11y_status_render.ts	Updates to use shared dx-screen-reader-only class
packages/devextreme/js/__internal/grids/new/grid_core/accessibility/status.tsx	Updates to use shared dx-screen-reader-only class
packages/devextreme/js/__internal/grids/grid_core/views/a11y_status_container_component.ts	Updates to use shared dx-screen-reader-only class
packages/devextreme/js/__internal/grids/new/card_view/snapshots/widget.test.ts.snap	Updates snapshot to reflect new class name and removes trailing whitespace

[Copilot]

Pull request overview

Copilot reviewed 12 out of 12 changed files in this pull request and generated 1 comment.

[Copilot]

Pull request overview

Copilot reviewed 12 out of 12 changed files in this pull request and generated no new comments.

[Copilot]

Pull request overview

Copilot reviewed 12 out of 12 changed files in this pull request and generated 2 comments.

[Copilot]

Pull request overview

Copilot reviewed 12 out of 12 changed files in this pull request and generated no new comments.

Comments suppressed due to low confidence (1)

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

• The new accessibility announce logic is only invoked from _groupValidationHandler, so when items are updated via _itemValidationHandler (e.g., after the initial group validation when individual validators re‑validate on field changes), the live region text in the .dx-screen-reader-only container is not updated and _lastAnnouncedText may become out of sync with the visible summary items. To keep the screen-reader announcement consistent with the current validation state, _itemValidationHandler should trigger the same announce flow (e.g., by calling _announceOnGroupValidation when itemsChanged is true, or otherwise updating the announce container whenever the items option changes).

  _itemValidationHandler({ isValid, validator, brokenRules }): void {
    let { items } = this.option();
    let itemsChanged = false;

    let itemIndex = 0;
    // @ts-expect-error ts-error
    while (itemIndex < items.length) {
      // @ts-expect-error ts-error
      const item = items[itemIndex];
      if (item.validator === validator) {
        const foundRule = grep(brokenRules || [], (rule) => rule.index === item.index)[0];
        if (isValid || !foundRule) {
          // @ts-expect-error ts-error
          items.splice(itemIndex, 1);
          itemsChanged = true;
          continue;
        }
        if (foundRule.message !== item.text) {
          item.text = foundRule.message;
          itemsChanged = true;
        }
      }
      itemIndex++;
    }
    each(brokenRules, (_, rule) => {
      const foundItem = grep(items, (item) => item.validator === validator && item.index === rule.index)[0];
      if (!foundItem) {
        // @ts-expect-error ts-error
        items.push({
          text: rule.message,
          validator,
          index: rule.index,
        });
        itemsChanged = true;
      }
    });

    if (itemsChanged) {
      items = this._getOrderedItems(this.validators, items);
      this.option('items', items);
    }