Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-07-26 13:48:33 +02:00
Code Issues Projects Releases Wiki Activity

Chore(1-3800)/add aria content to charts (#10084)

Browse Source 
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.
This commit is contained in:
Thomas Heartman 2025-06-05 09:40:58 +02:00 committed by GitHub
parent 16df33b078
commit 5da7d50291
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 34 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/src/component/insights/components/LifecycleChart/LifecycleChartComponent.tsx
View File

@ -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]}
/>
);
};

26
frontend/src/component/insights/sections/LifecycleInsights.tsx
View File

@ -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: [