@gympass/yoga 7.70.2 → 7.71.0

package/cjs/AutoComplete/web/AutoComplete.js

@@ -175,7 +175,8 @@ var AutoComplete = /*#__PURE__*/_react["default"].forwardRef(function (_ref6, re
         onClick: handleOpenSuggestions,
         "aria-label": openSuggestionsAriaLabel
       }),
-      ref: inputRef
+      ref: inputRef,
+      includeAriaAttributes: false
     })), isSuggestionsOpen && /*#__PURE__*/_react["default"].createElement(List, _extends({}, getMenuProps(), {
       full: full,
       error: !!error

package/cjs/Dropdown/web/Dropdown.js

@@ -155,7 +155,8 @@ var Dropdown = /*#__PURE__*/_react["default"].forwardRef(function (_ref10, ref)
       isOpen: isOpen,
       label: label,
       full: full,
-      ref: inputRef
+      ref: inputRef,
+      includeAriaAttributes: false
     }, getInputProps())), /*#__PURE__*/_react["default"].createElement(Button, _extends({
       isOpen: isOpen,
       disabled: disabled

package/cjs/Input/web/Helper.js

@@ -15,6 +15,8 @@ var _templateObject, _templateObject2;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }; return _extends.apply(this, arguments); }
+
 function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
 
 var Wrapper = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  ", "\n"])), function (_ref) {
@@ -39,13 +41,17 @@ var Helper = function Helper(_ref3) {
       helper = _ref3.helper,
       maxLength = _ref3.maxLength,
       length = _ref3.length,
-      hideMaxLength = _ref3.hideMaxLength;
+      hideMaxLength = _ref3.hideMaxLength,
+      a11yId = _ref3.a11yId;
   return /*#__PURE__*/_react["default"].createElement(Wrapper, {
     disabled: disabled,
     error: error
-  }, (error || helper) && /*#__PURE__*/_react["default"].createElement(Info, {
-    as: "span"
-  }, error || helper), maxLength && !hideMaxLength && /*#__PURE__*/_react["default"].createElement(Info, {
+  }, (error || helper) && /*#__PURE__*/_react["default"].createElement(Info, _extends({
+    as: "span",
+    "aria-live": "polite"
+  }, a11yId && {
+    id: a11yId
+  }), error || helper), maxLength && !hideMaxLength && /*#__PURE__*/_react["default"].createElement(Info, {
     as: "span"
   }, length, "/", maxLength));
 };
@@ -56,7 +62,8 @@ Helper.propTypes = {
   helper: _propTypes.string,
   maxLength: _propTypes.number,
   length: _propTypes.number,
-  hideMaxLength: _propTypes.bool
+  hideMaxLength: _propTypes.bool,
+  a11yId: _propTypes.string
 };
 Helper.defaultProps = {
   disabled: undefined,
@@ -64,7 +71,8 @@ Helper.defaultProps = {
   helper: undefined,
   maxLength: undefined,
   length: undefined,
-  hideMaxLength: undefined
+  hideMaxLength: undefined,
+  a11yId: undefined
 };
 var _default = Helper;
 exports["default"] = _default;

package/cjs/Input/web/Input.js

@@ -23,7 +23,7 @@ var _Legend = _interopRequireDefault(require("./Legend"));
 
 var _Label = _interopRequireDefault(require("./Label"));
 
-var _excluded = ["cleanable", "children", "disabled", "error", "full", "helper", "label", "maxLength", "readOnly", "style", "value", "onChange", "onClean", "hideMaxLength", "rightIcon"];
+var _excluded = ["cleanable", "children", "disabled", "error", "full", "helper", "label", "maxLength", "readOnly", "style", "value", "onChange", "onClean", "hideMaxLength", "rightIcon", "a11yId", "includeAriaAttributes"];
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
@@ -71,6 +71,8 @@ var Input = /*#__PURE__*/_react["default"].forwardRef(function (_ref3, ref) {
       onClean = _ref3.onClean,
       hideMaxLength = _ref3.hideMaxLength,
       rightIcon = _ref3.rightIcon,
+      a11yId = _ref3.a11yId,
+      includeAriaAttributes = _ref3.includeAriaAttributes,
       props = _objectWithoutPropertiesLoose(_ref3, _excluded);
 
   var inputRef = ref || (0, _react.useRef)(null);
@@ -83,6 +85,24 @@ var Input = /*#__PURE__*/_react["default"].forwardRef(function (_ref3, ref) {
     }
   };
 
+  var hasHelper = helper || maxLength || error;
+  var helperA11yId = includeAriaAttributes && a11yId && a11yId + "-helper";
+  var labelA11yId = includeAriaAttributes && a11yId && a11yId + "-label";
+  var a11yFieldProps;
+
+  if (includeAriaAttributes) {
+    a11yFieldProps = a11yId ? _extends({}, hasHelper && {
+      'aria-describedby': helperA11yId
+    }, label && {
+      'aria-labelledby': labelA11yId
+    }) : _extends({}, label && {
+      'aria-label': label
+    });
+    a11yFieldProps['aria-invalid'] = !!error;
+  } else {
+    a11yFieldProps = {};
+  }
+
   return /*#__PURE__*/_react["default"].createElement(Control, {
     full: full
   }, /*#__PURE__*/_react["default"].createElement(_Fieldset["default"], {
@@ -103,10 +123,12 @@ var Input = /*#__PURE__*/_react["default"].forwardRef(function (_ref3, ref) {
     ref: inputRef,
     value: value,
     onChange: onChange
-  })) : children, /*#__PURE__*/_react["default"].createElement(_Label["default"], {
+  }, a11yFieldProps)) : children, /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
     error: error,
     disabled: disabled
-  }, label), label && /*#__PURE__*/_react["default"].createElement(_Legend["default"], null, label), cleanable && !readOnly && value && /*#__PURE__*/_react["default"].createElement(IconWrapper, {
+  }, labelA11yId && {
+    id: labelA11yId
+  }), label), label && /*#__PURE__*/_react["default"].createElement(_Legend["default"], null, label), cleanable && !readOnly && value && /*#__PURE__*/_react["default"].createElement(IconWrapper, {
     tabIndex: 0,
     disabled: disabled,
     onClick: cleanField,
@@ -123,13 +145,14 @@ var Input = /*#__PURE__*/_react["default"].forwardRef(function (_ref3, ref) {
     width: 20,
     height: 20,
     role: "button"
-  }, rightIcon)), (helper || maxLength || error) && /*#__PURE__*/_react["default"].createElement(_Helper["default"], {
+  }, rightIcon)), hasHelper && /*#__PURE__*/_react["default"].createElement(_Helper["default"], {
     error: error,
     helper: helper,
     maxLength: maxLength,
     length: value.length,
     disabled: disabled,
-    hideMaxLength: hideMaxLength
+    hideMaxLength: hideMaxLength,
+    a11yId: helperA11yId
   }));
 });
 
@@ -162,7 +185,13 @@ Input.propTypes = {
   /** when max length helper is unnecessary to appear */
   hideMaxLength: _propTypes.bool,
   placeholder: _propTypes.string,
-  rightIcon: _propTypes.node
+  rightIcon: _propTypes.node,
+
+  /** a unique prefix to generate HTML IDs to be used for aria-labelledby and aria-describedby */
+  a11yId: _propTypes.string,
+
+  /** useful for components that extend the Input component and have their own ARIA attributes implementation (e.g. Dropdown) */
+  includeAriaAttributes: _propTypes.bool
 };
 Input.defaultProps = {
   className: undefined,
@@ -181,7 +210,9 @@ Input.defaultProps = {
   onClean: function onClean() {},
   hideMaxLength: false,
   placeholder: undefined,
-  rightIcon: undefined
+  rightIcon: undefined,
+  a11yId: undefined,
+  includeAriaAttributes: true
 };
 var _default = Input;
 exports["default"] = _default;

package/esm/AutoComplete/web/AutoComplete.js

@@ -156,7 +156,8 @@ var AutoComplete = /*#__PURE__*/React.forwardRef(function (_ref6, ref) {
         onClick: handleOpenSuggestions,
         "aria-label": openSuggestionsAriaLabel
       }),
-      ref: inputRef
+      ref: inputRef,
+      includeAriaAttributes: false
     })), isSuggestionsOpen && /*#__PURE__*/React.createElement(List, _extends({}, getMenuProps(), {
       full: full,
       error: !!error

package/esm/Dropdown/web/Dropdown.js

@@ -129,7 +129,8 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (_ref10, ref) {
       isOpen: isOpen,
       label: label,
       full: full,
-      ref: inputRef
+      ref: inputRef,
+      includeAriaAttributes: false
     }, getInputProps())), /*#__PURE__*/React.createElement(Button, _extends({
       isOpen: isOpen,
       disabled: disabled

package/esm/Input/web/Helper.js

@@ -1,5 +1,7 @@
 var _templateObject, _templateObject2;
 
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }; return _extends.apply(this, arguments); }
+
 function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
 
 import React from 'react';
@@ -26,13 +28,17 @@ var Helper = function Helper(_ref3) {
       helper = _ref3.helper,
       maxLength = _ref3.maxLength,
       length = _ref3.length,
-      hideMaxLength = _ref3.hideMaxLength;
+      hideMaxLength = _ref3.hideMaxLength,
+      a11yId = _ref3.a11yId;
   return /*#__PURE__*/React.createElement(Wrapper, {
     disabled: disabled,
     error: error
-  }, (error || helper) && /*#__PURE__*/React.createElement(Info, {
-    as: "span"
-  }, error || helper), maxLength && !hideMaxLength && /*#__PURE__*/React.createElement(Info, {
+  }, (error || helper) && /*#__PURE__*/React.createElement(Info, _extends({
+    as: "span",
+    "aria-live": "polite"
+  }, a11yId && {
+    id: a11yId
+  }), error || helper), maxLength && !hideMaxLength && /*#__PURE__*/React.createElement(Info, {
     as: "span"
   }, length, "/", maxLength));
 };
@@ -43,7 +49,8 @@ Helper.propTypes = {
   helper: string,
   maxLength: number,
   length: number,
-  hideMaxLength: bool
+  hideMaxLength: bool,
+  a11yId: string
 };
 Helper.defaultProps = {
   disabled: undefined,
@@ -51,6 +58,7 @@ Helper.defaultProps = {
   helper: undefined,
   maxLength: undefined,
   length: undefined,
-  hideMaxLength: undefined
+  hideMaxLength: undefined,
+  a11yId: undefined
 };
 export default Helper;

package/esm/Input/web/Input.js

@@ -1,4 +1,4 @@
-var _excluded = ["cleanable", "children", "disabled", "error", "full", "helper", "label", "maxLength", "readOnly", "style", "value", "onChange", "onClean", "hideMaxLength", "rightIcon"];
+var _excluded = ["cleanable", "children", "disabled", "error", "full", "helper", "label", "maxLength", "readOnly", "style", "value", "onChange", "onClean", "hideMaxLength", "rightIcon", "a11yId", "includeAriaAttributes"];
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
@@ -48,6 +48,8 @@ var Input = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
       onClean = _ref3.onClean,
       hideMaxLength = _ref3.hideMaxLength,
       rightIcon = _ref3.rightIcon,
+      a11yId = _ref3.a11yId,
+      includeAriaAttributes = _ref3.includeAriaAttributes,
       props = _objectWithoutPropertiesLoose(_ref3, _excluded);
 
   var inputRef = ref || useRef(null);
@@ -60,6 +62,24 @@ var Input = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
     }
   };
 
+  var hasHelper = helper || maxLength || error;
+  var helperA11yId = includeAriaAttributes && a11yId && a11yId + "-helper";
+  var labelA11yId = includeAriaAttributes && a11yId && a11yId + "-label";
+  var a11yFieldProps;
+
+  if (includeAriaAttributes) {
+    a11yFieldProps = a11yId ? _extends({}, hasHelper && {
+      'aria-describedby': helperA11yId
+    }, label && {
+      'aria-labelledby': labelA11yId
+    }) : _extends({}, label && {
+      'aria-label': label
+    });
+    a11yFieldProps['aria-invalid'] = !!error;
+  } else {
+    a11yFieldProps = {};
+  }
+
   return /*#__PURE__*/React.createElement(Control, {
     full: full
   }, /*#__PURE__*/React.createElement(Fieldset, {
@@ -80,10 +100,12 @@ var Input = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
     ref: inputRef,
     value: value,
     onChange: onChange
-  })) : children, /*#__PURE__*/React.createElement(Label, {
+  }, a11yFieldProps)) : children, /*#__PURE__*/React.createElement(Label, _extends({
     error: error,
     disabled: disabled
-  }, label), label && /*#__PURE__*/React.createElement(Legend, null, label), cleanable && !readOnly && value && /*#__PURE__*/React.createElement(IconWrapper, {
+  }, labelA11yId && {
+    id: labelA11yId
+  }), label), label && /*#__PURE__*/React.createElement(Legend, null, label), cleanable && !readOnly && value && /*#__PURE__*/React.createElement(IconWrapper, {
     tabIndex: 0,
     disabled: disabled,
     onClick: cleanField,
@@ -100,13 +122,14 @@ var Input = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
     width: 20,
     height: 20,
     role: "button"
-  }, rightIcon)), (helper || maxLength || error) && /*#__PURE__*/React.createElement(Helper, {
+  }, rightIcon)), hasHelper && /*#__PURE__*/React.createElement(Helper, {
     error: error,
     helper: helper,
     maxLength: maxLength,
     length: value.length,
     disabled: disabled,
-    hideMaxLength: hideMaxLength
+    hideMaxLength: hideMaxLength,
+    a11yId: helperA11yId
   }));
 });
 Input.propTypes = {
@@ -138,7 +161,13 @@ Input.propTypes = {
   /** when max length helper is unnecessary to appear */
   hideMaxLength: bool,
   placeholder: string,
-  rightIcon: node
+  rightIcon: node,
+
+  /** a unique prefix to generate HTML IDs to be used for aria-labelledby and aria-describedby */
+  a11yId: string,
+
+  /** useful for components that extend the Input component and have their own ARIA attributes implementation (e.g. Dropdown) */
+  includeAriaAttributes: bool
 };
 Input.defaultProps = {
   className: undefined,
@@ -157,6 +186,8 @@ Input.defaultProps = {
   onClean: function onClean() {},
   hideMaxLength: false,
   placeholder: undefined,
-  rightIcon: undefined
+  rightIcon: undefined,
+  a11yId: undefined,
+  includeAriaAttributes: true
 };
 export default Input;

package/esm/Input/web/Input.test.js

@@ -61,6 +61,34 @@ describe('<Input />', function () {
 
       expect(container).toMatchSnapshot();
     });
+    it('should match with a11yId', function () {
+      var _render8 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input, {
+        label: "Label",
+        a11yId: "id"
+      }))),
+          container = _render8.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match with a11yId and error', function () {
+      var _render9 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input, {
+        label: "Label",
+        a11yId: "id",
+        error: "Error message"
+      }))),
+          container = _render9.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match with includeAriaAttributes set to false', function () {
+      var _render10 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input, {
+        label: "Label",
+        includeAriaAttributes: false
+      }))),
+          container = _render10.container;
+
+      expect(container).toMatchSnapshot();
+    });
   });
   describe('Events', function () {
     it('should call onChange', function () {
@@ -101,11 +129,11 @@ describe('<Input />', function () {
   });
   describe('maxLength', function () {
     it('should update maxLength counter when add character', function () {
-      var _render8 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input, {
+      var _render11 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input, {
         label: "Input",
         maxLength: 10
       }))),
-          rerender = _render8.rerender;
+          rerender = _render11.rerender;
 
       expect(screen.getByText('0/10').textContent).toBe('0/10');
       rerender( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input, {
@@ -128,10 +156,10 @@ describe('<Input />', function () {
       expect(onClean).toHaveBeenCalled();
     });
     it('should test if clean button is present', function () {
-      var _render9 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input, {
+      var _render12 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input, {
         label: "Input"
       }))),
-          rerender = _render9.rerender; // closeButton
+          rerender = _render12.rerender; // closeButton
 
 
       expect(screen.queryByRole('button')).toBeNull();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gympass/yoga",
-  "version": "7.70.2",
+  "version": "7.71.0",
   "description": "Gympass component library",
   "main": "./cjs",
   "sideEffects": false,
@@ -53,7 +53,7 @@
     "react": ">=16",
     "styled-components": "^4.4.0"
   },
-  "gitHead": "3fd071545c51cdd16c351f4b680ce495191e61d2",
+  "gitHead": "9dab18e17e33d1ce97064c09c9ccf722c647e8a9",
   "module": "./esm",
   "private": false,
   "react-native": "./cjs/index.native.js"