feat(PieChart): improve a11y (#1619)

Talend · Aug 16, 2018 · 2a177a3 · 2a177a3
1 parent 23a9566
commit 2a177a3
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 2 deletions.
diff --git a/packages/components/src/PieChart/PieChartIcon.component.js b/packages/components/src/PieChart/PieChartIcon.component.js
@@ -281,7 +281,11 @@ export function PieChartIconComponent({
 	const sizeObject = getDisplaySize(size, display);
 	if (loading) {
 		return (
-			<span className={classnames(theme['tc-pie-chart-loading'], 'tc-pie-chart-loading')}>
+			<span
+				className={classnames(theme['tc-pie-chart-loading'], 'tc-pie-chart-loading')}
+				aria-busy="true"
+				aria-label={t('PIE_CHART_LOADING', { defaultValue: 'Loading chart' })}
+			>
 				<Skeleton
 					type={Skeleton.TYPES.circle}
 					width={sizeObject.svgSize}
@@ -301,12 +305,13 @@ export function PieChartIconComponent({
 	// to keep only the event listener from the TooltipTrigger.
 	const omitI18N = omit(rest, ['i18n', 'tReady']);
 	return (
-		<span className={classnames(theme['tc-pie-chart-icon'], 'tc-pie-icon-chart')} {...omitI18N}>
+		<span className={classnames(theme['tc-pie-chart-icon'], 'tc-pie-icon-chart')}>
 			<svg
 				width={sizeObject.svgSize}
 				height={sizeObject.svgSize}
 				className={classnames(theme['tc-pie-chart-icon-graph'], 'tc-pie-chart-icon-graph')}
 				style={{ width: sizeObject.svgSize, height: sizeObject.svgSize }}
+				{...omitI18N}
 			>
 				{preparedValues.map((value, index) => getCircle(value, index, preparedValues, sizeObject))}
 				{getEmptyPartCircle(preparedValues, sizeObject, minimumPercentage)}

diff --git a/packages/components/src/PieChart/PieChartIcon.test.js b/packages/components/src/PieChart/PieChartIcon.test.js
@@ -44,6 +44,18 @@ describe('PieChart', () => {
 			const wrapper = shallow(<PieChartIconComponent display="small" model={pieChartData} />);
 			expect(wrapper.getElement()).toMatchSnapshot();
 		});
+		it('should spread extra props on svg', () => {
+			// given
+			const ariaLabel = 'Invalid values: 50%. Empty values: 14%. Valid values: 36%';
+
+			// when
+			const wrapper = shallow(
+				<PieChartIconComponent model={pieChartData} aria-label={ariaLabel} />,
+			);
+
+			// then
+			expect(wrapper.find('svg').prop('aria-label')).toBe(ariaLabel);
+		});
 	});
 
 	describe('getCircle', () => {

diff --git a/packages/components/src/PieChart/__snapshots__/PieChartIcon.test.js.snap b/packages/components/src/PieChart/__snapshots__/PieChartIcon.test.js.snap
@@ -80,6 +80,8 @@ exports[`PieChart snapshots render should render a PieChart 1`] = `
 
 exports[`PieChart snapshots render should render a Skeleton when the state is loading 1`] = `
 <span
+  aria-busy="true"
+  aria-label="Loading chart"
   className="theme-tc-pie-chart-loading tc-pie-chart-loading"
 >
   <Translate(Skeleton)