♿️ Accessibility: The validation state and error message of cells (#2…

…5489)

Co-authored-by: Andrey Dolzhikov <[email protected]>

packages/devextreme/js/__internal/grids/grid_core/error_handling/m_error_handling.ts

@@ -2,6 +2,7 @@ import $ from '@js/core/renderer';
 import { each } from '@js/core/utils/iterator';
 import { name as clickEventName } from '@js/events/click';
 import eventsEngine from '@js/events/core/events_engine';
+import messageLocalization from '@js/localization/message';
 
 import modules from '../m_modules';
 
@@ -25,7 +26,9 @@ const ErrorHandlingController = modules.ViewController.inherit({
     const $errorMessage = this._renderErrorMessage(error);
 
     if ($tableElements) {
-      $errorRow = $('<tr>').addClass(ERROR_ROW_CLASS);
+      $errorRow = $('<tr>')
+        .attr('role', 'row')
+        .addClass(ERROR_ROW_CLASS);
       $closeButton = $('<div>').addClass(ERROR_CLOSEBUTTON_CLASS).addClass(that.addWidgetPrefix(ACTION_CLASS));
 
       eventsEngine.on($closeButton, clickEventName, that.createAction((args) => {
@@ -46,7 +49,7 @@ const ErrorHandlingController = modules.ViewController.inherit({
         // @ts-expect-errors
         .attr({
           colSpan: that.getController('columns').getVisibleColumns().length,
-          role: 'presentation',
+          role: 'gridcell',
         })
         .prepend($closeButton)
         .append($errorMessage)
@@ -60,7 +63,11 @@ const ErrorHandlingController = modules.ViewController.inherit({
 
   _renderErrorMessage(error) {
     const message = error.url ? error.message.replace(error.url, '') : error.message || error;
-    const $message = $('<div>').addClass(ERROR_MESSAGE_CLASS).text(message);
+    const $message = $('<div>')
+      .attr('role', 'alert')
+      .attr('aria-roledescription', messageLocalization.format('dxDataGrid-ariaError'))
+      .addClass(ERROR_MESSAGE_CLASS)
+      .text(message);
 
     if (error.url) {
       $('<a>').attr('href', error.url).text(error.url).appendTo($message);

packages/devextreme/js/__internal/grids/grid_core/validating/m_validating.ts

@@ -23,15 +23,18 @@ import Validator from '@js/ui/validator';
 import { focused } from '@js/ui/widget/selectors';
 import errors from '@js/ui/widget/ui.errors';
 
+import { EDITORS_INPUT_SELECTOR } from '../editing/const';
 import modules from '../m_modules';
 import gridCoreUtils from '../m_utils';
 
 const INVALIDATE_CLASS = 'invalid';
 const REVERT_TOOLTIP_CLASS = 'revert-tooltip';
 const INVALID_MESSAGE_CLASS = 'dx-invalid-message';
+const INVALID_MESSAGE_ID = 'dxInvalidMessage';
 const WIDGET_INVALID_MESSAGE_CLASS = 'invalid-message';
 const INVALID_MESSAGE_ALWAYS_CLASS = 'dx-invalid-message-always';
 const REVERT_BUTTON_CLASS = 'dx-revert-button';
+const REVERT_BUTTON_ID = 'dxRevertButton';
 const VALIDATOR_CLASS = 'validator';
 const PENDING_INDICATOR_CLASS = 'dx-pending-indicator';
 const VALIDATION_PENDING_CLASS = 'dx-validation-pending';
@@ -1093,6 +1096,10 @@ export const validatingModule = {
                 const buttonOptions = {
                   icon: 'revert',
                   hint: this.option('editing.texts.validationCancelChanges'),
+                  elementAttr: {
+                    id: REVERT_BUTTON_ID,
+                    'aria-label': messageLocalization.format('dxDataGrid-ariaRevertButton'),
+                  },
                   onClick: () => {
                     this._editingController.cancelEditData();
                   },
@@ -1193,7 +1200,10 @@ export const validatingModule = {
               animation: false,
               propagateOutsideClick: true,
               hideOnOutsideClick: false,
-              wrapperAttr: { class: `${INVALID_MESSAGE_CLASS} ${INVALID_MESSAGE_ALWAYS_CLASS} ${invalidMessageClass}` },
+              wrapperAttr: {
+                id: INVALID_MESSAGE_ID,
+                class: `${INVALID_MESSAGE_CLASS} ${INVALID_MESSAGE_ALWAYS_CLASS} ${invalidMessageClass}`,
+              },
               position: {
                 collision: 'flip',
                 boundary: this._rowsView.element(),
@@ -1305,10 +1315,12 @@ export const validatingModule = {
             const change = rowOptions ? this.getController('editing').getChangeByKey(rowOptions.key) : null;
             const column = $cell && this.getController('columns').getVisibleColumns()[$cell.index()];
             const isCellModified = (change?.data?.[column?.name] !== undefined) && !this._editingController.isSaving();
+            const validationDescriptionValues: string[] = [];
 
             if (this._editingController.getEditMode() === EDIT_MODE_CELL) {
               if ((validationResult?.status === VALIDATION_STATUS.invalid) || isCellModified) {
                 this._showRevertButton($focus);
+                validationDescriptionValues.push(REVERT_BUTTON_ID);
               } else {
                 this._revertTooltip && this._revertTooltip.$element().remove();
               }
@@ -1326,12 +1338,37 @@ export const validatingModule = {
 
               if (errorMessages.length) {
                 this._showValidationMessage($focus, errorMessages, column.alignment || 'left');
+                validationDescriptionValues.push(INVALID_MESSAGE_ID);
               }
             }
 
+            this._updateAriaValidationAttributes($focus, validationDescriptionValues);
             !isHideBorder && this._rowsView.element() && this._rowsView.updateFreeSpaceRowHeight();
           },
 
+          _updateAriaValidationAttributes($focus, inputDescriptionValues) {
+            if (inputDescriptionValues.length === 0) { return; }
+
+            const editMode = this._editingController.getEditMode();
+            const shouldSetValidationAriaAttributes = [
+              EDIT_MODE_CELL,
+              EDIT_MODE_BATCH,
+              EDIT_MODE_ROW].includes(editMode);
+
+            if (shouldSetValidationAriaAttributes) {
+              const $focusElement = this._getCurrentFocusElement($focus);
+              $focusElement.attr('aria-labelledby', inputDescriptionValues.join(' '));
+              $focusElement.attr('aria-invalid', true);
+            }
+          },
+
+          _getCurrentFocusElement($focus) {
+            if (this._editingController.isEditing()) {
+              return $focus.find(EDITORS_INPUT_SELECTOR).first();
+            }
+            return $focus;
+          },
+
           focus($element, isHideBorder) {
             if (!arguments.length) return this.callBase();
 

packages/devextreme/js/localization/messages/ar.json

@@ -170,6 +170,8 @@
         "dxDataGrid-ariaColumn": "عمود",
         "dxDataGrid-ariaColumnHeader": "Column header",
         "dxDataGrid-ariaValue": "القيمة",
+        "dxDataGrid-ariaError": "Error",
+        "dxDataGrid-ariaRevertButton": "Press Escape to discard the changes",
         "dxDataGrid-ariaFilterCell": "تصفية الخلية",
         "dxDataGrid-ariaCollapse": "طي",
         "dxDataGrid-ariaModifiedCell": "Modified",

packages/devextreme/js/localization/messages/ca.json

@@ -170,6 +170,8 @@
         "dxDataGrid-ariaColumn": "Columna",
         "dxDataGrid-ariaColumnHeader": "Column header",
         "dxDataGrid-ariaValue": "Valorar",
+        "dxDataGrid-ariaError": "Error",
+        "dxDataGrid-ariaRevertButton": "Press Escape to discard the changes",
         "dxDataGrid-ariaFilterCell": "Filtrar la cel·la",
         "dxDataGrid-ariaCollapse": "Col·lapsar",
         "dxDataGrid-ariaModifiedCell": "Modified",

packages/devextreme/js/localization/messages/cs.json

@@ -170,6 +170,8 @@
         "dxDataGrid-ariaColumn": "Sloupec",
         "dxDataGrid-ariaColumnHeader": "Column header",
         "dxDataGrid-ariaValue": "Hodnota",
+        "dxDataGrid-ariaError": "Error",
+        "dxDataGrid-ariaRevertButton": "Press Escape to discard the changes",
         "dxDataGrid-ariaFilterCell": "Filtrovat buňku",
         "dxDataGrid-ariaCollapse": "Sbalit",
         "dxDataGrid-ariaModifiedCell": "Modified",

packages/devextreme/js/localization/messages/de.json

@@ -170,6 +170,8 @@
         "dxDataGrid-ariaColumn": "Spalte",
         "dxDataGrid-ariaColumnHeader": "Column header",
         "dxDataGrid-ariaValue": "Wert",
+        "dxDataGrid-ariaError": "Error",
+        "dxDataGrid-ariaRevertButton": "Press Escape to discard the changes",
         "dxDataGrid-ariaFilterCell": "Filterzelle",
         "dxDataGrid-ariaCollapse": "Zusammenklappen",
         "dxDataGrid-ariaModifiedCell": "Modified",

packages/devextreme/js/localization/messages/el.json

@@ -170,6 +170,8 @@
         "dxDataGrid-ariaColumn": "Στήλη",
         "dxDataGrid-ariaColumnHeader": "Column header",
         "dxDataGrid-ariaValue": "Τιμή",
+        "dxDataGrid-ariaError": "Error",
+        "dxDataGrid-ariaRevertButton": "Press Escape to discard the changes",
         "dxDataGrid-ariaFilterCell": "Φιλτράρισμα κελιού",
         "dxDataGrid-ariaCollapse": "Συρρίκνωση",
         "dxDataGrid-ariaModifiedCell": "Modified",

packages/devextreme/js/localization/messages/en.json

@@ -170,6 +170,8 @@
         "dxDataGrid-ariaColumn": "Column",
         "dxDataGrid-ariaColumnHeader": "Column header",
         "dxDataGrid-ariaValue": "Value",
+        "dxDataGrid-ariaError": "Error",
+        "dxDataGrid-ariaRevertButton": "Press Escape to discard the changes",
         "dxDataGrid-ariaFilterCell": "Filter cell",
         "dxDataGrid-ariaCollapse": "Collapse",
         "dxDataGrid-ariaModifiedCell": "Modified",

packages/devextreme/js/localization/messages/es.json

@@ -170,6 +170,8 @@
         "dxDataGrid-ariaColumn": "Columna",
         "dxDataGrid-ariaColumnHeader": "Column header",
         "dxDataGrid-ariaValue": "Valor",
+        "dxDataGrid-ariaError": "Error",
+        "dxDataGrid-ariaRevertButton": "Press Escape to discard the changes",
         "dxDataGrid-ariaFilterCell": "Celda de filtro",
         "dxDataGrid-ariaCollapse": "Colapsar",
         "dxDataGrid-ariaModifiedCell": "Modified",

packages/devextreme/js/localization/messages/fa.json

@@ -170,6 +170,8 @@
         "dxDataGrid-ariaColumn": "ستون",
         "dxDataGrid-ariaColumnHeader": "Column header",
         "dxDataGrid-ariaValue": "مقدار",
+        "dxDataGrid-ariaError": "Error",
+        "dxDataGrid-ariaRevertButton": "Press Escape to discard the changes",
         "dxDataGrid-ariaFilterCell": "فیلتر سلول",
         "dxDataGrid-ariaCollapse": "عدم نمایش",
         "dxDataGrid-ariaModifiedCell": "Modified",

packages/devextreme/js/localization/messages/fi.json

@@ -170,6 +170,8 @@
         "dxDataGrid-ariaColumn": "Sarake",
         "dxDataGrid-ariaColumnHeader": "Column header",
         "dxDataGrid-ariaValue": "Arvo",
+        "dxDataGrid-ariaError": "Error",
+        "dxDataGrid-ariaRevertButton": "Press Escape to discard the changes",
         "dxDataGrid-ariaFilterCell": "Suodatinsolu",
         "dxDataGrid-ariaCollapse": "Tiivistä",
         "dxDataGrid-ariaModifiedCell": "Modified",

packages/devextreme/js/localization/messages/fr.json

@@ -170,6 +170,8 @@
         "dxDataGrid-ariaColumn": "Colonne",
         "dxDataGrid-ariaColumnHeader": "Column header",
         "dxDataGrid-ariaValue": "Valeur",
+        "dxDataGrid-ariaError": "Error",
+        "dxDataGrid-ariaRevertButton": "Press Escape to discard the changes",
         "dxDataGrid-ariaFilterCell": "Filtre de cellule",
         "dxDataGrid-ariaCollapse": "Réduire",
         "dxDataGrid-ariaModifiedCell": "Modified",

packages/devextreme/js/localization/messages/hu.json

@@ -170,6 +170,8 @@
         "dxDataGrid-ariaColumn": "Oszlop",
         "dxDataGrid-ariaColumnHeader": "Column header",
         "dxDataGrid-ariaValue": "Érték",
+        "dxDataGrid-ariaError": "Error",
+        "dxDataGrid-ariaRevertButton": "Press Escape to discard the changes",
         "dxDataGrid-ariaFilterCell": "Szűrő cella",
         "dxDataGrid-ariaCollapse": "Összecsukás",
         "dxDataGrid-ariaModifiedCell": "Modified",

packages/devextreme/js/localization/messages/it.json

@@ -170,6 +170,8 @@
         "dxDataGrid-ariaColumn": "Colonna",
         "dxDataGrid-ariaColumnHeader": "Column header",
         "dxDataGrid-ariaValue": "Valore",
+        "dxDataGrid-ariaError": "Error",
+        "dxDataGrid-ariaRevertButton": "Press Escape to discard the changes",
         "dxDataGrid-ariaFilterCell": "Filtra cella",
         "dxDataGrid-ariaCollapse": "Comprimi",
         "dxDataGrid-ariaModifiedCell": "Modified",

packages/devextreme/js/localization/messages/ja.json

@@ -170,6 +170,8 @@
         "dxDataGrid-ariaColumn": "列",
         "dxDataGrid-ariaColumnHeader": "Column header",
         "dxDataGrid-ariaValue": "値",
+        "dxDataGrid-ariaError": "Error",
+        "dxDataGrid-ariaRevertButton": "Press Escape to discard the changes",
         "dxDataGrid-ariaFilterCell": "フィルター セル",
         "dxDataGrid-ariaCollapse": "折りたたむ",
         "dxDataGrid-ariaModifiedCell": "Modified",

packages/devextreme/js/localization/messages/lt.json

@@ -170,6 +170,8 @@
         "dxDataGrid-ariaColumn": "Stulpelis",
         "dxDataGrid-ariaColumnHeader": "Column header",
         "dxDataGrid-ariaValue": "Reikšmė",
+        "dxDataGrid-ariaError": "Error",
+        "dxDataGrid-ariaRevertButton": "Press Escape to discard the changes",
         "dxDataGrid-ariaFilterCell": "Filtro laukas",
         "dxDataGrid-ariaCollapse": "Suskleisti",
         "dxDataGrid-ariaModifiedCell": "Modified",

packages/devextreme/js/localization/messages/lv.json

@@ -170,6 +170,8 @@
         "dxDataGrid-ariaColumn": "Kolonna",
         "dxDataGrid-ariaColumnHeader": "Column header",
         "dxDataGrid-ariaValue": "Vērtība",
+        "dxDataGrid-ariaError": "Error",
+        "dxDataGrid-ariaRevertButton": "Press Escape to discard the changes",
         "dxDataGrid-ariaFilterCell": "Filtrēt šūnu",
         "dxDataGrid-ariaCollapse": "Savērst",
         "dxDataGrid-ariaModifiedCell": "Modified",
@@ -295,7 +297,7 @@
         "dxCalendar-captionYearLabel": "Year selection",
         "dxCalendar-captionDecadeLabel": "Decade selection",
         "dxCalendar-captionCenturyLabel": "Century selection",
-
+        
         "dxColorView-ariaRed": "Sarkans",
         "dxColorView-ariaGreen": "Zaļš",
         "dxColorView-ariaBlue": "Zils",

packages/devextreme/js/localization/messages/nb.json

@@ -170,6 +170,8 @@
         "dxDataGrid-ariaColumn": "Kolonne",
         "dxDataGrid-ariaColumnHeader": "Column header",
         "dxDataGrid-ariaValue": "Verdi",
+        "dxDataGrid-ariaError": "Error",
+        "dxDataGrid-ariaRevertButton": "Press Escape to discard the changes",
         "dxDataGrid-ariaFilterCell": "Filtrér celle",
         "dxDataGrid-ariaCollapse": "Skjul",
         "dxDataGrid-ariaModifiedCell": "Modified",

packages/devextreme/js/localization/messages/nl.json

@@ -170,6 +170,8 @@
         "dxDataGrid-ariaColumn": "Kolom",
         "dxDataGrid-ariaColumnHeader": "Column header",
         "dxDataGrid-ariaValue": "Waarde",
+        "dxDataGrid-ariaError": "Error",
+        "dxDataGrid-ariaRevertButton": "Press Escape to discard the changes",
         "dxDataGrid-ariaFilterCell": "Filter cel",
         "dxDataGrid-ariaCollapse": "Inklappen",
         "dxDataGrid-ariaModifiedCell": "Modified",

packages/devextreme/js/localization/messages/pt.json

@@ -170,6 +170,8 @@
         "dxDataGrid-ariaColumn": "Coluna",
         "dxDataGrid-ariaColumnHeader": "Column header",
         "dxDataGrid-ariaValue": "Valor",
+        "dxDataGrid-ariaError": "Error",
+        "dxDataGrid-ariaRevertButton": "Press Escape to discard the changes",
         "dxDataGrid-ariaFilterCell": "Filtro de célula",
         "dxDataGrid-ariaCollapse": "Contrair",
         "dxDataGrid-ariaModifiedCell": "Modified",
@@ -295,7 +297,7 @@
         "dxCalendar-captionYearLabel": "Year selection",
         "dxCalendar-captionDecadeLabel": "Decade selection",
         "dxCalendar-captionCenturyLabel": "Century selection",
-
+        
         "dxColorView-ariaRed": "Vermelho",
         "dxColorView-ariaGreen": "Verde",
         "dxColorView-ariaBlue": "Azul",

packages/devextreme/js/localization/messages/ro.json

@@ -170,6 +170,8 @@
         "dxDataGrid-ariaColumn": "Coloană",
         "dxDataGrid-ariaColumnHeader": "Column header",
         "dxDataGrid-ariaValue": "Valoare",
+        "dxDataGrid-ariaError": "Error",
+        "dxDataGrid-ariaRevertButton": "Press Escape to discard the changes",
         "dxDataGrid-ariaFilterCell": "Celulă de filtrare",
         "dxDataGrid-ariaCollapse": "Restrângere",
         "dxDataGrid-ariaModifiedCell": "Modified",

packages/devextreme/js/localization/messages/ru.json

@@ -170,6 +170,8 @@
         "dxDataGrid-ariaColumn": "Столбец",
         "dxDataGrid-ariaColumnHeader": "Column header",
         "dxDataGrid-ariaValue": "Значение",
+        "dxDataGrid-ariaError": "Error",
+        "dxDataGrid-ariaRevertButton": "Press Escape to discard the changes",
         "dxDataGrid-ariaFilterCell": "Фильтр",
         "dxDataGrid-ariaCollapse": "Свернуть",
         "dxDataGrid-ariaModifiedCell": "Modified",

packages/devextreme/js/localization/messages/sl.json

@@ -170,6 +170,8 @@
         "dxDataGrid-ariaColumn": "Stolpec",
         "dxDataGrid-ariaColumnHeader": "Column header",
         "dxDataGrid-ariaValue": "Vrednost",
+        "dxDataGrid-ariaError": "Error",
+        "dxDataGrid-ariaRevertButton": "Press Escape to discard the changes",
         "dxDataGrid-ariaFilterCell": "Filtriraj po celici",
         "dxDataGrid-ariaCollapse": "Skrči",
         "dxDataGrid-ariaModifiedCell": "Modified",

packages/devextreme/js/localization/messages/sv.json

@@ -170,6 +170,8 @@
         "dxDataGrid-ariaColumn": "Kolumn",
         "dxDataGrid-ariaColumnHeader": "Column header",
         "dxDataGrid-ariaValue": "Värde",
+        "dxDataGrid-ariaError": "Error",
+        "dxDataGrid-ariaRevertButton": "Press Escape to discard the changes",
         "dxDataGrid-ariaFilterCell": "Filtrera cell",
         "dxDataGrid-ariaCollapse": "Kollapsa",
         "dxDataGrid-ariaModifiedCell": "Modified",

packages/devextreme/js/localization/messages/tr.json

@@ -170,6 +170,8 @@
         "dxDataGrid-ariaColumn": "Sütun",
         "dxDataGrid-ariaColumnHeader": "Column header",
         "dxDataGrid-ariaValue": "Veri",
+        "dxDataGrid-ariaError": "Error",
+        "dxDataGrid-ariaRevertButton": "Press Escape to discard the changes",
         "dxDataGrid-ariaFilterCell": "Filtre hücresi",
         "dxDataGrid-ariaCollapse": "Daralt",
         "dxDataGrid-ariaModifiedCell": "Modified",

packages/devextreme/js/localization/messages/vi.json

@@ -170,6 +170,8 @@
         "dxDataGrid-ariaColumn": "Cột",
         "dxDataGrid-ariaColumnHeader": "Column header",
         "dxDataGrid-ariaValue": "Giá trị",
+        "dxDataGrid-ariaError": "Error",
+        "dxDataGrid-ariaRevertButton": "Press Escape to discard the changes",
         "dxDataGrid-ariaFilterCell": "Lọc ô",
         "dxDataGrid-ariaCollapse": "Thu lại",
         "dxDataGrid-ariaModifiedCell": "Modified",

packages/devextreme/js/localization/messages/zh-tw.json

@@ -170,6 +170,8 @@
         "dxDataGrid-ariaColumn": "欄",
         "dxDataGrid-ariaColumnHeader": "Column header",
         "dxDataGrid-ariaValue": "值",
+        "dxDataGrid-ariaError": "Error",
+        "dxDataGrid-ariaRevertButton": "Press Escape to discard the changes",
         "dxDataGrid-ariaFilterCell": "過濾單元",
         "dxDataGrid-ariaCollapse": "摺疊",
         "dxDataGrid-ariaModifiedCell": "Modified",

packages/devextreme/js/localization/messages/zh.json

@@ -170,6 +170,8 @@
         "dxDataGrid-ariaColumn": "列",
         "dxDataGrid-ariaColumnHeader": "Column header",
         "dxDataGrid-ariaValue": "值",
+        "dxDataGrid-ariaError": "Error",
+        "dxDataGrid-ariaRevertButton": "Press Escape to discard the changes",
         "dxDataGrid-ariaFilterCell": "过滤单元",
         "dxDataGrid-ariaCollapse": "折叠",
         "dxDataGrid-ariaModifiedCell": "Modified",

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

@@ -845,7 +845,12 @@ QUnit.module('Initialization', baseModuleConfig, () => {
         const $errorRow = $($(dataGrid.$element()).find('.dx-error-row'));
         assert.equal($errorRow.length, 1, 'error row is shown');
         assert.equal($errorRow.children().attr('colspan'), '2', 'error row colspan');
-        assert.equal($errorRow.find('.dx-error-message').text(), 'Test Error', 'error row text');
+
+        const $errorMessage = $errorRow.find('.dx-error-message');
+        assert.equal($errorMessage.text(), 'Test Error', 'error row text');
+
+        assert.equal($errorMessage.attr('role'), 'alert', 'error message role');
+        assert.equal($errorMessage.attr('aria-roledescription'), 'Error', 'error message role description');
     });
 
     QUnit.test('Raise error if key field is missed', function(assert) {