@redsift/dashboard 6.3.0 → 6.3.1

package/index.js

@@ -4156,6 +4156,7 @@ const useChartAsListbox = _ref => {
     numberOfGroups,
     chartRef,
     chart,
+    labelling,
     orientation = 'horizontal'
   } = _ref;
   const currentIndexRef = useRef(0);
@@ -4236,7 +4237,15 @@ const useChartAsListbox = _ref => {
         // Add role, aria attributes and keyboard events to the group of options.
         chartRef.setAttribute('tabIndex', '0');
         chartRef.setAttribute('role', 'listbox');
-        chartRef.setAttribute('aria-labelledby', `id${id}__title`);
+        if (labelling.ariaLabel) {
+          chartRef.setAttribute('aria-label', labelling.ariaLabel);
+        } else if (labelling.ariaLabelledby) {
+          chartRef.setAttribute('aria-labelledby', labelling.ariaLabelledby);
+        } else if (labelling.hasTitle) {
+          chartRef.setAttribute('aria-labelledby', `id${id}__title`);
+        } else {
+          chartRef.setAttribute('aria-label', labelling.fallbackAriaLabel);
+        }
         chartRef.setAttribute('aria-multiselectable', 'true');
         chartRef.setAttribute('aria-orientation', orientation);
         chartRef.setAttribute('aria-activedescendant', `id${id}__option-0`);
@@ -4263,7 +4272,7 @@ const useChartAsListbox = _ref => {
   }, [chart]);
 };
 
-const _excluded$2 = ["areXLabelsRotated", "caping", "caption", "className", "data", "datagridFilter", "dimension", "group", "isDimensionArray", "isResetable", "localeText", "onFilter", "others", "setLabels", "size", "theme", "title"];
+const _excluded$2 = ["aria-label", "aria-labelledby", "areXLabelsRotated", "caping", "caption", "className", "data", "datagridFilter", "dimension", "group", "isDimensionArray", "isResetable", "localeText", "onFilter", "others", "setLabels", "size", "theme", "title"];
 const COMPONENT_NAME$2 = 'RedSiftHorizontalBarChart';
 const CLASSNAME$2 = 'redsift-horizontal-barchart';
 const DEFAULT_PROPS$2 = {
@@ -4273,8 +4282,7 @@ const DEFAULT_PROPS$2 = {
   },
   others: true,
   size: HorizontalBarChartSize.medium,
-  theme: HorizontalBarChartTheme.default,
-  title: 'Horizontal Bar Chart'
+  theme: HorizontalBarChartTheme.default
 };
 const sizeToDimension$2 = size => {
   switch (size) {
@@ -4304,6 +4312,8 @@ const HorizontalBarChart = /*#__PURE__*/forwardRef((props, ref) => {
   const [groups, setGroups] = useState();
   const [dimensions, setDimensions] = useState();
   const {
+      'aria-label': ariaLabel,
+      'aria-labelledby': ariaLabelledby,
       areXLabelsRotated,
       caping,
       caption,
@@ -4453,15 +4463,22 @@ const HorizontalBarChart = /*#__PURE__*/forwardRef((props, ref) => {
     numberOfGroups: numberOfGroups || 0,
     chartRef: chartRef.current,
     chart: chart,
+    labelling: {
+      ariaLabel,
+      ariaLabelledby,
+      hasTitle: !!title,
+      fallbackAriaLabel: 'Horizontal Bar Chart'
+    },
     orientation: 'vertical'
   });
   return /*#__PURE__*/React.createElement(StyledHorizontalBarChart, _extends({}, forwardedProps, {
     className: classNames(HorizontalBarChart.className, className),
     ref: containerRef
   }), /*#__PURE__*/React.createElement(StyledHorizontalBarChartTitle, {
-    className: `${HorizontalBarChart.className}__title`,
+    className: `${HorizontalBarChart.className}__title`
+  }, title ? /*#__PURE__*/React.createElement("div", {
     id: `id${id}__title`
-  }, title, chart && isResetable ? /*#__PURE__*/React.createElement(Button, {
+  }, title) : null, chart && isResetable ? /*#__PURE__*/React.createElement(Button, {
     variant: "text",
     size: "small",
     color: "primary",
@@ -7621,7 +7638,7 @@ const StyledPieChartContainer = styled.div`
   }
 `;
 
-const _excluded$1 = ["caping", "caption", "className", "data", "datagridFilter", "isResetable", "labelVariant", "dimension", "group", "isDimensionArray", "localeText", "onFilter", "others", "setLabels", "size", "text", "middleText", "subtext", "theme", "title", "variant"];
+const _excluded$1 = ["aria-label", "aria-labelledby", "caping", "caption", "className", "data", "datagridFilter", "isResetable", "labelVariant", "dimension", "group", "isDimensionArray", "localeText", "onFilter", "others", "setLabels", "size", "text", "middleText", "subtext", "theme", "title", "variant"];
 const COMPONENT_NAME$1 = 'RedSiftPieChart';
 const CLASSNAME$1 = 'redsift-piechart';
 const DEFAULT_PROPS$1 = {
@@ -7633,7 +7650,6 @@ const DEFAULT_PROPS$1 = {
   others: true,
   size: PieChartSize.medium,
   theme: PieChartTheme.default,
-  title: 'Pie Chart',
   variant: PieChartVariant.plain
 };
 const sizeToDimension$1 = size => {
@@ -7696,6 +7712,8 @@ const PieChart = /*#__PURE__*/forwardRef((props, ref) => {
   const [groups, setGroups] = useState();
   const [dimensions, setDimensions] = useState();
   const {
+      'aria-label': ariaLabel,
+      'aria-labelledby': ariaLabelledby,
       caping,
       caption,
       className,
@@ -7836,7 +7854,13 @@ const PieChart = /*#__PURE__*/forwardRef((props, ref) => {
     querySelector: 'g.pie-slice',
     numberOfGroups: numberOfGroups || 0,
     chartRef: chartRef.current,
-    chart: chart
+    chart: chart,
+    labelling: {
+      ariaLabel,
+      ariaLabelledby,
+      hasTitle: !!title,
+      fallbackAriaLabel: 'Pie Chart'
+    }
   });
   return /*#__PURE__*/React.createElement(StyledPieChart, _extends({}, forwardedProps, {
     id: id,
@@ -7845,9 +7869,10 @@ const PieChart = /*#__PURE__*/forwardRef((props, ref) => {
     $spaced: variant === PieChartVariant.spaced || variant === PieChartVariant.spacedDonut,
     $showLabels: labelVariant === PieChartLabelVariant.internal
   }), /*#__PURE__*/React.createElement(StyledPieChartTitle, {
-    className: `${PieChart.className}__title`,
+    className: `${PieChart.className}__title`
+  }, title ? /*#__PURE__*/React.createElement("div", {
     id: `id${id}__title`
-  }, title, chart && isResetable ? /*#__PURE__*/React.createElement(Button, {
+  }, title) : null, chart && isResetable ? /*#__PURE__*/React.createElement(Button, {
     variant: "text",
     size: "small",
     color: "primary",
@@ -8012,8 +8037,7 @@ const DEFAULT_PROPS = {
   localeText: {
     resetLabel: 'Reset'
   },
-  size: TimeSeriesBarChartSize.medium,
-  title: 'Time Series Bar Chart'
+  size: TimeSeriesBarChartSize.medium
 };
 const getStartDate = dates => new Date(Math.min(...dates.map(Number)));
 const getEndDate = dates => new Date(Math.max(...dates.map(Number)));
@@ -8296,9 +8320,10 @@ const TimeSeriesBarChart = /*#__PURE__*/forwardRef((props, ref) => {
     className: classNames(TimeSeriesBarChart.className, className),
     ref: containerRef
   }), /*#__PURE__*/React.createElement(StyledTimeSeriesBarChartTitle, {
-    className: `${TimeSeriesBarChart.className}__title`,
+    className: `${TimeSeriesBarChart.className}__title`
+  }, title ? /*#__PURE__*/React.createElement("div", {
     id: `id${id}__title`
-  }, title, chart && isResetable ? /*#__PURE__*/React.createElement(Button, {
+  }, title) : null, chart && isResetable ? /*#__PURE__*/React.createElement(Button, {
     variant: "text",
     size: "small",
     color: "primary",