Installments component shows a translatable label above its fields

.changeset/chilly-bikes-begin.md

@@ -0,0 +1,5 @@
+---
+"@adyen/adyen-web": patch
+---
+
+Installments component shows a translatable label above its fields

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

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', () => {

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,58 +81,63 @@ 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}
+                            ariaLabel={i18n.get('installments')}
                         />
-                    </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>
         );
     }
 
     return (
         <div className="adyen-checkout__installments">
-            <Field
-                label={i18n.get('installments')}
-                classNameModifiers={['installments']}
-                name={''}
-                useLabelElement={false}
-                addContextualElement={false}
-            >
+            <Field label={i18n.get('installments')} classNameModifiers={['installments']} name={'installments'} addContextualElement={false}>
                 <Select
                     filterable={false}
                     items={installmentOptions.values.map(installmentItemsMapper)}
                     selectedValue={installmentAmount}
                     onChange={onSelectInstallment}
                     name={'installments'}
                     readonly={installmentOptions?.values?.length === 1}
+                    allowIdOnButton={true}
                 />
             </Field>
         </div>

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

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']}

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,8 +170,8 @@ 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
-                <label {...defaultWrapperProps} {...(!isSecuredField && { htmlFor: name && uniqueId })}>
+                // if we are NOT dealing with the label for a securedField... we can give it a `for` attribute
+                <label {...defaultWrapperProps} {...(!isSecuredField && name && { htmlFor: uniqueId })}>
                     {children}
                 </label>
             ) : (

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">
+        <div className="adyen-checkout__radio_group" role={'radiogroup'} {...(ariaLabel && { ['aria-label']: ariaLabel })}>
             {items.map(item => {
                 const uniqueId = getUniqueId(uniqueIdBase);
                 return (

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

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}

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,6 +62,10 @@ function SelectButton(props: Readonly<SelectButtonProps>) {
             onClick={onClickHandler}
             onKeyDown={!readonly ? props.onButtonKeyDown : null}
             toggleButtonRef={props.toggleButtonRef}
+            // 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>

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 {