From 579edb38af9e175ff80ba02bfe11abf2f9dee8f6 Mon Sep 17 00:00:00 2001
From: 5affron <piyushrajxsaffron@gmail.com>
Date: Sun, 30 Aug 2026 13:00:04 +0530
Subject: [PATCH 1/2] fix: improve chart and tab accessibility

Signed-off-by: 5affron <piyushrajxsaffron@gmail.com>
---
 web/src/components/ChartSectionCard.tsx | 63 ++++++++++++++++---------
 web/src/components/TabBar.tsx           |  1 +
 web/src/test/app.test.tsx               | 14 ++++--
 3 files changed, 53 insertions(+), 25 deletions(-)

diff --git a/web/src/components/ChartSectionCard.tsx b/web/src/components/ChartSectionCard.tsx
index c34f7d5ae..44bb2e03e 100644
--- a/web/src/components/ChartSectionCard.tsx
+++ b/web/src/components/ChartSectionCard.tsx
@@ -26,6 +26,34 @@ import { VariantTabs } from './VariantTabs';
  */
 const axisOf = (chart: ChartSpec) => JSON.stringify(chart.variants.map((variant) => variant.label));
 
+const sharedAxesFor = (charts: ChartSpec[]) => {
+  const counts = new Map<string, number>();
+
+  for (const chart of charts) {
+    if (chart.variants.length > 1) {
+      const key = axisOf(chart);
+      counts.set(key, (counts.get(key) ?? 0) + 1);
+    }
+  }
+
+  return charts
+    .filter((chart) => chart.variants.length > 1 && (counts.get(axisOf(chart)) ?? 0) > 1)
+    .map((chart) => ({
+      key: axisOf(chart),
+      labels: chart.variants.map((variant) => variant.label),
+    }))
+    .filter((axis, index, all) => all.findIndex((other) => other.key === axis.key) === index);
+};
+
+function activeVariant(chart: ChartSpec, variant: number) {
+  return chart.variants[Math.min(variant, chart.variants.length - 1)];
+}
+
+function chartAlt(chart: ChartSpec, variant: number) {
+  const active = activeVariant(chart, variant);
+  return chart.variants.length > 1 ? `${chart.title} — ${active.label}` : chart.title;
+}
+
 function Figure({
   chart,
   onZoom,
@@ -40,11 +68,12 @@ function Figure({
   stretch?: boolean;
   /** Set when the card owns this chart's axis: it renders one tab row for all
    *  the charts that share it, so this figure shows none of its own. */
-  axis?: { index: number; onSelect: (index: number) => void };
+  axis?: { index: number };
 }) {
   const [own, setOwn] = useState(0);
   const variant = Math.min(axis ? axis.index : own, chart.variants.length - 1);
-  const active = chart.variants[variant];
+  const active = activeVariant(chart, variant);
+  const alt = chartAlt(chart, variant);
   // A tall/square chart (a heatmap) in a ~340px gallery cell is illegible, but
   // the `wide` scroll-box treatment would shrink it to the box height instead.
   // It gets the full row with natural page flow: the dimensions ship with the
@@ -56,7 +85,7 @@ function Figure({
   const img = (
     <img
       src={chartUrl(active.file)}
-      alt={chart.title}
+      alt={alt}
       loading="lazy"
       // Intrinsic size (when known) reserves the aspect-ratio box up front, so
       // a screen of lazy-loading charts doesn't shove content around as each
@@ -94,37 +123,27 @@ export function ChartSectionCard({
   // One selection per shared axis, keyed by its label set.
   const [shared, setShared] = useState<Record<string, number>>({});
 
-  const onZoom = (chart: ChartSpec, variant: number) =>
+  const onZoom = (chart: ChartSpec, variant: number) => {
+    const active = activeVariant(chart, variant);
+
     setZoom({
-      src: chartUrl(chart.variants[variant].file),
-      alt: chart.title,
+      src: chartUrl(active.file),
+      alt: chartAlt(chart, variant),
       // The tab's own text where it has one: on a role-tabbed chart the
       // chart-level note describes maintainers, and showing it on the
       // Committers tab misdescribes the population the reader is looking at.
       note: chart.variants[variant].note ?? chart.note,
-      methodology: chart.variants[variant].methodology ?? chart.methodology,
+      methodology: active.methodology ?? chart.methodology,
     });
+  };
   const count = section.charts.length;
 
   // An axis belongs to the card once two charts offer the same labels; a lone
   // multi-variant chart keeps its own tabs where they sit, under its caption.
-  const axisCounts = new Map<string, number>();
-  for (const chart of section.charts) {
-    if (chart.variants.length > 1) {
-      const axis = axisOf(chart);
-      axisCounts.set(axis, (axisCounts.get(axis) ?? 0) + 1);
-    }
-  }
-  const sharedAxes = section.charts
-    .filter((chart) => chart.variants.length > 1 && (axisCounts.get(axisOf(chart)) ?? 0) > 1)
-    .map((chart) => ({ key: axisOf(chart), labels: chart.variants.map((v) => v.label) }))
-    .filter((axis, index, all) => all.findIndex((other) => other.key === axis.key) === index);
+  const sharedAxes = sharedAxesFor(section.charts);
   const axisFor = (chart: ChartSpec) =>
     sharedAxes.some((axis) => axis.key === axisOf(chart))
-      ? {
-          index: shared[axisOf(chart)] ?? 0,
-          onSelect: (index: number) => setShared({ ...shared, [axisOf(chart)]: index }),
-        }
+      ? { index: shared[axisOf(chart)] ?? 0 }
       : undefined;
 
   // The gallery lays half-width charts out in pairs; full-row charts break the
diff --git a/web/src/components/TabBar.tsx b/web/src/components/TabBar.tsx
index 0421b47b8..f769c8b70 100644
--- a/web/src/components/TabBar.tsx
+++ b/web/src/components/TabBar.tsx
@@ -21,6 +21,7 @@ export function TabBar({
         <button
           key={name}
           className={name === active ? `${kind} active` : kind}
+          aria-pressed={name === active}
           onClick={() => onSelect(name)}
         >
           {name}
diff --git a/web/src/test/app.test.tsx b/web/src/test/app.test.tsx
index 35cdce2db..c704482bf 100644
--- a/web/src/test/app.test.tsx
+++ b/web/src/test/app.test.tsx
@@ -166,7 +166,9 @@ describe('Charts', () => {
     expect(screen.getByRole('button', { name: 'By year' })).toBeInTheDocument();
     expect(screen.getByRole('button', { name: 'By month' })).toBeInTheDocument();
 
-    await userEvent.click(screen.getByAltText('Unique active contributors by role'));
+    expect(screen.getByAltText('Unique active contributors by role — By year')).toBeInTheDocument();
+
+    await userEvent.click(screen.getByAltText('Unique active contributors by role — By year'));
     const lightbox = await screen.findByRole('dialog');
     expect(within(lightbox).getByText('How to read this chart.')).toBeInTheDocument();
     expect(within(lightbox).getByText('Step-by-step methodology')).toBeInTheDocument();
@@ -185,7 +187,13 @@ describe('Organisation diversity card (#435)', () => {
     return await screen.findByText('Organisation diversity');
   };
 
-  const chartSrc = (title: string) => screen.getByAltText(title).getAttribute('src');
+  const chartSrc = (title: string) => {
+    const image = screen
+      .getAllByRole('img')
+      .find((img) => img.getAttribute('alt')?.startsWith(title));
+    expect(image).toBeDefined();
+    return image!.getAttribute('src');
+  };
 
   it('gives the card one role axis, so every role-tabbed chart switches together', async () => {
     await openDiversity();
@@ -227,7 +235,7 @@ describe('Organisation diversity card (#435)', () => {
     const axis = screen.getByRole('group', { name: 'Organisation diversity view' });
 
     await userEvent.click(within(axis).getByRole('button', { name: 'Committers' }));
-    await userEvent.click(screen.getByAltText('Role-holders by organisation'));
+    await userEvent.click(screen.getByAltText('Role-holders by organisation — Committers'));
 
     // The committer tab must describe committers — it used to show the
     // maintainer note, which misdescribed its own population.

From 22b94d6d566fcd2d58028d4611a441a5d06bbede Mon Sep 17 00:00:00 2001
From: Ntege Daniel <danientege785@gmail.com>
Date: Wed, 30 Sep 2026 18:48:14 +0300
Subject: [PATCH 2/2] fix(web): name single-view charts once for assistive tech
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A single-view chart's only variant label is its own title, so its figure
was announced as "Activity heatmap — Activity heatmap", and its loading
and error messages repeated the title the same way. Name the view with its
title alone when the label adds nothing, and keep "<title> — <variant>"
for charts with tabs.

Refs #326

Signed-off-by: Ntege Daniel <danientege785@gmail.com>
---
 web/src/components/ChartSectionCard.tsx |  5 +++--
 web/src/components/InteractiveChart.tsx |  5 +++--
 web/src/format.ts                       | 10 ++++++++++
 web/src/test/app.test.tsx               | 17 +++++++++--------
 web/src/test/format.test.ts             | 13 ++++++++++++-
 web/src/test/printComponents.test.tsx   |  4 ++--
 6 files changed, 39 insertions(+), 15 deletions(-)

diff --git a/web/src/components/ChartSectionCard.tsx b/web/src/components/ChartSectionCard.tsx
index e7c9e341c..2a4b6e209 100644
--- a/web/src/components/ChartSectionCard.tsx
+++ b/web/src/components/ChartSectionCard.tsx
@@ -10,6 +10,7 @@ import { cn } from 'cn';
 import { Button } from '@/components/ui/button';
 import { fetchApiText, type ChartSection, type ChartSpec, type Manifest } from '../api';
 import { downloadCsvText } from '../csv';
+import { chartViewName } from '../format';
 import { usePrintMode } from '../printContext';
 import { ChartSectionTitle } from './charts/leading';
 import { CopyLinkButton } from './CopyLinkButton';
@@ -66,7 +67,7 @@ function Figure({
   return (
     <figure
       hidden={hidden}
-      aria-label={`${chart.title} — ${active.label}`}
+      aria-label={chartViewName(chart.title, active.label)}
       className={cn(
         'm-0 min-w-0 rounded-xl border bg-background/40 p-3',
         (slide || fullRow) && 'col-span-full',
@@ -86,7 +87,7 @@ function Figure({
         <Suspense
           fallback={
             <p role="status" data-print-pending className="p-10 text-center text-muted-foreground">
-              Loading chart: {chart.title} ({active.label})…
+              Loading chart: {chartViewName(chart.title, active.label)}…
             </p>
           }
         >
diff --git a/web/src/components/InteractiveChart.tsx b/web/src/components/InteractiveChart.tsx
index daf298de9..2d0713da7 100644
--- a/web/src/components/InteractiveChart.tsx
+++ b/web/src/components/InteractiveChart.tsx
@@ -8,6 +8,7 @@ import { RotateCwIcon } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import type { ChartDocument, ChartVariant, Manifest } from '../api';
 import { fetchChartDocument } from '../chartData';
+import { chartViewName } from '../format';
 import { EventsView } from './charts/EventsView';
 import { MatrixView } from './charts/MatrixView';
 import { NetworkView } from './charts/NetworkView';
@@ -83,7 +84,7 @@ export default function InteractiveChart({
           data-print-pending
           className="flex h-[340px] items-center justify-center text-sm text-muted-foreground"
         >
-          Loading interactive chart: {title} ({variant.label})…
+          Loading interactive chart: {chartViewName(title, variant.label)}…
         </div>
       </>
     );
@@ -96,7 +97,7 @@ export default function InteractiveChart({
           data-print-error
           className="print-chart-status mb-4 flex flex-wrap items-center gap-3 rounded-lg border p-4 text-sm"
         >
-          Could not load chart data: {title} ({variant.label}).
+          Could not load chart data: {chartViewName(title, variant.label)}.
           <Button
             variant="outline"
             size="sm"
diff --git a/web/src/format.ts b/web/src/format.ts
index 350db29ac..75c8fe0de 100644
--- a/web/src/format.ts
+++ b/web/src/format.ts
@@ -28,3 +28,13 @@ export function stamp(iso: string): string {
 export function dateStamp(iso: string): string {
   return stamp(iso).slice(0, 10);
 }
+
+/**
+ * A chart view's name: its title, then the variant label when that adds something.
+ *
+ * A single-view chart's only label is its own title, so joining the two would
+ * have a screen reader announce "Activity heatmap — Activity heatmap".
+ */
+export function chartViewName(title: string, label: string): string {
+  return label === title ? title : `${title} — ${label}`;
+}
diff --git a/web/src/test/app.test.tsx b/web/src/test/app.test.tsx
index 8637dfe47..04c2414ca 100644
--- a/web/src/test/app.test.tsx
+++ b/web/src/test/app.test.tsx
@@ -206,8 +206,10 @@ describe('Organisation diversity card (#435)', () => {
     return await screen.findByText('Organisation diversity');
   };
 
-  const chartVariant = (title: string) =>
-    screen.getByRole('figure', { name: new RegExp(`^${title} —`) }).getAttribute('aria-label');
+  // A figure is named "<title> — <variant>", or just its title when it has one view.
+  const figureNamed = (title: string) =>
+    screen.getByRole('figure', { name: new RegExp(`^${title}( —|$)`) });
+  const chartVariant = (title: string) => figureNamed(title).getAttribute('aria-label');
 
   it('gives the card one role axis, so every role-tabbed chart switches together', async () => {
     await openDiversity();
@@ -223,8 +225,9 @@ describe('Organisation diversity card (#435)', () => {
 
     expect(chartVariant('Role-holders by organisation')).toContain('Committers');
     expect(chartVariant('Single-employer repos by org')).toContain('Committers');
-    // The chart with no role axis is untouched by the card's tabs.
-    expect(chartVariant('Single-employer teams by org')).toContain('Single-employer teams by org');
+    // The chart with no role axis is untouched by the card's tabs, and its one
+    // view is named once rather than "<title> — <title>".
+    expect(chartVariant('Single-employer teams by org')).toBe('Single-employer teams by org');
   });
 
   // Out-of-range tabs clamp to the last one; anything else falls back to the first.
@@ -244,11 +247,9 @@ describe('Organisation diversity card (#435)', () => {
 
   it('leads an odd run of half-width charts with a two-row chart', async () => {
     await openDiversity();
-    const figure = (title: string) =>
-      screen.getByRole('figure', { name: new RegExp(`^${title} —`) });
     // Three half-width charts: the first spans two rows, the others stack beside it.
-    expect(figure('Role-holders by organisation')).toHaveClass('lg:row-span-2');
-    expect(figure('Single-employer teams by org')).not.toHaveClass('lg:row-span-2');
+    expect(figureNamed('Role-holders by organisation')).toHaveClass('lg:row-span-2');
+    expect(figureNamed('Single-employer teams by org')).not.toHaveClass('lg:row-span-2');
   });
 
   it('leaves a chart with its own variant set on its own tabs', async () => {
diff --git a/web/src/test/format.test.ts b/web/src/test/format.test.ts
index 040461305..2be467c13 100644
--- a/web/src/test/format.test.ts
+++ b/web/src/test/format.test.ts
@@ -1,7 +1,7 @@
 /** Timestamps are labelled UTC wherever they appear, so they must be in UTC. */
 
 import { describe, expect, it } from 'vitest';
-import { dateStamp, stamp } from '../format';
+import { chartViewName, dateStamp, stamp } from '../format';
 
 describe('stamp', () => {
   it('keeps a UTC timestamp as-is', () => {
@@ -43,6 +43,17 @@ describe('dateStamp', () => {
   });
 });
 
+describe('chartViewName', () => {
+  it('names the variant after the title', () => {
+    expect(chartViewName('Contributors', 'By month')).toBe('Contributors — By month');
+  });
+
+  it('does not repeat a single-view chart’s title', () => {
+    // A chart with one view is labelled with its own title.
+    expect(chartViewName('Activity heatmap', 'Activity heatmap')).toBe('Activity heatmap');
+  });
+});
+
 describe('readFigure', () => {
   it('draws shares and parts of a whole as meters, and counts with separators', async () => {
     const { readFigure } = await import('../metricFigure');
diff --git a/web/src/test/printComponents.test.tsx b/web/src/test/printComponents.test.tsx
index bde1b0f62..5dda3a8db 100644
--- a/web/src/test/printComponents.test.tsx
+++ b/web/src/test/printComponents.test.tsx
@@ -93,12 +93,12 @@ describe('Chart printing', () => {
       <InteractiveChart variant={variant} title="Contributors" provenance={MANIFEST.provenance} />,
     );
     expect(screen.getByRole('status')).toHaveAttribute('data-print-pending');
-    expect(screen.getByRole('status')).toHaveTextContent('Contributors (All)');
+    expect(screen.getByRole('status')).toHaveTextContent('Contributors — All');
 
     await act(async () => fail());
     const alert = await screen.findByRole('alert');
     expect(alert).toHaveAttribute('data-print-error');
-    expect(alert).toHaveTextContent('Could not load chart data: Contributors (All).');
+    expect(alert).toHaveTextContent('Could not load chart data: Contributors — All.');
     expect(document.querySelector('[data-print-pending]')).toBeNull();
     vi.unstubAllGlobals();
   });