diff --git a/packages/html-reporter/src/testCaseView.tsx b/packages/html-reporter/src/testCaseView.tsx
index 0e966ed0de..91d1847d49 100644
--- a/packages/html-reporter/src/testCaseView.tsx
+++ b/packages/html-reporter/src/testCaseView.tsx
@@ -14,7 +14,7 @@
   limitations under the License.
 */
 
-import type { TestCase } from './types';
+import type { TestCase, TestCaseAnnotation } from './types';
 import * as React from 'react';
 import { TabbedPane } from './tabbedPane';
 import { AutoChip } from './chip';
@@ -33,12 +33,6 @@ export const TestCaseView: React.FC<{
 }> = ({ projectNames, test, run, anchor }) => {
   const [selectedResultIndex, setSelectedResultIndex] = React.useState(run);
 
-  const annotations = new Map<string, (string | undefined)[]>();
-  test?.annotations.forEach(annotation => {
-    const list = annotations.get(annotation.type) || [];
-    list.push(annotation.description);
-    annotations.set(annotation.type, list);
-  });
   const labels = React.useMemo(() => {
     if (!test)
       return undefined;
@@ -50,11 +44,11 @@ export const TestCaseView: React.FC<{
     {test && <div className='test-case-title'>{test?.title}</div>}
     {test && <div className='test-case-location'>{test.location.file}:{test.location.line}</div>}
     {test && (!!test.projectName || labels) && <div className='test-case-project-labels-row'>
-      {!!test.projectName && <ProjectLink projectNames={projectNames} projectName={test.projectName}></ProjectLink>}
+      {test && !!test.projectName && <ProjectLink projectNames={projectNames} projectName={test.projectName}></ProjectLink>}
       {labels && <LabelsLinkView labels={labels} />}
     </div>}
-    {annotations.size > 0 && <AutoChip header='Annotations'>
-      {[...annotations].map(annotation => <TestCaseAnnotationView type={annotation[0]} descriptions={annotation[1]} />)}
+    {test && !!test.annotations.length && <AutoChip header='Annotations'>
+      {test?.annotations.map(annotation => <TestCaseAnnotationView annotation={annotation} />)}
     </AutoChip>}
     {test && <TabbedPane tabs={
       test.results.map((result, index) => ({
@@ -73,17 +67,11 @@ function renderAnnotationDescription(description: string) {
   return description;
 }
 
-function TestCaseAnnotationView({ type, descriptions }: { type: string, descriptions: (string | undefined)[] }) {
-  const filteredDescriptions = descriptions.filter(Boolean) as string[];
+function TestCaseAnnotationView({ annotation: { type, description } }: { annotation: TestCaseAnnotation }) {
   return (
     <div className='test-case-annotation'>
       <span style={{ fontWeight: 'bold' }}>{type}</span>
-      {!!filteredDescriptions.length && <span>: {filteredDescriptions.map((d, i) => {
-        const rendered = renderAnnotationDescription(d);
-        if (i < filteredDescriptions.length - 1)
-          return <>{rendered}, </>;
-        return rendered;
-      })}</span>}
+      {description && <span>: {renderAnnotationDescription(description)}</span>}
     </div>
   );
 }
diff --git a/tests/playwright-test/reporter-html.spec.ts b/tests/playwright-test/reporter-html.spec.ts
index bff5a35ed2..17560a5874 100644
--- a/tests/playwright-test/reporter-html.spec.ts
+++ b/tests/playwright-test/reporter-html.spec.ts
@@ -602,11 +602,6 @@ test('should render annotations', async ({ runInlineTest, page, showReport }) =>
     'a.test.js': `
       import { test, expect } from '@playwright/test';
       test('skipped test', async ({ page }) => {
-        test.info().annotations.push({ type: 'issue', description: '#123'});
-        test.info().annotations.push({ type: 'issue', description: '#456'});
-        test.info().annotations.push({ type: 'issue', description: 'https://playwright.dev'});
-        test.info().annotations.push({ type: 'issue' });
-        test.info().annotations.push({ type: 'empty' });
         test.skip(true, 'I am not interested in this test');
       });
     `,
@@ -616,11 +611,7 @@ test('should render annotations', async ({ runInlineTest, page, showReport }) =>
 
   await showReport();
   await page.click('text=skipped test');
-  await expect(page.locator('.test-case-annotation')).toHaveText([
-    'issue: #123, #456, https://playwright.dev',
-    'empty',
-    'skip: I am not interested in this test',
-  ]);
+  await expect(page.locator('.test-case-annotation')).toHaveText('skip: I am not interested in this test');
 });
 
 test('should render annotations as link if needed', async ({ runInlineTest, page, showReport, server }) => {