@pingux/astro 2.0.3-alpha.3 → 2.0.3-alpha.4

package/lib/cjs/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.js

@@ -233,7 +233,8 @@ var EnvironmentBreadcrumb = /*#__PURE__*/(0, _react.forwardRef)(function (props,
     containerProps: {
       // this one is needed to cancel default scrollBox items behavior
       sx: {
-        overflow: 'visible'
+        overflow: 'visible',
+        padding: '3px'
       }
     },
     onChange: setSearchValue

package/lib/cjs/components/ListBox/Option.js

@@ -40,7 +40,8 @@ var Option = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var key = item.key,
     itemProps = item.props,
-    rendered = item.rendered;
+    rendered = item.rendered,
+    ariaLabel = item['aria-label'];
   var state = (0, _react.useContext)(_ListBoxContext.ListBoxContext);
   var isSeparator = itemProps.isSeparator,
     dataId = itemProps['data-id'];
@@ -87,7 +88,9 @@ var Option = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     "data-id": dataId,
     className: classNames,
     onPointerOver: setFocusOnHover
-  }, optionProps, others), isSelected && (0, _react2.jsx)(_Icon["default"], {
+  }, optionProps, others, {
+    "aria-label": ariaLabel
+  }), isSelected && (0, _react2.jsx)(_Icon["default"], {
     icon: _CircleSmallIcon["default"]
   }), rendered);
 });
@@ -99,7 +102,8 @@ Option.propTypes = {
       'data-id': _propTypes["default"].string,
       isSeparator: _propTypes["default"].bool
     }),
-    rendered: _propTypes["default"].node
+    rendered: _propTypes["default"].node,
+    'aria-label': _propTypes["default"].string
   }),
   state: _propTypes["default"].shape({
     disabledKeys: _isIterable.isIterableProp,

package/lib/cjs/components/MultivaluesField/MultivaluesField.stories.js

@@ -295,7 +295,8 @@ var Default = function Default(args) {
   }), function (item) {
     return (0, _react2.jsx)(_index.Item, {
       key: item.key,
-      "data-id": item.name
+      "data-id": item.name,
+      "aria-label": item.name
     }, item.name);
   }));
 };
@@ -321,7 +322,8 @@ var Uncontrolled = function Uncontrolled(args) {
   }), function (item) {
     return (0, _react2.jsx)(_index.Item, {
       key: item.key,
-      "data-id": item.name
+      "data-id": item.name,
+      "aria-label": item.name
     }, item.name);
   }));
 };
@@ -353,7 +355,8 @@ var Controlled = function Controlled(args) {
   }), function (item) {
     return (0, _react2.jsx)(_index.Item, {
       key: item.key,
-      "data-id": item.name
+      "data-id": item.name,
+      "aria-label": item.name
     }, item.name);
   }));
 };
@@ -379,7 +382,8 @@ var Error = function Error(args) {
   }), function (item) {
     return (0, _react2.jsx)(_index.Item, {
       key: item.key,
-      "data-id": item.name
+      "data-id": item.name,
+      "aria-label": item.name
     }, item.name);
   }));
 };
@@ -405,7 +409,8 @@ var ReadOnlyField = function ReadOnlyField(args) {
   }), function (item) {
     return (0, _react2.jsx)(_index.Item, {
       key: item.key,
-      "data-id": item.name
+      "data-id": item.name,
+      "aria-label": item.name
     }, item.name);
   }));
 };
@@ -431,7 +436,8 @@ var ReadOnlyValues = function ReadOnlyValues(args) {
   }), function (item) {
     return (0, _react2.jsx)(_index.Item, {
       key: item.key,
-      "data-id": item.name
+      "data-id": item.name,
+      "aria-label": item.name
     }, item.name);
   }));
 };
@@ -457,7 +463,8 @@ var DisabledKeys = function DisabledKeys(args) {
   }), function (item) {
     return (0, _react2.jsx)(_index.Item, {
       key: item.key,
-      "data-id": item.name
+      "data-id": item.name,
+      "aria-label": item.name
     }, item.name);
   }));
 };
@@ -483,7 +490,8 @@ var CustomValues = function CustomValues(args) {
   }), function (item) {
     return (0, _react2.jsx)(_index.Item, {
       key: item.key,
-      "data-id": item.name
+      "data-id": item.name,
+      "aria-label": item.name
     }, item.name);
   }));
 };
@@ -513,7 +521,8 @@ var IconSlotsInBadge = function IconSlotsInBadge(args) {
   }), function (item) {
     return (0, _react2.jsx)(_index.Item, {
       key: item.key,
-      "data-id": item.name
+      "data-id": item.name,
+      "aria-label": item.name
     }, item.name);
   }));
 };
@@ -536,7 +545,7 @@ var CustomSize = function CustomSize(args) {
   }, (0, _react2.jsx)(_index.Box, {
     width: 300
   }, (0, _react2.jsx)(_index.OverlayProvider
-  // note: spacing for demo purpose only so that the select list renders in the correct place
+  // note: spacing for demo purpose only so that the select list renders in the right place
   , {
     style: setOverlayStyle(direction, isOpen, '25%', '25%', '75%')
   }, (0, _react2.jsx)(_index.MultivaluesField, (0, _extends2["default"])({
@@ -546,7 +555,8 @@ var CustomSize = function CustomSize(args) {
   }), function (item) {
     return (0, _react2.jsx)(_index.Item, {
       key: item.key,
-      "data-id": item.name
+      "data-id": item.name,
+      "aria-label": item.name
     }, item.name);
   }))));
 };

package/lib/cjs/components/TooltipTrigger/TooltipTrigger.stories.js

@@ -61,7 +61,9 @@ var Disabled = function Disabled() {
   return (0, _react2.jsx)(_index.TooltipTrigger, {
     delay: 0,
     isDisabled: true
-  }, (0, _react2.jsx)(_index.IconButton, null, (0, _react2.jsx)(_index.Icon, {
+  }, (0, _react2.jsx)(_index.IconButton, {
+    "aria-label": "Earth Icon"
+  }, (0, _react2.jsx)(_index.Icon, {
     icon: _EarthIcon["default"]
   })), (0, _react2.jsx)(_index.Tooltip, null, "Hello World"));
 };

package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.js

@@ -219,7 +219,8 @@ var EnvironmentBreadcrumb = /*#__PURE__*/forwardRef(function (props, ref) {
     containerProps: {
       // this one is needed to cancel default scrollBox items behavior
       sx: {
-        overflow: 'visible'
+        overflow: 'visible',
+        padding: '3px'
       }
     },
     onChange: setSearchValue

package/lib/components/ListBox/Option.js

@@ -29,7 +29,8 @@ var Option = /*#__PURE__*/forwardRef(function (props, ref) {
     others = _objectWithoutProperties(props, _excluded);
   var key = item.key,
     itemProps = item.props,
-    rendered = item.rendered;
+    rendered = item.rendered,
+    ariaLabel = item['aria-label'];
   var state = useContext(ListBoxContext);
   var isSeparator = itemProps.isSeparator,
     dataId = itemProps['data-id'];
@@ -76,7 +77,9 @@ var Option = /*#__PURE__*/forwardRef(function (props, ref) {
     "data-id": dataId,
     className: classNames,
     onPointerOver: setFocusOnHover
-  }, optionProps, others), isSelected && ___EmotionJSX(Icon, {
+  }, optionProps, others, {
+    "aria-label": ariaLabel
+  }), isSelected && ___EmotionJSX(Icon, {
     icon: CircleSmallIcon
   }), rendered);
 });
@@ -88,7 +91,8 @@ Option.propTypes = {
       'data-id': PropTypes.string,
       isSeparator: PropTypes.bool
     }),
-    rendered: PropTypes.node
+    rendered: PropTypes.node,
+    'aria-label': PropTypes.string
   }),
   state: PropTypes.shape({
     disabledKeys: isIterableProp,

package/lib/components/MultivaluesField/MultivaluesField.stories.js

@@ -283,7 +283,8 @@ export var Default = function Default(args) {
   }), function (item) {
     return ___EmotionJSX(Item, {
       key: item.key,
-      "data-id": item.name
+      "data-id": item.name,
+      "aria-label": item.name
     }, item.name);
   }));
 };
@@ -308,7 +309,8 @@ export var Uncontrolled = function Uncontrolled(args) {
   }), function (item) {
     return ___EmotionJSX(Item, {
       key: item.key,
-      "data-id": item.name
+      "data-id": item.name,
+      "aria-label": item.name
     }, item.name);
   }));
 };
@@ -339,7 +341,8 @@ export var Controlled = function Controlled(args) {
   }), function (item) {
     return ___EmotionJSX(Item, {
       key: item.key,
-      "data-id": item.name
+      "data-id": item.name,
+      "aria-label": item.name
     }, item.name);
   }));
 };
@@ -364,7 +367,8 @@ export var Error = function Error(args) {
   }), function (item) {
     return ___EmotionJSX(Item, {
       key: item.key,
-      "data-id": item.name
+      "data-id": item.name,
+      "aria-label": item.name
     }, item.name);
   }));
 };
@@ -389,7 +393,8 @@ export var ReadOnlyField = function ReadOnlyField(args) {
   }), function (item) {
     return ___EmotionJSX(Item, {
       key: item.key,
-      "data-id": item.name
+      "data-id": item.name,
+      "aria-label": item.name
     }, item.name);
   }));
 };
@@ -414,7 +419,8 @@ export var ReadOnlyValues = function ReadOnlyValues(args) {
   }), function (item) {
     return ___EmotionJSX(Item, {
       key: item.key,
-      "data-id": item.name
+      "data-id": item.name,
+      "aria-label": item.name
     }, item.name);
   }));
 };
@@ -439,7 +445,8 @@ export var DisabledKeys = function DisabledKeys(args) {
   }), function (item) {
     return ___EmotionJSX(Item, {
       key: item.key,
-      "data-id": item.name
+      "data-id": item.name,
+      "aria-label": item.name
     }, item.name);
   }));
 };
@@ -464,7 +471,8 @@ export var CustomValues = function CustomValues(args) {
   }), function (item) {
     return ___EmotionJSX(Item, {
       key: item.key,
-      "data-id": item.name
+      "data-id": item.name,
+      "aria-label": item.name
     }, item.name);
   }));
 };
@@ -493,7 +501,8 @@ export var IconSlotsInBadge = function IconSlotsInBadge(args) {
   }), function (item) {
     return ___EmotionJSX(Item, {
       key: item.key,
-      "data-id": item.name
+      "data-id": item.name,
+      "aria-label": item.name
     }, item.name);
   }));
 };
@@ -515,7 +524,7 @@ export var CustomSize = function CustomSize(args) {
   }, ___EmotionJSX(Box, {
     width: 300
   }, ___EmotionJSX(OverlayProvider
-  // note: spacing for demo purpose only so that the select list renders in the correct place
+  // note: spacing for demo purpose only so that the select list renders in the right place
   , {
     style: setOverlayStyle(direction, isOpen, '25%', '25%', '75%')
   }, ___EmotionJSX(MultivaluesField, _extends({
@@ -525,7 +534,8 @@ export var CustomSize = function CustomSize(args) {
   }), function (item) {
     return ___EmotionJSX(Item, {
       key: item.key,
-      "data-id": item.name
+      "data-id": item.name,
+      "aria-label": item.name
     }, item.name);
   }))));
 };

package/lib/components/TooltipTrigger/TooltipTrigger.stories.js

@@ -45,7 +45,9 @@ export var Disabled = function Disabled() {
   return ___EmotionJSX(TooltipTrigger, {
     delay: 0,
     isDisabled: true
-  }, ___EmotionJSX(IconButton, null, ___EmotionJSX(Icon, {
+  }, ___EmotionJSX(IconButton, {
+    "aria-label": "Earth Icon"
+  }, ___EmotionJSX(Icon, {
     icon: Earth
   })), ___EmotionJSX(Tooltip, null, "Hello World"));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.0.3-alpha.3",
+  "version": "2.0.3-alpha.4",
   "description": "PingUX themeable React component library",
   "repository": {
     "type": "git",