RadioGroup: Move describedby to the buttons, remove role alert from the element (#32870)

Co-authored-by: marker dao ® <youdontknow@marker-dao.eth>

Author: marker-dao

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

@@ -270,10 +270,16 @@ class Editor<
     return validationErrors;
   }
 
+  _toggleAriaDescribedBy(value?: string | null): void {
+    this.setAria('describedby', value);
+  }
+
   _disposeValidationMessage(): void {
     if (this._$validationMessage) {
       this._$validationMessage.remove();
-      this.setAria('describedby', null);
+
+      this._toggleAriaDescribedBy(null);
+
       this._$validationMessage = undefined;
       this._validationMessage = undefined;
     }
@@ -289,6 +295,7 @@ class Editor<
       validationStatus,
       _showValidationMessage: showValidationMessage,
     } = this.option();
+
     const isValid = this.option('isValid') && validationStatus !== VALIDATION_STATUS_INVALID;
     const validationErrors = this._getValidationErrors();
     const $element = this.$element();
@@ -300,6 +307,7 @@ class Editor<
     }
 
     this._disposeValidationMessage();
+
     if (!isValid && validationErrors) {
       const {
         validationMessageMode,
@@ -309,8 +317,10 @@ class Editor<
       } = this.option();
 
       this._$validationMessage = $('<div>').appendTo($element);
+
       const validationMessageContentId = `dx-${new Guid()}`;
-      this.setAria('describedby', validationMessageContentId);
+
+      this._toggleAriaDescribedBy(validationMessageContentId);
 
       // @ts-expect-error ts-error
       this._validationMessage = new ValidationMessage(this._$validationMessage, extend({
@@ -324,6 +334,7 @@ class Editor<
         boundary: validationBoundary,
         contentId: validationMessageContentId,
       }, this._options.cache('validationTooltipOptions')));
+
       this._bindInnerWidgetOptions(this._validationMessage, 'validationTooltipOptions');
     }
   }

packages/devextreme/js/__internal/ui/radio_group/m_radio_group.ts

@@ -138,11 +138,16 @@ class RadioGroup extends Editor<RadioGroupProperties> {
     this._setCollectionWidgetOption('selectedItemKeys', this._getSelectedItemKeys(value));
   }
 
-  _renderValidationState(): void {
-    super._renderValidationState();
+  _toggleAriaDescribedBy(value?: string | null): void {
+    const targets = this.itemElements()?.toArray();
 
-    // @ts-expect-error
-    this._validationMessage?.$content().attr('role', 'alert');
+    if (!targets?.length) {
+      return;
+    }
+
+    targets.forEach((element) => {
+      this.setAria('describedby', value, $(element));
+    });
   }
 
   _optionChanged(args: OptionChanged<RadioGroupProperties>): void {

packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/radioGroup.tests.js

@@ -238,16 +238,64 @@ module('layout', moduleConfig, () => {
         assert.strictEqual(itemsCount, items.length, `items with the "${RADIO_BUTTON_CLASS}" class were rendered`);
     });
 
-    test('radioGroup should have role="alert" attribute on validation message', function(assert) {
-        const $radioGroup = $('#radioGroup').dxRadioGroup({
+});
+
+module('accessibility', moduleConfig, () => {
+    test('validation message should not have role="alert"', function(assert) {
+        const $radioGroup = createRadioGroup({
             items: [1, 2, 3],
             isValid: false,
-            validationError: 'Some error',
+            validationError: { message: 'Some error' },
             validationMessageMode: 'always',
         });
         const $validationMessage = $radioGroup.find(`.${INVALID_MESSAGE_CONTENT}`);
 
-        assert.strictEqual($validationMessage.attr('role'), 'alert');
+        assert.notStrictEqual($validationMessage.attr('role'), 'alert', 'validation message does not have role="alert"');
+    });
+
+    test('root element should not have aria-describedby when invalid', function(assert) {
+        const $radioGroup = createRadioGroup({
+            items: [1, 2, 3],
+            isValid: false,
+            validationError: { message: 'Some error' },
+            validationMessageMode: 'always',
+        });
+
+        assert.strictEqual($radioGroup.attr('aria-describedby'), undefined, 'root element does not have aria-describedby');
+    });
+
+    test('each radio button should have aria-describedby referencing the validation message when invalid', function(assert) {
+        const $radioGroup = createRadioGroup({
+            items: [1, 2, 3],
+            isValid: false,
+            validationError: { message: 'Some error' },
+            validationMessageMode: 'always',
+        });
+        const instance = getInstance($radioGroup);
+        const contentId = $radioGroup.find(`.${INVALID_MESSAGE_CONTENT}`).attr('id');
+        const $buttons = $(instance.itemElements());
+
+        assert.ok(contentId, 'validation message content has an id');
+        $buttons.each(function() {
+            assert.strictEqual($(this).attr('aria-describedby'), contentId, 'radio button references validation message');
+        });
+    });
+
+    test('aria-describedby should be removed from radio buttons when validation state becomes valid', function(assert) {
+        const $radioGroup = createRadioGroup({
+            items: [1, 2, 3],
+            isValid: false,
+            validationError: { message: 'Some error' },
+            validationMessageMode: 'always',
+        });
+        const instance = getInstance($radioGroup);
+
+        instance.option('isValid', true);
+
+        const $buttons = $(instance.itemElements());
+        $buttons.each(function() {
+            assert.strictEqual($(this).attr('aria-describedby'), undefined, 'aria-describedby is removed from radio button');
+        });
     });
 });