From 1913a43ccdcbc994d31c7c1b9041d60a08b4aede Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marker=20dao=20=C2=AE?= <youdontknow@marker-dao.eth>
Date: Mon, 16 Mar 2026 14:40:38 +0100
Subject: [PATCH 1/7] RadioGroup: Move radio semantic from container to value
 container

---
 .../tests/accessibility/radioGroup.ts         | 26 +++++++
 .../ui/collection/collection_widget.base.ts   | 11 ++-
 .../ui/radio_group/m_radio_collection.ts      | 37 ++++++++--
 .../radioGroup.markup.tests.js                | 69 ++++++++++++++++--
 .../radioGroup.tests.js                       | 73 +++++++++++++++++++
 5 files changed, 203 insertions(+), 13 deletions(-)

diff --git a/e2e/testcafe-devextreme/tests/accessibility/radioGroup.ts b/e2e/testcafe-devextreme/tests/accessibility/radioGroup.ts
index a162949fe75c..12ba33e64347 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/radioGroup.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/radioGroup.ts
@@ -24,3 +24,29 @@ const configuration: Configuration = {
 };
 
 testAccessibility(configuration);
+
+const buttons = [
+  {
+    text: 'custom 1',
+  },
+  {
+    text: 'custom 2',
+  },
+];
+
+const interactiveItemsConfiguration: Configuration = {
+  component: 'dxRadioGroup',
+  a11yCheckConfig,
+  options: {
+    items: [buttons],
+    itemTemplate: [
+      (itemData, _, itemElement) => {
+        const $button = $('<button>').text(itemData.text);
+
+        itemElement.append($button);
+      },
+    ],
+  },
+};
+
+testAccessibility(interactiveItemsConfiguration);
diff --git a/packages/devextreme/js/__internal/ui/collection/collection_widget.base.ts b/packages/devextreme/js/__internal/ui/collection/collection_widget.base.ts
index e8a0e8315e73..2af6158ce62d 100644
--- a/packages/devextreme/js/__internal/ui/collection/collection_widget.base.ts
+++ b/packages/devextreme/js/__internal/ui/collection/collection_widget.base.ts
@@ -156,7 +156,6 @@ class CollectionWidget<
 > extends Widget<TProperties> {
   private _focusedItemId?: string;
 
-  // eslint-disable-next-line no-restricted-globals
   private _itemFocusTimeout?: ReturnType<typeof setTimeout>;
 
   private _itemRenderAction?: (event?: ActionArgs<TItem>) => void;
@@ -605,6 +604,10 @@ class CollectionWidget<
     this.setAria('activedescendant', null, $target);
   }
 
+  _getIdTarget($target: dxElementWrapper): dxElementWrapper {
+    return $target;
+  }
+
   _refreshItemId(
     $target: dxElementWrapper,
     needCleanItemId: boolean | undefined,
@@ -616,10 +619,12 @@ class CollectionWidget<
       return;
     }
 
+    const $idTarget = this._getIdTarget($target);
+
     if (!needCleanItemId && focusedElement) {
-      this.setAria('id', this.getFocusedItemId(), $target);
+      this.setAria('id', this.getFocusedItemId(), $idTarget);
     } else {
-      this.setAria('id', null, $target);
+      this.setAria('id', null, $idTarget);
     }
   }
 
diff --git a/packages/devextreme/js/__internal/ui/radio_group/m_radio_collection.ts b/packages/devextreme/js/__internal/ui/radio_group/m_radio_collection.ts
index 04e297f40ee3..1dfe6f716db6 100644
--- a/packages/devextreme/js/__internal/ui/radio_group/m_radio_collection.ts
+++ b/packages/devextreme/js/__internal/ui/radio_group/m_radio_collection.ts
@@ -1,3 +1,4 @@
+import Guid from '@js/core/guid';
 import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
 import { deferRender } from '@js/core/utils/common';
@@ -13,6 +14,8 @@ const RADIO_BUTTON_ICON_DOT_CLASS = 'dx-radiobutton-icon-dot';
 const RADIO_VALUE_CONTAINER_CLASS = 'dx-radio-value-container';
 const RADIO_BUTTON_CLASS = 'dx-radiobutton';
 
+const ITEM_CONTENT_CLASS = 'dx-item-content';
+
 export type Properties = CollectionWidgetBaseProperties<RadioCollection>;
 
 class RadioCollection extends CollectionWidget<Properties> {
@@ -29,9 +32,7 @@ class RadioCollection extends CollectionWidget<Properties> {
     const defaultOptions = super._getDefaultOptions();
 
     // @ts-expect-error
-    return extend(defaultOptions, DataExpressionMixin._dataExpressionDefaultOptions(), {
-      _itemAttributes: { role: 'radio' },
-    });
+    return extend(defaultOptions, DataExpressionMixin._dataExpressionDefaultOptions());
   }
 
   _initMarkup(): void {
@@ -47,8 +48,18 @@ class RadioCollection extends CollectionWidget<Properties> {
     return this._focusTarget();
   }
 
+  // eslint-disable-next-line class-methods-use-this
+  _getIdTarget($target: dxElementWrapper): dxElementWrapper {
+    const $radioContainer = $target.find(`.${RADIO_VALUE_CONTAINER_CLASS}`);
+
+    return $radioContainer;
+  }
+
   _postprocessRenderItem(args): void {
-    const { itemData: { html }, itemElement } = args;
+    const { itemData, itemElement } = args;
+    const { html } = itemData;
+
+    const contentId = `dx-${new Guid()}`;
 
     if (!html) {
       const $radio = $('<div>').addClass(RADIO_BUTTON_ICON_CLASS);
@@ -58,9 +69,23 @@ class RadioCollection extends CollectionWidget<Properties> {
       const $radioContainer = $('<div>').append($radio).addClass(RADIO_VALUE_CONTAINER_CLASS);
 
       $(itemElement).prepend($radioContainer);
+
+      const aria = {
+        role: 'radio',
+        // eslint-disable-next-line spellcheck/spell-checker
+        labelledby: contentId,
+      };
+
+      this.setAria(aria, $radioContainer);
     }
 
     super._postprocessRenderItem(args);
+
+    if (!html) {
+      const $itemContent = $(itemElement).find(`.${ITEM_CONTENT_CLASS}`);
+
+      $itemContent.attr('id', contentId);
+    }
   }
 
   _processSelectableItem(
@@ -75,7 +100,9 @@ class RadioCollection extends CollectionWidget<Properties> {
       .first()
       .toggleClass(RADIO_BUTTON_ICON_CHECKED_CLASS, isSelected);
 
-    this.setAria('checked', isSelected, $itemElement);
+    const $radioContainer = $itemElement.find(`.${RADIO_VALUE_CONTAINER_CLASS}`);
+
+    this.setAria('checked', isSelected, $radioContainer);
   }
 
   _refreshContent(): void {
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/radioGroup.markup.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/radioGroup.markup.tests.js
index 79c8ceb834a5..0687718c2115 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/radioGroup.markup.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/radioGroup.markup.tests.js
@@ -21,6 +21,8 @@ const RADIO_BUTTON_CLASS = 'dx-radiobutton';
 const RADIO_BUTTON_CHECKED_CLASS = 'dx-radiobutton-checked';
 const RADIO_GROUP_VERTICAL_CLASS = 'dx-radiogroup-vertical';
 const RADIO_GROUP_HORIZONTAL_CLASS = 'dx-radiogroup-horizontal';
+const RADIO_VALUE_CONTAINER_CLASS = 'dx-radio-value-container';
+const ITEM_CONTENT_CLASS = 'dx-item-content';
 
 const moduleConfig = {
     beforeEach: function() {
@@ -319,23 +321,80 @@ QUnit.module('Aria accessibility', {
         helper.checkAttributes(helper.$widget, { role: 'radiogroup', tabindex: '0' }, 'widget');
     });
 
-    QUnit.test('Items: [1, 2, 3], Item.selected: true', function() {
+    QUnit.test('Items: [1, 2, 3], Item.selected: true', function(assert) {
         helper.createWidget({ items: [1, 2, 3], value: 1 });
 
         helper.checkAttributes(helper.$widget, { role: 'radiogroup', tabindex: '0' }, 'widget');
-        helper.checkItemsAttributes([0], { attributes: ['aria-checked'], role: 'radio' });
+        helper.checkItemsAttributes([], {});
+
+        helper.getItems().each((index, item) => {
+            const $radioContainer = $(item).find(`.${RADIO_VALUE_CONTAINER_CLASS}`);
+            const $itemContent = $(item).find(`.${ITEM_CONTENT_CLASS}`);
+            const contentId = $itemContent.attr('id');
+
+            assert.ok(contentId, `item[${index}] content element has an id`);
+            assert.strictEqual($radioContainer.attr('role'), 'radio', `item[${index}] radio container has role="radio"`);
+            assert.strictEqual($radioContainer.attr('aria-checked'), index === 0 ? 'true' : 'false', `item[${index}] radio container has correct aria-checked`);
+            assert.strictEqual($radioContainer.attr('aria-labelledby'), contentId, `item[${index}] radio container aria-labelledby references content id`);
+        });
     });
 
-    QUnit.test('Items: [1, 2, 3], Item.selected: true, set focusedElement -> clean focusedElement', function() {
+    QUnit.test('Items: [1, 2, 3], Item.selected: true, set focusedElement -> clean focusedElement', function(assert) {
         helper.createWidget({ items: [1, 2, 3], value: 1 });
 
         helper.widget.option('focusedElement', helper.getItems().eq(0));
         helper.checkAttributes(helper.$widget, { role: 'radiogroup', tabindex: '0' }, 'widget');
-        helper.checkItemsAttributes([0], { attributes: ['aria-checked'], role: 'radio' });
+        helper.checkItemsAttributes([], {});
+
+        helper.getItems().each((index, item) => {
+            const $radioContainer = $(item).find(`.${RADIO_VALUE_CONTAINER_CLASS}`);
+            const $itemContent = $(item).find(`.${ITEM_CONTENT_CLASS}`);
+            const contentId = $itemContent.attr('id');
+
+            assert.ok(contentId, `item[${index}] content element has an id`);
+            assert.strictEqual($radioContainer.attr('role'), 'radio', `item[${index}] radio container has role="radio"`);
+            assert.strictEqual($radioContainer.attr('aria-checked'), index === 0 ? 'true' : 'false', `item[${index}] radio container has correct aria-checked`);
+            assert.strictEqual($radioContainer.attr('aria-labelledby'), contentId, `item[${index}] radio container aria-labelledby references content id`);
+        });
 
         helper.widget.option('focusedElement', null);
         helper.checkAttributes(helper.$widget, { role: 'radiogroup', tabindex: '0' }, 'widget');
-        helper.checkItemsAttributes([0], { attributes: ['aria-checked'], role: 'radio' });
+        helper.checkItemsAttributes([], {});
+
+        helper.getItems().each((index, item) => {
+            const $radioContainer = $(item).find(`.${RADIO_VALUE_CONTAINER_CLASS}`);
+            const $itemContent = $(item).find(`.${ITEM_CONTENT_CLASS}`);
+            const contentId = $itemContent.attr('id');
+
+            assert.ok(contentId, `item[${index}] content element has an id after clearing focusedElement`);
+            assert.strictEqual($radioContainer.attr('role'), 'radio', `item[${index}] radio container has role="radio" after clearing focusedElement`);
+            assert.strictEqual($radioContainer.attr('aria-checked'), index === 0 ? 'true' : 'false', `item[${index}] radio container has correct aria-checked after clearing focusedElement`);
+            assert.strictEqual($radioContainer.attr('aria-labelledby'), contentId, `item[${index}] radio container aria-labelledby references content id after clearing focusedElement`);
+        });
+    });
+
+    QUnit.test('Items with itemTemplate: radio container has correct aria attributes', function(assert) {
+        helper.createWidget({
+            items: [{ text: 'custom 1' }, { text: 'custom 2' }],
+            itemTemplate(itemData, _, itemElement) {
+                const $button = $('<button>').text(itemData.text);
+                itemElement.append($button);
+            },
+        });
+
+        helper.checkAttributes(helper.$widget, { role: 'radiogroup', tabindex: '0' }, 'widget');
+        helper.checkItemsAttributes([], {});
+
+        helper.getItems().each((index, item) => {
+            const $radioContainer = $(item).find(`.${RADIO_VALUE_CONTAINER_CLASS}`);
+            const $itemContent = $(item).find(`.${ITEM_CONTENT_CLASS}`);
+            const contentId = $itemContent.attr('id');
+
+            assert.ok(contentId, `item[${index}] content element has an id`);
+            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" initially`);
+            assert.strictEqual($radioContainer.attr('aria-labelledby'), contentId, `item[${index}] radio container aria-labelledby references content id`);
+        });
     });
 });
 
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/radioGroup.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/radioGroup.tests.js
index 4afb84581aa5..c7c95b3e862b 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/radioGroup.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/radioGroup.tests.js
@@ -297,6 +297,79 @@ module('accessibility', moduleConfig, () => {
             assert.strictEqual($(this).attr('aria-describedby'), undefined, 'aria-describedby is removed from radio button');
         });
     });
+
+    test('with itemTemplate, radio container should have role="radio", aria-labelledby and aria-checked', function(assert) {
+        const items = [
+            { text: 'custom 1' },
+            { text: 'custom 2' },
+        ];
+        const $radioGroup = createRadioGroup({
+            items,
+            itemTemplate(itemData, _, itemElement) {
+                const $button = $('<button>').text(itemData.text);
+                itemElement.append($button);
+            },
+        });
+        const instance = getInstance($radioGroup);
+        const $buttons = $(instance.itemElements());
+
+        $buttons.each(function(index) {
+            const $radioContainer = $(this).find('.dx-radio-value-container');
+            const $itemContent = $(this).find('.dx-item-content');
+            const contentId = $itemContent.attr('id');
+
+            assert.ok(contentId, `item[${index}] content element has an id`);
+            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" initially`);
+            assert.strictEqual($radioContainer.attr('aria-labelledby'), contentId, `item[${index}] radio container aria-labelledby references content id`);
+        });
+    });
+
+    test('with itemTemplate, aria-checked on radio container should be updated on value change', function(assert) {
+        const items = [
+            { text: 'custom 1' },
+            { text: 'custom 2' },
+        ];
+        const $radioGroup = createRadioGroup({
+            items,
+            itemTemplate(itemData, _, itemElement) {
+                const $button = $('<button>').text(itemData.text);
+                itemElement.append($button);
+            },
+        });
+        const instance = getInstance($radioGroup);
+        const $itemElements = $(instance.itemElements());
+        const $firstRadioContainer = $itemElements.eq(0).find('.dx-radio-value-container');
+        const $secondRadioContainer = $itemElements.eq(1).find('.dx-radio-value-container');
+
+        assert.strictEqual($firstRadioContainer.attr('aria-checked'), 'false', 'first item radio container has aria-checked="false" before selection');
+
+        $itemElements.eq(0).trigger('dxclick');
+
+        assert.strictEqual($firstRadioContainer.attr('aria-checked'), 'true', 'first item radio container has aria-checked="true" after selection');
+        assert.strictEqual($secondRadioContainer.attr('aria-checked'), 'false', 'second item radio container has aria-checked="false" after first item selected');
+    });
+
+    test('with itemTemplate, item element should not have role="radio" set directly', function(assert) {
+        const items = [
+            { text: 'custom 1' },
+            { text: 'custom 2' },
+        ];
+        const $radioGroup = createRadioGroup({
+            items,
+            itemTemplate(itemData, _, itemElement) {
+                const $button = $('<button>').text(itemData.text);
+                itemElement.append($button);
+            },
+        });
+        const instance = getInstance($radioGroup);
+        const $buttons = $(instance.itemElements());
+
+        $buttons.each(function(index) {
+            assert.notStrictEqual($(this).attr('role'), 'radio', `item[${index}] element itself does not have role="radio"`);
+            assert.strictEqual($(this).attr('aria-checked'), undefined, `item[${index}] element does not have aria-checked`);
+        });
+    });
 });
 
 module('hidden input', () => {

From 4fffe7fdbc2167a1c00728fd9669cb566030c822 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marker=20dao=20=C2=AE?= <youdontknow@marker-dao.eth>
Date: Mon, 16 Mar 2026 15:47:18 +0100
Subject: [PATCH 2/7] feat(radio): Cover corner

---
 .../tests/accessibility/radioGroup.ts         |  3 +++
 .../ui/radio_group/m_radio_collection.ts      |  8 ++++---
 .../radioGroup.markup.tests.js                | 23 +++++++++++++++++++
 3 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/e2e/testcafe-devextreme/tests/accessibility/radioGroup.ts b/e2e/testcafe-devextreme/tests/accessibility/radioGroup.ts
index 12ba33e64347..9759468f3992 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/radioGroup.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/radioGroup.ts
@@ -45,6 +45,9 @@ const interactiveItemsConfiguration: Configuration = {
 
         itemElement.append($button);
       },
+      (itemData, _, itemElement) => {
+        itemElement.text(itemData.text);
+      },
     ],
   },
 };
diff --git a/packages/devextreme/js/__internal/ui/radio_group/m_radio_collection.ts b/packages/devextreme/js/__internal/ui/radio_group/m_radio_collection.ts
index 1dfe6f716db6..3eabdbcf2d28 100644
--- a/packages/devextreme/js/__internal/ui/radio_group/m_radio_collection.ts
+++ b/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);
     }
   }
 
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/radioGroup.markup.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/radioGroup.markup.tests.js
index 0687718c2115..b3da6abfe1bf 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/radioGroup.markup.tests.js
+++ b/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, () => {

From f4532f8b4f5c992a8fc263c1528723ef6459812a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marker=20dao=20=C2=AE?= <youdontknow@marker-dao.eth>
Date: Mon, 16 Mar 2026 16:15:07 +0100
Subject: [PATCH 3/7] fix(radio): Fix test

---
 e2e/testcafe-devextreme/tests/accessibility/radioGroup.ts    | 2 +-
 .../DevExpress.ui.widgets.editors/radioGroup.markup.tests.js | 5 +----
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/e2e/testcafe-devextreme/tests/accessibility/radioGroup.ts b/e2e/testcafe-devextreme/tests/accessibility/radioGroup.ts
index 9759468f3992..c4d78f215c68 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/radioGroup.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/radioGroup.ts
@@ -46,7 +46,7 @@ const interactiveItemsConfiguration: Configuration = {
         itemElement.append($button);
       },
       (itemData, _, itemElement) => {
-        itemElement.text(itemData.text);
+        $(itemElement).parent().text(itemData);
       },
     ],
   },
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/radioGroup.markup.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/radioGroup.markup.tests.js
index b3da6abfe1bf..8a2e1a38bba3 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/radioGroup.markup.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/radioGroup.markup.tests.js
@@ -401,13 +401,10 @@ QUnit.module('Aria accessibility', {
         helper.createWidget({
             items: ['Low', 'Normal', 'Urgent', 'High'],
             itemTemplate(itemData, _, itemElement) {
-                itemElement.text(itemData);
+                $(itemElement).parent().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}`);

From 46fb3b4ebe473488610f60d1f082df766e326d3f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marker=20dao=20=C2=AE?= <youdontknow@marker-dao.eth>
Date: Mon, 16 Mar 2026 16:48:21 +0100
Subject: [PATCH 4/7] feat(radio): Cover item.html case

---
 .../ui/radio_group/m_radio_collection.ts      | 32 +++++++++++++------
 1 file changed, 22 insertions(+), 10 deletions(-)

diff --git a/packages/devextreme/js/__internal/ui/radio_group/m_radio_collection.ts b/packages/devextreme/js/__internal/ui/radio_group/m_radio_collection.ts
index 3eabdbcf2d28..46a0001de812 100644
--- a/packages/devextreme/js/__internal/ui/radio_group/m_radio_collection.ts
+++ b/packages/devextreme/js/__internal/ui/radio_group/m_radio_collection.ts
@@ -52,7 +52,11 @@ class RadioCollection extends CollectionWidget<Properties> {
   _getIdTarget($target: dxElementWrapper): dxElementWrapper {
     const $radioContainer = $target.find(`.${RADIO_VALUE_CONTAINER_CLASS}`);
 
-    return $radioContainer;
+    if ($radioContainer.length) {
+      return $radioContainer;
+    }
+
+    return $target;
   }
 
   _postprocessRenderItem(args): void {
@@ -62,24 +66,31 @@ class RadioCollection extends CollectionWidget<Properties> {
     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);
 
-      const $radioContainer = $('<div>').append($radio).addClass(RADIO_VALUE_CONTAINER_CLASS);
-
+      $radioContainer = $('<div>').append($radio).addClass(RADIO_VALUE_CONTAINER_CLASS);
       $itemElement.prepend($radioContainer);
+    }
 
-      const aria = {
-        role: 'radio',
-        // eslint-disable-next-line spellcheck/spell-checker
-        labelledby: contentId,
-      };
+    // eslint-disable-next-line spellcheck/spell-checker
+    const aria: { role: string; labelledby?: string } = {
+      role: 'radio',
+    };
 
-      this.setAria(aria, $radioContainer);
+    if (!html) {
+      // eslint-disable-next-line spellcheck/spell-checker
+      aria.labelledby = contentId;
     }
 
+    const $ariaTarget = $radioContainer.length ? $radioContainer : $itemElement;
+
+    this.setAria(aria, $ariaTarget);
+
     super._postprocessRenderItem(args);
 
     if (!html) {
@@ -103,8 +114,9 @@ class RadioCollection extends CollectionWidget<Properties> {
       .toggleClass(RADIO_BUTTON_ICON_CHECKED_CLASS, isSelected);
 
     const $radioContainer = $itemElement.find(`.${RADIO_VALUE_CONTAINER_CLASS}`);
+    const $ariaCheckedTarget = $radioContainer.length ? $radioContainer : $itemElement;
 
-    this.setAria('checked', isSelected, $radioContainer);
+    this.setAria('checked', isSelected, $ariaCheckedTarget);
   }
 
   _refreshContent(): void {

From ade8d40931c8c0399f2577dbf97495733add4069 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marker=20dao=20=C2=AE?= <youdontknow@marker-dao.eth>
Date: Mon, 16 Mar 2026 16:57:58 +0100
Subject: [PATCH 5/7] feat(radio): Add tests

---
 .../radioGroup.markup.tests.js                | 45 +++++++++++++++++++
 1 file changed, 45 insertions(+)

diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/radioGroup.markup.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/radioGroup.markup.tests.js
index 8a2e1a38bba3..03eb36f124dc 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/radioGroup.markup.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/radioGroup.markup.tests.js
@@ -416,6 +416,51 @@ QUnit.module('Aria accessibility', {
             assert.strictEqual($radioContainer.attr('aria-labelledby'), itemId, `item[${index}] radio container aria-labelledby references item element id`);
         });
     });
+
+    QUnit.test('Item with html: role="radio" is set on item element, no radio container created', function(assert) {
+        helper.createWidget({
+            items: [
+                { html: '<span>Option A</span>' },
+                { html: '<span>Option B</span>' },
+            ],
+        });
+
+        helper.checkAttributes(helper.$widget, { role: 'radiogroup', tabindex: '0' }, 'widget');
+
+        helper.getItems().each((index, item) => {
+            const $item = $(item);
+            const $radioContainer = $item.find(`.${RADIO_VALUE_CONTAINER_CLASS}`);
+
+            assert.strictEqual($radioContainer.length, 0, `item[${index}] has no radio container when html is provided`);
+            assert.strictEqual($item.attr('role'), 'radio', `item[${index}] element itself has role="radio"`);
+            assert.strictEqual($item.attr('aria-checked'), 'false', `item[${index}] element has aria-checked="false" by default`);
+            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, () => {

From 7c1d9db1ac421aa3db982c841709f00b6d36852a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marker=20dao=20=C2=AE?= <youdontknow@marker-dao.eth>
Date: Mon, 16 Mar 2026 18:24:25 +0100
Subject: [PATCH 6/7] refactor && fix(radio && tests)

---
 .../ui/collection/collection_widget.base.ts   |  4 +--
 .../ui/radio_group/m_radio_collection.ts      | 28 +++++++++----------
 .../radioGroup.markup.tests.js                | 24 ----------------
 .../radioGroup.tests.js                       | 24 ++++++++++++++++
 4 files changed, 39 insertions(+), 41 deletions(-)

diff --git a/packages/devextreme/js/__internal/ui/collection/collection_widget.base.ts b/packages/devextreme/js/__internal/ui/collection/collection_widget.base.ts
index 2af6158ce62d..a99fa324792e 100644
--- a/packages/devextreme/js/__internal/ui/collection/collection_widget.base.ts
+++ b/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);
diff --git a/packages/devextreme/js/__internal/ui/radio_group/m_radio_collection.ts b/packages/devextreme/js/__internal/ui/radio_group/m_radio_collection.ts
index 46a0001de812..51b60bc5003c 100644
--- a/packages/devextreme/js/__internal/ui/radio_group/m_radio_collection.ts
+++ b/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(
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/radioGroup.markup.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/radioGroup.markup.tests.js
index 03eb36f124dc..77cb6b07d2f9 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/radioGroup.markup.tests.js
+++ b/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, () => {
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/radioGroup.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/radioGroup.tests.js
index c7c95b3e862b..57fc77ba161c 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/radioGroup.tests.js
+++ b/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', () => {

From 3384ba44bdf679471eb9f980c0af16fa32b5c3ea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marker=20dao=20=C2=AE?= <youdontknow@marker-dao.eth>
Date: Tue, 17 Mar 2026 14:45:40 +0100
Subject: [PATCH 7/7] update(radio): Remove useless juggling of id && Fix JQ
 demo

---
 .../Demos/RadioGroup/Overview/jQuery/index.js | 16 ++++++++++-----
 .../RadioGroup/Overview/jQuery/styles.css     |  8 ++++----
 .../tests/accessibility/radioGroup.ts         |  3 ---
 .../ui/radio_group/m_radio_collection.ts      | 14 ++++++++-----
 .../radioGroup.markup.tests.js                | 20 -------------------
 5 files changed, 24 insertions(+), 37 deletions(-)

diff --git a/apps/demos/Demos/RadioGroup/Overview/jQuery/index.js b/apps/demos/Demos/RadioGroup/Overview/jQuery/index.js
index 045750d94f18..652fcc297207 100644
--- a/apps/demos/Demos/RadioGroup/Overview/jQuery/index.js
+++ b/apps/demos/Demos/RadioGroup/Overview/jQuery/index.js
@@ -19,12 +19,18 @@ $(() => {
   $('#radio-group-with-template').dxRadioGroup({
     items: priorities,
     value: priorities[2],
-    itemTemplate(itemData, _, itemElement) {
-      itemElement
-        .parent().addClass(itemData.toLowerCase())
-        .text(itemData);
+    itemTemplate: (itemData, _, itemElement) => {
+      itemElement.text(itemData);
     },
-  });
+    onValueChanged: (e) => {
+      const $element = $(e.element);
+      const priorityClass = e.previousValue.toLowerCase();
+      const newPriorityClass = e.value.toLowerCase();
+
+      $element.removeClass(priorityClass);
+      $element.addClass(newPriorityClass);
+    },
+  }).addClass(priorities[2].toLowerCase());
 
   const radioGroup = $('#radio-group-with-selection').dxRadioGroup({
     items: priorityEntities,
diff --git a/apps/demos/Demos/RadioGroup/Overview/jQuery/styles.css b/apps/demos/Demos/RadioGroup/Overview/jQuery/styles.css
index 7e55c2ba35b7..eb3c6236ff6d 100644
--- a/apps/demos/Demos/RadioGroup/Overview/jQuery/styles.css
+++ b/apps/demos/Demos/RadioGroup/Overview/jQuery/styles.css
@@ -1,16 +1,16 @@
-.low.dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot {
+.low .dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot {
   background: gray;
 }
 
-.normal.dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot {
+.normal .dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot {
   background: green;
 }
 
-.urgent.dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot {
+.urgent .dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot {
   background: orange;
 }
 
-.high.dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot {
+.high .dx-radiobutton-checked .dx-radiobutton-icon .dx-radiobutton-icon-dot {
   background: red;
 }
 
diff --git a/e2e/testcafe-devextreme/tests/accessibility/radioGroup.ts b/e2e/testcafe-devextreme/tests/accessibility/radioGroup.ts
index c4d78f215c68..12ba33e64347 100644
--- a/e2e/testcafe-devextreme/tests/accessibility/radioGroup.ts
+++ b/e2e/testcafe-devextreme/tests/accessibility/radioGroup.ts
@@ -45,9 +45,6 @@ const interactiveItemsConfiguration: Configuration = {
 
         itemElement.append($button);
       },
-      (itemData, _, itemElement) => {
-        $(itemElement).parent().text(itemData);
-      },
     ],
   },
 };
diff --git a/packages/devextreme/js/__internal/ui/radio_group/m_radio_collection.ts b/packages/devextreme/js/__internal/ui/radio_group/m_radio_collection.ts
index 51b60bc5003c..2affce54281f 100644
--- a/packages/devextreme/js/__internal/ui/radio_group/m_radio_collection.ts
+++ b/packages/devextreme/js/__internal/ui/radio_group/m_radio_collection.ts
@@ -68,9 +68,14 @@ class RadioCollection extends CollectionWidget<Properties> {
     if (!html) {
       const $radio = $('<div>').addClass(RADIO_BUTTON_ICON_CLASS);
 
-      $('<div>').addClass(RADIO_BUTTON_ICON_DOT_CLASS).appendTo($radio);
+      $('<div>')
+        .addClass(RADIO_BUTTON_ICON_DOT_CLASS)
+        .appendTo($radio);
+
+      const $radioContainer = $('<div>')
+        .append($radio)
+        .addClass(RADIO_VALUE_CONTAINER_CLASS);
 
-      const $radioContainer = $('<div>').append($radio).addClass(RADIO_VALUE_CONTAINER_CLASS);
       $itemElement.prepend($radioContainer);
     }
 
@@ -83,12 +88,11 @@ class RadioCollection extends CollectionWidget<Properties> {
 
     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()}`;
+      const contentId = $itemContent.attr('id') || `dx-${new Guid()}`;
 
-      $contentIdTarget.attr('id', contentId);
+      $itemContent.attr('id', contentId);
 
       // eslint-disable-next-line spellcheck/spell-checker
       aria.labelledby = contentId;
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/radioGroup.markup.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/radioGroup.markup.tests.js
index 77cb6b07d2f9..23541964c730 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/radioGroup.markup.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/radioGroup.markup.tests.js
@@ -397,26 +397,6 @@ QUnit.module('Aria accessibility', {
         });
     });
 
-    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).parent().text(itemData);
-            },
-        });
-
-        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`);
-        });
-    });
-
     QUnit.test('Item with html: role="radio" is set on item element, no radio container created', function(assert) {
         helper.createWidget({
             items: [