From 09df8a09b7ad171ed9e062c74812cc9d78b9807f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ant=C3=B3nio=20Ferreira?= <m1aw@users.noreply.github.com>
Date: Mon, 5 Jun 2023 15:15:50 +0200
Subject: [PATCH] Fixes mismatched label for Selectbox (#2205)

* fixes mismatched label for selectbox

* fix getByTitle tests

* fix missing test

* add changeset
---
 .changeset/short-poets-wonder.md                   |  5 +++++
 .../components/Installments/Installments.test.tsx  | 14 +++++++-------
 .../FormFields/Select/components/SelectButton.tsx  |  8 +++-----
 3 files changed, 15 insertions(+), 12 deletions(-)
 create mode 100644 .changeset/short-poets-wonder.md

diff --git a/.changeset/short-poets-wonder.md b/.changeset/short-poets-wonder.md
new file mode 100644
index 00000000..4ce15f3e
--- /dev/null
+++ b/.changeset/short-poets-wonder.md
@@ -0,0 +1,5 @@
+---
+'@adyen/adyen-web': patch
+---
+
+Fixes for/id in the label of the select field pointing to the outer div instead of the correct combobox input
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 1dbe7ccc..0ca4ce6c 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
@@ -56,7 +56,7 @@ describe('Installments', () => {
         const props = { amount, installmentOptions, type: 'amount' };
 
         render(<Installments {...props} />);
-        expect(await screen.findByTitle('1x $300.00')).toBeTruthy();
+        expect(await screen.findByRole('button')).toHaveTextContent('1x $300.00');
     });
 
     describe('On brand change', () => {
@@ -80,9 +80,9 @@ describe('Installments', () => {
                 };
                 const props = { amount, installmentOptions, type };
                 const { rerender } = render(<Installments {...props} />);
-                expect(await screen.findByTitle('2x $150.00')).toBeTruthy();
+                expect(await screen.findByRole('button')).toHaveTextContent('2x $150.00');
                 rerender(<Installments brand={'visa'} {...props} />);
-                expect(await screen.findByTitle('2x $150.00')).toBeTruthy();
+                expect(await screen.findByRole('button')).toHaveTextContent('2x $150.00');
             });
         });
 
@@ -100,9 +100,9 @@ describe('Installments', () => {
                 };
                 const props = { amount, installmentOptions, type };
                 const { rerender } = render(<Installments {...props} />);
-                expect(await screen.findByTitle('4x $75.00')).toBeTruthy();
+                expect(await screen.findByRole('button')).toHaveTextContent('4x $75.00');
                 rerender(<Installments brand={'visa'} {...props} />);
-                expect(await screen.findByTitle('2x $150.00')).toBeTruthy();
+                expect(await screen.findByRole('button')).toHaveTextContent('2x $150.00');
             });
 
             test('should preselect the first installments', async () => {
@@ -117,9 +117,9 @@ describe('Installments', () => {
                 };
                 const props = { amount, installmentOptions, type };
                 const { rerender } = render(<Installments {...props} />);
-                expect(await screen.findByTitle('4x $75.00')).toBeTruthy();
+                expect(await screen.findByRole('button')).toHaveTextContent('4x $75.00');
                 rerender(<Installments brand={'visa'} {...props} />);
-                expect(await screen.findByTitle('1x $300.00')).toBeTruthy();
+                expect(await screen.findByRole('button')).toHaveTextContent('1x $300.00');
             });
         });
     });
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 87b13de5..b4343cb9 100644
--- a/packages/lib/src/components/internal/FormFields/Select/components/SelectButton.tsx
+++ b/packages/lib/src/components/internal/FormFields/Select/components/SelectButton.tsx
@@ -8,7 +8,7 @@ import Img from '../../../Img';
 function SelectButtonElement({ filterable, toggleButtonRef, ...props }) {
     if (filterable) return <div {...props} ref={toggleButtonRef} />;
 
-    return <button {...props} ref={toggleButtonRef} />;
+    return <button id={props.id} aria-describedby={props.ariaDescribedBy} type={'button'} {...props} ref={toggleButtonRef} />;
 }
 
 function SelectButton(props: SelectButtonProps) {
@@ -54,11 +54,7 @@ function SelectButton(props: SelectButtonProps) {
             filterable={props.filterable}
             onClick={onClickHandler}
             onKeyDown={!readonly ? props.onButtonKeyDown : null}
-            title={selected.name || props.placeholder}
             toggleButtonRef={props.toggleButtonRef}
-            type={!props.filterable ? 'button' : null}
-            aria-describedby={props.ariaDescribedBy}
-            id={props.id}
         >
             {!props.filterable ? (
                 <Fragment>
@@ -85,6 +81,8 @@ function SelectButton(props: SelectButtonProps) {
                         aria-activedescendant={`listItem-${active.id}`}
                         type="text"
                         readOnly={props.readonly}
+                        id={props.id}
+                        aria-describedby={props.ariaDescribedBy}
                     />
                     {!showList && selected.secondaryText && (
                         <span className="adyen-checkout__dropdown__button__secondary-text">{selected.secondaryText}</span>