@scality/data-browser-library 1.0.4 → 1.0.6

package/dist/components/__tests__/BucketReplicationFormPage.test.js

@@ -55,8 +55,12 @@ describe('BucketReplicationFormPage', ()=>{
     const mockMutate = jest.fn();
     const fillRequiredFields = async (options)=>{
         const { roleArn = 'arn:aws:iam::123456789012:role/replication-role', ruleId, targetBucket = 'destination-bucket' } = options;
-        await user_event.type(screen.getByLabelText(/role arn/i), roleArn);
-        await user_event.type(screen.getByLabelText(/rule id/i), ruleId);
+        await user_event.type(screen.getByRole('textbox', {
+            name: /role arn/i
+        }), roleArn);
+        await user_event.type(screen.getByRole('textbox', {
+            name: /rule id/i
+        }), ruleId);
         const targetBucketSelect = screen.getByLabelText(/target bucket/i);
         await user_event.click(targetBucketSelect);
         await user_event.click(screen.getByRole('option', {
@@ -147,8 +151,12 @@ describe('BucketReplicationFormPage', ()=>{
         it('displays all form sections', async ()=>{
             renderBucketReplicationFormPage();
             await waitFor(()=>{
-                expect(screen.getByLabelText(/role arn/i)).toBeInTheDocument();
-                expect(screen.getByLabelText(/rule id/i)).toBeInTheDocument();
+                expect(screen.getByRole('textbox', {
+                    name: /role arn/i
+                })).toBeInTheDocument();
+                expect(screen.getByRole('textbox', {
+                    name: /rule id/i
+                })).toBeInTheDocument();
                 expect(screen.getByText('Replicate encrypted objects')).toBeInTheDocument();
                 expect(screen.getByText('Delete marker replication')).toBeInTheDocument();
             });
@@ -157,14 +165,20 @@ describe('BucketReplicationFormPage', ()=>{
     describe('Form Fields - Initial State', ()=>{
         it('renders required form fields in create mode', ()=>{
             renderBucketReplicationFormPage();
-            expect(screen.getByLabelText(/role arn/i)).toBeInTheDocument();
-            expect(screen.getByLabelText(/rule id/i)).toBeInTheDocument();
+            expect(screen.getByRole('textbox', {
+                name: /role arn/i
+            })).toBeInTheDocument();
+            expect(screen.getByRole('textbox', {
+                name: /rule id/i
+            })).toBeInTheDocument();
             expect(screen.getByLabelText(/status/i)).toBeInTheDocument();
             expect(screen.getByLabelText(/target bucket/i)).toBeInTheDocument();
         });
         it('shows Role ARN input when no existing rules', ()=>{
             renderBucketReplicationFormPage();
-            const roleInput = screen.getByLabelText(/role arn/i);
+            const roleInput = screen.getByRole('textbox', {
+                name: /role arn/i
+            });
             expect(roleInput).toBeInTheDocument();
             expect(roleInput.tagName).toBe('INPUT');
         });
@@ -194,7 +208,9 @@ describe('BucketReplicationFormPage', ()=>{
         });
         it('shows Rule ID input in create mode', ()=>{
             renderBucketReplicationFormPage();
-            const ruleIdInput = screen.getByLabelText(/rule id/i);
+            const ruleIdInput = screen.getByRole('textbox', {
+                name: /rule id/i
+            });
             expect(ruleIdInput).toBeInTheDocument();
             expect(ruleIdInput.tagName).toBe('INPUT');
         });
@@ -229,14 +245,18 @@ describe('BucketReplicationFormPage', ()=>{
         it('renders Status select field', async ()=>{
             renderBucketReplicationFormPage();
             await waitFor(()=>{
-                expect(screen.getByLabelText(/rule id/i)).toBeInTheDocument();
+                expect(screen.getByRole('textbox', {
+                    name: /rule id/i
+                })).toBeInTheDocument();
             });
             const statusElement = document.querySelector('[id="status"]');
             expect(statusElement).toBeInTheDocument();
         });
         it('renders Priority number input with auto-assigned placeholder', ()=>{
             renderBucketReplicationFormPage();
-            const priorityInput = screen.getByLabelText(/rule priority/i);
+            const priorityInput = screen.getByRole('spinbutton', {
+                name: /rule priority/i
+            });
             expect(priorityInput).toBeInTheDocument();
             expect(priorityInput).toHaveAttribute('placeholder', 'Example: Auto-assigned: 0');
         });
@@ -255,7 +275,9 @@ describe('BucketReplicationFormPage', ()=>{
         });
         it('renders storage class select with all options', async ()=>{
             renderBucketReplicationFormPage();
-            const storageClassSelect = screen.getByLabelText(/storage class/i);
+            const storageClassSelect = screen.getByLabelText(/storage class/i, {
+                selector: 'input'
+            });
             await user_event.click(storageClassSelect);
             expect(screen.getByRole('option', {
                 name: 'Same as source'
@@ -283,7 +305,9 @@ describe('BucketReplicationFormPage', ()=>{
     describe('Form Validation', ()=>{
         it('validates Role ARN is required for first replication rule', async ()=>{
             renderBucketReplicationFormPage();
-            const roleInput = screen.getByLabelText(/role arn/i);
+            const roleInput = screen.getByRole('textbox', {
+                name: /role arn/i
+            });
             await user_event.type(roleInput, 'test');
             await user_event.clear(roleInput);
             await waitFor(()=>{
@@ -310,7 +334,9 @@ describe('BucketReplicationFormPage', ()=>{
                 status: 'success'
             });
             renderBucketReplicationFormPage();
-            await user_event.type(screen.getByLabelText(/rule id/i), 'new-rule');
+            await user_event.type(screen.getByRole('textbox', {
+                name: /rule id/i
+            }), 'new-rule');
             const targetBucketSelect = screen.getByLabelText(/target bucket/i);
             await user_event.click(targetBucketSelect);
             await user_event.click(screen.getByRole('option', {
@@ -325,7 +351,9 @@ describe('BucketReplicationFormPage', ()=>{
         });
         it('validates Rule ID is required', async ()=>{
             renderBucketReplicationFormPage();
-            const ruleIdInput = screen.getByLabelText(/rule id/i);
+            const ruleIdInput = screen.getByRole('textbox', {
+                name: /rule id/i
+            });
             await user_event.type(ruleIdInput, 'test');
             await user_event.clear(ruleIdInput);
             await waitFor(()=>{
@@ -352,7 +380,9 @@ describe('BucketReplicationFormPage', ()=>{
                 status: 'success'
             });
             renderBucketReplicationFormPage();
-            const ruleIdInput = screen.getByLabelText(/rule id/i);
+            const ruleIdInput = screen.getByRole('textbox', {
+                name: /rule id/i
+            });
             await user_event.type(ruleIdInput, 'existing-rule');
             await waitFor(()=>{
                 expect(screen.getByText(/a rule with this id already exists/i)).toBeInTheDocument();
@@ -360,8 +390,12 @@ describe('BucketReplicationFormPage', ()=>{
         });
         it('validates Priority must be >= 0', async ()=>{
             renderBucketReplicationFormPage();
-            await user_event.type(screen.getByLabelText(/rule id/i), 'test-rule');
-            const priorityInput = screen.getByLabelText(/rule priority/i);
+            await user_event.type(screen.getByRole('textbox', {
+                name: /rule id/i
+            }), 'test-rule');
+            const priorityInput = screen.getByRole('spinbutton', {
+                name: /rule priority/i
+            });
             await user_event.clear(priorityInput);
             await user_event.type(priorityInput, '-1');
             await user_event.tab();
@@ -371,8 +405,12 @@ describe('BucketReplicationFormPage', ()=>{
         });
         it('disables submit button when Target Bucket is not selected', async ()=>{
             renderBucketReplicationFormPage();
-            await user_event.type(screen.getByLabelText(/role arn/i), 'arn:aws:iam::123456789012:role/role');
-            await user_event.type(screen.getByLabelText(/rule id/i), 'test-rule');
+            await user_event.type(screen.getByRole('textbox', {
+                name: /role arn/i
+            }), 'arn:aws:iam::123456789012:role/role');
+            await user_event.type(screen.getByRole('textbox', {
+                name: /rule id/i
+            }), 'test-rule');
             await waitFor(()=>{
                 const createButton = screen.getByRole('button', {
                     name: /create/i
@@ -385,7 +423,9 @@ describe('BucketReplicationFormPage', ()=>{
             const sameAccountToggle = findToggleByLabel('Same account destination');
             await user_event.click(sameAccountToggle);
             await waitFor(()=>{
-                expect(screen.getByLabelText(/target account id/i)).toBeInTheDocument();
+                expect(screen.getByRole('textbox', {
+                    name: /target account id/i
+                })).toBeInTheDocument();
             });
         });
         it('shows Replica KMS Key ID field when encryptReplicatedObjects is true', async ()=>{
@@ -393,7 +433,9 @@ describe('BucketReplicationFormPage', ()=>{
             const encryptToggle = findToggleByLabel('Encrypt replicated objects');
             await user_event.click(encryptToggle);
             await waitFor(()=>{
-                expect(screen.getByLabelText(/replica kms key id/i)).toBeInTheDocument();
+                expect(screen.getByRole('textbox', {
+                    name: /replica kms key id/i
+                })).toBeInTheDocument();
             });
         });
         it('shows prefix field when filterType is prefix', async ()=>{
@@ -409,7 +451,9 @@ describe('BucketReplicationFormPage', ()=>{
                 name: 'Prefix filter'
             }));
             await waitFor(()=>{
-                expect(screen.getByLabelText(/prefix/i)).toBeInTheDocument();
+                expect(screen.getByRole('textbox', {
+                    name: /prefix/i
+                })).toBeInTheDocument();
             });
         });
     });
@@ -505,7 +549,9 @@ describe('BucketReplicationFormPage', ()=>{
             const sameAccountToggle = findToggleByLabel('Same account destination');
             await user_event.click(sameAccountToggle);
             await waitFor(()=>{
-                expect(screen.getByLabelText(/target account id/i)).toBeInTheDocument();
+                expect(screen.getByRole('textbox', {
+                    name: /target account id/i
+                })).toBeInTheDocument();
             });
         });
         it('renders target bucket as Input for cross-account replication', async ()=>{
@@ -523,7 +569,9 @@ describe('BucketReplicationFormPage', ()=>{
             const encryptToggle = findToggleByLabel('Encrypt replicated objects');
             await user_event.click(encryptToggle);
             await waitFor(()=>{
-                expect(screen.getByLabelText(/replica kms key id/i)).toBeInTheDocument();
+                expect(screen.getByRole('textbox', {
+                    name: /replica kms key id/i
+                })).toBeInTheDocument();
             });
         });
     });
@@ -556,9 +604,15 @@ describe('BucketReplicationFormPage', ()=>{
         });
         it('submits complete replication rule with all optional fields', async ()=>{
             renderBucketReplicationFormPage();
-            await user_event.type(screen.getByLabelText(/role arn/i), 'arn:aws:iam::123456789012:role/replication-role');
-            await user_event.type(screen.getByLabelText(/rule id/i), 'complete-rule');
-            await user_event.type(screen.getByLabelText(/rule priority/i), '5');
+            await user_event.type(screen.getByRole('textbox', {
+                name: /role arn/i
+            }), 'arn:aws:iam::123456789012:role/replication-role');
+            await user_event.type(screen.getByRole('textbox', {
+                name: /rule id/i
+            }), 'complete-rule');
+            await user_event.type(screen.getByRole('spinbutton', {
+                name: /rule priority/i
+            }), '5');
             const filterSelect = document.querySelector('[id="filterType"]');
             await user_event.click(filterSelect);
             await waitFor(()=>{
@@ -570,15 +624,23 @@ describe('BucketReplicationFormPage', ()=>{
                 name: 'Prefix filter'
             }));
             await waitFor(()=>{
-                expect(screen.getByLabelText(/prefix/i)).toBeInTheDocument();
+                expect(screen.getByRole('textbox', {
+                    name: /prefix/i
+                })).toBeInTheDocument();
             });
-            await user_event.type(screen.getByLabelText(/prefix/i), 'logs/');
+            await user_event.type(screen.getByRole('textbox', {
+                name: /prefix/i
+            }), 'logs/');
             const sameAccountToggle = findToggleByLabel('Same account destination');
             await user_event.click(sameAccountToggle);
             await waitFor(()=>{
-                expect(screen.getByLabelText(/target account id/i)).toBeInTheDocument();
+                expect(screen.getByRole('textbox', {
+                    name: /target account id/i
+                })).toBeInTheDocument();
             });
-            await user_event.type(screen.getByLabelText(/target account id/i), '987654321098');
+            await user_event.type(screen.getByRole('textbox', {
+                name: /target account id/i
+            }), '987654321098');
             await user_event.type(screen.getByLabelText(/target bucket/i), 'cross-account-bucket');
             const storageClassSelect = document.querySelector('[id="storageClass"]');
             await user_event.click(storageClassSelect);
@@ -595,9 +657,13 @@ describe('BucketReplicationFormPage', ()=>{
             const includeEncryptedToggle = findToggleByLabel('Replicate encrypted objects');
             await user_event.click(includeEncryptedToggle);
             await waitFor(()=>{
-                expect(screen.getByLabelText(/replica kms key id/i)).toBeInTheDocument();
+                expect(screen.getByRole('textbox', {
+                    name: /replica kms key id/i
+                })).toBeInTheDocument();
             });
-            await user_event.type(screen.getByLabelText(/replica kms key id/i), 'arn:aws:kms:us-east-1:987654321098:key/12345678-1234-1234-1234-123456789012');
+            await user_event.type(screen.getByRole('textbox', {
+                name: /replica kms key id/i
+            }), 'arn:aws:kms:us-east-1:987654321098:key/12345678-1234-1234-1234-123456789012');
             const enforceRTCToggle = findToggleByLabel('Replication Time Control (RTC)');
             await user_event.click(enforceRTCToggle);
             const replicaModToggle = findToggleByLabel('Replica modification sync');
@@ -674,7 +740,9 @@ describe('BucketReplicationFormPage', ()=>{
                 status: 'success'
             });
             renderBucketReplicationFormPage();
-            await user_event.type(screen.getByLabelText(/rule id/i), 'new-rule');
+            await user_event.type(screen.getByRole('textbox', {
+                name: /rule id/i
+            }), 'new-rule');
             const targetBucketSelect = screen.getByLabelText(/target bucket/i);
             await user_event.click(targetBucketSelect);
             await user_event.click(screen.getByRole('option', {
@@ -753,7 +821,9 @@ describe('BucketReplicationFormPage', ()=>{
         });
         it('disables submit button when form is invalid', async ()=>{
             renderBucketReplicationFormPage();
-            await user_event.type(screen.getByLabelText(/rule id/i), 'test');
+            await user_event.type(screen.getByRole('textbox', {
+                name: /rule id/i
+            }), 'test');
             await waitFor(()=>{
                 const createButton = screen.getByRole('button', {
                     name: /create/i
@@ -1033,7 +1103,9 @@ describe('BucketReplicationFormPage', ()=>{
             });
             renderBucketReplicationFormPage('test-bucket', 'prefix-rule');
             await waitFor(()=>{
-                const prefixInput = screen.getByLabelText(/prefix/i);
+                const prefixInput = screen.getByRole('textbox', {
+                    name: /prefix/i
+                });
                 expect(prefixInput).toHaveValue('documents/');
             });
         });
@@ -1106,7 +1178,9 @@ describe('BucketReplicationFormPage', ()=>{
             });
             renderBucketReplicationFormPage('test-bucket', 'and-rule');
             await waitFor(()=>{
-                const prefixInput = screen.getByLabelText(/prefix/i);
+                const prefixInput = screen.getByRole('textbox', {
+                    name: /prefix/i
+                });
                 expect(prefixInput).toHaveValue('logs/');
                 expect(screen.getByDisplayValue('type')).toBeInTheDocument();
                 expect(screen.getByDisplayValue('audit')).toBeInTheDocument();
@@ -1172,7 +1246,9 @@ describe('BucketReplicationFormPage', ()=>{
             await waitFor(()=>{
                 const encryptReplicatedToggle = findToggleByLabel('Encrypt replicated objects');
                 expect(encryptReplicatedToggle).toBeChecked();
-                const kmsKeyInput = screen.getByLabelText(/replica kms key id/i);
+                const kmsKeyInput = screen.getByRole('textbox', {
+                    name: /replica kms key id/i
+                });
                 expect(kmsKeyInput).toHaveValue('arn:aws:kms:us-east-1:123456789012:key/12345');
             });
         });
@@ -1300,7 +1376,9 @@ describe('BucketReplicationFormPage', ()=>{
             await waitFor(()=>{
                 const sameAccountToggle = screen.getByText(/not same account destination/i);
                 expect(sameAccountToggle).toBeInTheDocument();
-                const accountIdInput = screen.getByLabelText(/target account id/i);
+                const accountIdInput = screen.getByRole('textbox', {
+                    name: /target account id/i
+                });
                 expect(accountIdInput).toHaveValue('987654321098');
                 const targetBucketInput = screen.getByLabelText(/target bucket/i);
                 expect(targetBucketInput).toHaveValue('cross-account-bucket');
@@ -1359,7 +1437,9 @@ describe('BucketReplicationFormPage', ()=>{
             });
             renderBucketReplicationFormPage('test-bucket', 'storage-class-rule');
             await waitFor(()=>{
-                const storageClassSelect = screen.getByLabelText(/storage class/i);
+                const storageClassSelect = screen.getByLabelText(/storage class/i, {
+                    selector: 'input'
+                });
                 expect(storageClassSelect).toBeInTheDocument();
             });
         });
@@ -1385,7 +1465,9 @@ describe('BucketReplicationFormPage', ()=>{
             });
             renderBucketReplicationFormPage('test-bucket', 'priority-rule');
             await waitFor(()=>{
-                const priorityInput = screen.getByLabelText(/rule priority/i);
+                const priorityInput = screen.getByRole('spinbutton', {
+                    name: /rule priority/i
+                });
                 expect(priorityInput).toHaveValue(99);
             });
         });
@@ -1393,7 +1475,9 @@ describe('BucketReplicationFormPage', ()=>{
     describe('Priority Auto-assignment', ()=>{
         it('auto-assigns priority 0 when no existing rules', ()=>{
             renderBucketReplicationFormPage();
-            const priorityInput = screen.getByLabelText(/rule priority/i);
+            const priorityInput = screen.getByRole('spinbutton', {
+                name: /rule priority/i
+            });
             expect(priorityInput).toHaveAttribute('placeholder', 'Example: Auto-assigned: 0');
         });
         it('auto-assigns next available priority when rules exist', ()=>{
@@ -1424,19 +1508,27 @@ describe('BucketReplicationFormPage', ()=>{
                 status: 'success'
             });
             renderBucketReplicationFormPage();
-            const priorityInput = screen.getByLabelText(/rule priority/i);
+            const priorityInput = screen.getByRole('spinbutton', {
+                name: /rule priority/i
+            });
             expect(priorityInput).toHaveAttribute('placeholder', 'Example: Auto-assigned: 11');
         });
         it('allows manual priority override', async ()=>{
             renderBucketReplicationFormPage();
-            const priorityInput = screen.getByLabelText(/rule priority/i);
+            const priorityInput = screen.getByRole('spinbutton', {
+                name: /rule priority/i
+            });
             await user_event.type(priorityInput, '25');
             expect(priorityInput).toHaveValue(25);
         });
         it('accepts empty priority and defaults to 0 on submit', async ()=>{
             renderBucketReplicationFormPage();
-            await user_event.type(screen.getByLabelText(/role arn/i), 'arn:aws:iam::123456789012:role/role');
-            await user_event.type(screen.getByLabelText(/rule id/i), 'no-priority-rule');
+            await user_event.type(screen.getByRole('textbox', {
+                name: /role arn/i
+            }), 'arn:aws:iam::123456789012:role/role');
+            await user_event.type(screen.getByRole('textbox', {
+                name: /rule id/i
+            }), 'no-priority-rule');
             const targetBucketSelect = screen.getByLabelText(/target bucket/i);
             await user_event.click(targetBucketSelect);
             await user_event.click(screen.getByRole('option', {
@@ -1520,8 +1612,12 @@ describe('BucketReplicationFormPage', ()=>{
                 isPending: true
             });
             renderBucketReplicationFormPage();
-            await user_event.type(screen.getByLabelText(/role arn/i), 'arn:aws:iam::123456789012:role/role');
-            await user_event.type(screen.getByLabelText(/rule id/i), 'test-rule');
+            await user_event.type(screen.getByRole('textbox', {
+                name: /role arn/i
+            }), 'arn:aws:iam::123456789012:role/role');
+            await user_event.type(screen.getByRole('textbox', {
+                name: /rule id/i
+            }), 'test-rule');
             const targetBucketSelect = screen.getByLabelText(/target bucket/i);
             await user_event.click(targetBucketSelect);
             await user_event.click(screen.getByRole('option', {
@@ -1619,7 +1715,9 @@ describe('BucketReplicationFormPage', ()=>{
             });
             renderBucketReplicationFormPage('test-bucket', 'no-priority');
             await waitFor(()=>{
-                const priorityInput = screen.getByLabelText(/rule priority/i);
+                const priorityInput = screen.getByRole('spinbutton', {
+                    name: /rule priority/i
+                });
                 expect(priorityInput).toHaveValue(null);
             });
         });
@@ -1645,7 +1743,9 @@ describe('BucketReplicationFormPage', ()=>{
             });
             renderBucketReplicationFormPage('test-bucket', 'no-storage-class');
             await waitFor(()=>{
-                const storageClassSelect = screen.getByLabelText(/storage class/i);
+                const storageClassSelect = screen.getByLabelText(/storage class/i, {
+                    selector: 'input'
+                });
                 expect(storageClassSelect).toBeInTheDocument();
             });
         });
@@ -1654,7 +1754,9 @@ describe('BucketReplicationFormPage', ()=>{
         it('accepts Rule ID with reasonable length', async ()=>{
             renderBucketReplicationFormPage();
             const longRuleId = 'rule-name-with-many-segments-' + 'segment-'.repeat(10);
-            const ruleIdInput = screen.getByLabelText(/rule id/i);
+            const ruleIdInput = screen.getByRole('textbox', {
+                name: /rule id/i
+            });
             await user_event.type(ruleIdInput, longRuleId);
             await waitFor(()=>{
                 expect(ruleIdInput).toHaveValue(longRuleId);
@@ -1663,7 +1765,9 @@ describe('BucketReplicationFormPage', ()=>{
         it('handles special characters in Rule ID', async ()=>{
             renderBucketReplicationFormPage();
             const validSpecialChars = 'rule-name_with.special-chars_123';
-            const ruleIdInput = screen.getByLabelText(/rule id/i);
+            const ruleIdInput = screen.getByRole('textbox', {
+                name: /rule id/i
+            });
             await user_event.type(ruleIdInput, validSpecialChars);
             await user_event.tab();
             await waitFor(()=>{
@@ -1672,8 +1776,12 @@ describe('BucketReplicationFormPage', ()=>{
         });
         it('validates Priority with boundary values', async ()=>{
             renderBucketReplicationFormPage();
-            await user_event.type(screen.getByLabelText(/rule id/i), 'boundary-test');
-            const priorityInput = screen.getByLabelText(/rule priority/i);
+            await user_event.type(screen.getByRole('textbox', {
+                name: /rule id/i
+            }), 'boundary-test');
+            const priorityInput = screen.getByRole('spinbutton', {
+                name: /rule priority/i
+            });
             await user_event.clear(priorityInput);
             await user_event.type(priorityInput, '0');
             await user_event.tab();
@@ -1700,10 +1808,14 @@ describe('BucketReplicationFormPage', ()=>{
                 name: 'Prefix filter'
             }));
             await waitFor(()=>{
-                expect(screen.getByLabelText(/prefix/i)).toBeInTheDocument();
+                expect(screen.getByRole('textbox', {
+                    name: /prefix/i
+                })).toBeInTheDocument();
             });
             const longPrefix = 'logs/' + 'a'.repeat(100);
-            const prefixInput = screen.getByLabelText(/prefix/i);
+            const prefixInput = screen.getByRole('textbox', {
+                name: /prefix/i
+            });
             await user_event.type(prefixInput, longPrefix);
             await waitFor(()=>{
                 expect(prefixInput).toHaveValue(longPrefix);
@@ -1711,7 +1823,9 @@ describe('BucketReplicationFormPage', ()=>{
         });
         it('accepts valid Role ARN format', async ()=>{
             renderBucketReplicationFormPage();
-            const roleArnInput = screen.getByLabelText(/role arn/i);
+            const roleArnInput = screen.getByRole('textbox', {
+                name: /role arn/i
+            });
             await user_event.type(roleArnInput, 'arn:aws:iam::123456789012:role/replication-role');
             await user_event.tab();
             await waitFor(()=>{
@@ -1723,9 +1837,13 @@ describe('BucketReplicationFormPage', ()=>{
             const sameAccountToggle = findToggleByLabel('Same account destination');
             await user_event.click(sameAccountToggle);
             await waitFor(()=>{
-                expect(screen.getByLabelText(/target account id/i)).toBeInTheDocument();
+                expect(screen.getByRole('textbox', {
+                    name: /target account id/i
+                })).toBeInTheDocument();
+            });
+            const accountIdInput = screen.getByRole('textbox', {
+                name: /target account id/i
             });
-            const accountIdInput = screen.getByLabelText(/target account id/i);
             await user_event.type(accountIdInput, '123456789012');
             await user_event.tab();
             await waitFor(()=>{
@@ -1744,9 +1862,13 @@ describe('BucketReplicationFormPage', ()=>{
             const encryptToggle = findToggleByLabel('Encrypt replicated objects');
             await user_event.click(encryptToggle);
             await waitFor(()=>{
-                expect(screen.getByLabelText(/replica kms key id/i)).toBeInTheDocument();
+                expect(screen.getByRole('textbox', {
+                    name: /replica kms key id/i
+                })).toBeInTheDocument();
+            });
+            const kmsKeyInput = screen.getByRole('textbox', {
+                name: /replica kms key id/i
             });
-            const kmsKeyInput = screen.getByLabelText(/replica kms key id/i);
             const validKmsArn = 'arn:aws:kms:us-east-1:123456789012:key/12345678-1234-1234-1234-123456789012';
             await user_event.type(kmsKeyInput, validKmsArn);
             await waitFor(()=>{

package/dist/components/__tests__/MetadataSearch.test.js

@@ -47,27 +47,33 @@ describe('MetadataSearch', ()=>{
         await user_event.type(input, 'test query');
         expect(searchButton).toBeEnabled();
     });
-    it('shows search icon by default', ()=>{
+    it('shows search icon by default', async ()=>{
         renderMetadataSearch();
-        const input = getInput();
-        const searchIcon = input.parentElement?.querySelector('[aria-label*="Search"]');
-        expect(searchIcon).toBeInTheDocument();
+        await waitFor(()=>{
+            expect(screen.getByRole('img', {
+                hidden: true
+            })).toBeInTheDocument();
+        });
     });
-    it('shows check icon when metadata search is active', ()=>{
+    it('shows check icon when metadata search is active', async ()=>{
         renderMetadataSearch({}, [
             '/bucket/test-bucket?metadatasearch=test'
         ]);
-        const input = getInput();
-        const checkIcon = input.parentElement?.querySelector('[aria-label*="Check"]');
-        expect(checkIcon).toBeInTheDocument();
+        await waitFor(()=>{
+            expect(screen.getByRole('img', {
+                hidden: true
+            })).toBeInTheDocument();
+        });
     });
-    it('shows error icon when error prop is true', ()=>{
+    it('shows error icon when error prop is true', async ()=>{
         renderMetadataSearch({
             isError: true
         });
-        const input = getInput();
-        const errorIcon = input.parentElement?.querySelector('[aria-label*="Close"]');
-        expect(errorIcon).toBeInTheDocument();
+        await waitFor(()=>{
+            expect(screen.getByRole('img', {
+                hidden: true
+            })).toBeInTheDocument();
+        });
     });
     it('populates input with existing search query from URL', ()=>{
         renderMetadataSearch({}, [