From 893acbe168457d2282f3710b0ec279b3fdceb768 Mon Sep 17 00:00:00 2001 From: Anna Perdomo Date: Mon, 22 Jul 2024 08:52:33 -0700 Subject: [PATCH 1/5] feat: Adds tabIndex to BarChart bar label --- src/components/BarChart/index.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/BarChart/index.tsx b/src/components/BarChart/index.tsx index cd00ba98..58727ae4 100644 --- a/src/components/BarChart/index.tsx +++ b/src/components/BarChart/index.tsx @@ -254,6 +254,7 @@ export const BarChart: React.FC = ( axisLine={false} orientation="top" tickFormatter={(v: number): string => numeral(v).format('0,0')} + tabIndex={0} type="number" xAxisId={0} {...xAxisProps} @@ -297,6 +298,7 @@ export const BarChart: React.FC = ( setBarIdHovered(key); } }} + tabIndex={0} {...(barProps as Omit)} > = ( fill: palette.grey[700], fontSize: typography.caption.fontSize, }} + tabIndex={0} {...labelListProps} /> {barKeys.length > 1 && ( @@ -326,6 +329,7 @@ export const BarChart: React.FC = ( fill: palette.grey[700], fontSize: typography.caption.fontSize, }} + tabIndex={0} valueAccessor={(bar: BarLabelProps): string => subLabels ? subLabels[i] : bar?.tooltipPayload[0]?.name } From d20fedb9f6dacfea74d00727335463ca79fc8ce1 Mon Sep 17 00:00:00 2001 From: Anna Perdomo Date: Mon, 22 Jul 2024 15:48:39 -0700 Subject: [PATCH 2/5] feat: Applies accessibilityLayer prop to BarChart and adds title and description props --- src/components/BarChart/index.tsx | 20 +++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/src/components/BarChart/index.tsx b/src/components/BarChart/index.tsx index 58727ae4..86c6e658 100644 --- a/src/components/BarChart/index.tsx +++ b/src/components/BarChart/index.tsx @@ -9,7 +9,7 @@ import { useTheme, useThemeProps } from '@mui/material/styles'; import { TypographyProps } from '@mui/material/Typography'; -import { isFunction } from 'lodash'; +import { isFunction, kebabCase, toLower } from 'lodash'; import numeral from 'numeral'; import React, { useMemo } from 'react'; import { @@ -63,6 +63,7 @@ export interface BarChartProps { customizeBarFillColor?: (index: number, key: string) => string | undefined; customizedAxisTickProps?: CustomizedAxisTickProps; data: Array; + description?: string; height?: number | ((calculatedHeight: number) => number | undefined); labelListProps?: LabelListProps; maxHeight?: number | string; @@ -72,6 +73,7 @@ export interface BarChartProps { subLabelProps?: LabelListProps; subLabelWidth?: number; subLabels?: Array; + title?: string; tooltipBarId?: string; tooltipProps?: CustomToolTipProps; UnhoveredTooltipComponent?: React.JSX.Element; @@ -113,6 +115,7 @@ export const BarChart: React.FC = ( customizeBarFillColor, customizedAxisTickProps, data, + description, height, labelListProps, maxHeight, @@ -121,6 +124,7 @@ export const BarChart: React.FC = ( subLabelProps, subLabelWidth, subLabels, + title, tooltipBarId, tooltipProps, variant, @@ -211,7 +215,7 @@ export const BarChart: React.FC = ( composedChartLeftMargin = (subLabelWidth || maxSubLabelWidth) + parseInt(String(spacing(1)), 10); } - + console.log('LabelListProps', labelListProps); return ( = ( {...responsiveContainerProps} > = ( top: parseInt(String(spacing(2)), 10), }} maxBarSize={30} + role="group" style={{ cursor: chartProps?.onClick ? 'pointer' : undefined, fontFamily: typography.fontFamily, }} + title={title} {...chartProps} > = ( axisLine={false} orientation="top" tickFormatter={(v: number): string => numeral(v).format('0,0')} - tabIndex={0} type="number" xAxisId={0} {...xAxisProps} @@ -298,12 +306,13 @@ export const BarChart: React.FC = ( setBarIdHovered(key); } }} - tabIndex={0} {...(barProps as Omit)} > + {/* number at end of bar */} numeral(v).format('0,0')} + id={`${key}-bar-label`} onMouseLeave={(): void => { if (setTooltipBarId) setTooltipBarId(undefined); setBarIdHovered(undefined); @@ -322,14 +331,15 @@ export const BarChart: React.FC = ( tabIndex={0} {...labelListProps} /> + {/* year at the beginning of the bar */} {barKeys.length > 1 && ( subLabels ? subLabels[i] : bar?.tooltipPayload[0]?.name } From f420d4bda5472657a295f99d39b9d68d72642fbf Mon Sep 17 00:00:00 2001 From: Anna Perdomo Date: Mon, 22 Jul 2024 15:49:23 -0700 Subject: [PATCH 3/5] feat: Adds correct role and status to BarChart/CustomTooltip for screen reader access --- src/components/BarChart/CustomTooltip/index.tsx | 3 ++- src/components/BarChart/index.stories.tsx | 3 +++ src/components/BarChart/index.tsx | 12 ++++++------ 3 files changed, 11 insertions(+), 7 deletions(-) diff --git a/src/components/BarChart/CustomTooltip/index.tsx b/src/components/BarChart/CustomTooltip/index.tsx index 0643f934..99aba413 100644 --- a/src/components/BarChart/CustomTooltip/index.tsx +++ b/src/components/BarChart/CustomTooltip/index.tsx @@ -102,8 +102,9 @@ export const CustomTooltip: React.FC = ( : numeral(barInfo.value).format('0,0'), })); } + return ( - + {label} {showValue && diff --git a/src/components/BarChart/index.stories.tsx b/src/components/BarChart/index.stories.tsx index 7f57bf45..92f65a5d 100644 --- a/src/components/BarChart/index.stories.tsx +++ b/src/components/BarChart/index.stories.tsx @@ -30,6 +30,9 @@ export default { args: { barKeys: defaultBarKeys, data: defaultData, + description: + 'A bar chart displaying the volumns per US state in 2019, 2020, and 2021', + title: 'Volumes for US States', }, argTypes: Playground( { diff --git a/src/components/BarChart/index.tsx b/src/components/BarChart/index.tsx index 86c6e658..28560416 100644 --- a/src/components/BarChart/index.tsx +++ b/src/components/BarChart/index.tsx @@ -215,7 +215,8 @@ export const BarChart: React.FC = ( composedChartLeftMargin = (subLabelWidth || maxSubLabelWidth) + parseInt(String(spacing(1)), 10); } - console.log('LabelListProps', labelListProps); + + const lowerCaseTitle = toLower(title); return ( = ( barGap={DEFAULT_BAR_GAP} data={data} desc={description} - id={`${title ? `${kebabCase(toLower(title))}-` : ''}bar-chart`} + id={`${title ? `${kebabCase(lowerCaseTitle)}-` : ''}bar-chart`} layout="vertical" margin={{ bottom: parseInt(String(spacing(0.6)), 10), @@ -247,7 +248,6 @@ export const BarChart: React.FC = ( top: parseInt(String(spacing(2)), 10), }} maxBarSize={30} - role="group" style={{ cursor: chartProps?.onClick ? 'pointer' : undefined, fontFamily: typography.fontFamily, @@ -296,7 +296,8 @@ export const BarChart: React.FC = ( isAnimationActive={animate} key={`${key}-bar`} onAnimationStart={onAnimationStart} - onMouseLeave={(): void => { + onMouseMove={(): void => { + console.log('🪇'); if (setTooltipBarId) setTooltipBarId(undefined); setBarIdHovered(undefined); }} @@ -308,7 +309,6 @@ export const BarChart: React.FC = ( }} {...(barProps as Omit)} > - {/* number at end of bar */} numeral(v).format('0,0')} @@ -331,7 +331,6 @@ export const BarChart: React.FC = ( tabIndex={0} {...labelListProps} /> - {/* year at the beginning of the bar */} {barKeys.length > 1 && ( = ( })} } From f7ab3418c73fd6183995841dab2be88eec299d21 Mon Sep 17 00:00:00 2001 From: Anna Perdomo Date: Mon, 22 Jul 2024 15:49:23 -0700 Subject: [PATCH 4/5] feat: Adds correct role and status to BarChart/CustomTooltip for screen reader access --- src/components/BarChart/CustomTooltip/index.tsx | 3 ++- src/components/BarChart/index.stories.tsx | 3 +++ src/components/BarChart/index.tsx | 11 +++++------ 3 files changed, 10 insertions(+), 7 deletions(-) diff --git a/src/components/BarChart/CustomTooltip/index.tsx b/src/components/BarChart/CustomTooltip/index.tsx index 0643f934..99aba413 100644 --- a/src/components/BarChart/CustomTooltip/index.tsx +++ b/src/components/BarChart/CustomTooltip/index.tsx @@ -102,8 +102,9 @@ export const CustomTooltip: React.FC = ( : numeral(barInfo.value).format('0,0'), })); } + return ( - + {label} {showValue && diff --git a/src/components/BarChart/index.stories.tsx b/src/components/BarChart/index.stories.tsx index 7f57bf45..c0029866 100644 --- a/src/components/BarChart/index.stories.tsx +++ b/src/components/BarChart/index.stories.tsx @@ -30,6 +30,9 @@ export default { args: { barKeys: defaultBarKeys, data: defaultData, + description: + 'A bar chart displaying the volumes per US state in 2019, 2020, and 2021', + title: 'Volumes for US States', }, argTypes: Playground( { diff --git a/src/components/BarChart/index.tsx b/src/components/BarChart/index.tsx index 86c6e658..49f71b36 100644 --- a/src/components/BarChart/index.tsx +++ b/src/components/BarChart/index.tsx @@ -215,7 +215,8 @@ export const BarChart: React.FC = ( composedChartLeftMargin = (subLabelWidth || maxSubLabelWidth) + parseInt(String(spacing(1)), 10); } - console.log('LabelListProps', labelListProps); + + const lowerCaseTitle = toLower(title); return ( = ( barGap={DEFAULT_BAR_GAP} data={data} desc={description} - id={`${title ? `${kebabCase(toLower(title))}-` : ''}bar-chart`} + id={`${title ? `${kebabCase(lowerCaseTitle)}-` : ''}bar-chart`} layout="vertical" margin={{ bottom: parseInt(String(spacing(0.6)), 10), @@ -247,7 +248,6 @@ export const BarChart: React.FC = ( top: parseInt(String(spacing(2)), 10), }} maxBarSize={30} - role="group" style={{ cursor: chartProps?.onClick ? 'pointer' : undefined, fontFamily: typography.fontFamily, @@ -296,7 +296,7 @@ export const BarChart: React.FC = ( isAnimationActive={animate} key={`${key}-bar`} onAnimationStart={onAnimationStart} - onMouseLeave={(): void => { + onMouseMove={(): void => { if (setTooltipBarId) setTooltipBarId(undefined); setBarIdHovered(undefined); }} @@ -308,7 +308,6 @@ export const BarChart: React.FC = ( }} {...(barProps as Omit)} > - {/* number at end of bar */} numeral(v).format('0,0')} @@ -331,7 +330,6 @@ export const BarChart: React.FC = ( tabIndex={0} {...labelListProps} /> - {/* year at the beginning of the bar */} {barKeys.length > 1 && ( = ( })} } From 49144c537b4008fe864f3cd22c327553b6a3d62e Mon Sep 17 00:00:00 2001 From: Anna Perdomo Date: Tue, 23 Jul 2024 09:43:05 -0700 Subject: [PATCH 5/5] fix: Remove unncessary newline --- src/components/BarChart/CustomTooltip/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/BarChart/CustomTooltip/index.tsx b/src/components/BarChart/CustomTooltip/index.tsx index 99aba413..178723c5 100644 --- a/src/components/BarChart/CustomTooltip/index.tsx +++ b/src/components/BarChart/CustomTooltip/index.tsx @@ -102,7 +102,6 @@ export const CustomTooltip: React.FC = ( : numeral(barInfo.value).format('0,0'), })); } - return ( {label}