From f92a9af71d3b898df66f3612aa9db39a267f1c0f Mon Sep 17 00:00:00 2001
From: nicholas <nicholas.spong@adyen.com>
Date: Wed, 10 Jul 2024 12:01:34 +0200
Subject: [PATCH 01/10] Installments component shows a translatable label above
 its fields

---
 .../components/Installments/Installments.tsx  | 75 +++++++++++--------
 .../ConsentCheckbox/ConsentCheckbox.tsx       |  9 +--
 .../internal/FormFields/Field/Field.tsx       |  7 +-
 3 files changed, 50 insertions(+), 41 deletions(-)

diff --git a/packages/lib/src/components/Card/components/CardInput/components/Installments/Installments.tsx b/packages/lib/src/components/Card/components/CardInput/components/Installments/Installments.tsx
index e797cbf873..e4cf91c63d 100644
--- a/packages/lib/src/components/Card/components/CardInput/components/Installments/Installments.tsx
+++ b/packages/lib/src/components/Card/components/CardInput/components/Installments/Installments.tsx
@@ -7,6 +7,7 @@ import Fieldset from '../../../../../internal/FormFields/Fieldset/Fieldset';
 import RadioGroup from '../../../../../internal/FormFields/RadioGroup';
 import styles from '../../CardInput.module.scss';
 import Select from '../../../../../internal/FormFields/Select';
+import { alternativeLabelContent } from '../IframeLabelAlternative';
 
 export interface InstallmentsObj {
     value: number;
@@ -80,38 +81,47 @@ function Installments(props: InstallmentsProps) {
     if (hasRadioButtonUI) {
         return (
             <div className="adyen-checkout__installments">
-                <Fieldset classNameModifiers={['revolving-plan']} label={''}>
-                    <RadioGroup
-                        items={[
-                            { id: 'onetime', name: 'installments.oneTime' },
-                            { id: 'installments', name: 'installments.installments' },
-                            { id: 'revolving', name: 'installments.revolving' }
-                        ]}
-                        onChange={onRadioSelect}
-                        value={radioBtnValue}
-                    />
-
-                    <Field
-                        className={
-                            radioBtnValue !== 'installments'
-                                ? `${styles['revolving-plan-installments__disabled']}`
-                                : `${styles['revolving-plan-installments']}`
-                        }
-                        classNameModifiers={['revolving-plan-installments']}
-                        name={''}
-                        useLabelElement={false}
-                        addContextualElement={false}
-                    >
-                        <Select
-                            filterable={false}
-                            items={installmentOptions.values.map(installmentItemsMapper)}
-                            selectedValue={installmentAmount}
-                            onChange={onSelectInstallment}
-                            name={'installments'}
-                            disabled={radioBtnValue !== 'installments'}
+                <Field
+                    label={i18n.get('installments')}
+                    classNameModifiers={['installments']}
+                    name={'installmentsPseudoLabel'}
+                    useLabelElement={false}
+                    addContextualElement={false}
+                    renderAlternativeToLabel={alternativeLabelContent}
+                >
+                    <Fieldset classNameModifiers={['revolving-plan']} label={''}>
+                        <RadioGroup
+                            items={[
+                                { id: 'onetime', name: 'installments.oneTime' },
+                                { id: 'installments', name: 'installments.installments' },
+                                { id: 'revolving', name: 'installments.revolving' }
+                            ]}
+                            onChange={onRadioSelect}
+                            value={radioBtnValue}
                         />
-                    </Field>
-                </Fieldset>
+
+                        <Field
+                            className={
+                                radioBtnValue !== 'installments'
+                                    ? `${styles['revolving-plan-installments__disabled']}`
+                                    : `${styles['revolving-plan-installments']}`
+                            }
+                            classNameModifiers={['revolving-plan-installments']}
+                            name={''}
+                            useLabelElement={false}
+                            addContextualElement={false}
+                        >
+                            <Select
+                                filterable={false}
+                                items={installmentOptions.values.map(installmentItemsMapper)}
+                                selectedValue={installmentAmount}
+                                onChange={onSelectInstallment}
+                                name={'installments'}
+                                disabled={radioBtnValue !== 'installments'}
+                            />
+                        </Field>
+                    </Fieldset>
+                </Field>
             </div>
         );
     }
@@ -121,9 +131,10 @@ function Installments(props: InstallmentsProps) {
             <Field
                 label={i18n.get('installments')}
                 classNameModifiers={['installments']}
-                name={''}
+                name={'installmentsPseudoLabel'}
                 useLabelElement={false}
                 addContextualElement={false}
+                renderAlternativeToLabel={alternativeLabelContent}
             >
                 <Select
                     filterable={false}
diff --git a/packages/lib/src/components/internal/FormFields/ConsentCheckbox/ConsentCheckbox.tsx b/packages/lib/src/components/internal/FormFields/ConsentCheckbox/ConsentCheckbox.tsx
index 529cef2281..b29db0a85c 100644
--- a/packages/lib/src/components/internal/FormFields/ConsentCheckbox/ConsentCheckbox.tsx
+++ b/packages/lib/src/components/internal/FormFields/ConsentCheckbox/ConsentCheckbox.tsx
@@ -4,14 +4,7 @@ import Checkbox from '../Checkbox';
 
 export default function ConsentCheckbox({ errorMessage, label, onChange, i18n, ...props }) {
     return (
-        <Field
-            classNameModifiers={['consentCheckbox']}
-            errorMessage={errorMessage}
-            i18n={i18n}
-            name={'consentCheckbox'}
-            useLabelElement={false}
-            label={i18n.get('creditCard.holderName')}
-        >
+        <Field classNameModifiers={['consentCheckbox']} errorMessage={errorMessage} i18n={i18n} name={'consentCheckbox'} useLabelElement={false}>
             <Checkbox
                 name={'consentCheckbox'}
                 classNameModifiers={[...(props.classNameModifiers ??= []), 'consentCheckbox']}
diff --git a/packages/lib/src/components/internal/FormFields/Field/Field.tsx b/packages/lib/src/components/internal/FormFields/Field/Field.tsx
index 7192560841..c6cf8ff5c4 100644
--- a/packages/lib/src/components/internal/FormFields/Field/Field.tsx
+++ b/packages/lib/src/components/internal/FormFields/Field/Field.tsx
@@ -152,6 +152,11 @@ const Field: FunctionalComponent<FieldProps> = props => {
         );
     }, [children, errorMessage, isLoading, isValid, onFocusHandler, onBlurHandler]);
 
+    /**
+     * Use cases:
+     * - Not all form controls want/need a label e.g. many checkboxes describe what they are in their own markup and don't need the wrapping Field to also generate a labelling element
+     * - securedFields *can't* have a label (screen-reader's can make the association, over different browser contexts, between the label and the input)
+     */
     const LabelOrAlternative = useCallback(
         ({ onFocusField, focused, filled, disabled, name, uniqueId, useLabelElement, isSecuredField, children, renderAlternativeToLabel }) => {
             const defaultWrapperProps = {
@@ -165,7 +170,7 @@ const Field: FunctionalComponent<FieldProps> = props => {
             };
 
             return useLabelElement ? (
-                // if errorVisibleToSR is true then we are NOT dealing with the label for a securedField... so give it a `for` attribute
+                // if we are NOT dealing with the label for a securedField... we can give it a `for` attribute
                 <label {...defaultWrapperProps} {...(!isSecuredField && { htmlFor: name && uniqueId })}>
                     {children}
                 </label>

From 087fd8ccbe7f885a37dd64eaac2493fa59f9b568 Mon Sep 17 00:00:00 2001
From: nicholas <nicholas.spong@adyen.com>
Date: Wed, 10 Jul 2024 13:00:34 +0200
Subject: [PATCH 02/10] Added extra test condition in unit test

---
 .changeset/chilly-bikes-begin.md                             | 5 +++++
 .../CardInput/components/Installments/Installments.test.tsx  | 1 +
 2 files changed, 6 insertions(+)
 create mode 100644 .changeset/chilly-bikes-begin.md

diff --git a/.changeset/chilly-bikes-begin.md b/.changeset/chilly-bikes-begin.md
new file mode 100644
index 0000000000..b732cd6fa7
--- /dev/null
+++ b/.changeset/chilly-bikes-begin.md
@@ -0,0 +1,5 @@
+---
+"@adyen/adyen-web": patch
+---
+
+Installments component shows a translatable label above its fields
diff --git a/packages/lib/src/components/Card/components/CardInput/components/Installments/Installments.test.tsx b/packages/lib/src/components/Card/components/CardInput/components/Installments/Installments.test.tsx
index 4459e5d5c7..1808d723b4 100644
--- a/packages/lib/src/components/Card/components/CardInput/components/Installments/Installments.test.tsx
+++ b/packages/lib/src/components/Card/components/CardInput/components/Installments/Installments.test.tsx
@@ -58,6 +58,7 @@ describe('Installments', () => {
 
         render(<Installments {...props} />);
         expect(await screen.findByRole('button')).toHaveTextContent('1x $300.00');
+        expect(await screen.findByText('Number of installments')).toBeTruthy();
     });
 
     describe('On brand change', () => {

From 5a2dd0b92725fe5446a9e7e413ae404869ac6cce Mon Sep 17 00:00:00 2001
From: nicholas <nicholas.spong@adyen.com>
Date: Thu, 11 Jul 2024 11:14:03 +0200
Subject: [PATCH 03/10] Updating e2e test to reflect third party changes to
 markup

---
 packages/e2e-playwright/models/redirect.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/e2e-playwright/models/redirect.ts b/packages/e2e-playwright/models/redirect.ts
index 94619080c5..65395203ed 100644
--- a/packages/e2e-playwright/models/redirect.ts
+++ b/packages/e2e-playwright/models/redirect.ts
@@ -30,7 +30,7 @@ class Redirect {
 
         this.selectYourBankButton = page.getByRole('button', { name: SELECT_YOUR_BANK });
 
-        this.selectTestBankButton = page.getByRole('button', { name: TEST_BANK_NAME });
+        this.selectTestBankButton = page.getByText(TEST_BANK_NAME);
 
         this.simulateSuccessButton = page.getByRole('button', { name: SIMULATION_TYPE_SUCCESS });
         this.simulateFailureButton = page.getByRole('button', { name: SIMULATION_TYPE_FAILURE });

From 4f76b5ad9a15817dec3910e795f625a5b02a40d4 Mon Sep 17 00:00:00 2001
From: nicholas <nicholas.spong@adyen.com>
Date: Mon, 15 Jul 2024 11:31:49 +0200
Subject: [PATCH 04/10] Explicitly associated label element added for
 installments when they take the form of a dropdown

---
 .../components/Installments/Installments.tsx         | 12 +-----------
 .../components/internal/FormFields/Field/Field.tsx   |  2 +-
 .../FormFields/Select/components/SelectButton.tsx    |  1 +
 3 files changed, 3 insertions(+), 12 deletions(-)

diff --git a/packages/lib/src/components/Card/components/CardInput/components/Installments/Installments.tsx b/packages/lib/src/components/Card/components/CardInput/components/Installments/Installments.tsx
index e4cf91c63d..656c004250 100644
--- a/packages/lib/src/components/Card/components/CardInput/components/Installments/Installments.tsx
+++ b/packages/lib/src/components/Card/components/CardInput/components/Installments/Installments.tsx
@@ -7,7 +7,6 @@ import Fieldset from '../../../../../internal/FormFields/Fieldset/Fieldset';
 import RadioGroup from '../../../../../internal/FormFields/RadioGroup';
 import styles from '../../CardInput.module.scss';
 import Select from '../../../../../internal/FormFields/Select';
-import { alternativeLabelContent } from '../IframeLabelAlternative';
 
 export interface InstallmentsObj {
     value: number;
@@ -85,9 +84,7 @@ function Installments(props: InstallmentsProps) {
                     label={i18n.get('installments')}
                     classNameModifiers={['installments']}
                     name={'installmentsPseudoLabel'}
-                    useLabelElement={false}
                     addContextualElement={false}
-                    renderAlternativeToLabel={alternativeLabelContent}
                 >
                     <Fieldset classNameModifiers={['revolving-plan']} label={''}>
                         <RadioGroup
@@ -128,14 +125,7 @@ function Installments(props: InstallmentsProps) {
 
     return (
         <div className="adyen-checkout__installments">
-            <Field
-                label={i18n.get('installments')}
-                classNameModifiers={['installments']}
-                name={'installmentsPseudoLabel'}
-                useLabelElement={false}
-                addContextualElement={false}
-                renderAlternativeToLabel={alternativeLabelContent}
-            >
+            <Field label={i18n.get('installments')} classNameModifiers={['installments']} name={'installments'} addContextualElement={false}>
                 <Select
                     filterable={false}
                     items={installmentOptions.values.map(installmentItemsMapper)}
diff --git a/packages/lib/src/components/internal/FormFields/Field/Field.tsx b/packages/lib/src/components/internal/FormFields/Field/Field.tsx
index c6cf8ff5c4..3d20920e7f 100644
--- a/packages/lib/src/components/internal/FormFields/Field/Field.tsx
+++ b/packages/lib/src/components/internal/FormFields/Field/Field.tsx
@@ -171,7 +171,7 @@ const Field: FunctionalComponent<FieldProps> = props => {
 
             return useLabelElement ? (
                 // if we are NOT dealing with the label for a securedField... we can give it a `for` attribute
-                <label {...defaultWrapperProps} {...(!isSecuredField && { htmlFor: name && uniqueId })}>
+                <label {...defaultWrapperProps} {...(!isSecuredField && name && { htmlFor: uniqueId })}>
                     {children}
                 </label>
             ) : (
diff --git a/packages/lib/src/components/internal/FormFields/Select/components/SelectButton.tsx b/packages/lib/src/components/internal/FormFields/Select/components/SelectButton.tsx
index 4503caeb34..f9012bbf6d 100644
--- a/packages/lib/src/components/internal/FormFields/Select/components/SelectButton.tsx
+++ b/packages/lib/src/components/internal/FormFields/Select/components/SelectButton.tsx
@@ -58,6 +58,7 @@ function SelectButton(props: Readonly<SelectButtonProps>) {
             onClick={onClickHandler}
             onKeyDown={!readonly ? props.onButtonKeyDown : null}
             toggleButtonRef={props.toggleButtonRef}
+            {...(props.id && { id: props.id })}
         >
             {!props.filterable ? (
                 <Fragment>

From 30f376f5ea2ce46579af09560fcff15c68d9fbc1 Mon Sep 17 00:00:00 2001
From: nicholas <nicholas.spong@adyen.com>
Date: Mon, 15 Jul 2024 12:07:44 +0200
Subject: [PATCH 05/10] Explicitly associated label element added for
 installments when they take the form of a radiogroup

---
 .../internal/FormFields/Fieldset/Fieldset.tsx      | 14 +++++++++++---
 .../internal/FormFields/RadioGroup/RadioGroup.tsx  |  2 +-
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/lib/src/components/internal/FormFields/Fieldset/Fieldset.tsx b/packages/lib/src/components/internal/FormFields/Fieldset/Fieldset.tsx
index a399458b9a..f009ad6d92 100644
--- a/packages/lib/src/components/internal/FormFields/Fieldset/Fieldset.tsx
+++ b/packages/lib/src/components/internal/FormFields/Fieldset/Fieldset.tsx
@@ -1,4 +1,4 @@
-import { h, ComponentChildren } from 'preact';
+import { h, ComponentChildren, toChildArray, ComponentChild, cloneElement, VNode } from 'preact';
 import cx from 'classnames';
 import useCoreContext from '../../../../core/Context/useCoreContext';
 import './Fieldset.scss';
@@ -8,9 +8,10 @@ interface FieldsetProps {
     classNameModifiers: string[];
     label: string;
     readonly?: boolean;
+    uniqueId?: string;
 }
 
-export default function Fieldset({ children, classNameModifiers = [], label, readonly = false }: FieldsetProps) {
+export default function Fieldset({ children, classNameModifiers = [], label, readonly = false, ...props }: FieldsetProps) {
     const { i18n } = useCoreContext();
 
     return (
@@ -23,7 +24,14 @@ export default function Fieldset({ children, classNameModifiers = [], label, rea
         >
             {label && <legend className="adyen-checkout__fieldset__title">{i18n.get(label)}</legend>}
 
-            <div className="adyen-checkout__fieldset__fields">{children}</div>
+            <div className="adyen-checkout__fieldset__fields">
+                {toChildArray(children).map((child: ComponentChild): ComponentChild => {
+                    const childProps = {
+                        ...(props.uniqueId && { uniqueId: props.uniqueId }) // propagate the uniqueId, if we've been given one
+                    };
+                    return cloneElement(child as VNode, childProps);
+                })}
+            </div>
         </fieldset>
     );
 }
diff --git a/packages/lib/src/components/internal/FormFields/RadioGroup/RadioGroup.tsx b/packages/lib/src/components/internal/FormFields/RadioGroup/RadioGroup.tsx
index 68ee44b3fc..4c6fddfb38 100644
--- a/packages/lib/src/components/internal/FormFields/RadioGroup/RadioGroup.tsx
+++ b/packages/lib/src/components/internal/FormFields/RadioGroup/RadioGroup.tsx
@@ -12,7 +12,7 @@ export default function RadioGroup(props: RadioGroupProps) {
     const uniqueIdBase = uniqueId?.replace(/[0-9]/g, '').substring(0, uniqueId.lastIndexOf('-'));
 
     return (
-        <div className="adyen-checkout__radio_group">
+        <div className="adyen-checkout__radio_group" role={'radiogroup'} {...(props.uniqueId && { id: props.uniqueId })}>
             {items.map(item => {
                 const uniqueId = getUniqueId(uniqueIdBase);
                 return (

From 880595be150d318bb68fa7ba374fed7c84a0d03a Mon Sep 17 00:00:00 2001
From: nicholas <nicholas.spong@adyen.com>
Date: Mon, 15 Jul 2024 15:37:54 +0200
Subject: [PATCH 06/10] Solving issue with having an id on the
 SelectButtonElement that was breaking Riverty & CtP unit tests

---
 .../components/Installments/Installments.tsx          |  1 +
 .../components/internal/FormFields/Select/Select.tsx  |  4 +++-
 .../FormFields/Select/components/SelectButton.tsx     | 11 +++++++++--
 .../components/internal/FormFields/Select/types.ts    |  2 ++
 4 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/packages/lib/src/components/Card/components/CardInput/components/Installments/Installments.tsx b/packages/lib/src/components/Card/components/CardInput/components/Installments/Installments.tsx
index 656c004250..ccca313b67 100644
--- a/packages/lib/src/components/Card/components/CardInput/components/Installments/Installments.tsx
+++ b/packages/lib/src/components/Card/components/CardInput/components/Installments/Installments.tsx
@@ -133,6 +133,7 @@ function Installments(props: InstallmentsProps) {
                     onChange={onSelectInstallment}
                     name={'installments'}
                     readonly={installmentOptions?.values?.length === 1}
+                    allowIdOnButton={true}
                 />
             </Field>
         </div>
diff --git a/packages/lib/src/components/internal/FormFields/Select/Select.tsx b/packages/lib/src/components/internal/FormFields/Select/Select.tsx
index b59b043c85..1372ef7a74 100644
--- a/packages/lib/src/components/internal/FormFields/Select/Select.tsx
+++ b/packages/lib/src/components/internal/FormFields/Select/Select.tsx
@@ -29,7 +29,8 @@ function Select({
     disableTextFilter,
     clearOnSelect,
     blurOnClose,
-    onListToggle
+    onListToggle,
+    allowIdOnButton = false
 }: SelectProps) {
     const filterInputRef = useRef(null);
     const selectContainerRef = useRef(null);
@@ -289,6 +290,7 @@ function Select({
                 toggleList={toggleList}
                 disabled={disabled}
                 ariaDescribedBy={uniqueId ? `${uniqueId}${ARIA_ERROR_SUFFIX}` : null}
+                allowIdOnButton={allowIdOnButton}
             />
             <SelectList
                 active={activeOption}
diff --git a/packages/lib/src/components/internal/FormFields/Select/components/SelectButton.tsx b/packages/lib/src/components/internal/FormFields/Select/components/SelectButton.tsx
index f9012bbf6d..8557d305d2 100644
--- a/packages/lib/src/components/internal/FormFields/Select/components/SelectButton.tsx
+++ b/packages/lib/src/components/internal/FormFields/Select/components/SelectButton.tsx
@@ -6,7 +6,11 @@ import styles from '../Select.module.scss';
 import Img from '../../../Img';
 
 function SelectButtonElement({ filterable, toggleButtonRef, ...props }) {
-    if (filterable) return <div {...props} ref={toggleButtonRef} />;
+    if (filterable) {
+        // Even if passed, we can't add an id to this div since it is not allowed to associate a div with a label element
+        const { id, ...strippedProps } = props;
+        return <div {...strippedProps} ref={toggleButtonRef} />;
+    }
 
     return <button id={props.id} aria-describedby={props.ariaDescribedBy} type={'button'} {...props} ref={toggleButtonRef} />;
 }
@@ -58,7 +62,10 @@ function SelectButton(props: Readonly<SelectButtonProps>) {
             onClick={onClickHandler}
             onKeyDown={!readonly ? props.onButtonKeyDown : null}
             toggleButtonRef={props.toggleButtonRef}
-            {...(props.id && { id: props.id })}
+            // Only for some dropdowns e.g. the one found in installments when it is just in the form of a single dropdown, do we want to add an id that links to a label's for attr
+            // If we allow an id to be added to the buttons in CtPCardsList, for example, unit tests start failing because it seems a button with an id no longer has a name property that can be used
+            // as a qualifier in findByRole
+            {...(props.allowIdOnButton && props.id && { id: props.id })}
         >
             {!props.filterable ? (
                 <Fragment>
diff --git a/packages/lib/src/components/internal/FormFields/Select/types.ts b/packages/lib/src/components/internal/FormFields/Select/types.ts
index a4b4d645d0..43aca5fcf1 100644
--- a/packages/lib/src/components/internal/FormFields/Select/types.ts
+++ b/packages/lib/src/components/internal/FormFields/Select/types.ts
@@ -39,6 +39,7 @@ export interface SelectProps {
     clearOnSelect?: boolean;
     blurOnClose?: boolean;
     onListToggle?: (isOpen: boolean) => void;
+    allowIdOnButton?: boolean;
 }
 
 export interface SelectButtonProps {
@@ -61,6 +62,7 @@ export interface SelectButtonProps {
     id?: string;
     ariaDescribedBy: string;
     disabled: boolean;
+    allowIdOnButton?: boolean;
 }
 
 export interface SelectListProps {

From c15236867e892cbd60fa1b498ea7ebe5a0a22bac Mon Sep 17 00:00:00 2001
From: nicholas <nicholas.spong@adyen.com>
Date: Mon, 15 Jul 2024 16:16:42 +0200
Subject: [PATCH 07/10] Fixing issue with enhancing chilfren with a uniqueId in
 Fieldset and Riverty's readonly deliveryAddress

---
 .../CardInput/components/Installments/Installments.tsx |  7 +------
 .../internal/FormFields/Fieldset/Fieldset.tsx          | 10 ++++++----
 2 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/packages/lib/src/components/Card/components/CardInput/components/Installments/Installments.tsx b/packages/lib/src/components/Card/components/CardInput/components/Installments/Installments.tsx
index ccca313b67..32f10dbcf4 100644
--- a/packages/lib/src/components/Card/components/CardInput/components/Installments/Installments.tsx
+++ b/packages/lib/src/components/Card/components/CardInput/components/Installments/Installments.tsx
@@ -80,12 +80,7 @@ function Installments(props: InstallmentsProps) {
     if (hasRadioButtonUI) {
         return (
             <div className="adyen-checkout__installments">
-                <Field
-                    label={i18n.get('installments')}
-                    classNameModifiers={['installments']}
-                    name={'installmentsPseudoLabel'}
-                    addContextualElement={false}
-                >
+                <Field label={i18n.get('installments')} classNameModifiers={['installments']} name={'installments'} addContextualElement={false}>
                     <Fieldset classNameModifiers={['revolving-plan']} label={''}>
                         <RadioGroup
                             items={[
diff --git a/packages/lib/src/components/internal/FormFields/Fieldset/Fieldset.tsx b/packages/lib/src/components/internal/FormFields/Fieldset/Fieldset.tsx
index f009ad6d92..bc28c2f2f2 100644
--- a/packages/lib/src/components/internal/FormFields/Fieldset/Fieldset.tsx
+++ b/packages/lib/src/components/internal/FormFields/Fieldset/Fieldset.tsx
@@ -24,14 +24,16 @@ export default function Fieldset({ children, classNameModifiers = [], label, rea
         >
             {label && <legend className="adyen-checkout__fieldset__title">{i18n.get(label)}</legend>}
 
-            <div className="adyen-checkout__fieldset__fields">
-                {toChildArray(children).map((child: ComponentChild): ComponentChild => {
+            {props.uniqueId ? (
+                toChildArray(children).map((child: ComponentChild): ComponentChild => {
                     const childProps = {
                         ...(props.uniqueId && { uniqueId: props.uniqueId }) // propagate the uniqueId, if we've been given one
                     };
                     return cloneElement(child as VNode, childProps);
-                })}
-            </div>
+                })
+            ) : (
+                <div className="adyen-checkout__fieldset__fields">{children}</div>
+            )}
         </fieldset>
     );
 }

From 1696013f6e988ce77c7dfbbcedf5e633804fc6d0 Mon Sep 17 00:00:00 2001
From: nicholas <nicholas.spong@adyen.com>
Date: Mon, 15 Jul 2024 16:53:40 +0200
Subject: [PATCH 08/10] Wrapped readonly address in a Fragment

---
 .../Address/components/ReadOnlyAddress.tsx     | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/lib/src/components/internal/Address/components/ReadOnlyAddress.tsx b/packages/lib/src/components/internal/Address/components/ReadOnlyAddress.tsx
index e41784b722..90f7a64d82 100644
--- a/packages/lib/src/components/internal/Address/components/ReadOnlyAddress.tsx
+++ b/packages/lib/src/components/internal/Address/components/ReadOnlyAddress.tsx
@@ -19,14 +19,16 @@ const ReadOnlyAddress = ({ data, label }: ReadOnlyAddressProps) => {
 
     return (
         <Fieldset classNameModifiers={[label]} label={label} readonly>
-            {hasName && <FullName firstName={firstName} lastName={lastName}></FullName>}
-            {!!street && street}
-            {houseNumberOrName && `, ${houseNumberOrName},`}
-            <br />
-            {postalCode && `${postalCode}`}
-            {city && `, ${city}`}
-            {stateOrProvince && stateOrProvince !== FALLBACK_VALUE && `, ${stateOrProvince}`}
-            {country && `, ${country} `}
+            <Fragment>
+                {hasName && <FullName firstName={firstName} lastName={lastName}></FullName>}
+                {!!street && street}
+                {houseNumberOrName && `, ${houseNumberOrName},`}
+                <br />
+                {postalCode && `${postalCode}`}
+                {city && `, ${city}`}
+                {stateOrProvince && stateOrProvince !== FALLBACK_VALUE && `, ${stateOrProvince}`}
+                {country && `, ${country} `}
+            </Fragment>
         </Fieldset>
     );
 };

From 504145c30ada4df5d202e9503e4ffd2ef3cbc972 Mon Sep 17 00:00:00 2001
From: nicholas <nicholas.spong@adyen.com>
Date: Mon, 15 Jul 2024 16:54:43 +0200
Subject: [PATCH 09/10] Fieldset - ensure children are always wrapped in a
 containing div

---
 .../internal/FormFields/Fieldset/Fieldset.tsx        | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/lib/src/components/internal/FormFields/Fieldset/Fieldset.tsx b/packages/lib/src/components/internal/FormFields/Fieldset/Fieldset.tsx
index bc28c2f2f2..7b8b4269d4 100644
--- a/packages/lib/src/components/internal/FormFields/Fieldset/Fieldset.tsx
+++ b/packages/lib/src/components/internal/FormFields/Fieldset/Fieldset.tsx
@@ -24,13 +24,13 @@ export default function Fieldset({ children, classNameModifiers = [], label, rea
         >
             {label && <legend className="adyen-checkout__fieldset__title">{i18n.get(label)}</legend>}
 
+            {/*propagate the uniqueId, if we've been given one*/}
             {props.uniqueId ? (
-                toChildArray(children).map((child: ComponentChild): ComponentChild => {
-                    const childProps = {
-                        ...(props.uniqueId && { uniqueId: props.uniqueId }) // propagate the uniqueId, if we've been given one
-                    };
-                    return cloneElement(child as VNode, childProps);
-                })
+                <div className="adyen-checkout__fieldset__fields">
+                    {toChildArray(children).map((child: ComponentChild): ComponentChild => {
+                        return cloneElement(child as VNode, { uniqueId: props.uniqueId });
+                    })}
+                </div>
             ) : (
                 <div className="adyen-checkout__fieldset__fields">{children}</div>
             )}

From 045bb622319c7f9023d5723865798720605ab565 Mon Sep 17 00:00:00 2001
From: nicholas <nicholas.spong@adyen.com>
Date: Tue, 16 Jul 2024 14:30:59 +0200
Subject: [PATCH 10/10] Stopped using label...for with the RadioGroup. Instead,
 directly set aria-label on the RadioGroup element

---
 .../components/Installments/Installments.tsx     | 11 ++++++++++-
 .../internal/FormFields/Fieldset/Fieldset.tsx    | 16 +++-------------
 .../FormFields/RadioGroup/RadioGroup.tsx         |  4 ++--
 .../internal/FormFields/RadioGroup/types.ts      |  1 +
 4 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/packages/lib/src/components/Card/components/CardInput/components/Installments/Installments.tsx b/packages/lib/src/components/Card/components/CardInput/components/Installments/Installments.tsx
index 32f10dbcf4..362c5db6c3 100644
--- a/packages/lib/src/components/Card/components/CardInput/components/Installments/Installments.tsx
+++ b/packages/lib/src/components/Card/components/CardInput/components/Installments/Installments.tsx
@@ -7,6 +7,7 @@ import Fieldset from '../../../../../internal/FormFields/Fieldset/Fieldset';
 import RadioGroup from '../../../../../internal/FormFields/RadioGroup';
 import styles from '../../CardInput.module.scss';
 import Select from '../../../../../internal/FormFields/Select';
+import { alternativeLabelContent } from '../IframeLabelAlternative';
 
 export interface InstallmentsObj {
     value: number;
@@ -80,7 +81,14 @@ function Installments(props: InstallmentsProps) {
     if (hasRadioButtonUI) {
         return (
             <div className="adyen-checkout__installments">
-                <Field label={i18n.get('installments')} classNameModifiers={['installments']} name={'installments'} addContextualElement={false}>
+                <Field
+                    label={i18n.get('installments')}
+                    classNameModifiers={['installments']}
+                    name={'installmentsPseudoLabel'}
+                    useLabelElement={false}
+                    addContextualElement={false}
+                    renderAlternativeToLabel={alternativeLabelContent}
+                >
                     <Fieldset classNameModifiers={['revolving-plan']} label={''}>
                         <RadioGroup
                             items={[
@@ -90,6 +98,7 @@ function Installments(props: InstallmentsProps) {
                             ]}
                             onChange={onRadioSelect}
                             value={radioBtnValue}
+                            ariaLabel={i18n.get('installments')}
                         />
 
                         <Field
diff --git a/packages/lib/src/components/internal/FormFields/Fieldset/Fieldset.tsx b/packages/lib/src/components/internal/FormFields/Fieldset/Fieldset.tsx
index 7b8b4269d4..a399458b9a 100644
--- a/packages/lib/src/components/internal/FormFields/Fieldset/Fieldset.tsx
+++ b/packages/lib/src/components/internal/FormFields/Fieldset/Fieldset.tsx
@@ -1,4 +1,4 @@
-import { h, ComponentChildren, toChildArray, ComponentChild, cloneElement, VNode } from 'preact';
+import { h, ComponentChildren } from 'preact';
 import cx from 'classnames';
 import useCoreContext from '../../../../core/Context/useCoreContext';
 import './Fieldset.scss';
@@ -8,10 +8,9 @@ interface FieldsetProps {
     classNameModifiers: string[];
     label: string;
     readonly?: boolean;
-    uniqueId?: string;
 }
 
-export default function Fieldset({ children, classNameModifiers = [], label, readonly = false, ...props }: FieldsetProps) {
+export default function Fieldset({ children, classNameModifiers = [], label, readonly = false }: FieldsetProps) {
     const { i18n } = useCoreContext();
 
     return (
@@ -24,16 +23,7 @@ export default function Fieldset({ children, classNameModifiers = [], label, rea
         >
             {label && <legend className="adyen-checkout__fieldset__title">{i18n.get(label)}</legend>}
 
-            {/*propagate the uniqueId, if we've been given one*/}
-            {props.uniqueId ? (
-                <div className="adyen-checkout__fieldset__fields">
-                    {toChildArray(children).map((child: ComponentChild): ComponentChild => {
-                        return cloneElement(child as VNode, { uniqueId: props.uniqueId });
-                    })}
-                </div>
-            ) : (
-                <div className="adyen-checkout__fieldset__fields">{children}</div>
-            )}
+            <div className="adyen-checkout__fieldset__fields">{children}</div>
         </fieldset>
     );
 }
diff --git a/packages/lib/src/components/internal/FormFields/RadioGroup/RadioGroup.tsx b/packages/lib/src/components/internal/FormFields/RadioGroup/RadioGroup.tsx
index 4c6fddfb38..37118e60b5 100644
--- a/packages/lib/src/components/internal/FormFields/RadioGroup/RadioGroup.tsx
+++ b/packages/lib/src/components/internal/FormFields/RadioGroup/RadioGroup.tsx
@@ -6,13 +6,13 @@ import { getUniqueId } from '../../../../utils/idGenerator';
 import useCoreContext from '../../../../core/Context/useCoreContext';
 
 export default function RadioGroup(props: RadioGroupProps) {
-    const { items, name, onChange, value, isInvalid, uniqueId } = props;
+    const { items, name, onChange, value, isInvalid, uniqueId, ariaLabel } = props;
 
     const { i18n } = useCoreContext();
     const uniqueIdBase = uniqueId?.replace(/[0-9]/g, '').substring(0, uniqueId.lastIndexOf('-'));
 
     return (
-        <div className="adyen-checkout__radio_group" role={'radiogroup'} {...(props.uniqueId && { id: props.uniqueId })}>
+        <div className="adyen-checkout__radio_group" role={'radiogroup'} {...(ariaLabel && { ['aria-label']: ariaLabel })}>
             {items.map(item => {
                 const uniqueId = getUniqueId(uniqueIdBase);
                 return (
diff --git a/packages/lib/src/components/internal/FormFields/RadioGroup/types.ts b/packages/lib/src/components/internal/FormFields/RadioGroup/types.ts
index c40159c1b4..1db3a02346 100644
--- a/packages/lib/src/components/internal/FormFields/RadioGroup/types.ts
+++ b/packages/lib/src/components/internal/FormFields/RadioGroup/types.ts
@@ -13,4 +13,5 @@ export interface RadioGroupProps extends InputBaseProps {
     onChange: (e) => void;
     value?: string;
     uniqueId?: string;
+    ariaLabel?: string;
 }