jlengrand/adyen-web
1
0
Fork 0
mirror of https://github.com/jlengrand/adyen-web.git synced 2026-03-10 08:01:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixes mismatched label for Selectbox (#2205)

Browse Source 
* fixes mismatched label for selectbox

* fix getByTitle tests

* fix missing test

* add changeset
This commit is contained in:
António Ferreira
2023-06-05 15:15:50 +02:00
committed by GitHub
parent 90586a123a
commit 09df8a09b7
3 changed files with 15 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/short-poets-wonder.md Normal file
View File

@@ -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

14
packages/lib/src/components/Card/components/CardInput/components/Installments/Installments.test.tsx
View File

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

8
packages/lib/src/components/internal/FormFields/Select/components/SelectButton.tsx
View File

@@ -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>