diff --git a/packages/html-reporter/src/copyToClipboard.tsx b/packages/html-reporter/src/copyToClipboard.tsx
index a24015a67125d..85132a40dfd8d 100644
--- a/packages/html-reporter/src/copyToClipboard.tsx
+++ b/packages/html-reporter/src/copyToClipboard.tsx
@@ -34,5 +34,5 @@ export const CopyToClipboard: React.FunctionComponent<{
     });
   }, [value]);
   const iconElement = icon === 'check' ? icons.check() : icon === 'cross' ? icons.cross() : icons.copy();
-  return <button className='copy-icon' onClick={handleCopy}>{iconElement}</button>;
+  return <button className='copy-icon' onClick={handleCopy} aria-label="copy to clipboard">{iconElement}</button>;
 };
diff --git a/packages/html-reporter/src/testCaseView.css b/packages/html-reporter/src/testCaseView.css
index b7727a5a8c8ad..93e26a9b79001 100644
--- a/packages/html-reporter/src/testCaseView.css
+++ b/packages/html-reporter/src/testCaseView.css
@@ -75,12 +75,12 @@
   flex-wrap: wrap;
 }
 
-#annotation-copy-button{
+.annotation-copy-button{
   padding-left: 3px;
   display: none;
 }
 
-.test-case-annotation:hover #annotation-copy-button{
+.test-case-annotation:hover .annotation-copy-button{
   padding-left: 3px;
   display: inline;
 }
\ No newline at end of file
diff --git a/packages/html-reporter/src/testCaseView.spec.tsx b/packages/html-reporter/src/testCaseView.spec.tsx
index 28fe8247f5861..94d37ec570f81 100644
--- a/packages/html-reporter/src/testCaseView.spec.tsx
+++ b/packages/html-reporter/src/testCaseView.spec.tsx
@@ -64,7 +64,13 @@ const testCase: TestCase = {
 
 test('should render test case', async ({ mount }) => {
   const component = await mount(<TestCaseView projectNames={['chromium', 'webkit']} test={testCase} run={0} anchor=''></TestCaseView>);
-  await expect(component.getByText('Annotation text', { exact: false }).first()).toBeVisible();
+  const firstAnnotationElement = component.getByText('Annotation text', { exact: false }).first();
+  await expect(firstAnnotationElement).toBeVisible();
+  await expect(component.getByRole('button', { name: 'copy to clipboard' }).first()).not.toBeVisible();
+  await expect(component.getByRole('button', { name: 'copy to clipboard' }).nth(1)).not.toBeVisible();
+  await firstAnnotationElement.hover();
+  await expect(component.getByRole('button', { name: 'copy to clipboard' }).first()).toBeVisible();
+  await expect(component.getByRole('button', { name: 'copy to clipboard' }).nth(1)).not.toBeVisible();
   await component.getByText('Annotations').click();
   await expect(component.getByText('Annotation text')).not.toBeVisible();
   await expect(component.getByText('Outer step')).toBeVisible();
diff --git a/packages/html-reporter/src/testCaseView.tsx b/packages/html-reporter/src/testCaseView.tsx
index 76ff9b3533b17..0c8dcf981adf7 100644
--- a/packages/html-reporter/src/testCaseView.tsx
+++ b/packages/html-reporter/src/testCaseView.tsx
@@ -78,7 +78,7 @@ function TestCaseAnnotationView({ annotation: { type, description } }: { annotat
     <div className='test-case-annotation'>
       <span style={{ fontWeight: 'bold', display: 'inline-block', marginBlock: '3px' }}>{type}</span>
       {description && <span>: {renderAnnotationDescription(description)}</span>}
-      <span id='annotation-copy-button'>{description && <CopyToClipboard value={description} />}</span>
+      <span className='annotation-copy-button'>{description && <CopyToClipboard value={description} />}</span>
     </div>
   );
 }