ValidationSummary: add accessibility support #32234
Conversation
pharret31
force-pushed
the
26_1_3218-validationsummary-add-accessibility-support
branch
from
4c61225 to
942ae91
Compare
There was a problem hiding this comment.
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-onlyfor 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 |
...ges/devextreme/testing/tests/DevExpress.ui.widgets.editors/validationSummary.markup.tests.js
Show resolved
Hide resolved
| z-index: $max-integer; | ||
| } | ||
|
|
||
| .dx-screen-reader-only { |
There was a problem hiding this comment.
| .dx-screen-reader-only { | |
| .dx-a11y-status-container { |
|
|
||
| workSpace: 'dx-scheduler-work-space', | ||
| statusContainer: 'dx-scheduler-a11y-status-container ', | ||
| statusContainer: 'dx-screen-reader-only', |
There was a problem hiding this comment.
Will a single 'dx-screen-reader-only' class be sufficient if there is more than one container on the page?? Kindly check all cases
| } | ||
|
|
||
| _announceOnGroupValidation(items): void { | ||
| if (!items?.length) { |
There was a problem hiding this comment.
Kindly check all code blocks and make sure that all scenarios are covered by tests. Currently, I see only tests for basic scenarios.
|
|
||
| this._$announceContainer = $('<div>') | ||
| .addClass(SCREEN_READER_ONLY_CLASS) | ||
| .attr('role', 'alert') |
There was a problem hiding this comment.
Maybe it’s better to use the setAria(...) utility function
| this._announceOnGroupValidation(items); | ||
| } | ||
|
|
||
| _announceOnGroupValidation(items): void { |
There was a problem hiding this comment.
Is it necessary to pass an extra argument to this function? We already have access to the current items value inside it.
| _announceText(text: string): void { | ||
| this._renderAnnounceContainer(); | ||
|
|
||
| this._$announceContainer?.text(text); |
There was a problem hiding this comment.
I don’t see any runtime processing. Is it not necessary?
2 participants
No description provided.