@canonical/react-components 0.33.0 → 0.34.0

package/dist/__mocks__/nanoid.d.ts

@@ -0,0 +1 @@
+export declare const nanoid: () => string;

package/dist/__mocks__/nanoid.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.nanoid = void 0;
+var id = 0;
+beforeEach(function () {
+  id = 0;
+});
+
+var nanoid = function nanoid() {
+  id++;
+  return "mock-nanoid-".concat(id);
+};
+
+exports.nanoid = nanoid;

package/dist/components/Chip/Chip.d.ts

@@ -43,6 +43,6 @@ export declare type Props = PropsWithSpread<{
      * The value of the chip.
      */
     value: string;
-}, HTMLProps<HTMLSpanElement>>;
+}, HTMLProps<HTMLButtonElement>>;
 declare const Chip: ({ appearance, lead, onClick, onDismiss, quoteValue, selected, subString, value, ...props }: Props) => JSX.Element;
 export default Chip;

package/dist/components/Chip/Chip.js

@@ -71,27 +71,28 @@ var Chip = function Chip(_ref) {
     }
   }));
 
-  var chipClassName = (0, _classnames.default)((_classNames = {}, _defineProperty(_classNames, "p-chip--".concat(appearance), !!appearance), _defineProperty(_classNames, "p-chip", !appearance), _classNames));
+  var chipClassName = (0, _classnames.default)((_classNames = {}, _defineProperty(_classNames, "p-chip--".concat(appearance), !!appearance), _defineProperty(_classNames, "p-chip", !appearance), _classNames), props.className);
 
   if (onDismiss) {
-    return /*#__PURE__*/_react.default.createElement("span", _extends({
-      className: chipClassName,
-      "aria-pressed": selected
-    }, props), chipContent, /*#__PURE__*/_react.default.createElement("button", {
+    return /*#__PURE__*/_react.default.createElement("span", _extends({}, props, {
+      className: chipClassName
+    }), chipContent, /*#__PURE__*/_react.default.createElement("button", {
       className: "p-chip__dismiss",
-      onClick: onDismiss
+      onClick: onDismiss,
+      type: "button"
     }, /*#__PURE__*/_react.default.createElement("i", {
       className: "p-icon--close"
     }, "Dismiss")));
   } else {
-    return /*#__PURE__*/_react.default.createElement("button", {
-      className: chipClassName,
+    return /*#__PURE__*/_react.default.createElement("button", _extends({}, props, {
       "aria-pressed": selected,
+      className: chipClassName,
       onClick: onClick,
       onKeyDown: function onKeyDown(e) {
         return _onKeyDown(e);
-      }
-    }, chipContent);
+      },
+      type: "button"
+    }), chipContent);
   }
 };
 

package/dist/components/Field/Field.d.ts

@@ -28,6 +28,10 @@ export declare type Props = {
      * Help text to show below the field.
      */
     help?: ReactNode;
+    /**
+     * An id to give to the help element.
+     */
+    helpId?: string;
     /**
      * Whether the component is wrapping a select element.
      */
@@ -56,6 +60,10 @@ export declare type Props = {
      * The content for success validation.
      */
     success?: ReactNode;
+    /**
+     * An id to give to the caution, error or success element.
+     */
+    validationId?: string;
 };
-declare const Field: ({ caution, children, className, error, forId, help, isSelect, label, labelClassName, labelFirst, required, stacked, success, }: Props) => JSX.Element;
+declare const Field: ({ caution, children, className, error, forId, help, helpId, isSelect, label, labelClassName, labelFirst, required, stacked, success, validationId, }: Props) => JSX.Element;
 export default Field;

package/dist/components/Field/Field.js

@@ -15,20 +15,22 @@ var _Col = _interopRequireDefault(require("../Col"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var generateHelp = function generateHelp(help) {
+var generateHelp = function generateHelp(help, helpId) {
   return help && /*#__PURE__*/_react.default.createElement("p", {
-    className: "p-form-help-text"
+    className: "p-form-help-text",
+    id: helpId
   }, help);
 };
 
-var generateError = function generateError(error, caution, success) {
+var generateError = function generateError(error, caution, success, validationId) {
   if (!error && !caution && !success) {
     return null;
   }
 
   var messageType = error && "Error" || caution && "Caution" || success && "Success";
   return /*#__PURE__*/_react.default.createElement("p", {
-    className: "p-form-validation__message"
+    className: "p-form-validation__message",
+    id: validationId
   }, /*#__PURE__*/_react.default.createElement("strong", null, messageType, ":"), " ", error || caution || success);
 };
 
@@ -52,12 +54,12 @@ var generateLabel = function generateLabel(forId, required, label, labelClassNam
   return labelNode;
 };
 
-var generateContent = function generateContent(isSelect, children, labelFirst, labelNode, help, error, caution, success) {
+var generateContent = function generateContent(isSelect, children, labelFirst, labelNode, help, error, caution, success, validationId, helpId) {
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "p-form__control u-clearfix"
   }, isSelect ? /*#__PURE__*/_react.default.createElement("div", {
     className: "p-form-validation__select-wrapper"
-  }, children) : children, !labelFirst && labelNode, generateHelp(help), generateError(error, caution, success));
+  }, children) : children, !labelFirst && labelNode, generateHelp(help, helpId), generateError(error, caution, success, validationId));
 };
 
 var Field = function Field(_ref) {
@@ -67,6 +69,7 @@ var Field = function Field(_ref) {
       error = _ref.error,
       forId = _ref.forId,
       help = _ref.help,
+      helpId = _ref.helpId,
       isSelect = _ref.isSelect,
       label = _ref.label,
       labelClassName = _ref.labelClassName,
@@ -74,9 +77,10 @@ var Field = function Field(_ref) {
       labelFirst = _ref$labelFirst === void 0 ? true : _ref$labelFirst,
       required = _ref.required,
       stacked = _ref.stacked,
-      success = _ref.success;
+      success = _ref.success,
+      validationId = _ref.validationId;
   var labelNode = generateLabel(forId, required, label, labelClassName, stacked);
-  var content = generateContent(isSelect, children, labelFirst, labelNode, help, error, caution, success);
+  var content = generateContent(isSelect, children, labelFirst, labelNode, help, error, caution, success, validationId, helpId);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)("p-form__group", "p-form-validation", className, {
       "is-error": error,

package/dist/components/Input/Input.js

@@ -17,6 +17,8 @@ var _CheckboxInput = _interopRequireDefault(require("../CheckboxInput"));
 
 var _RadioInput = _interopRequireDefault(require("../RadioInput"));
 
+var _hooks = require("../../hooks");
+
 var _excluded = ["caution", "className", "error", "help", "id", "label", "labelClassName", "required", "stacked", "success", "takeFocus", "type", "wrapperClassName"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -27,6 +29,12 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _extends() { _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; }; return _extends.apply(this, arguments); }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -49,6 +57,19 @@ var Input = function Input(_ref) {
 
   var inputRef = (0, _react.useRef)(null);
   var fieldLabel = !["checkbox", "radio"].includes(type) ? label : "";
+  var validationId = (0, _hooks.useId)();
+  var helpId = (0, _hooks.useId)();
+  var hasError = !!error;
+
+  var commonProps = _objectSpread({
+    "aria-describedby": help ? helpId : null,
+    "aria-errormessage": hasError ? validationId : null,
+    "aria-invalid": hasError,
+    id: id,
+    label: label,
+    required: required
+  }, inputProps);
+
   (0, _react.useEffect)(function () {
     if (takeFocus) {
       inputRef.current.focus();
@@ -58,27 +79,20 @@ var Input = function Input(_ref) {
 
   if (type === "checkbox") {
     input = /*#__PURE__*/_react.default.createElement(_CheckboxInput.default, _extends({
-      id: id,
       label: label,
-      labelClassName: labelClassName,
-      required: required
-    }, inputProps));
+      labelClassName: labelClassName
+    }, commonProps));
   } else if (type === "radio") {
     input = /*#__PURE__*/_react.default.createElement(_RadioInput.default, _extends({
-      id: id,
       label: label,
-      labelClassName: labelClassName,
-      required: required
-    }, inputProps));
+      labelClassName: labelClassName
+    }, commonProps));
   } else {
     input = /*#__PURE__*/_react.default.createElement("input", _extends({
       className: (0, _classnames.default)("p-form-validation__input", className),
-      id: id,
       ref: inputRef,
-      required: required,
-      type: type,
-      "aria-invalid": !!error
-    }, inputProps));
+      type: type
+    }, commonProps));
   }
 
   return /*#__PURE__*/_react.default.createElement(_Field.default, {
@@ -87,11 +101,13 @@ var Input = function Input(_ref) {
     error: error,
     forId: id,
     help: help,
+    helpId: helpId,
     label: fieldLabel,
     labelClassName: labelClassName,
     required: required,
     stacked: stacked,
-    success: success
+    success: success,
+    validationId: validationId
   }, input);
 };
 

package/dist/components/PaginationItem/PaginationItem.js

@@ -22,7 +22,8 @@ var PaginationItem = function PaginationItem(_ref) {
     className: (0, _classnames.default)("p-pagination__link", {
       "is-active": isActive
     }),
-    onClick: onClick
+    onClick: onClick,
+    "aria-current": isActive ? "page" : undefined
   }, number));
 };
 

package/dist/components/PasswordToggle/PasswordToggle.js

@@ -17,6 +17,8 @@ var _Field = _interopRequireDefault(require("../Field"));
 
 var _Label = _interopRequireDefault(require("../Label"));
 
+var _hooks = require("../../hooks");
+
 var _excluded = ["caution", "className", "error", "help", "id", "label", "readOnly", "required", "success", "type", "wrapperClassName"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -62,6 +64,10 @@ var PasswordToggle = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
       isPassword = _useState2[0],
       setIsPassword = _useState2[1];
 
+  var validationId = (0, _hooks.useId)();
+  var helpId = (0, _hooks.useId)();
+  var hasError = !!error;
+
   var togglePassword = function togglePassword() {
     if (isPassword) {
       setIsPassword(false);
@@ -75,8 +81,10 @@ var PasswordToggle = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
     className: wrapperClassName,
     error: error,
     help: help,
+    helpId: helpId,
     required: required,
-    success: success
+    success: success,
+    validationId: validationId
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "p-form-password-toggle"
   }, /*#__PURE__*/_react.default.createElement(_Label.default, {
@@ -97,11 +105,14 @@ var PasswordToggle = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
   }, isPassword ? "Show" : "Hide"), /*#__PURE__*/_react.default.createElement("i", {
     className: isPassword ? "p-icon--show" : "p-icon--hide"
   }))), /*#__PURE__*/_react.default.createElement("input", _extends({
+    "aria-describedby": help ? helpId : null,
+    "aria-errormessage": hasError ? validationId : null,
+    "aria-invalid": hasError,
     className: (0, _classnames.default)("p-form-validation__input", className),
     id: id,
+    readOnly: readOnly,
     ref: ref,
-    type: isPassword ? "password" : "text",
-    readOnly: readOnly
+    type: isPassword ? "password" : "text"
   }, inputProps)));
 });
 

package/dist/components/Select/Select.js

@@ -13,6 +13,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _Field = _interopRequireDefault(require("../Field"));
 
+var _hooks = require("../../hooks");
+
 var _excluded = ["label", "value"],
     _excluded2 = ["caution", "className", "error", "help", "id", "label", "labelClassName", "onChange", "options", "required", "stacked", "success", "takeFocus", "wrapperClassName"];
 
@@ -59,6 +61,9 @@ var Select = function Select(_ref2) {
       selectProps = _objectWithoutProperties(_ref2, _excluded2);
 
   var selectRef = (0, _react.useRef)(null);
+  var validationId = (0, _hooks.useId)();
+  var helpId = (0, _hooks.useId)();
+  var hasError = !!error;
   (0, _react.useEffect)(function () {
     if (takeFocus) {
       selectRef.current.focus();
@@ -70,13 +75,18 @@ var Select = function Select(_ref2) {
     error: error,
     forId: id,
     help: help,
+    helpId: helpId,
     isSelect: true,
     label: label,
     labelClassName: labelClassName,
     required: required,
     stacked: stacked,
-    success: success
+    success: success,
+    validationId: validationId
   }, /*#__PURE__*/_react.default.createElement("select", _extends({
+    "aria-describedby": help ? helpId : null,
+    "aria-errormessage": hasError ? validationId : null,
+    "aria-invalid": hasError,
     className: (0, _classnames.default)("p-form-validation__input", className),
     id: id,
     onChange: function onChange(evt) {

package/dist/components/Slider/Slider.js

@@ -9,6 +9,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _Field = _interopRequireDefault(require("../Field"));
 
+var _hooks = require("../../hooks");
+
 var _excluded = ["caution", "disabled", "error", "help", "id", "inputDisabled", "label", "max", "min", "onChange", "required", "showInput"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -45,6 +47,9 @@ var Slider = function Slider(_ref) {
       showInput = _ref$showInput === void 0 ? false : _ref$showInput,
       inputProps = _objectWithoutProperties(_ref, _excluded);
 
+  var validationId = (0, _hooks.useId)();
+  var helpId = (0, _hooks.useId)();
+  var hasError = !!error;
   var style = {};
 
   if ((_navigator = navigator) !== null && _navigator !== void 0 && (_navigator$userAgent = _navigator.userAgent) !== null && _navigator$userAgent !== void 0 && _navigator$userAgent.includes("AppleWebKit")) {
@@ -61,11 +66,16 @@ var Slider = function Slider(_ref) {
     caution: caution,
     error: error,
     help: help,
+    helpId: helpId,
     label: label,
-    required: required
+    required: required,
+    validationId: validationId
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "p-slider__wrapper"
   }, /*#__PURE__*/_react.default.createElement("input", _extends({
+    "aria-describedby": help ? helpId : null,
+    "aria-errormessage": hasError ? validationId : null,
+    "aria-invalid": hasError,
     disabled: disabled,
     id: id,
     max: max,
@@ -75,6 +85,9 @@ var Slider = function Slider(_ref) {
     style: style,
     type: "range"
   }, inputProps)), showInput && /*#__PURE__*/_react.default.createElement("input", _extends({
+    "aria-describedby": help ? helpId : null,
+    "aria-errormessage": hasError ? validationId : null,
+    "aria-invalid": hasError,
     className: "p-slider__input",
     disabled: disabled || inputDisabled,
     max: max,

package/dist/components/Textarea/Textarea.js

@@ -13,6 +13,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _Field = _interopRequireDefault(require("../Field"));
 
+var _hooks = require("../../hooks");
+
 var _excluded = ["caution", "className", "error", "grow", "help", "id", "label", "labelClassName", "onKeyUp", "required", "stacked", "style", "success", "takeFocus", "wrapperClassName"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -54,6 +56,9 @@ var Textarea = function Textarea(_ref) {
       props = _objectWithoutProperties(_ref, _excluded);
 
   var textareaRef = (0, _react.useRef)(null);
+  var validationId = (0, _hooks.useId)();
+  var helpId = (0, _hooks.useId)();
+  var hasError = !!error;
   (0, _react.useEffect)(function () {
     if (takeFocus) {
       textareaRef.current.focus();
@@ -65,12 +70,17 @@ var Textarea = function Textarea(_ref) {
     error: error,
     forId: id,
     help: help,
+    helpId: helpId,
     label: label,
     labelClassName: labelClassName,
     required: required,
     stacked: stacked,
-    success: success
+    success: success,
+    validationId: validationId
   }, /*#__PURE__*/_react.default.createElement("textarea", _extends({
+    "aria-describedby": help ? helpId : null,
+    "aria-errormessage": hasError ? validationId : null,
+    "aria-invalid": hasError,
     className: (0, _classnames.default)("p-form-validation__input", className),
     id: id,
     onKeyUp: function onKeyUp(evt) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "0.33.0",
+  "version": "0.34.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": "Huw Wilkins <huw.wilkins@canonical.com>",