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();
- 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();
- expect(await screen.findByTitle('2x $150.00')).toBeTruthy();
+ expect(await screen.findByRole('button')).toHaveTextContent('2x $150.00');
rerender();
- 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();
- expect(await screen.findByTitle('4x $75.00')).toBeTruthy();
+ expect(await screen.findByRole('button')).toHaveTextContent('4x $75.00');
rerender();
- 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();
- expect(await screen.findByTitle('4x $75.00')).toBeTruthy();
+ expect(await screen.findByRole('button')).toHaveTextContent('4x $75.00');
rerender();
- 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
;
- return ;
+ return ;
}
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 ? (
@@ -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 && (
{selected.secondaryText}