update(radio): Remove useless juggling of id && Fix JQ demo

Author: marker dao ®

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,

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;
 }
 

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

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

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;

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: [