@sis-cc/dotstatsuite-visions 10.14.0 → 10.15.0

package/es/Chips/CustomChip.js

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React, { useState, useCallback, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import * as R from 'ramda';
 import cx from 'classnames';
@@ -9,7 +9,7 @@ import Cross from '../Icons/Cross';
 import { getIsRtl } from '../utils';
 import Tooltip from '../Tooltip';
 import makeStylesFn from './styles';
-import { myTooltipRenderer, showMultiLinedTooltip, shownTooltip } from './utils';
+import { myTooltipRenderer, myTooltipRendererSrOnly, showMultiLinedTooltip, shownTooltip } from './utils';
 
 var useStyles = makeStyles(makeStylesFn);
 
@@ -32,6 +32,7 @@ var CustomChip = function CustomChip(_ref) {
       testId = _ref$testId === undefined ? 'deleteChip-test-id' : _ref$testId,
       _ref$labelRenderer = _ref.labelRenderer,
       labelRenderer = _ref$labelRenderer === undefined ? R.prop('label') : _ref$labelRenderer,
+      ariaLabelTooltip = _ref.ariaLabelTooltip,
       deprecated = _ref.deprecated;
 
   var theme = useTheme();
@@ -54,18 +55,51 @@ var CustomChip = function CustomChip(_ref) {
     })(R.prop('parents')(R.head(arr)));
   };
 
-  return React.createElement(
-    Tooltip,
-    {
-      placement: 'top',
-      title: hasTooltip ? renderer(items) : hasMultiLinedTooltip ? multiLinedTooltipRenderer(items) : ''
-    },
-    React.createElement(Chip, {
-      'data-testid': testId,
-      size: 'small',
-      'aria-label': label,
-      label: hasTooltip || hasMultiLinedTooltip ? React.createElement(
-        Fragment,
+  var multiLinedTooltipRendererSrOnly = function multiLinedTooltipRendererSrOnly(items) {
+    return R.join(',')(R.map(myTooltipRendererSrOnly({ isRtl: isRtl, labelRenderer: labelRenderer, ariaLabelTooltip: ariaLabelTooltip }), R.propOr([], 'parents')(R.head(items))));
+  };
+
+  var _useState = useState(false),
+      open = _useState[0],
+      setOpen = _useState[1];
+
+  var handler = useCallback(function (e) {
+    if (e.key === 'Escape') {
+      setOpen(false);
+    }
+  }, []);
+
+  useEffect(function () {
+    document.addEventListener('keydown', handler);
+    return function () {
+      document.removeEventListener('keydown', handler);
+    };
+  }, []);
+  return React.createElement(Chip, {
+    'data-testid': testId,
+    size: 'small',
+    'aria-label': R.isNil(onDelete) ? label : null,
+    tabIndex: R.isNil(onDelete) ? 0 : -1,
+    label: hasTooltip || hasMultiLinedTooltip ? React.createElement(
+      Tooltip,
+      {
+        placement: 'top',
+        title: hasTooltip ? renderer(items) : hasMultiLinedTooltip ? multiLinedTooltipRenderer(items) : '',
+        tabIndex: 0,
+        'aria-label': hasTooltip ? myTooltipRendererSrOnly({ isRtl: isRtl, labelRenderer: labelRenderer, ariaLabelTooltip: ariaLabelTooltip })(items) : hasMultiLinedTooltip ? multiLinedTooltipRendererSrOnly(items) : null,
+        'aria-hidden': false,
+        interactive: true,
+        onOpen: function onOpen() {
+          return setOpen(true);
+        },
+        onClose: function onClose() {
+          return setOpen(false);
+        },
+        disableHoverListener: !hasTooltip && !hasMultiLinedTooltip,
+        open: open
+      },
+      React.createElement(
+        'span',
         null,
         '...',
         React.createElement(
@@ -74,24 +108,25 @@ var CustomChip = function CustomChip(_ref) {
           '>'
         ),
         label
-      ) : label,
-      deleteIcon: React.createElement(
-        IconButton,
-        {
-          disableRipple: true,
-          className: iconClasses,
-          'aria-label': ariaLabel + ' ' + label,
-          component: 'span',
-          tabIndex: 0
-        },
-        React.createElement(Cross, null)
-      ),
-      clickable: true,
-      onDelete: onChange,
-      className: cx(chipClasses, (_cx = {}, _cx[classes.tooltipIndicator] = hasTooltip || hasMultiLinedTooltip, _cx)),
-      classes: { label: labelClasses }
-    })
-  );
+      )
+    ) : label,
+    role: 'presentation',
+    deleteIcon: React.createElement(
+      IconButton,
+      {
+        disableRipple: true,
+        className: iconClasses,
+        'aria-label': ariaLabel + ' ' + label,
+        component: 'span',
+        tabIndex: 0
+      },
+      React.createElement(Cross, null)
+    ),
+    clickable: true,
+    onDelete: onChange,
+    className: cx(chipClasses, (_cx = {}, _cx[classes.tooltipIndicator] = hasTooltip || hasMultiLinedTooltip, _cx)),
+    classes: { label: labelClasses }
+  });
 };
 
 CustomChip.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -107,7 +142,8 @@ CustomChip.propTypes = process.env.NODE_ENV !== "production" ? {
   ariaLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
   items: PropTypes.array,
   labelRenderer: PropTypes.func,
-  deprecated: PropTypes.array
+  deprecated: PropTypes.array,
+  ariaLabelTooltip: PropTypes.string
 } : {};
 
 export default CustomChip;

package/es/Chips/GroupedChips.js

@@ -22,7 +22,9 @@ var GroupedChips = function GroupedChips(_ref) {
       reducingNbChips = _ref$reducingNbChips === undefined ? 15 : _ref$reducingNbChips,
       labels = _ref.labels,
       _ref$testId = _ref.testId,
-      testId = _ref$testId === undefined ? 'chips-test-id' : _ref$testId;
+      testId = _ref$testId === undefined ? 'chips-test-id' : _ref$testId,
+      _ref$ariaLabelTooltip = _ref.ariaLabelTooltip,
+      ariaLabelTooltip = _ref$ariaLabelTooltip === undefined ? ' parent of ' : _ref$ariaLabelTooltip;
   var parentId = itemProps.id,
       isNotRemovable = itemProps.isNotRemovable,
       _itemProps$values = itemProps.values,
@@ -72,7 +74,8 @@ var GroupedChips = function GroupedChips(_ref) {
         onDelete: isNotRemovable ? null : onDelete,
         chipClasses: cx(classes.secondaryChip, classes.chip),
         iconClasses: classes.icon,
-        labelClasses: cx(classes.formatLabel)
+        labelClasses: cx(classes.formatLabel),
+        ariaLabelTooltip: ariaLabelTooltip
       });
     })(values)
   );
@@ -96,6 +99,7 @@ GroupedChips.propTypes = process.env.NODE_ENV !== "production" ? {
   reducingNbChips: PropTypes.number,
   labels: PropTypes.shape({
     reducingChip: PropTypes.oneOfType([PropTypes.string, PropTypes.element])
-  })
+  }),
+  ariaLabelTooltip: PropTypes.string
 } : {};
 export default GroupedChips;

package/es/Chips/utils.js

@@ -6,6 +6,13 @@ export var myTooltipRenderer = function myTooltipRenderer(_ref) {
   return R.pipe(R.map(labelRenderer), R.when(R.always(isRtl), R.reverse), R.join(isRtl ? ' < ' : ' > '));
 };
 
+export var myTooltipRendererSrOnly = function myTooltipRendererSrOnly(_ref2) {
+  var isRtl = _ref2.isRtl,
+      labelRenderer = _ref2.labelRenderer,
+      ariaLabelTooltip = _ref2.ariaLabelTooltip;
+  return R.pipe(R.map(labelRenderer), R.when(R.always(isRtl), R.reverse), R.join(ariaLabelTooltip));
+};
+
 export var isLast = function isLast(index, list) {
   return index + 1 === R.length(list);
 };

package/es/DataFooter/DataFooter.js

@@ -114,6 +114,7 @@ var DataFooter = function DataFooter(_ref3) {
                   { variant: 'body2' },
                   copyright.content
                 ),
+                'aria-label': copyright.content,
                 variant: 'light',
                 tabIndex: 0,
                 'aria-hidden': false,
@@ -127,7 +128,8 @@ var DataFooter = function DataFooter(_ref3) {
                 {
                   variant: 'body2',
                   className: classes.typo,
-                  style: { cursor: 'pointer' }
+                  style: { cursor: 'pointer' },
+                  role: 'button'
                 },
                 copyright.label
               )
@@ -147,12 +149,7 @@ var DataFooter = function DataFooter(_ref3) {
             { variant: 'body2', className: classes.typo },
             React.createElement(
               Link,
-              {
-                href: source.link,
-                rel: 'noopener noreferrer',
-                target: '_blank',
-                variant: 'body2'
-              },
+              { href: source.link, rel: 'noopener noreferrer', target: '_blank', variant: 'body2' },
               source.label
             )
           )

package/es/ExpansionPanel/ExpansionPanel.js

@@ -67,7 +67,7 @@ var CustomExpansionPanel = function CustomExpansionPanel(_ref) {
         expandIcon: React.createElement(ExpandMoreIcon, null),
         'aria-controls': id,
         id: id,
-        'aria-label': label
+        'aria-label': isPinned ? label + ' ' + pinnedLabel + ' ' : label
       },
       React.createElement(
         Grid,

package/es/HierarchicalFilter/HierarchicalFilter.js

@@ -46,6 +46,7 @@ var HierarchicalFilter = function HierarchicalFilter(props) {
       label = props.label,
       labels = props.labels,
       tagAccessor = props.tagAccessor,
+      tagAriaLabel = props.tagAriaLabel,
       expandedIds = props.expandedIds,
       spotlight = props.spotlight,
       setSpotlight = props.setSpotlight,
@@ -64,6 +65,7 @@ var HierarchicalFilter = function HierarchicalFilter(props) {
   var _disableAccessor = simpleSelectionMode ? disableAccessor : getEvolvedDisableAccessor(_allGroupedItems, disableAccessor, R.always(false));
 
   var tagValue = getCounter(items, _disableAccessor, tagAccessor);
+  var tagValueLabel = getCounter(items, _disableAccessor, tagAriaLabel);
   var isDisabled = function isDisabled(item) {
     return R.is(Function, disableAccessor) ? disableAccessor(item) : false;
   };
@@ -84,12 +86,13 @@ var HierarchicalFilter = function HierarchicalFilter(props) {
       label: labelRenderer({ id: id, label: label }),
       onChangeActivePanel: onChangeActivePanel,
       overflow: true,
+      tagValueLabel: tagValueLabel,
       topElementComponent: React.createElement(
         Fragment,
         null,
         React.createElement(
           Container,
-          { disableGutters: true, className: classes.spotlightContainer },
+          { disableGutters: true, className: classes.spotlightContainer, role: 'presentation' },
           hasSpotlight && React.createElement(Spotlight, {
             className: { container: classes.middle },
             fullWidth: true,
@@ -122,7 +125,7 @@ var HierarchicalFilter = function HierarchicalFilter(props) {
       ),
       tag: React.createElement(
         Chip,
-        { items: items },
+        { items: items, tagValueLabel: tagValueLabel },
         tagValue
       )
     }, expansionPanelProps),
@@ -162,7 +165,8 @@ HierarchicalFilter.propTypes = process.env.NODE_ENV !== "production" ? {
   setSpotlight: PropTypes.func,
   hasSpotlight: PropTypes.bool,
   allItems: PropTypes.array,
-  simpleSelectionMode: PropTypes.bool
+  simpleSelectionMode: PropTypes.bool,
+  tagAriaLabel: PropTypes.func
 } : {};
 
 export default withSpotlight(withExpansionTree(HierarchicalFilter));

package/es/TableHtml5/flags.js

@@ -1,6 +1,6 @@
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
-import React, { Fragment } from 'react';
+import React, { Fragment, useState, useCallback, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import * as R from 'ramda';
 import cx from 'classnames';
@@ -51,6 +51,23 @@ var Flags = function Flags(_ref) {
 
   var classes = useStyles();
   var noFlags = R.isNil(flags) || R.isEmpty(flags);
+
+  var _useState = useState(false),
+      open = _useState[0],
+      setOpen = _useState[1];
+
+  var handler = useCallback(function (e) {
+    if (e.key === 'Escape') {
+      setOpen(false);
+    }
+  }, []);
+
+  useEffect(function () {
+    document.addEventListener('keydown', handler);
+    return function () {
+      document.removeEventListener('keydown', handler);
+    };
+  }, []);
   if (noFlags) return null;
 
   var hasUncoded = R.any(R.complement(R.has('code')), flags);
@@ -80,7 +97,15 @@ var Flags = function Flags(_ref) {
       'aria-label': R.join(', ', labels),
       'aria-hidden': false,
       title: content,
-      placement: 'top'
+      placement: 'top',
+      open: open,
+      interactive: true,
+      onOpen: function onOpen() {
+        return setOpen(true);
+      },
+      onClose: function onClose() {
+        return setOpen(false);
+      }
     },
     React.createElement(
       'span',

package/es/TableHtml5/section.js

@@ -195,7 +195,7 @@ var Section = function Section(_ref) {
             return R.isNil(val) ? missingValLabel : cellValueAccessor(val);
           }))(cells), {
             key: intersectionCellId,
-            headers: rowIds + ' ' + columnIds + ' ' + currentSection + ' ' + rowIndex + '_' + rowId + '_' + columnIds,
+            headers: rowIds + ' ' + columnIds + ' ' + currentSection,
             cellHandler: cellHandler,
             HTMLRenderer: HTMLRenderer,
             labelAccessor: labelAccessor,

package/es/Tag/Tag.js

@@ -18,7 +18,8 @@ var useStyles = makeStyles(function (theme) {
 });
 
 var Tag = function Tag(_ref) {
-  var children = _ref.children;
+  var children = _ref.children,
+      tagValueLabel = _ref.tagValueLabel;
 
   var classes = useStyles();
 
@@ -29,14 +30,15 @@ var Tag = function Tag(_ref) {
     null,
     React.createElement(
       Typography,
-      { className: classes.tag },
+      { tabIndex: 0, className: classes.tag, 'aria-label': tagValueLabel },
       children
     )
   );
 };
 
 Tag.propTypes = process.env.NODE_ENV !== "production" ? {
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
+  tagValueLabel: PropTypes.string
 } : {};
 
 export default Tag;

package/es/VirtualizedTree/Item.js

@@ -1,6 +1,6 @@
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
-import React from 'react';
+import React, { useCallback, useEffect } from 'react';
 import * as R from 'ramda';
 import PropTypes from 'prop-types';
 import ListItem from '@material-ui/core/ListItem';
@@ -48,6 +48,20 @@ var Item = function Item(_ref) {
       setIsTooltipShown = _React$useState[1];
 
   var padding = depth * 30 + (depth > 0 && !hasChildrenOnLevel ? 30 : 0) + (!hasChild && hasChildrenOnLevel ? 30 : 0);
+
+  var handler = useCallback(function (e) {
+    if (e.key === 'Escape') {
+      setIsTooltipShown(false);
+    }
+  }, []);
+
+  useEffect(function () {
+    document.addEventListener('keydown', handler);
+    return function () {
+      document.removeEventListener('keydown', handler);
+    };
+  }, []);
+
   return React.createElement(
     ListItem,
     {
@@ -58,7 +72,8 @@ var Item = function Item(_ref) {
       tabIndex: -1,
       style: _extends({}, style, (_extends2 = {
         flexDirection: isRtl ? 'row-reverse' : 'row'
-      }, _extends2['' + (isRtl ? 'paddingRight' : 'paddingLeft')] = padding + 'px', _extends2))
+      }, _extends2['' + (isRtl ? 'paddingRight' : 'paddingLeft')] = padding + 'px', _extends2)),
+      role: 'listitem'
     },
     R.and(NavigateIcon, hasChild) && React.createElement(
       IconButton,
@@ -97,8 +112,7 @@ var Item = function Item(_ref) {
       primary: React.createElement(
         'div',
         {
-          className: cx(classes.labelContainer, (_cx2 = {}, _cx2[classes.rtlLabelContainer] = isRtl, _cx2)),
-          style: { pointerEvents: 'none' }
+          className: cx(classes.labelContainer, (_cx2 = {}, _cx2[classes.rtlLabelContainer] = isRtl, _cx2))
         },
         React.createElement(
           Icon,
@@ -135,7 +149,9 @@ var Item = function Item(_ref) {
             },
             onClose: function onClose() {
               return setIsTooltipShown(false);
-            }
+            },
+            disableHoverListener: R.isEmpty(description),
+            open: isTooltipShown
           },
           React.createElement(
             Typography,

package/es/VirtualizedTree/VirtualizedTree.js

@@ -7,7 +7,6 @@ import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
 import VirtualizedList from 'react-virtualized/dist/commonjs/List';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import ExpandLessIcon from '@material-ui/icons/ExpandLess';
-import List from '@material-ui/core/List';
 import Item from './Item';
 import { useTheme } from '@material-ui/core';
 import { useStyles, height as rowHeight } from '../ScopeList/styles';
@@ -278,25 +277,24 @@ var VirtualizedTree = function VirtualizedTree(props) {
   }
   var isRtl = getIsRtl(theme);
   return React.createElement(
-    List,
+    'div',
     {
-      disablePadding: true,
       style: { height: maxHeight + 2 },
       onKeyUp: onKeyUp,
       onMouseUp: onMouseUp,
       onMouseLeave: onMouseLeave,
-      ref: ref
+      ref: ref,
+      role: 'presentation'
     },
     React.createElement(
       AutoSizer,
-      { role: 'presentation' },
+      null,
       function (_ref) {
         var height = _ref.height,
             width = _ref.width;
         return React.createElement(VirtualizedList, {
+          containerRole: 'list',
           role: 'presentation',
-          'aria-readonly': null,
-          'aria-label': 'content',
           overscan: 10,
           tabIndex: -1,
           height: height + 2,
@@ -332,8 +330,7 @@ var VirtualizedTree = function VirtualizedTree(props) {
               style: style,
               accessibility: accessibility,
               ariaLabel: R.prop('navigateNext')(labels),
-              theme: theme,
-              role: 'presentation'
+              theme: theme
             }));
           }
         });

package/lib/Chips/CustomChip.js

@@ -69,6 +69,7 @@ var CustomChip = function CustomChip(_ref) {
       testId = _ref$testId === undefined ? 'deleteChip-test-id' : _ref$testId,
       _ref$labelRenderer = _ref.labelRenderer,
       labelRenderer = _ref$labelRenderer === undefined ? R.prop('label') : _ref$labelRenderer,
+      ariaLabelTooltip = _ref.ariaLabelTooltip,
       deprecated = _ref.deprecated;
 
   var theme = (0, _styles.useTheme)();
@@ -91,18 +92,51 @@ var CustomChip = function CustomChip(_ref) {
     })(R.prop('parents')(R.head(arr)));
   };
 
-  return _react2.default.createElement(
-    _Tooltip2.default,
-    {
-      placement: 'top',
-      title: hasTooltip ? renderer(items) : hasMultiLinedTooltip ? multiLinedTooltipRenderer(items) : ''
-    },
-    _react2.default.createElement(_Chip2.default, {
-      'data-testid': testId,
-      size: 'small',
-      'aria-label': label,
-      label: hasTooltip || hasMultiLinedTooltip ? _react2.default.createElement(
-        _react.Fragment,
+  var multiLinedTooltipRendererSrOnly = function multiLinedTooltipRendererSrOnly(items) {
+    return R.join(',')(R.map((0, _utils2.myTooltipRendererSrOnly)({ isRtl: isRtl, labelRenderer: labelRenderer, ariaLabelTooltip: ariaLabelTooltip }), R.propOr([], 'parents')(R.head(items))));
+  };
+
+  var _useState = (0, _react.useState)(false),
+      open = _useState[0],
+      setOpen = _useState[1];
+
+  var handler = (0, _react.useCallback)(function (e) {
+    if (e.key === 'Escape') {
+      setOpen(false);
+    }
+  }, []);
+
+  (0, _react.useEffect)(function () {
+    document.addEventListener('keydown', handler);
+    return function () {
+      document.removeEventListener('keydown', handler);
+    };
+  }, []);
+  return _react2.default.createElement(_Chip2.default, {
+    'data-testid': testId,
+    size: 'small',
+    'aria-label': R.isNil(onDelete) ? label : null,
+    tabIndex: R.isNil(onDelete) ? 0 : -1,
+    label: hasTooltip || hasMultiLinedTooltip ? _react2.default.createElement(
+      _Tooltip2.default,
+      {
+        placement: 'top',
+        title: hasTooltip ? renderer(items) : hasMultiLinedTooltip ? multiLinedTooltipRenderer(items) : '',
+        tabIndex: 0,
+        'aria-label': hasTooltip ? (0, _utils2.myTooltipRendererSrOnly)({ isRtl: isRtl, labelRenderer: labelRenderer, ariaLabelTooltip: ariaLabelTooltip })(items) : hasMultiLinedTooltip ? multiLinedTooltipRendererSrOnly(items) : null,
+        'aria-hidden': false,
+        interactive: true,
+        onOpen: function onOpen() {
+          return setOpen(true);
+        },
+        onClose: function onClose() {
+          return setOpen(false);
+        },
+        disableHoverListener: !hasTooltip && !hasMultiLinedTooltip,
+        open: open
+      },
+      _react2.default.createElement(
+        'span',
         null,
         '...',
         _react2.default.createElement(
@@ -111,24 +145,25 @@ var CustomChip = function CustomChip(_ref) {
           '>'
         ),
         label
-      ) : label,
-      deleteIcon: _react2.default.createElement(
-        _IconButton2.default,
-        {
-          disableRipple: true,
-          className: iconClasses,
-          'aria-label': ariaLabel + ' ' + label,
-          component: 'span',
-          tabIndex: 0
-        },
-        _react2.default.createElement(_Cross2.default, null)
-      ),
-      clickable: true,
-      onDelete: onChange,
-      className: (0, _classnames2.default)(chipClasses, (_cx = {}, _cx[classes.tooltipIndicator] = hasTooltip || hasMultiLinedTooltip, _cx)),
-      classes: { label: labelClasses }
-    })
-  );
+      )
+    ) : label,
+    role: 'presentation',
+    deleteIcon: _react2.default.createElement(
+      _IconButton2.default,
+      {
+        disableRipple: true,
+        className: iconClasses,
+        'aria-label': ariaLabel + ' ' + label,
+        component: 'span',
+        tabIndex: 0
+      },
+      _react2.default.createElement(_Cross2.default, null)
+    ),
+    clickable: true,
+    onDelete: onChange,
+    className: (0, _classnames2.default)(chipClasses, (_cx = {}, _cx[classes.tooltipIndicator] = hasTooltip || hasMultiLinedTooltip, _cx)),
+    classes: { label: labelClasses }
+  });
 };
 
 CustomChip.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -144,7 +179,8 @@ CustomChip.propTypes = process.env.NODE_ENV !== "production" ? {
   ariaLabel: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element]),
   items: _propTypes2.default.array,
   labelRenderer: _propTypes2.default.func,
-  deprecated: _propTypes2.default.array
+  deprecated: _propTypes2.default.array,
+  ariaLabelTooltip: _propTypes2.default.string
 } : {};
 
 exports.default = CustomChip;

package/lib/Chips/GroupedChips.js

@@ -50,7 +50,9 @@ var GroupedChips = function GroupedChips(_ref) {
       reducingNbChips = _ref$reducingNbChips === undefined ? 15 : _ref$reducingNbChips,
       labels = _ref.labels,
       _ref$testId = _ref.testId,
-      testId = _ref$testId === undefined ? 'chips-test-id' : _ref$testId;
+      testId = _ref$testId === undefined ? 'chips-test-id' : _ref$testId,
+      _ref$ariaLabelTooltip = _ref.ariaLabelTooltip,
+      ariaLabelTooltip = _ref$ariaLabelTooltip === undefined ? ' parent of ' : _ref$ariaLabelTooltip;
   var parentId = itemProps.id,
       isNotRemovable = itemProps.isNotRemovable,
       _itemProps$values = itemProps.values,
@@ -100,7 +102,8 @@ var GroupedChips = function GroupedChips(_ref) {
         onDelete: isNotRemovable ? null : onDelete,
         chipClasses: (0, _classnames2.default)(classes.secondaryChip, classes.chip),
         iconClasses: classes.icon,
-        labelClasses: (0, _classnames2.default)(classes.formatLabel)
+        labelClasses: (0, _classnames2.default)(classes.formatLabel),
+        ariaLabelTooltip: ariaLabelTooltip
       });
     })(values)
   );
@@ -124,7 +127,8 @@ GroupedChips.propTypes = process.env.NODE_ENV !== "production" ? {
   reducingNbChips: _propTypes2.default.number,
   labels: _propTypes2.default.shape({
     reducingChip: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element])
-  })
+  }),
+  ariaLabelTooltip: _propTypes2.default.string
 } : {};
 exports.default = GroupedChips;
 module.exports = exports['default'];

package/lib/Chips/utils.js

@@ -1,7 +1,7 @@
 'use strict';
 
 exports.__esModule = true;
-exports.showMultiLinedTooltip = exports.shownTooltip = exports.isLast = exports.myTooltipRenderer = undefined;
+exports.showMultiLinedTooltip = exports.shownTooltip = exports.isLast = exports.myTooltipRendererSrOnly = exports.myTooltipRenderer = undefined;
 
 var _ramda = require('ramda');
 
@@ -15,6 +15,13 @@ var myTooltipRenderer = exports.myTooltipRenderer = function myTooltipRenderer(_
   return R.pipe(R.map(labelRenderer), R.when(R.always(isRtl), R.reverse), R.join(isRtl ? ' < ' : ' > '));
 };
 
+var myTooltipRendererSrOnly = exports.myTooltipRendererSrOnly = function myTooltipRendererSrOnly(_ref2) {
+  var isRtl = _ref2.isRtl,
+      labelRenderer = _ref2.labelRenderer,
+      ariaLabelTooltip = _ref2.ariaLabelTooltip;
+  return R.pipe(R.map(labelRenderer), R.when(R.always(isRtl), R.reverse), R.join(ariaLabelTooltip));
+};
+
 var isLast = exports.isLast = function isLast(index, list) {
   return index + 1 === R.length(list);
 };