feat(radio): Cover corner

Author: marker dao ®

e2e/testcafe-devextreme/tests/accessibility/radioGroup.ts

@@ -45,6 +45,9 @@ const interactiveItemsConfiguration: Configuration = {
 
         itemElement.append($button);
       },
+      (itemData, _, itemElement) => {
+        itemElement.text(itemData.text);
+      },
     ],
   },
 };

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

@@ -59,6 +59,7 @@ class RadioCollection extends CollectionWidget<Properties> {
     const { itemData, itemElement } = args;
     const { html } = itemData;
 
+    const $itemElement = $(itemElement);
     const contentId = `dx-${new Guid()}`;
 
     if (!html) {
@@ -68,7 +69,7 @@ class RadioCollection extends CollectionWidget<Properties> {
 
       const $radioContainer = $('<div>').append($radio).addClass(RADIO_VALUE_CONTAINER_CLASS);
 
-      $(itemElement).prepend($radioContainer);
+      $itemElement.prepend($radioContainer);
 
       const aria = {
         role: 'radio',
@@ -82,9 +83,10 @@ class RadioCollection extends CollectionWidget<Properties> {
     super._postprocessRenderItem(args);
 
     if (!html) {
-      const $itemContent = $(itemElement).find(`.${ITEM_CONTENT_CLASS}`);
+      const $itemContent = $itemElement.find(`.${ITEM_CONTENT_CLASS}`);
+      const $idTarget = $itemContent.length ? $itemContent : $itemElement;
 
-      $itemContent.attr('id', contentId);
+      $idTarget.attr('id', contentId);
     }
   }
 

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

@@ -396,6 +396,29 @@ QUnit.module('Aria accessibility', {
             assert.strictEqual($radioContainer.attr('aria-labelledby'), contentId, `item[${index}] radio container aria-labelledby references content id`);
         });
     });
+
+    QUnit.test('Items with itemTemplate that replaces parent content: radio container aria-labelledby references item element id', function(assert) {
+        helper.createWidget({
+            items: ['Low', 'Normal', 'Urgent', 'High'],
+            itemTemplate(itemData, _, itemElement) {
+                itemElement.text(itemData);
+            },
+        });
+
+        helper.checkAttributes(helper.$widget, { role: 'radiogroup', tabindex: '0' }, 'widget');
+        helper.checkItemsAttributes([], {});
+
+        helper.getItems().each((index, item) => {
+            const $item = $(item);
+            const $radioContainer = $item.find(`.${RADIO_VALUE_CONTAINER_CLASS}`);
+            const itemId = $item.attr('id');
+
+            assert.ok(itemId, `item[${index}] has an id when item content is removed by template`);
+            assert.strictEqual($radioContainer.attr('role'), 'radio', `item[${index}] radio container has role="radio"`);
+            assert.strictEqual($radioContainer.attr('aria-checked'), 'false', `item[${index}] radio container has aria-checked="false"`);
+            assert.strictEqual($radioContainer.attr('aria-labelledby'), itemId, `item[${index}] radio container aria-labelledby references item element id`);
+        });
+    });
 });
 
 module('layout', moduleConfig, () => {