From d862e3758f16de36cf900e72ec7861e162f21e94 Mon Sep 17 00:00:00 2001
From: Tanner Linsley <tannerlinsley@gmail.com>
Date: Fri, 11 Sep 2026 14:36:13 -0600
Subject: [PATCH 1/2] fix: restore pinned shadcn reference conformance

---
 API-FRICTION.md                               |  10 ++
 .../cases/187-shadcn-radial-shape/case.json   |   2 +-
 .../shared/shadcn-catalog-recharts.tsx        | 111 ++++++++++++++----
 .../conformance/shared/shadcn-chart-card.tsx  |   2 +
 .../shadcn-reference-accessibility.test.ts    | 102 ++++++++++++++++
 scripts/generate-shadcn-cases.mjs             |   2 +-
 6 files changed, 201 insertions(+), 28 deletions(-)
 create mode 100644 benchmarks/conformance/shared/shadcn-reference-accessibility.test.ts

diff --git a/API-FRICTION.md b/API-FRICTION.md
index a6382fdc..d1ab54b8 100644
--- a/API-FRICTION.md
+++ b/API-FRICTION.md
@@ -8307,6 +8307,16 @@ Each entry records:
 - Verification: the inventory test requires all 70 files, exact family counts,
   unique local mappings, and reports synthetic source changes, additions, and
   removals. The offline command verifies all five spike mappings.
+- Follow-up observed in nightly run 34598495700: the shared Recharts reference
+  omitted chart accessible names and reduced distinct radial and custom-label
+  examples to generic family defaults. The pinned radial-shape source has one
+  Safari datum, not the five required by generated case metadata. Restore the
+  pinned data, paint, label placement, and radial background configuration;
+  name each reference SVG through its chart props; and correct the generator's
+  single-datum expectation. DOM regressions cover the reference names through
+  updates, radial data counts and paints, and both custom bar label sets. The
+  complete standard shard 4/8 passes all 24 cases, including the nine former
+  failures, with the original geometry, paint, and accessibility gates intact.
 
 ### F-275 — Preview transparency validation rejected semantic IDs
 
diff --git a/benchmarks/conformance/cases/187-shadcn-radial-shape/case.json b/benchmarks/conformance/cases/187-shadcn-radial-shape/case.json
index 05bf5ffb..34fa886e 100644
--- a/benchmarks/conformance/cases/187-shadcn-radial-shape/case.json
+++ b/benchmarks/conformance/cases/187-shadcn-radial-shape/case.json
@@ -13,7 +13,7 @@
   "geometry": [
     {
       "role": "bar",
-      "count": 5,
+      "count": 1,
       "rendererRoles": {
         "recharts": "arc",
         "tanstack": "arc"
diff --git a/benchmarks/conformance/shared/shadcn-catalog-recharts.tsx b/benchmarks/conformance/shared/shadcn-catalog-recharts.tsx
index fb3ad6cd..3b0ffb45 100644
--- a/benchmarks/conformance/shared/shadcn-catalog-recharts.tsx
+++ b/benchmarks/conformance/shared/shadcn-catalog-recharts.tsx
@@ -92,7 +92,12 @@ function areaChart(spec: ShadcnCatalogSpec, width: number, height: number) {
         ? 'step'
         : 'natural'
   return (
-    <AreaChart width={width} height={height} data={shadcnMonths}>
+    <AreaChart
+      aria-label={spec.title}
+      width={width}
+      height={height}
+      data={shadcnMonths}
+    >
       {spec.variant === 'gradient' ? (
         <defs>
           <linearGradient
@@ -177,8 +182,17 @@ function barChart(spec: ShadcnCatalogSpec, width: number, height: number) {
   }))
   const data = spec.variant === 'negative' ? negativeData : shadcnMonths
   if (horizontal) {
+    const customLabels = spec.variant === 'label-custom'
     return (
-      <BarChart width={width} height={height} data={data} layout="vertical">
+      <BarChart
+        aria-label={spec.title}
+        width={width}
+        height={height}
+        data={data}
+        layout="vertical"
+        margin={customLabels ? { right: 36 } : undefined}
+      >
+        {customLabels ? <CartesianGrid horizontal={false} /> : null}
         <XAxis type="number" hide />
         <YAxis
           dataKey="month"
@@ -187,27 +201,39 @@ function barChart(spec: ShadcnCatalogSpec, width: number, height: number) {
           axisLine={false}
           width={68}
           tickFormatter={shortMonth}
+          hide={customLabels}
         />
         <Tooltip cursor={false} />
         <Bar
           dataKey="desktop"
-          fill={shadcnColors[0]}
+          fill={shadcnColors[customLabels ? 1 : 0]}
           radius={4}
           isAnimationActive={false}
         >
-          {spec.variant === 'label-custom' ? (
-            <LabelList
-              dataKey="desktop"
-              position="insideRight"
-              fill="var(--background)"
-            />
+          {customLabels ? (
+            <>
+              <LabelList
+                dataKey="month"
+                position="insideLeft"
+                offset={8}
+                fill="var(--background)"
+                fontSize={12}
+              />
+              <LabelList
+                dataKey="desktop"
+                position="right"
+                offset={8}
+                fill="var(--foreground)"
+                fontSize={12}
+              />
+            </>
           ) : null}
         </Bar>
       </BarChart>
     )
   }
   return (
-    <BarChart width={width} height={height} data={data}>
+    <BarChart aria-label={spec.title} width={width} height={height} data={data}>
       <CartesianGrid vertical={false} />
       <XAxis
         dataKey="month"
@@ -262,7 +288,12 @@ function lineChart(spec: ShadcnCatalogSpec, width: number, height: number) {
   const labels = spec.variant.includes('label')
   const multiple = spec.variant === 'multiple' || spec.variant === 'interactive'
   return (
-    <LineChart width={width} height={height} data={shadcnMonths}>
+    <LineChart
+      aria-label={spec.title}
+      width={width}
+      height={height}
+      data={shadcnMonths}
+    >
       <CartesianGrid vertical={false} />
       <XAxis
         dataKey="month"
@@ -304,7 +335,7 @@ function pieChart(spec: ShadcnCatalogSpec, width: number, height: number) {
   const donut = spec.variant.includes('donut') || spec.variant === 'stacked'
   const labels = spec.variant.includes('label')
   return (
-    <PieChart width={width} height={height}>
+    <PieChart aria-label={spec.title} width={width} height={height}>
       <Tooltip />
       <Pie
         data={shadcnBrowsers}
@@ -353,7 +384,12 @@ function pieChart(spec: ShadcnCatalogSpec, width: number, height: number) {
 function radarChart(spec: ShadcnCatalogSpec, width: number, height: number) {
   const multiple = spec.variant === 'multiple' || spec.variant === 'legend'
   return (
-    <RadarChart width={width} height={height} data={shadcnMonths}>
+    <RadarChart
+      aria-label={spec.title}
+      width={width}
+      height={height}
+      data={shadcnMonths}
+    >
       {spec.variant === 'grid-none' ? null : (
         <PolarGrid
           gridType={spec.variant.includes('circle') ? 'circle' : 'polygon'}
@@ -384,52 +420,70 @@ function radarChart(spec: ShadcnCatalogSpec, width: number, height: number) {
 }
 
 function radialChart(spec: ShadcnCatalogSpec, width: number, height: number) {
-  const data =
-    spec.variant === 'simple' || spec.variant === 'text'
+  const shape = spec.variant === 'shape'
+  const centeredValue = shape || spec.variant === 'text'
+  const data = centeredValue
+    ? [{ browser: 'safari', visitors: shape ? 1260 : 200 }]
+    : spec.variant === 'simple'
       ? shadcnBrowsers.slice(1, 2)
       : shadcnBrowsers
-  const startAngle = spec.variant === 'shape' ? 180 : 200
-  const endAngle = spec.variant === 'shape' ? 0 : -50
+  const startAngle = centeredValue ? 0 : 200
+  const endAngle = shape ? 100 : centeredValue ? 250 : -50
   return (
     <RadialBarChart
+      aria-label={spec.title}
       width={width}
       height={height}
       data={data}
-      innerRadius={30}
-      outerRadius={100}
+      innerRadius={shape ? 65 : centeredValue ? 80 : 30}
+      outerRadius={shape ? 95 : centeredValue ? 90 : 100}
       startAngle={startAngle}
       endAngle={endAngle}
     >
+      {centeredValue ? (
+        <PolarGrid
+          gridType="circle"
+          radialLines={false}
+          stroke="none"
+          polarRadius={shape ? [86, 74] : [90, 80]}
+          className="sc-radial-value-grid"
+        />
+      ) : null}
       <Tooltip />
       <RadialBar
         dataKey="visitors"
-        background={spec.variant === 'grid'}
+        background={
+          centeredValue ? { fill: 'var(--muted)' } : spec.variant === 'grid'
+        }
         cornerRadius={spec.variant === 'shape' ? 0 : 10}
         isAnimationActive={false}
       >
         {data.map((row, index) => (
-          <Cell key={row.browser} fill={shadcnColors[index]} />
+          <Cell
+            key={row.browser}
+            fill={shadcnColors[centeredValue ? 1 : index]}
+          />
         ))}
         {spec.variant === 'label' ? (
           <LabelList dataKey="visitors" position="insideStart" />
         ) : null}
       </RadialBar>
-      {spec.variant === 'text' ? (
+      {centeredValue ? (
         <>
           <text
             x={width / 2}
-            y={height / 2 - 5}
+            y={height / 2}
             textAnchor="middle"
             dominantBaseline="middle"
             fill="var(--foreground)"
             fontSize={36}
             fontWeight={700}
           >
-            200
+            {shape ? '1,260' : '200'}
           </text>
           <text
             x={width / 2}
-            y={height / 2 + 19}
+            y={height / 2 + 24}
             textAnchor="middle"
             dominantBaseline="middle"
             fill="var(--muted-foreground)"
@@ -446,7 +500,12 @@ function radialChart(spec: ShadcnCatalogSpec, width: number, height: number) {
 function tooltipChart(spec: ShadcnCatalogSpec, width: number, height: number) {
   return (
     <div className="sc-tooltip-demo" style={{ width, height }}>
-      <BarChart width={width} height={height} data={tooltipRows()}>
+      <BarChart
+        aria-label={spec.title}
+        width={width}
+        height={height}
+        data={tooltipRows()}
+      >
         <XAxis
           dataKey="date"
           tickLine={false}
diff --git a/benchmarks/conformance/shared/shadcn-chart-card.tsx b/benchmarks/conformance/shared/shadcn-chart-card.tsx
index 6be50035..c6a351fb 100644
--- a/benchmarks/conformance/shared/shadcn-chart-card.tsx
+++ b/benchmarks/conformance/shared/shadcn-chart-card.tsx
@@ -182,6 +182,8 @@ function ensureShadcnChartStyles(document: Document) {
 }
 
 export const shadcnChartCardStyles = `
+  .sc-radial-value-grid.recharts-polar-grid-concentric-circle:first-child { fill: var(--muted); }
+  .sc-radial-value-grid.recharts-polar-grid-concentric-circle:last-child { fill: var(--background); }
   .sc-example {
     --background: oklch(1 0 0);
     --foreground: oklch(0 0 0);
diff --git a/benchmarks/conformance/shared/shadcn-reference-accessibility.test.ts b/benchmarks/conformance/shared/shadcn-reference-accessibility.test.ts
new file mode 100644
index 00000000..594a783c
--- /dev/null
+++ b/benchmarks/conformance/shared/shadcn-reference-accessibility.test.ts
@@ -0,0 +1,102 @@
+import { describe, expect, it } from 'vitest'
+import { act } from 'react'
+import { createShadcnRechartsExample } from './shadcn-catalog-recharts'
+import { getShadcnCatalogSpec, shadcnColors } from './shadcn-catalog-data'
+
+describe('shadcn reference accessibility', () => {
+  it.each([
+    ['chart-radial-text', '200'],
+    ['chart-radial-shape', '1,260'],
+  ])(
+    'preserves the pinned single-Safari radial example: %s',
+    async (name, value) => {
+      const root = document.createElement('div')
+      document.body.append(root)
+      const handle = await act(async () =>
+        createShadcnRechartsExample(name).mount(root, {
+          width: 640,
+          height: 600,
+          revision: 0,
+        }),
+      )
+      try {
+        const values = root.querySelectorAll(
+          'path.recharts-radial-bar-sector, .recharts-radial-bar-sector path',
+        )
+        expect(values).toHaveLength(1)
+        expect(values[0]?.getAttribute('fill')).toBe(shadcnColors[1])
+        expect(
+          [...root.querySelectorAll('svg text')].map(
+            (text) => text.textContent,
+          ),
+        ).toContain(value)
+        expect(
+          root.querySelectorAll('circle.sc-radial-value-grid'),
+        ).toHaveLength(2)
+      } finally {
+        await act(async () => handle.destroy())
+        root.remove()
+      }
+    },
+  )
+  it('uses the pinned custom bar paint and both label placements', async () => {
+    const root = document.createElement('div')
+    document.body.append(root)
+    const handle = await act(async () =>
+      createShadcnRechartsExample('chart-bar-label-custom').mount(root, {
+        width: 640,
+        height: 600,
+        revision: 0,
+      }),
+    )
+    try {
+      const bars = root.querySelectorAll('.recharts-bar-rectangle path')
+      expect(bars).toHaveLength(6)
+      expect(
+        [...bars].every((bar) => bar.getAttribute('fill') === shadcnColors[1]),
+      ).toBe(true)
+      const labels = [...root.querySelectorAll('.recharts-label')].map(
+        (label) => label.textContent,
+      )
+      expect(labels).toHaveLength(12)
+      expect(labels).toContain('January')
+      expect(labels).toContain('186')
+    } finally {
+      await act(async () => handle.destroy())
+      root.remove()
+    }
+  })
+  it.each([
+    'chart-area-linear',
+    'chart-bar-label-custom',
+    'chart-bar-default',
+    'chart-line-dots',
+    'chart-pie-donut',
+    'chart-radar-grid-none',
+    'chart-radial-text',
+    'chart-tooltip-label-custom',
+  ])('names the rendered chart on mount and update: %s', async (name) => {
+    const root = document.createElement('div')
+    document.body.append(root)
+    const input = { width: 640, height: 600, revision: 0 }
+    const handle = await act(async () =>
+      createShadcnRechartsExample(name).mount(root, input),
+    )
+    try {
+      for (const revision of [0, 1]) {
+        if (revision)
+          await act(async () =>
+            handle.update({ ...input, revision, width: 320 }),
+          )
+        const charts = root.querySelectorAll('svg[aria-label]')
+        expect(charts).toHaveLength(1)
+        expect(charts[0]?.getAttribute('aria-label')).toBe(
+          getShadcnCatalogSpec(name).title,
+        )
+      }
+    } finally {
+      await act(async () => handle.destroy())
+      root.remove()
+    }
+  })
+})
diff --git a/scripts/generate-shadcn-cases.mjs b/scripts/generate-shadcn-cases.mjs
index 8266feb2..13a04e12 100644
--- a/scripts/generate-shadcn-cases.mjs
+++ b/scripts/generate-shadcn-cases.mjs
@@ -329,7 +329,7 @@ function geometry(name, family) {
   if (family === 'radial') {
     return {
       role: 'bar',
-      count: variant === 'simple' || variant === 'text' ? 1 : 5,
+      count: ['simple', 'text', 'shape'].includes(variant) ? 1 : 5,
       rendererRoles: { recharts: 'arc', tanstack: 'arc' },
     }
   }

From 8dffe600060f974e4f5696f081b299d17d394fed Mon Sep 17 00:00:00 2001
From: Tanner Linsley <tannerlinsley@gmail.com>
Date: Fri, 11 Sep 2026 14:55:47 -0600
Subject: [PATCH 2/2] fix: refresh generated catalog metadata

---
 benchmarks/conformance/catalog-index.json     | 2 +-
 benchmarks/conformance/previews/manifest.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/benchmarks/conformance/catalog-index.json b/benchmarks/conformance/catalog-index.json
index 0d861cde..bad37c69 100644
--- a/benchmarks/conformance/catalog-index.json
+++ b/benchmarks/conformance/catalog-index.json
@@ -12066,7 +12066,7 @@
       "geometry": [
         {
           "role": "bar",
-          "count": 5,
+          "count": 1,
           "rendererRoles": {
             "recharts": "arc",
             "tanstack": "arc"
diff --git a/benchmarks/conformance/previews/manifest.json b/benchmarks/conformance/previews/manifest.json
index 85ffa497..f18c50d3 100644
--- a/benchmarks/conformance/previews/manifest.json
+++ b/benchmarks/conformance/previews/manifest.json
@@ -2,7 +2,7 @@
   "schemaVersion": 1,
   "width": 288,
   "height": 192,
-  "sourceHash": "072e58aef53fcd285f7b69aa64b4b1e4cd2cebc996f792cc764db11cbbdd8801",
+  "sourceHash": "c5e393081d8428d13d2efdeca32ad1e7fc56062b610b5c014d29c28af02bbde9",
   "assets": [
     {
       "id": "01-line-gaps",