diff --git a/packages/html-reporter/src/filter.ts b/packages/html-reporter/src/filter.ts
index bece86e5ef..f87af76d12 100644
--- a/packages/html-reporter/src/filter.ts
+++ b/packages/html-reporter/src/filter.ts
@@ -153,9 +153,7 @@ export class Filter {
     }
     if (this.annotations.length) {
       const matches = this.annotations.every(annotation =>
-        searchValues.annotations.some(_annotation => (
-          _annotation.includes(annotation)
-        )));
+        searchValues.annotations.some(_annotation => _annotation.includes(annotation)));
       if (!matches)
         return false;
     }
diff --git a/packages/html-reporter/src/headerView.spec.tsx b/packages/html-reporter/src/headerView.spec.tsx
index a0b27e6943..4f3c551791 100644
--- a/packages/html-reporter/src/headerView.spec.tsx
+++ b/packages/html-reporter/src/headerView.spec.tsx
@@ -27,7 +27,7 @@ test('should render counters', async ({ mount }) => {
     flaky: 17,
     skipped: 10,
     ok: false,
-  }} filterText='' setFilterText={() => {}}></HeaderView>);
+  }} filterText='' setFilterText={() => { }}></HeaderView>);
   await expect(component.locator('a', { hasText: 'All' }).locator('.counter')).toHaveText('100');
   await expect(component.locator('a', { hasText: 'Passed' }).locator('.counter')).toHaveText('42');
   await expect(component.locator('a', { hasText: 'Failed' }).locator('.counter')).toHaveText('31');
@@ -59,5 +59,6 @@ test('should toggle filters', async ({ page, mount }) => {
   await expect(page).toHaveURL(/#\?q=s:flaky/);
   await component.locator('a', { hasText: 'Skipped' }).click();
   await expect(page).toHaveURL(/#\?q=s:skipped/);
-  expect(filters).toEqual(['', 's:passed', 's:failed', 's:flaky', 's:skipped']);
+  await component.getByRole('searchbox').fill('a:annotation type=annotation description');
+  expect(filters).toEqual(['', 's:passed', 's:failed', 's:flaky', 's:skipped', 'a:annotation type=annotation description']);
 });
diff --git a/tests/playwright-test/reporter-html.spec.ts b/tests/playwright-test/reporter-html.spec.ts
index 76aa6a3e8a..5619a38bd7 100644
--- a/tests/playwright-test/reporter-html.spec.ts
+++ b/tests/playwright-test/reporter-html.spec.ts
@@ -1416,7 +1416,7 @@ for (const useIntermediateMergeReport of [false, true] as const) {
         await showReport();
 
         const searchInput = page.locator('.subnav-search-input');
-        const smokeLabelButton =  page.locator('.test-file-test', { has: page.getByText('Error Pages › @smoke fails', { exact: true }) }).locator('.label', { hasText: 'smoke' });
+        const smokeLabelButton = page.locator('.test-file-test', { has: page.getByText('Error Pages › @smoke fails', { exact: true }) }).locator('.label', { hasText: 'smoke' });
 
         await expect(smokeLabelButton).toBeVisible();
         await smokeLabelButton.click();
@@ -1426,7 +1426,7 @@ for (const useIntermediateMergeReport of [false, true] as const) {
         await expect(page.locator('.chip', { hasText: 'b.test.js' })).toHaveCount(1);
         await expect(page.locator('.test-file-test .test-file-title')).toHaveText('Error Pages › @smoke fails');
 
-        const regressionLabelButton =  page.locator('.test-file-test', { has: page.getByText('Error Pages › @regression passes', { exact: true }) }).locator('.label', { hasText: 'regression' });
+        const regressionLabelButton = page.locator('.test-file-test', { has: page.getByText('Error Pages › @regression passes', { exact: true }) }).locator('.label', { hasText: 'regression' });
 
         await expect(regressionLabelButton).not.toBeVisible();
 
@@ -1538,7 +1538,7 @@ for (const useIntermediateMergeReport of [false, true] as const) {
 
         const searchInput = page.locator('.subnav-search-input');
 
-        const smokeLabelButton =  page.locator('.test-file-test', { has: page.getByText('@smoke fails', { exact: true }) }).locator('.label', { hasText: 'smoke' });
+        const smokeLabelButton = page.locator('.test-file-test', { has: page.getByText('@smoke fails', { exact: true }) }).locator('.label', { hasText: 'smoke' });
         await smokeLabelButton.click();
         await expect(page).toHaveURL(/@smoke/);
         await searchInput.clear();
@@ -1546,7 +1546,7 @@ for (const useIntermediateMergeReport of [false, true] as const) {
         await expect(searchInput).toHaveValue('');
         await expect(page).not.toHaveURL(/@smoke/);
 
-        const regressionLabelButton =  page.locator('.test-file-test', { has: page.getByText('@regression passes', { exact: true }) }).locator('.label', { hasText: 'regression' });
+        const regressionLabelButton = page.locator('.test-file-test', { has: page.getByText('@regression passes', { exact: true }) }).locator('.label', { hasText: 'regression' });
         await regressionLabelButton.click();
         await expect(page).toHaveURL(/@regression/);
         await searchInput.clear();
@@ -1663,8 +1663,8 @@ for (const useIntermediateMergeReport of [false, true] as const) {
         const passedNavMenu = page.locator('.subnav-item:has-text("Passed")');
         const failedNavMenu = page.locator('.subnav-item:has-text("Failed")');
         const allNavMenu = page.locator('.subnav-item:has-text("All")');
-        const smokeLabelButton =  page.locator('.test-file-test', { has: page.getByText('@smoke fails', { exact: true }) }).locator('.label', { hasText: 'smoke' });
-        const regressionLabelButton =  page.locator('.test-file-test', { has: page.getByText('@regression passes', { exact: true }) }).locator('.label', { hasText: 'regression' });
+        const smokeLabelButton = page.locator('.test-file-test', { has: page.getByText('@smoke fails', { exact: true }) }).locator('.label', { hasText: 'smoke' });
+        const regressionLabelButton = page.locator('.test-file-test', { has: page.getByText('@regression passes', { exact: true }) }).locator('.label', { hasText: 'regression' });
 
         await failedNavMenu.click();
         await smokeLabelButton.click();
@@ -1823,7 +1823,7 @@ for (const useIntermediateMergeReport of [false, true] as const) {
         await expect(page.locator('.test-file-test .test-file-title', { hasText: '@company_information_widget fails' })).toHaveCount(1);
       });
 
-      test('handling of meta or ctrl key', async ({ runInlineTest, showReport, page,  }) => {
+      test('handling of meta or ctrl key', async ({ runInlineTest, showReport, page, }) => {
         const result = await runInlineTest({
           'a.test.js': `
             const { expect, test } = require('@playwright/test');
@@ -2174,6 +2174,29 @@ for (const useIntermediateMergeReport of [false, true] as const) {
       await expect(page.getByText('passes title')).toBeVisible();
     });
 
+    test('tests should filter by annotation texts', async ({ runInlineTest, showReport, page }) => {
+      const result = await runInlineTest({
+        'a.test.js': `
+          const { test, expect } = require('@playwright/test');
+          test('annotated test',{ annotation :[{type:'key',description:'value'}]}, async ({}) => {expect(1).toBe(1);});
+          test('non-annotated test', async ({}) => {expect(1).toBe(2);});
+        `,
+      }, { reporter: 'dot,html' }, { PW_TEST_HTML_REPORT_OPEN: 'never' });
+
+      expect(result.exitCode).toBe(1);
+      expect(result.passed).toBe(1);
+      expect(result.failed).toBe(1);
+
+      await showReport();
+
+      const searchInput = page.locator('.subnav-search-input');
+
+      await searchInput.fill('a:key=value');
+      await expect(page.getByText('a.test.js', { exact: true })).toBeVisible();
+      await expect(page.getByText('non-annotated test')).not.toBeVisible();
+      await expect(page.getByText('annotated test')).toBeVisible();
+    });
+
     test('tests should filter by fileName:line/column', async ({ runInlineTest, showReport, page }) => {
       const result = await runInlineTest({
         'a.test.js': `