diff --git a/packages/account/src/Components/address-details/__tests__/address-details.spec.tsx b/packages/account/src/Components/address-details/__tests__/address-details.spec.tsx
index b9dbde92873b..1deb87a55a92 100644
--- a/packages/account/src/Components/address-details/__tests__/address-details.spec.tsx
+++ b/packages/account/src/Components/address-details/__tests__/address-details.spec.tsx
@@ -127,7 +127,7 @@ describe('', () => {
expect(mock_props.onCancel).toHaveBeenCalledTimes(1);
expect(mock_props.onSave).toHaveBeenCalledTimes(1);
- const address_line_1_input: HTMLInputElement = screen.getByPlaceholderText(address_line_1);
+ const address_line_1_input: HTMLInputElement = screen.getByLabelText(address_line_1_marked);
const first_line_adress_text = 'Test first line address';
expect(address_line_1_input.value).toBe('');
fireEvent.change(address_line_1_input, { target: { value: first_line_adress_text } });
@@ -135,7 +135,7 @@ describe('', () => {
expect(address_line_1_input.value).toBe(first_line_adress_text);
});
- const address_town_input: HTMLInputElement = screen.getByPlaceholderText(address_town);
+ const address_town_input: HTMLInputElement = screen.getByLabelText(address_town_marked);
const address_town_text = 'Test city';
expect(address_town_input.value).toBe('');
fireEvent.change(address_town_input, { target: { value: address_town_text } });
@@ -143,7 +143,7 @@ describe('', () => {
expect(address_town_input.value).toBe(address_town_text);
});
- const address_postcode_input: HTMLInputElement = screen.getByPlaceholderText(address_postcode);
+ const address_postcode_input: HTMLInputElement = screen.getByLabelText(address_postcode);
const address_postcode_text = 'Test postcode';
expect(address_postcode_input.value).toBe('');
fireEvent.change(address_postcode_input, { target: { value: address_postcode_text } });
@@ -151,7 +151,7 @@ describe('', () => {
expect(address_postcode_input.value).toBe(address_postcode_text);
});
- const address_state_input: HTMLInputElement = screen.getByPlaceholderText(address_state);
+ const address_state_input: HTMLInputElement = screen.getByLabelText(address_state);
const address_state_text = 'Test state';
expect(address_state_input.value).toBe('Default test state');
fireEvent.change(address_state_input, { target: { value: address_state_text } });
@@ -271,12 +271,12 @@ describe('', () => {
render();
- expect(screen.getByPlaceholderText(address_line_1)).toBeDisabled();
- expect(screen.getByPlaceholderText(address_line_2)).toBeDisabled();
+ expect(screen.getByLabelText(address_line_1)).toBeDisabled();
+ expect(screen.getByLabelText(address_line_2)).toBeDisabled();
await waitFor(() => {
expect(screen.getByRole('textbox', { name: 'State/Province' })).toBeEnabled();
});
- expect(screen.getByPlaceholderText(address_town)).toBeEnabled();
- expect(screen.getByPlaceholderText(address_postcode)).toBeEnabled();
+ expect(screen.getByLabelText(address_town)).toBeEnabled();
+ expect(screen.getByLabelText(address_postcode)).toBeEnabled();
});
});
diff --git a/packages/account/src/Components/personal-details/__tests__/personal-details.spec.js b/packages/account/src/Components/personal-details/__tests__/personal-details.spec.js
index 210729fc956b..e887bfdb5d84 100644
--- a/packages/account/src/Components/personal-details/__tests__/personal-details.spec.js
+++ b/packages/account/src/Components/personal-details/__tests__/personal-details.spec.js
@@ -62,17 +62,14 @@ const runCommonFormfieldsTests = () => {
expect(screen.queryByTestId('tax_residence')).toBeInTheDocument();
expect(screen.queryByTestId('tax_residence_mobile')).not.toBeInTheDocument();
- expect(screen.getByPlaceholderText(/john/i)).toBeInTheDocument();
expect(
screen.getByText(/Please enter your first name as in your official identity documents./i)
).toBeInTheDocument();
- expect(screen.getByPlaceholderText('Doe')).toBeInTheDocument();
expect(
screen.getByText(/Please enter your last name as in your official identity documents./i)
).toBeInTheDocument();
- expect(screen.getByPlaceholderText(/01-07-1999/i)).toBeInTheDocument();
expect(
screen.getByText(/Please enter your date of birth as in your official identity documents./i)
).toBeInTheDocument();
@@ -88,7 +85,7 @@ const runCommonFormfieldsTests = () => {
expect(screen.getByText(tax_residence_pop_over_text)).toBeInTheDocument();
- expect(screen.getByPlaceholderText(/tax identification number/i)).toBeInTheDocument();
+ expect(screen.getByLabelText(/tax identification number/i)).toBeInTheDocument();
const tax_identification_number_pop_over = screen.queryByTestId('tax_identification_number_pop_over');
expect(tax_identification_number_pop_over).toBeInTheDocument();
@@ -337,7 +334,7 @@ describe('', () => {
expect(screen.getByText(/family name\*/i)).toBeInTheDocument();
expect(screen.getByText(/date of birth\*/i)).toBeInTheDocument();
expect(screen.getByText(/phone number\*/i)).toBeInTheDocument();
- expect(screen.getByPlaceholderText(/phone number\*/i)).toBeInTheDocument();
+ expect(screen.getByLabelText(/phone number\*/i)).toBeInTheDocument();
runCommonFormfieldsTests();
});
@@ -355,7 +352,7 @@ describe('', () => {
expect(screen.getByText(/last name\*/i)).toBeInTheDocument();
expect(screen.getByText(/date of birth\*/i)).toBeInTheDocument();
expect(screen.getByText(/phone number\*/i)).toBeInTheDocument();
- expect(screen.getByPlaceholderText(/phone number\*/i)).toBeInTheDocument();
+ expect(screen.getByLabelText(/phone number\*/i)).toBeInTheDocument();
runCommonFormfieldsTests();
});
@@ -374,7 +371,7 @@ describe('', () => {
expect(screen.getByText('Last name')).toBeInTheDocument();
expect(screen.getByText('Date of birth')).toBeInTheDocument();
expect(screen.getByText('Phone number')).toBeInTheDocument();
- expect(screen.getByPlaceholderText('Phone number')).toBeInTheDocument();
+ expect(screen.getByLabelText('Phone number')).toBeInTheDocument();
runCommonFormfieldsTests();
});
@@ -443,7 +440,7 @@ describe('', () => {
expect(screen.queryByTestId('tax_residence_mobile')).toBeInTheDocument();
expect(screen.queryByTestId('tax_residence')).not.toBeInTheDocument();
expect(screen.getByText(/tax identification number/i)).toBeInTheDocument();
- expect(screen.getByPlaceholderText(/tax identification number/i)).toBeInTheDocument();
+ expect(screen.getByLabelText(/tax identification number/i)).toBeInTheDocument();
expect(screen.getByRole('heading', { name: /account opening reason/i })).toBeInTheDocument();
expect(screen.queryByTestId('dti_dropdown_display')).not.toBeInTheDocument();
expect(screen.queryByTestId('account_opening_reason_mobile')).toBeInTheDocument();
diff --git a/packages/account/src/Components/poi/idv-document-submit/__tests__/idv-document-submit.spec.tsx b/packages/account/src/Components/poi/idv-document-submit/__tests__/idv-document-submit.spec.tsx
index cd91cddbcb05..0ad15477f156 100644
--- a/packages/account/src/Components/poi/idv-document-submit/__tests__/idv-document-submit.spec.tsx
+++ b/packages/account/src/Components/poi/idv-document-submit/__tests__/idv-document-submit.spec.tsx
@@ -93,7 +93,7 @@ describe('', () => {
expect(mock_props.handleBack).toHaveBeenCalledTimes(1);
const document_type_input = screen.getByLabelText('Choose the document type');
- const document_number_input = screen.getByPlaceholderText('Enter your document number');
+ const document_number_input = screen.getByLabelText('Enter your document number');
expect(document_number_input).toBeDisabled();
expect(screen.queryByText('Test document 1 name')).not.toBeInTheDocument();
expect(screen.queryByText('Test document 2 name')).not.toBeInTheDocument();
@@ -122,7 +122,7 @@ describe('', () => {
const document_type_input = screen.getByRole('combobox');
expect(document_type_input.name).toBe('document_type');
- const document_number_input = screen.getByPlaceholderText('Enter your document number');
+ const document_number_input = screen.getByLabelText('Enter your document number');
expect(document_number_input.name).toBe('document_number');
expect(document_number_input).toBeDisabled();
diff --git a/packages/cfd/src/Components/__tests__/cfd-poa.spec.js b/packages/cfd/src/Components/__tests__/cfd-poa.spec.js
index a676ac458d63..802897bcc797 100644
--- a/packages/cfd/src/Components/__tests__/cfd-poa.spec.js
+++ b/packages/cfd/src/Components/__tests__/cfd-poa.spec.js
@@ -66,7 +66,7 @@ const error_messages = {
describe('', () => {
const address = {
address_line_1: 'First line of address*',
- address_line_2: 'Second line of address',
+ address_line_2: 'Second line of address (optional)',
address_postcode: 'Postal/ZIP code',
address_state: 'State/Province',
address_town: 'Town/City*',
@@ -181,11 +181,11 @@ describe('', () => {
expect(await screen.findByText(/Address information/i)).toBeInTheDocument();
- const address_line_1_input = screen.getByPlaceholderText(address.address_line_1);
- const address_line_2_input = screen.getByPlaceholderText(address.address_line_2);
- const address_town_input = screen.getByPlaceholderText(address.address_town);
- const address_state_input = screen.getByPlaceholderText(address.address_state);
- const address_postcode_input = screen.getByPlaceholderText(address.address_postcode);
+ const address_line_1_input = screen.getByLabelText(address.address_line_1);
+ const address_line_2_input = screen.getByLabelText(address.address_line_2);
+ const address_town_input = screen.getByLabelText(address.address_town);
+ const address_state_input = screen.getByLabelText(address.address_state);
+ const address_postcode_input = screen.getByLabelText(address.address_postcode);
expect(address_line_1_input.value).toBe('dead end');
expect(address_line_2_input.value).toBe('Psycho Path');
@@ -199,8 +199,8 @@ describe('', () => {
expect(await screen.findByText(/Address information/i)).toBeInTheDocument();
- const address_line_1_input = screen.getByPlaceholderText(address.address_line_1);
- const address_town_input = screen.getByPlaceholderText(address.address_town);
+ const address_line_1_input = screen.getByLabelText(address.address_line_1);
+ const address_town_input = screen.getByLabelText(address.address_town);
fireEvent.blur(address_line_1_input);
fireEvent.blur(address_town_input);
diff --git a/packages/components/src/components/input/input.tsx b/packages/components/src/components/input/input.tsx
index 01c6a4fa6e2e..31e24c7026a3 100644
--- a/packages/components/src/components/input/input.tsx
+++ b/packages/components/src/components/input/input.tsx
@@ -78,6 +78,7 @@ const Input = React.forwardRef
@@ -128,12 +130,13 @@ const Input = React.forwardRef
) : (
)}
{trailing_icon &&