feat(pie-radio-group): DSW-2636 apply name prop to child radio buttons and update test-aperture

.changeset/wet-gorillas-attack.md

@@ -0,0 +1,5 @@
+---
+"@justeattakeaway/pie-radio-group": minor
+---
+
+[Added] - Pass name prop down to radio child elements in slot

apps/pie-storybook/stories/testing/pie-radio-group.test.stories.ts

@@ -10,6 +10,7 @@ import '@justeattakeaway/pie-link';
 import '@justeattakeaway/pie-radio';
 import '@justeattakeaway/pie-form-label';
 import '@justeattakeaway/pie-button';
+import '@justeattakeaway/pie-icons-webc/dist/IconPlusCircle';
 
 import { createStory } from '../../utilities';
 
@@ -48,7 +49,7 @@ export default radioGroupStoryMeta;
 const KeyboardNavigationTemplate = () => html`
     <h2>Radio group 1</h2>
     <p><pie-button size="small-productive" data-test-id="btn-1">Button 1</pie-button></p>
-    <pie-radio-group data-test-id="radio-group-1">
+    <pie-radio-group name="radio-group-1" data-test-id="radio-group-1">
         <pie-radio data-test-id="radio-1" value="chinese">Chinese</pie-radio>
         <pie-radio data-test-id="radio-2" value="shawarma">Shawarma</pie-radio>
         <pie-radio data-test-id="radio-3" value="pizza">Pizza</pie-radio>
@@ -69,4 +70,38 @@ const KeyboardNavigationTemplate = () => html`
     <p><pie-button size="small-productive" variant="secondary" data-test-id="btn-4">Button 4</pie-button></p>
     `;
 
+const DynamicSlotsTemplate = () => {
+    let counter = 2;
+
+    // Function to dynamically add radio buttons to the radio group
+    const onAddButtonClick = () => {
+        const radioGroup = document.querySelector('pie-radio-group[data-test-id="radio-group-1"]');
+
+        if (radioGroup) {
+            const newRadio = document.createElement('pie-radio');
+            newRadio.setAttribute('value', counter.toString());
+            newRadio.textContent = `Option ${counter}`;
+
+            radioGroup.appendChild(newRadio);
+
+            counter++;
+        }
+    };
+
+    return html`
+            <pie-radio-group name="radio-group-1" data-test-id="radio-group-1">
+                <pie-radio data-test-id="radio-1" value="1">Option 1</pie-radio>
+            </pie-radio-group>
+
+            <p>
+                <pie-button data-test-id="add-option" iconplacement="leading" @click="${onAddButtonClick}">
+                    <icon-plus-circle slot="icon"></icon-plus-circle>
+                    Add another option
+                </pie-button>
+            </p>
+        `;
+};
+
 export const KeyboardNavigation = createStory<RadioGroupProps>(KeyboardNavigationTemplate, defaultArgs)();
+export const DynamicSlots = createStory<RadioGroupProps>(DynamicSlotsTemplate, defaultArgs)();
+

packages/components/pie-radio-group/src/index.ts

@@ -130,20 +130,39 @@ export class PieRadioGroup extends FormControlMixin(RtlMixin(LitElement)) implem
      * @param {Event} e - The slotchange event.
      * @private
      */
-    private _handleSlotChange (e: { target: HTMLSlotElement }): void {
+    private _handleLabelSlotChange (e: { target: HTMLSlotElement }): void {
         const childNodes = e.target.assignedNodes({ flatten: true });
         this._hasLabel = childNodes.length > 0;
     }
 
+    /**
+     * Ensures all newly added radio buttons are not tabbable and inherit the name property
+     */
+    private _handleRadioSlotChange (): void {
+        // Make all (including any newly added) radio buttons impossible to tab to
+        // This is because by default, we are able to tab to each individual radio button.
+        // This is not the behaviour we want, so applying -1 tabindex prevents it.
+        this._slottedChildren.forEach((radio) => radio.setAttribute('tabindex', '-1'));
+        this._applyNameToChildren();
+    }
+
     /**
      * Renders the label element inside a legend, wrapping the slot content.
      * @returns {TemplateResult } The template for the label slot.
      * @private
      */
     private _renderWrappedLabel (): TemplateResult {
         return this._hasLabel
-            ? html`<legend><slot name='label' @slotchange=${this._handleSlotChange}></slot></legend>`
-            : html`<slot name='label' @slotchange=${this._handleSlotChange}></slot>`;
+            ? html`<legend><slot name='label' @slotchange=${this._handleLabelSlotChange}></slot></legend>`
+            : html`<slot name='label' @slotchange=${this._handleLabelSlotChange}></slot>`;
+    }
+
+    private _applyNameToChildren () : void {
+        this._slottedChildren.forEach((radio) => {
+            if (this.name) {
+                radio.setAttribute('name', this.name);
+            }
+        });
     }
 
     protected updated (_changedProperties: PropertyValues<this>): void {
@@ -158,13 +177,10 @@ export class PieRadioGroup extends FormControlMixin(RtlMixin(LitElement)) implem
         if (_changedProperties.has('status')) {
             this._handleStatus();
         }
-    }
 
-    protected firstUpdated (): void {
-        // Make all radios impossible to tab to
-        // This is because by default, we are able to tab to each individual radio button.
-        // This is not the behaviour we want, so applying -1 tabindex prevents it.
-        this._slottedChildren.forEach((radio) => radio.setAttribute('tabindex', '-1'));
+        if (_changedProperties.has('name')) {
+            this._applyNameToChildren();
+        }
     }
 
     connectedCallback (): void {
@@ -179,6 +195,8 @@ export class PieRadioGroup extends FormControlMixin(RtlMixin(LitElement)) implem
 
         this.addEventListener('keydown', this._handleKeyDown, { signal });
         document.addEventListener('keydown', this._updateShiftTabState.bind(this), { signal });
+
+        this._applyNameToChildren();
     }
 
     /**
@@ -342,7 +360,7 @@ export class PieRadioGroup extends FormControlMixin(RtlMixin(LitElement)) implem
                 aria-describedby=${hasAssistiveText ? assistiveTextId : nothing}
                 class="${classMap(classes)}">
                     ${this._renderWrappedLabel()}
-                <slot></slot>
+                <slot @slotchange=${this._handleRadioSlotChange}></slot>
             </fieldset>
             ${hasAssistiveText ? html`
                 <pie-assistive-text