From 5da7d50291a7826add2119b3b2dafcb50e2f41bd Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Thu, 5 Jun 2025 09:40:58 +0200
Subject: [PATCH] Chore(1-3800)/add aria content to charts (#10084)

Adds aria label and description to the lifecycle trend charts

The label explains that it's a bar chart, which stage it's describing,
and
the number of flags in each category.

The description provides more information about the split between new
flags this week and older flags.
---
 .../LifecycleChartComponent.tsx               | 15 +++++++----
 .../insights/sections/LifecycleInsights.tsx   | 26 +++++++++++++++++--
 2 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/frontend/src/component/insights/components/LifecycleChart/LifecycleChartComponent.tsx b/frontend/src/component/insights/components/LifecycleChart/LifecycleChartComponent.tsx
index 9d79e298f9..fa5c194f0b 100644
--- a/frontend/src/component/insights/components/LifecycleChart/LifecycleChartComponent.tsx
+++ b/frontend/src/component/insights/components/LifecycleChart/LifecycleChartComponent.tsx
@@ -88,8 +88,10 @@ function mergeAll<T>(objects: Partial<T>[]): T {
 
 const LifecycleChartComponent: FC<{
     data: ChartData<'bar', unknown>;
+    ariaLabel: string;
+    ariaDescription?: string;
     overrideOptions?: ChartOptions<'bar'>;
-}> = ({ data, overrideOptions }) => {
+}> = ({ data, ariaLabel, ariaDescription, overrideOptions }) => {
     const theme = useTheme();
     const { locationSettings } = useLocationSettings();
 
@@ -99,10 +101,13 @@ const LifecycleChartComponent: FC<{
     );
 
     return (
-        <>
-            <Bar options={options} data={data} plugins={[ChartDataLabels]} />
-            {/* todo: implement fallback for screen readers */}
-        </>
+        <Bar
+            options={options}
+            data={data}
+            aria-label={ariaLabel}
+            aria-description={ariaDescription}
+            plugins={[ChartDataLabels]}
+        />
     );
 };
 
diff --git a/frontend/src/component/insights/sections/LifecycleInsights.tsx b/frontend/src/component/insights/sections/LifecycleInsights.tsx
index 4527c62671..4e9990f5d8 100644
--- a/frontend/src/component/insights/sections/LifecycleInsights.tsx
+++ b/frontend/src/component/insights/sections/LifecycleInsights.tsx
@@ -86,7 +86,7 @@ export const LifecycleInsights: FC = () => {
                 {Object.entries(mockData).map(([stage, data]) => {
                     return (
                         <ChartContainer key={stage}>
-                            <Chart data={data} />
+                            <Chart data={data} stage={stage} />
                         </ChartContainer>
                     );
                 })}
@@ -95,15 +95,37 @@ export const LifecycleInsights: FC = () => {
     );
 };
 
-const Chart: React.FC<{ data: LifecycleTrend }> = ({ data }) => {
+const Chart: React.FC<{ stage: string; data: LifecycleTrend }> = ({
+    stage,
+    data,
+}) => {
     const chartColors = useChartColors();
     const oldData = [
         data.categories.experimental.flagsOlderThanWeek,
         data.categories.release.flagsOlderThanWeek,
         data.categories.permanent.flagsOlderThanWeek,
     ];
+
+    const total = {
+        experimental:
+            data.categories.experimental.flagsOlderThanWeek +
+            data.categories.experimental.newFlagsThisWeek,
+        release:
+            data.categories.release.flagsOlderThanWeek +
+            data.categories.release.newFlagsThisWeek,
+        permanent:
+            data.categories.permanent.flagsOlderThanWeek +
+            data.categories.permanent.newFlagsThisWeek,
+    };
+
+    const ariaLabel = `Bar chart; the number of flags in the ${stage} stage, separated by flag type. Experimental: ${total.experimental}, Release: ${total.release}, Other: ${total.permanent}`;
+
+    const ariaDescription = `Flag counts are further separated into flags that have entered the stage within the last week (new) and flags that have been in the stage for more than a week (old). Experimental flags: ${data.categories.experimental.flagsOlderThanWeek} old, ${data.categories.experimental.newFlagsThisWeek} new. Release flags: ${data.categories.release.flagsOlderThanWeek} old, ${data.categories.release.newFlagsThisWeek} new. Other flags: ${data.categories.permanent.flagsOlderThanWeek} old, ${data.categories.permanent.newFlagsThisWeek} new.`;
+
     return (
         <LifecycleChart
+            ariaLabel={ariaLabel}
+            ariaDescription={ariaDescription}
             data={{
                 labels: [`Experimental`, `Release`, `Other flags`],
                 datasets: [