@sis-cc/dotstatsuite-visions 10.12.0 → 10.13.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright © OECD 2019-2023
+Copyright © OECD 2019-2024
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/es/Chips/CustomChip.js

@@ -82,7 +82,7 @@ var CustomChip = function CustomChip(_ref) {
           className: iconClasses,
           'aria-label': ariaLabel + ' ' + label,
           component: 'span',
-          tabIndex: -1
+          tabIndex: 0
         },
         React.createElement(Cross, null)
       ),

package/es/CollapseButtons/CollapseButtons.js

@@ -7,6 +7,7 @@ import { makeStyles } from '@material-ui/core/styles';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
 import Grid from '@material-ui/core/Grid';
 import Collapse from '@material-ui/core/Collapse';
+import Typography from '@material-ui/core/Typography';
 import { ToggleButton } from '../';
 import Item from './Item';
 import Paper from './Paper';
@@ -84,31 +85,35 @@ var CollapseButtons = function CollapseButtons(props) {
       return React.createElement(
         Grid,
         _extends({ item: true, xs: 12, sm: 12, md: R.nth(nbColumns)(COLUMNS) }, gridButtonsProps, { key: id }),
-        React.createElement(ToggleButton, {
-          textTransform: textTransform,
-          label: label,
-          tabindex: R.isNil(toggleId) || R.prop(id)(toggleId) || R.compose(R.not, R.head, R.values)(toggleId) ? 0 : -1,
-          isOpen: R.prop(id)(toggleId),
-          toggle: function toggle() {
-            var _setIsOpen2;
+        React.createElement(
+          Typography,
+          { variant: 'h3' },
+          React.createElement(ToggleButton, {
+            textTransform: textTransform,
+            label: label,
+            tabindex: R.isNil(toggleId) || R.prop(id)(toggleId) || R.compose(R.not, R.head, R.values)(toggleId) ? 0 : -1,
+            isOpen: R.prop(id)(toggleId),
+            toggle: function toggle() {
+              var _setIsOpen2;
 
-            return setIsOpen((_setIsOpen2 = {}, _setIsOpen2[id] = !R.prop(id)(toggleId), _setIsOpen2));
-          },
-          testId: testId + '_' + id,
-          id: id
-        }),
-        isMobileView && React.createElement(
-          Collapse,
-          {
-            'in': R.prop(id)(toggleId),
-            timeout: 'auto',
-            unmountOnExit: true,
-            className: classes.collapseContainer
-          },
-          React.createElement(
-            Paper,
-            { elevation: 10, isMobileView: isMobileView },
-            getValues(id)(values)
+              return setIsOpen((_setIsOpen2 = {}, _setIsOpen2[id] = !R.prop(id)(toggleId), _setIsOpen2));
+            },
+            testId: testId + '_' + id,
+            id: id
+          }),
+          isMobileView && React.createElement(
+            Collapse,
+            {
+              'in': R.prop(id)(toggleId),
+              timeout: 'auto',
+              unmountOnExit: true,
+              className: classes.collapseContainer
+            },
+            React.createElement(
+              Paper,
+              { elevation: 10, isMobileView: isMobileView },
+              getValues(id)(values)
+            )
           )
         )
       );

package/es/CollapseButtons/Item.js

@@ -106,9 +106,9 @@ var Item = function Item(_ref) {
                   action(parentId, id);
                   e.stopPropagation();
                 },
-                tabIndex: 0
+                tabIndex: 0,
+                style: { display: 'list-item' }
               },
-              '\u2022 ',
               labelAccessor(subtopic, parentId)
             );
           })(R.pipe(R.propOr([], 'subtopics'), R.ifElse(R.always(isSecondLevelClikable), R.identity, R.intersperse(' • ')))(item))

package/es/Dataflow/Dataflow.js

@@ -397,7 +397,8 @@ var Dataflow = function Dataflow(_ref2) {
             IconButton,
             {
               'data-testid': 'dataflow-expand-button-test-id',
-              'aria-label': 'expand',
+              'aria-label': R.propOr('Show details above', 'expand')(labels),
+              'aria-expanded': isExpanded,
               onClick: function onClick() {
                 return handleExpand();
               },

package/es/ExpansionPanel/ExpansionPanel.js

@@ -52,7 +52,8 @@ var CustomExpansionPanel = function CustomExpansionPanel(_ref) {
         return onChangeActivePanel(id);
       } : undefined,
       classes: { root: isNarrow ? classes.panelBorder : classes.panel },
-      elevation: 0
+      elevation: 0,
+      'aria-expanded': isOpen
     },
     React.createElement(
       AccordionSummary,
@@ -110,6 +111,8 @@ var CustomExpansionPanel = function CustomExpansionPanel(_ref) {
     React.createElement(
       AccordionDetails,
       {
+        id: id,
+        'aria-label': label,
         className: cx(classes.details, (_cx5 = {}, _cx5[classes.overflow] = overflow, _cx5[classes.height] = maxHeight, _cx5))
       },
       children

package/es/ToggleButton/ToggleButton.js

@@ -55,6 +55,7 @@ var ToggleButton = function ToggleButton(_ref2) {
   return React.createElement(
     Button,
     {
+      'aria-expanded': isOpen,
       'aria-label': label,
       tabIndex: tabindex,
       'data-testid': testId,

package/es/VirtualizedTree/Item.js

@@ -40,7 +40,8 @@ var Item = function Item(_ref) {
       labels = _ref.labels,
       _ref$depth = _ref.depth,
       depth = _ref$depth === undefined ? 0 : _ref$depth,
-      eventsListeners = _ref.eventsListeners;
+      eventsListeners = _ref.eventsListeners,
+      expanded = _ref.expanded;
 
   var _React$useState = React.useState(false),
       isTooltipShown = _React$useState[0],
@@ -66,25 +67,28 @@ var Item = function Item(_ref) {
         disableFocusRipple: true,
         className: classes.arrow,
         'aria-label': ariaLabel,
-        tabIndex: -1,
+        tabIndex: 0,
         size: 'small',
         color: 'primary',
         onClick: function onClick() {
           return changeList(hierarchicalId || id);
-        }
+        },
+        'aria-expanded': expanded
       },
       React.createElement(NavigateIcon, null)
     ),
     React.createElement(ListItemText, {
       'data-testid': 'value_' + id,
       tabIndex: 0,
+      role: 'checkbox',
       'aria-label': isGreyed ? R.propOr('', 'disableItemLabel')(labels) + ' ' + label : label,
-      'aria-pressed': isSelected,
+      'aria-checked': isSelected,
       'aria-disabled': isDisabled,
       primaryTypographyProps: { noWrap: true, color: 'inherit' },
       secondaryTypographyProps: { color: 'inherit' },
       classes: { root: classes.listItem },
       className: cx((_cx = {}, _cx[classes.accessibilityItemHover] = accessibility, _cx[classes.listItemSelected] = isSelected, _cx[classes.listItemHover] = !isDisabled, _cx)),
+      onKeyDown: isDisabled ? null : eventsListeners.onKeyDown,
       onClick: isDisabled ? null : eventsListeners.onClick,
       onMouseDown: isDisabled || isTooltipShown ? null : eventsListeners.onMouseDown,
       onMouseEnter: isDisabled || isTooltipShown ? null : eventsListeners.onMouseEnter,
@@ -121,7 +125,7 @@ var Item = function Item(_ref) {
               } }),
             enterDelay: 400,
             enterNextDelay: 400,
-            tabIndex: 0,
+            tabIndex: description ? 0 : -1,
             'aria-label': description,
             'aria-hidden': false,
             placement: 'top',
@@ -181,7 +185,8 @@ Item.propTypes = process.env.NODE_ENV !== "production" ? {
   labels: PropTypes.object,
   depth: PropTypes.number,
   eventsListeners: PropTypes.object,
-  isGreyed: PropTypes.bool
+  isGreyed: PropTypes.bool,
+  expanded: PropTypes.bool
 } : {};
 
 export default Item;

package/es/VirtualizedTree/VirtualizedTree.js

@@ -201,6 +201,8 @@ var VirtualizedTree = function VirtualizedTree(props) {
       apply();
     } else if (e.key === 'Control' && !R.isEmpty(selectIds)) {
       apply();
+    } else if (e.key === 'Enter' && !R.isNil(lastItemId)) {
+      apply();
     }
   };
 
@@ -221,6 +223,12 @@ var VirtualizedTree = function VirtualizedTree(props) {
         multiSelect(id);
         setLastItemId(id);
       },
+      onKeyDown: function onKeyDown(e) {
+        if (e.key === 'Enter') {
+          multiSelect(id);
+          setLastItemId(id);
+        }
+      },
       onClick: function onClick(e) {
         e.preventDefault();
         if (e.ctrlKey && !simpleSelectionMode) {
@@ -281,11 +289,14 @@ var VirtualizedTree = function VirtualizedTree(props) {
     },
     React.createElement(
       AutoSizer,
-      null,
+      { role: 'presentation' },
       function (_ref) {
         var height = _ref.height,
             width = _ref.width;
         return React.createElement(VirtualizedList, {
+          role: 'presentation',
+          'aria-readonly': null,
+          'aria-label': 'content',
           overscan: 10,
           tabIndex: -1,
           height: height + 2,
@@ -312,6 +323,7 @@ var VirtualizedTree = function VirtualizedTree(props) {
                 return expand(getHierarchicalId(item));
               },
               NavigateIcon: R.has(itemId, expandedIds) ? ExpandLessIcon : ExpandMoreIcon,
+              expanded: R.has(itemId, expandedIds),
               isRtl: isRtl,
               eventsListeners: itemEventsListeners(getHierarchicalId(item), index),
               HTMLRenderer: HTMLRenderer,
@@ -320,7 +332,8 @@ var VirtualizedTree = function VirtualizedTree(props) {
               style: style,
               accessibility: accessibility,
               ariaLabel: R.prop('navigateNext')(labels),
-              theme: theme
+              theme: theme,
+              role: 'presentation'
             }));
           }
         });

package/lib/Chips/CustomChip.js

@@ -119,7 +119,7 @@ var CustomChip = function CustomChip(_ref) {
           className: iconClasses,
           'aria-label': ariaLabel + ' ' + label,
           component: 'span',
-          tabIndex: -1
+          tabIndex: 0
         },
         _react2.default.createElement(_Cross2.default, null)
       ),

package/lib/CollapseButtons/CollapseButtons.js

@@ -31,6 +31,10 @@ var _Collapse = require('@material-ui/core/Collapse');
 
 var _Collapse2 = _interopRequireDefault(_Collapse);
 
+var _Typography = require('@material-ui/core/Typography');
+
+var _Typography2 = _interopRequireDefault(_Typography);
+
 var _ = require('../');
 
 var _Item = require('./Item');
@@ -118,31 +122,35 @@ var CollapseButtons = function CollapseButtons(props) {
       return _react2.default.createElement(
         _Grid2.default,
         _extends({ item: true, xs: 12, sm: 12, md: R.nth(nbColumns)(COLUMNS) }, gridButtonsProps, { key: id }),
-        _react2.default.createElement(_.ToggleButton, {
-          textTransform: textTransform,
-          label: label,
-          tabindex: R.isNil(toggleId) || R.prop(id)(toggleId) || R.compose(R.not, R.head, R.values)(toggleId) ? 0 : -1,
-          isOpen: R.prop(id)(toggleId),
-          toggle: function toggle() {
-            var _setIsOpen2;
-
-            return setIsOpen((_setIsOpen2 = {}, _setIsOpen2[id] = !R.prop(id)(toggleId), _setIsOpen2));
-          },
-          testId: testId + '_' + id,
-          id: id
-        }),
-        isMobileView && _react2.default.createElement(
-          _Collapse2.default,
-          {
-            'in': R.prop(id)(toggleId),
-            timeout: 'auto',
-            unmountOnExit: true,
-            className: classes.collapseContainer
-          },
-          _react2.default.createElement(
-            _Paper2.default,
-            { elevation: 10, isMobileView: isMobileView },
-            getValues(id)(values)
+        _react2.default.createElement(
+          _Typography2.default,
+          { variant: 'h3' },
+          _react2.default.createElement(_.ToggleButton, {
+            textTransform: textTransform,
+            label: label,
+            tabindex: R.isNil(toggleId) || R.prop(id)(toggleId) || R.compose(R.not, R.head, R.values)(toggleId) ? 0 : -1,
+            isOpen: R.prop(id)(toggleId),
+            toggle: function toggle() {
+              var _setIsOpen2;
+
+              return setIsOpen((_setIsOpen2 = {}, _setIsOpen2[id] = !R.prop(id)(toggleId), _setIsOpen2));
+            },
+            testId: testId + '_' + id,
+            id: id
+          }),
+          isMobileView && _react2.default.createElement(
+            _Collapse2.default,
+            {
+              'in': R.prop(id)(toggleId),
+              timeout: 'auto',
+              unmountOnExit: true,
+              className: classes.collapseContainer
+            },
+            _react2.default.createElement(
+              _Paper2.default,
+              { elevation: 10, isMobileView: isMobileView },
+              getValues(id)(values)
+            )
           )
         )
       );

package/lib/CollapseButtons/Item.js

@@ -135,9 +135,9 @@ var Item = function Item(_ref) {
                   action(parentId, id);
                   e.stopPropagation();
                 },
-                tabIndex: 0
+                tabIndex: 0,
+                style: { display: 'list-item' }
               },
-              '\u2022 ',
               labelAccessor(subtopic, parentId)
             );
           })(R.pipe(R.propOr([], 'subtopics'), R.ifElse(R.always(isSecondLevelClikable), R.identity, R.intersperse(' • ')))(item))

package/lib/Dataflow/Dataflow.js

@@ -458,7 +458,8 @@ var Dataflow = function Dataflow(_ref2) {
             _IconButton2.default,
             {
               'data-testid': 'dataflow-expand-button-test-id',
-              'aria-label': 'expand',
+              'aria-label': R.propOr('Show details above', 'expand')(labels),
+              'aria-expanded': isExpanded,
               onClick: function onClick() {
                 return handleExpand();
               },

package/lib/ExpansionPanel/ExpansionPanel.js

@@ -97,7 +97,8 @@ var CustomExpansionPanel = function CustomExpansionPanel(_ref) {
         return onChangeActivePanel(id);
       } : undefined,
       classes: { root: isNarrow ? classes.panelBorder : classes.panel },
-      elevation: 0
+      elevation: 0,
+      'aria-expanded': isOpen
     },
     _react2.default.createElement(
       _AccordionSummary2.default,
@@ -155,6 +156,8 @@ var CustomExpansionPanel = function CustomExpansionPanel(_ref) {
     _react2.default.createElement(
       _AccordionDetails2.default,
       {
+        id: id,
+        'aria-label': label,
         className: (0, _classnames2.default)(classes.details, (_cx5 = {}, _cx5[classes.overflow] = overflow, _cx5[classes.height] = maxHeight, _cx5))
       },
       children

package/lib/ToggleButton/ToggleButton.js

@@ -84,6 +84,7 @@ var ToggleButton = function ToggleButton(_ref2) {
   return _react2.default.createElement(
     _Button2.default,
     {
+      'aria-expanded': isOpen,
       'aria-label': label,
       tabIndex: tabindex,
       'data-testid': testId,

package/lib/VirtualizedTree/Item.js

@@ -80,7 +80,8 @@ var Item = function Item(_ref) {
       labels = _ref.labels,
       _ref$depth = _ref.depth,
       depth = _ref$depth === undefined ? 0 : _ref$depth,
-      eventsListeners = _ref.eventsListeners;
+      eventsListeners = _ref.eventsListeners,
+      expanded = _ref.expanded;
 
   var _React$useState = _react2.default.useState(false),
       isTooltipShown = _React$useState[0],
@@ -106,25 +107,28 @@ var Item = function Item(_ref) {
         disableFocusRipple: true,
         className: classes.arrow,
         'aria-label': ariaLabel,
-        tabIndex: -1,
+        tabIndex: 0,
         size: 'small',
         color: 'primary',
         onClick: function onClick() {
           return changeList(hierarchicalId || id);
-        }
+        },
+        'aria-expanded': expanded
       },
       _react2.default.createElement(NavigateIcon, null)
     ),
     _react2.default.createElement(_ListItemText2.default, {
       'data-testid': 'value_' + id,
       tabIndex: 0,
+      role: 'checkbox',
       'aria-label': isGreyed ? R.propOr('', 'disableItemLabel')(labels) + ' ' + label : label,
-      'aria-pressed': isSelected,
+      'aria-checked': isSelected,
       'aria-disabled': isDisabled,
       primaryTypographyProps: { noWrap: true, color: 'inherit' },
       secondaryTypographyProps: { color: 'inherit' },
       classes: { root: classes.listItem },
       className: (0, _classnames2.default)((_cx = {}, _cx[classes.accessibilityItemHover] = accessibility, _cx[classes.listItemSelected] = isSelected, _cx[classes.listItemHover] = !isDisabled, _cx)),
+      onKeyDown: isDisabled ? null : eventsListeners.onKeyDown,
       onClick: isDisabled ? null : eventsListeners.onClick,
       onMouseDown: isDisabled || isTooltipShown ? null : eventsListeners.onMouseDown,
       onMouseEnter: isDisabled || isTooltipShown ? null : eventsListeners.onMouseEnter,
@@ -161,7 +165,7 @@ var Item = function Item(_ref) {
               } }),
             enterDelay: 400,
             enterNextDelay: 400,
-            tabIndex: 0,
+            tabIndex: description ? 0 : -1,
             'aria-label': description,
             'aria-hidden': false,
             placement: 'top',
@@ -221,7 +225,8 @@ Item.propTypes = process.env.NODE_ENV !== "production" ? {
   labels: _propTypes2.default.object,
   depth: _propTypes2.default.number,
   eventsListeners: _propTypes2.default.object,
-  isGreyed: _propTypes2.default.bool
+  isGreyed: _propTypes2.default.bool,
+  expanded: _propTypes2.default.bool
 } : {};
 
 exports.default = Item;

package/lib/VirtualizedTree/VirtualizedTree.js

@@ -240,6 +240,8 @@ var VirtualizedTree = function VirtualizedTree(props) {
       apply();
     } else if (e.key === 'Control' && !R.isEmpty(selectIds)) {
       apply();
+    } else if (e.key === 'Enter' && !R.isNil(lastItemId)) {
+      apply();
     }
   };
 
@@ -260,6 +262,12 @@ var VirtualizedTree = function VirtualizedTree(props) {
         multiSelect(id);
         setLastItemId(id);
       },
+      onKeyDown: function onKeyDown(e) {
+        if (e.key === 'Enter') {
+          multiSelect(id);
+          setLastItemId(id);
+        }
+      },
       onClick: function onClick(e) {
         e.preventDefault();
         if (e.ctrlKey && !simpleSelectionMode) {
@@ -320,11 +328,14 @@ var VirtualizedTree = function VirtualizedTree(props) {
     },
     _react2.default.createElement(
       _AutoSizer2.default,
-      null,
+      { role: 'presentation' },
       function (_ref) {
         var height = _ref.height,
             width = _ref.width;
         return _react2.default.createElement(_List2.default, {
+          role: 'presentation',
+          'aria-readonly': null,
+          'aria-label': 'content',
           overscan: 10,
           tabIndex: -1,
           height: height + 2,
@@ -351,6 +362,7 @@ var VirtualizedTree = function VirtualizedTree(props) {
                 return expand((0, _utils.getHierarchicalId)(item));
               },
               NavigateIcon: R.has(itemId, expandedIds) ? _ExpandLess2.default : _ExpandMore2.default,
+              expanded: R.has(itemId, expandedIds),
               isRtl: isRtl,
               eventsListeners: itemEventsListeners((0, _utils.getHierarchicalId)(item), index),
               HTMLRenderer: HTMLRenderer,
@@ -359,7 +371,8 @@ var VirtualizedTree = function VirtualizedTree(props) {
               style: style,
               accessibility: accessibility,
               ariaLabel: R.prop('navigateNext')(labels),
-              theme: theme
+              theme: theme,
+              role: 'presentation'
             }));
           }
         });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sis-cc/dotstatsuite-visions",
-  "version": "10.12.0",
+  "version": "10.13.0",
   "description": "Library of visual components",
   "author": "OECD",
   "homepage": "https://visions-qa.siscc.org/#o",