refactor && fix(radio && tests)

Author: marker dao ®

packages/devextreme/js/__internal/ui/collection/collection_widget.base.ts

@@ -604,7 +604,7 @@ class CollectionWidget<
     this.setAria('activedescendant', null, $target);
   }
 
-  _getIdTarget($target: dxElementWrapper): dxElementWrapper {
+  _getItemIdTarget($target: dxElementWrapper): dxElementWrapper {
     return $target;
   }
 
@@ -619,7 +619,7 @@ class CollectionWidget<
       return;
     }
 
-    const $idTarget = this._getIdTarget($target);
+    const $idTarget = this._getItemIdTarget($target);
 
     if (!needCleanItemId && focusedElement) {
       this.setAria('id', this.getFocusedItemId(), $idTarget);

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

@@ -49,7 +49,7 @@ class RadioCollection extends CollectionWidget<Properties> {
   }
 
   // eslint-disable-next-line class-methods-use-this
-  _getIdTarget($target: dxElementWrapper): dxElementWrapper {
+  _getItemIdTarget($target: dxElementWrapper): dxElementWrapper {
     const $radioContainer = $target.find(`.${RADIO_VALUE_CONTAINER_CLASS}`);
 
     if ($radioContainer.length) {
@@ -64,41 +64,39 @@ class RadioCollection extends CollectionWidget<Properties> {
     const { html } = itemData;
 
     const $itemElement = $(itemElement);
-    const contentId = `dx-${new Guid()}`;
-
-    let $radioContainer = $itemElement.find(`.${RADIO_VALUE_CONTAINER_CLASS}`);
 
     if (!html) {
       const $radio = $('<div>').addClass(RADIO_BUTTON_ICON_CLASS);
 
       $('<div>').addClass(RADIO_BUTTON_ICON_DOT_CLASS).appendTo($radio);
 
-      $radioContainer = $('<div>').append($radio).addClass(RADIO_VALUE_CONTAINER_CLASS);
+      const $radioContainer = $('<div>').append($radio).addClass(RADIO_VALUE_CONTAINER_CLASS);
       $itemElement.prepend($radioContainer);
     }
 
+    super._postprocessRenderItem(args);
+
     // eslint-disable-next-line spellcheck/spell-checker
     const aria: { role: string; labelledby?: string } = {
       role: 'radio',
     };
 
     if (!html) {
+      const $itemContent = $itemElement.find(`.${ITEM_CONTENT_CLASS}`);
+      const $contentIdTarget = $itemContent.length ? $itemContent : $itemElement;
+
+      // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+      const contentId = $contentIdTarget.attr('id') || `dx-${new Guid()}`;
+
+      $contentIdTarget.attr('id', contentId);
+
       // eslint-disable-next-line spellcheck/spell-checker
       aria.labelledby = contentId;
     }
 
-    const $ariaTarget = $radioContainer.length ? $radioContainer : $itemElement;
+    const $ariaTarget = this._getItemIdTarget($itemElement);
 
     this.setAria(aria, $ariaTarget);
-
-    super._postprocessRenderItem(args);
-
-    if (!html) {
-      const $itemContent = $itemElement.find(`.${ITEM_CONTENT_CLASS}`);
-      const $idTarget = $itemContent.length ? $itemContent : $itemElement;
-
-      $idTarget.attr('id', contentId);
-    }
   }
 
   _processSelectableItem(

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

@@ -437,30 +437,6 @@ QUnit.module('Aria accessibility', {
             assert.strictEqual($item.attr('aria-labelledby'), undefined, `item[${index}] element has no aria-labelledby when html is provided`);
         });
     });
-
-    QUnit.test('Item with html: aria-checked on item element is updated on value change', function(assert) {
-        const items = [
-            { html: '<span>Option A</span>', value: 'a' },
-            { html: '<span>Option B</span>', value: 'b' },
-        ];
-        helper.createWidget({ items, valueExpr: 'value', value: 'a' });
-
-        helper.getItems().each((index, item) => {
-            const $item = $(item);
-            const expected = index === 0 ? 'true' : 'false';
-
-            assert.strictEqual($item.attr('aria-checked'), expected, `item[${index}] has correct aria-checked after initial render`);
-        });
-
-        helper.widget.option('value', 'b');
-
-        helper.getItems().each((index, item) => {
-            const $item = $(item);
-            const expected = index === 1 ? 'true' : 'false';
-
-            assert.strictEqual($item.attr('aria-checked'), expected, `item[${index}] has correct aria-checked after value change`);
-        });
-    });
 });
 
 module('layout', moduleConfig, () => {

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

@@ -370,6 +370,30 @@ module('accessibility', moduleConfig, () => {
             assert.strictEqual($(this).attr('aria-checked'), undefined, `item[${index}] element does not have aria-checked`);
         });
     });
+
+    test('item with html: aria-checked on item element is updated on value change', function(assert) {
+        const items = [
+            { html: '<span>Option A</span>', value: 'a' },
+            { html: '<span>Option B</span>', value: 'b' },
+        ];
+        const $radioGroup = createRadioGroup({ items, valueExpr: 'value', value: 'a' });
+        const instance = getInstance($radioGroup);
+        const $itemElements = $(instance.itemElements());
+
+        $itemElements.each(function(index) {
+            const expected = index === 0 ? 'true' : 'false';
+
+            assert.strictEqual($(this).attr('aria-checked'), expected, `item[${index}] has correct aria-checked after initial render`);
+        });
+
+        instance.option('value', 'b');
+
+        $itemElements.each(function(index) {
+            const expected = index === 1 ? 'true' : 'false';
+
+            assert.strictEqual($(this).attr('aria-checked'), expected, `item[${index}] has correct aria-checked after value change`);
+        });
+    });
 });
 
 module('hidden input', () => {