feat(devtools): update SEO tab styles and improve health score visualization

This commit enhances the SEO tab by updating styles for the health score indicators, including a new design for the health track and fill elements. It refactors the health score rendering logic to utilize a more consistent approach across components, improving accessibility with ARIA attributes. Additionally, it introduces a sorting function for links in the report, ensuring a clearer display order based on link types. These changes aim to provide a more cohesive and visually appealing user experience in the SEO analysis features.

Author: abedshaaban

packages/devtools/src/styles/use-styles.ts

@@ -579,24 +579,41 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
     `,
     seoHealthTrack: css`
       width: 100%;
-      height: 5px;
-      background: ${t(colors.gray[200], colors.gray[800])};
+      height: 10px;
       border-radius: 999px;
+      background: ${t(colors.gray[100], colors.gray[800])};
+      border: 1px solid ${t(colors.gray[200], colors.gray[700])};
       overflow: hidden;
+      box-shadow: inset 0 1px 2px ${t('rgba(15, 23, 42, 0.06)', 'rgba(0, 0, 0, 0.35)')};
     `,
-    seoHealthBarSvg: css`
-      width: 100%;
-      height: 5px;
-      display: block;
-    `,
-    seoHealthRectGood: css`
-      fill: #16a34a;
-    `,
-    seoHealthRectFair: css`
-      fill: #d97706;
-    `,
-    seoHealthRectPoor: css`
-      fill: #dc2626;
+    seoHealthFill: css`
+      height: 100%;
+      min-width: 0;
+      max-width: 100%;
+      border-radius: 999px;
+      transition: width 0.45s cubic-bezier(0.33, 1, 0.68, 1);
+      box-shadow: 0 1px 2px ${t('rgba(15, 23, 42, 0.12)', 'rgba(0, 0, 0, 0.25)')};
+    `,
+    seoHealthFillGood: css`
+      background: linear-gradient(
+        90deg,
+        ${t(colors.green[700], '#15803d')} 0%,
+        ${t(colors.green[500], '#22c55e')} 100%
+      );
+    `,
+    seoHealthFillFair: css`
+      background: linear-gradient(
+        90deg,
+        ${t(colors.yellow[700], '#b45309')} 0%,
+        ${t(colors.yellow[500], '#eab308')} 100%
+      );
+    `,
+    seoHealthFillPoor: css`
+      background: linear-gradient(
+        90deg,
+        ${t(colors.red[700], '#b91c1c')} 0%,
+        ${t(colors.red[500], '#ef4444')} 100%
+      );
     `,
     seoHealthCountsRow: css`
       display: flex;

packages/devtools/src/tabs/seo-tab/json-ld-preview.tsx

@@ -400,13 +400,15 @@ export function JsonLdPreviewSection() {
         ? s.seoHealthScoreFair
         : s.seoHealthScorePoor
   }
-  const healthRectClass = () => {
+  const healthFillClass = () => {
     const tier = seoHealthTier(score)
-    return tier === 'good'
-      ? s.seoHealthRectGood
-      : tier === 'fair'
-        ? s.seoHealthRectFair
-        : s.seoHealthRectPoor
+    const tierFill =
+      tier === 'good'
+        ? s.seoHealthFillGood
+        : tier === 'fair'
+          ? s.seoHealthFillFair
+          : s.seoHealthFillPoor
+    return `${s.seoHealthFill} ${tierFill}`
   }
   const errorCount = entries.reduce(
     (total, entry) =>
@@ -439,22 +441,18 @@ export function JsonLdPreviewSection() {
             <span class={s.seoJsonLdHealthTitle}>JSON-LD Health</span>
             <span class={healthScoreClass()}>{score}%</span>
           </div>
-          <div class={s.seoHealthTrack}>
-            <svg
-              class={s.seoHealthBarSvg}
-              viewBox="0 0 100 5"
-              preserveAspectRatio="none"
-              aria-hidden="true"
-            >
-              <rect
-                class={healthRectClass()}
-                x="0"
-                y="0"
-                width={Math.min(100, Math.max(0, score))}
-                height="5"
-                rx="2.5"
-              />
-            </svg>
+          <div
+            class={s.seoHealthTrack}
+            role="progressbar"
+            aria-valuemin={0}
+            aria-valuemax={100}
+            aria-valuenow={Math.round(score)}
+            aria-label={`JSON-LD health ${Math.round(score)} percent`}
+          >
+            <div
+              class={healthFillClass()}
+              style={{ width: `${Math.min(100, Math.max(0, score))}%` }}
+            />
           </div>
           <div class={s.seoHealthCountsRow}>
             <span class={s.seoHealthCountError}>

packages/devtools/src/tabs/seo-tab/links-preview.tsx

@@ -115,6 +115,20 @@ export function analyzeLinks(): Array<LinkRow> {
     .map(classifyLink)
 }
 
+/** Display order in the links report: internal, external, non-web, then invalid. */
+const LINK_KIND_DISPLAY_ORDER: Record<LinkKind, number> = {
+  internal: 0,
+  external: 1,
+  'non-web': 2,
+  invalid: 3,
+}
+
+export function sortLinksForDisplay(links: Array<LinkRow>): Array<LinkRow> {
+  return [...links].sort(
+    (a, b) => LINK_KIND_DISPLAY_ORDER[a.kind] - LINK_KIND_DISPLAY_ORDER[b.kind],
+  )
+}
+
 /**
  * Link-level issues (capped) and totals for the SEO overview.
  */
@@ -154,6 +168,7 @@ function linkKindBadgeClass(
 export function LinksPreviewSection() {
   const styles = useStyles()
   const links = analyzeLinks()
+  const linksForReport = sortLinksForDisplay(links)
   const issueCount = links.reduce((count, row) => count + row.issues.length, 0)
 
   const counts = links.reduce(
@@ -216,7 +231,7 @@ export function LinksPreviewSection() {
         <div class={s.serpPreviewBlock}>
           <div class={s.serpPreviewLabel}>Links report</div>
           <ul class={s.seoLinksReportList}>
-            <For each={links}>
+            <For each={linksForReport}>
               {(row) => (
                 <li class={s.seoLinksReportItem}>
                   <div class={s.seoLinksReportTopRow}>

packages/devtools/src/tabs/seo-tab/seo-overview.tsx

@@ -95,14 +95,16 @@ export function SeoOverviewSection(props: { goTo: (view: SeoDetailView) => void
         : s.seoHealthScorePoor
   }
 
-  const healthRectClass = (score: number) => {
+  const healthFillClass = (score: number) => {
     const s = styles()
     const tier = seoHealthTier(score)
-    return tier === 'good'
-      ? s.seoHealthRectGood
-      : tier === 'fair'
-        ? s.seoHealthRectFair
-        : s.seoHealthRectPoor
+    const tierFill =
+      tier === 'good'
+        ? s.seoHealthFillGood
+        : tier === 'fair'
+          ? s.seoHealthFillFair
+          : s.seoHealthFillPoor
+    return `${s.seoHealthFill} ${tierFill}`
   }
 
   const sectionIconClass = (sev: SeoSeverity | null) => {
@@ -148,22 +150,18 @@ export function SeoOverviewSection(props: { goTo: (view: SeoDetailView) => void
             {bundle().health.score}%
           </span>
         </div>
-        <div class={styles().seoHealthTrack}>
-          <svg
-            class={styles().seoHealthBarSvg}
-            viewBox="0 0 100 5"
-            preserveAspectRatio="none"
-            aria-hidden="true"
-          >
-            <rect
-              class={healthRectClass(bundle().health.score)}
-              x="0"
-              y="0"
-              width={Math.min(100, Math.max(0, bundle().health.score))}
-              height="5"
-              rx="2.5"
-            />
-          </svg>
+        <div
+          class={styles().seoHealthTrack}
+          role="progressbar"
+          aria-valuemin={0}
+          aria-valuemax={100}
+          aria-valuenow={Math.round(bundle().health.score)}
+          aria-label={`Overall SEO health ${Math.round(bundle().health.score)} percent`}
+        >
+          <div
+            class={healthFillClass(bundle().health.score)}
+            style={{ width: `${Math.min(100, Math.max(0, bundle().health.score))}%` }}
+          />
         </div>
         <div class={styles().seoHealthCountsRow}>
           <span class={styles().seoHealthCountError}>