diff --git a/packages/components/pie-radio-group/src/index.ts b/packages/components/pie-radio-group/src/index.ts index ddfb75bd30..dbc2ce94b3 100644 --- a/packages/components/pie-radio-group/src/index.ts +++ b/packages/components/pie-radio-group/src/index.ts @@ -135,6 +135,17 @@ export class PieRadioGroup extends FormControlMixin(RtlMixin(LitElement)) implem 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. @@ -167,11 +178,9 @@ export class PieRadioGroup extends FormControlMixin(RtlMixin(LitElement)) implem this._handleStatus(); } - // 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(); + if (_changedProperties.has('name')) { + this._applyNameToChildren(); + } } connectedCallback (): void { @@ -351,7 +360,7 @@ export class PieRadioGroup extends FormControlMixin(RtlMixin(LitElement)) implem aria-describedby=${hasAssistiveText ? assistiveTextId : nothing} class="${classMap(classes)}"> ${this._renderWrappedLabel()} - + ${hasAssistiveText ? html`