Interop feature badges

frontend/src/static/js/components/webstatus-overview-cells.ts

@@ -23,6 +23,7 @@ import {
 import {BROWSER_ID_TO_ICON_NAME, FeatureSortOrderType} from '../api/client.js';
 import {ifDefined} from 'lit/directives/if-defined.js';
 import {
+  INTEROP_FEATURES,
   TOP_CSS_INTEROP_ISSUES,
   TOP_HTML_INTEROP_ISSUES,
 } from '../utils/constants.js';
@@ -202,6 +203,13 @@ function getFeatureBadges(featureId: string): TemplateResult[] {
       ></webstatus-feature-badge>`,
     );
   }
+  if (INTEROP_FEATURES.includes(featureId)) {
+    extraIdentifiers.push(
+      html`<webstatus-feature-badge
+        .badgeType=${'interop'}
+      ></webstatus-feature-badge>`,
+    );
+  }
   return extraIdentifiers;
 }
 

frontend/src/static/js/utils/constants.ts

@@ -95,6 +95,36 @@ export const TOP_HTML_INTEROP_ISSUES: string[] = [
   'web-bluetooth',
 ];
 
+// This focus area to web feature mapping is defined at
+// https://github.com/web-platform-tests/interop/blob/main/web-features.json
+export const INTEROP_FEATURES: string[] = [
+  'backdrop-filter',
+  'largest-contentful-paint',
+  'anchor-positioning',
+  'details',
+  'flexbox',
+  'grid',
+  'subgrid',
+  'json-modules',
+  'navigation',
+  'pointer-events-api',
+  'mouse-events',
+  'mutation-events',
+  'scope',
+  'scrollend',
+  'storage-access',
+  'text-decoration',
+  'urlpattern',
+  'view-transitions',
+  'view-transitions-class',
+  'wasm-string-builtins',
+  'appearance',
+  'zoom',
+  'list-style',
+  'webrtc-encoded-transform',
+  'writing-mode',
+];
+
 export const DEFAULT_GLOBAL_SAVED_SEARCHES: GlobalSavedSearch[] = [
   {
     name: 'Baseline 2025',
@@ -251,7 +281,8 @@ export const BADGE_PARAMS_BY_TYPE = {
   interop: {
     name: 'INTEROP',
     url: 'https://wpt.fyi/interop',
-    description: 'This feature is a focus area for the Interop 2025 effort.',
+    description:
+      'This feature is part of a focus area for the Interop 2025 effort.',
     variant: 'neutral',
   },
 } as const satisfies Record<string, BadgeConfig>;