enhance(bcd): prefix titles with browser name (and version) (#12303)

* feat(compatibility-table): add browser name to compatibility table tooltip

* chore(bcd): prefix title with browser name

* enhance(bcd): prefix release date title

---------

Co-authored-by: Claas Augner <[email protected]>

client/src/document/ingredients/browser-compatibility-table/feature-row.tsx

@@ -48,15 +48,6 @@ function getSupportClassName(
   return className;
 }
 
-function getSupportBrowserReleaseDate(
-  support: SupportStatementExtended | undefined
-): string | undefined {
-  if (!support) {
-    return undefined;
-  }
-  return getCurrentSupport(support)!.release_date;
-}
-
 function StatusIcons({ status }: { status: BCD.StatusBlock }) {
   const icons = [
     status.experimental && {
@@ -139,7 +130,7 @@ const CellText = React.memo(
     const added = currentSupport?.version_added ?? null;
     const lastVersion = currentSupport?.version_last ?? null;
 
-    const browserReleaseDate = getSupportBrowserReleaseDate(support);
+    const browserReleaseDate = currentSupport?.release_date;
     const supportClassName = getSupportClassName(support, browser);
 
     let status:
@@ -198,16 +189,18 @@ const CellText = React.memo(
         break;
 
       case "preview":
-        title = "Preview browser support";
+        title = "Preview support";
         label = status.label || browser.preview_name;
         break;
 
       case "unknown":
-        title = "Compatibility unknown; please update this.";
+        title = "Support unknown";
         label = "?";
         break;
     }
 
+    title = `${browser.name} – ${title}`;
+
     return (
       <div
         className={
@@ -233,7 +226,7 @@ const CellText = React.memo(
             className="bc-version-label"
             title={
               browserReleaseDate && !timeline
-                ? `Released ${browserReleaseDate}`
+                ? `${browser.name} ${added} – Released ${browserReleaseDate}`
                 : undefined
             }
           >