@canonical/react-components 0.37.7 → 0.37.9

package/dist/components/Accordion/Accordion.d.ts

@@ -27,7 +27,7 @@ export declare type Props = PropsWithSpread<{
      * Optional function that is called when the expanded section is changed.
      * The function is provided the section title or null.
      */
-    onExpandedChange?: (id: any, title: string) => void;
+    onExpandedChange?: (id: string, title: string) => void;
     /**
      * An array of sections and content.
      */

package/dist/components/Accordion/AccordionSection/AccordionSection.d.ts

@@ -10,7 +10,7 @@ export declare type Props = {
      * An optional value to set the expanded section. The value must match a
      * section key.
      */
-    expanded?: string;
+    expanded?: string | null;
     headingLevel?: number;
     /**
      * An optional click event when the title is clicked.

package/dist/components/Accordion/AccordionSection/AccordionSection.js

@@ -22,6 +22,7 @@ var AccordionSection = function AccordionSection(_ref) {
       _ref$headingLevel = _ref.headingLevel,
       headingLevel = _ref$headingLevel === void 0 ? 3 : _ref$headingLevel;
   var sectionId = (0, _useId.useId)();
+  var tabId = (0, _useId.useId)();
   var key = sectionKey || sectionId;
   var isExpanded = expanded === key;
   var Title = titleElement || "div";
@@ -35,6 +36,7 @@ var AccordionSection = function AccordionSection(_ref) {
     "aria-controls": "#".concat(sectionId),
     "aria-expanded": isExpanded ? "true" : "false",
     className: "p-accordion__tab",
+    id: tabId,
     onClick: function onClick() {
       if (isExpanded) {
         setExpanded(null, null);
@@ -48,7 +50,7 @@ var AccordionSection = function AccordionSection(_ref) {
     type: "button"
   }, title)), /*#__PURE__*/_react.default.createElement("section", {
     "aria-hidden": isExpanded ? "false" : "true",
-    "aria-labelledby": sectionId,
+    "aria-labelledby": tabId,
     className: "p-accordion__panel",
     id: sectionId,
     role: "tabpanel"

package/dist/components/ActionButton/ActionButton.d.ts

@@ -3,6 +3,10 @@ import type { ButtonProps } from "../Button";
 import type { ClassName, PropsWithSpread } from "../../types";
 export declare const LOADER_MIN_DURATION = 400;
 export declare const SUCCESS_DURATION = 2000;
+export declare enum Label {
+    WAITING = "Waiting for action to complete",
+    SUCCESS = "Action completed"
+}
 export declare type Props = PropsWithSpread<{
     /**
      * The appearance of the button.

package/dist/components/ActionButton/ActionButton.js

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.SUCCESS_DURATION = exports.LOADER_MIN_DURATION = void 0;
+exports.default = exports.SUCCESS_DURATION = exports.Label = exports.LOADER_MIN_DURATION = void 0;
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
@@ -45,6 +45,13 @@ exports.LOADER_MIN_DURATION = LOADER_MIN_DURATION;
 var SUCCESS_DURATION = 2000; // duration (ms) success tick is displayed
 
 exports.SUCCESS_DURATION = SUCCESS_DURATION;
+var Label;
+exports.Label = Label;
+
+(function (Label) {
+  Label["WAITING"] = "Waiting for action to complete";
+  Label["SUCCESS"] = "Action completed";
+})(Label || (exports.Label = Label = {}));
 
 var ActionButton = function ActionButton(_ref) {
   var appearance = _ref.appearance,
@@ -146,6 +153,7 @@ var ActionButton = function ActionButton(_ref) {
       width: "".concat(width, "px")
     } : undefined
   }, buttonProps), showIcon ? /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    "aria-label": showLoader ? Label.WAITING : Label.SUCCESS,
     className: showLoader ? "u-animation--spin" : null,
     light: iconLight,
     name: icon

package/dist/components/Card/Card.js

@@ -9,6 +9,8 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireDefault(require("react"));
 
+var _hooks = require("../../hooks");
+
 var _excluded = ["children", "className", "highlighted", "overlay", "thumbnail", "title"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -28,12 +30,15 @@ var Card = function Card(_ref) {
       title = _ref.title,
       props = _objectWithoutProperties(_ref, _excluded);
 
+  var titleId = (0, _hooks.useId)();
   return /*#__PURE__*/_react.default.createElement("div", _extends({
+    "aria-labelledby": titleId,
     className: (0, _classnames.default)(className, {
       "p-card": !highlighted && !overlay,
       "p-card--highlighted": highlighted,
       "p-card--overlay": overlay
-    })
+    }),
+    role: "group"
   }, props), thumbnail && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("img", {
     className: "p-card__thumbnail",
     src: thumbnail,
@@ -41,7 +46,8 @@ var Card = function Card(_ref) {
   }), /*#__PURE__*/_react.default.createElement("hr", {
     className: "u-sv1"
   })), title && /*#__PURE__*/_react.default.createElement("h3", {
-    className: "p-card__title"
+    className: "p-card__title",
+    id: titleId
   }, title), /*#__PURE__*/_react.default.createElement("div", {
     className: "p-card__content"
   }, children));

package/dist/components/CheckboxInput/CheckableInput/CheckableInput.d.ts

@@ -23,5 +23,5 @@ export declare type Props = PropsWithSpread<{
      */
     inline?: boolean;
 }, Omit<HTMLProps<HTMLInputElement>, "type">>;
-declare const CheckableInput: ({ inputType, label, labelClassName, indeterminate, ...checkboxProps }: Props) => JSX.Element;
+declare const CheckableInput: ({ inputType, label, labelClassName, indeterminate, inline, ...checkboxProps }: Props) => JSX.Element;
 export default CheckableInput;

package/dist/components/CheckboxInput/CheckableInput/CheckableInput.js

@@ -13,7 +13,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _useId = require("../../../hooks/useId");
 
-var _excluded = ["inputType", "label", "labelClassName", "indeterminate"];
+var _excluded = ["inputType", "label", "labelClassName", "indeterminate", "inline"];
 
 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); }
 
@@ -33,6 +33,7 @@ var CheckableInput = function CheckableInput(_ref) {
       labelClassName = _ref.labelClassName,
       _ref$indeterminate = _ref.indeterminate,
       indeterminate = _ref$indeterminate === void 0 ? false : _ref$indeterminate,
+      inline = _ref.inline,
       checkboxProps = _objectWithoutProperties(_ref, _excluded);
 
   var inputId = (0, _useId.useId)();
@@ -41,7 +42,7 @@ var CheckableInput = function CheckableInput(_ref) {
     inputRef.current.indeterminate = indeterminate;
   }, [indeterminate]);
   return /*#__PURE__*/_react.default.createElement("label", {
-    className: (0, _classnames.default)(labelClassName, "p-".concat(inputType).concat(checkboxProps.inline ? "--inline" : ""), {
+    className: (0, _classnames.default)(labelClassName, "p-".concat(inputType).concat(inline ? "--inline" : ""), {
       "is-required": checkboxProps.required
     })
   }, /*#__PURE__*/_react.default.createElement("input", _extends({

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

@@ -1,5 +1,8 @@
 import type { MouseEvent, HTMLProps } from "react";
 import { ValueOf, PropsWithSpread } from "../../types";
+export declare enum Label {
+    Dismiss = "Dismiss"
+}
 export declare const ChipType: {
     readonly CAUTION: "caution";
     readonly INFORMATION: "information";

package/dist/components/Chip/Chip.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.ChipType = void 0;
+exports.default = exports.Label = exports.ChipType = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -23,6 +23,13 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 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; }
 
+var Label;
+exports.Label = Label;
+
+(function (Label) {
+  Label["Dismiss"] = "Dismiss";
+})(Label || (exports.Label = Label = {}));
+
 var ChipType = {
   CAUTION: "caution",
   INFORMATION: "information",
@@ -82,7 +89,7 @@ var Chip = function Chip(_ref) {
       type: "button"
     }, /*#__PURE__*/_react.default.createElement("i", {
       className: "p-icon--close"
-    }, "Dismiss")));
+    }, Label.Dismiss)));
   } else {
     return /*#__PURE__*/_react.default.createElement("button", _extends({}, props, {
       "aria-pressed": selected,

package/dist/components/ContextualMenu/ContextualMenu.d.ts

@@ -1,8 +1,12 @@
+import React from "react";
 import type { HTMLProps, ReactNode } from "react";
 import type { ButtonProps } from "../Button";
 import type { ContextualMenuDropdownProps } from "./ContextualMenuDropdown";
 import type { MenuLink, Position } from "./ContextualMenuDropdown";
 import { ClassName, PropsWithSpread, SubComponentProps } from "../../types";
+export declare enum Label {
+    Toggle = "Toggle menu"
+}
 /**
  * The props for the ContextualMenu component.
  * @template L - The type of the link props.
@@ -75,7 +79,7 @@ export declare type Props<L> = PropsWithSpread<{
     /**
      * The toggle button's label.
      */
-    toggleLabel?: string | null;
+    toggleLabel?: string | React.ReactNode | null;
     /**
      * Whether the toggle lable or icon should appear first.
      */

package/dist/components/ContextualMenu/ContextualMenu.js

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.Label = void 0;
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
@@ -49,6 +49,18 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 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; }
 
+var Label;
+/**
+ * The props for the ContextualMenu component.
+ * @template L - The type of the link props.
+ */
+
+exports.Label = Label;
+
+(function (Label) {
+  Label["Toggle"] = "Toggle menu";
+})(Label || (exports.Label = Label = {}));
+
 /**
  * Get the node to use for positioning the menu.
  * @param wrapper - The component's wrapping element.
@@ -176,7 +188,7 @@ var ContextualMenu = function ContextualMenu(_ref) {
       ref = _usePortal.ref;
 
   var previousVisible = (0, _hooks.usePrevious)(visible);
-  var labelNode = toggleLabel ? /*#__PURE__*/_react.default.createElement("span", null, toggleLabel) : null;
+  var labelNode = toggleLabel && typeof toggleLabel === "string" ? /*#__PURE__*/_react.default.createElement("span", null, toggleLabel) : /*#__PURE__*/_react.default.isValidElement(toggleLabel) ? toggleLabel : null;
   var wrapperClass = (0, _classnames.default)(className, "p-contextual-menu", _defineProperty({}, "p-contextual-menu--".concat(adjustedPosition), adjustedPosition !== "right")); // Update the coordinates of the wrapper once it mounts to the dom. This uses
   // The callback ref pattern:
   // https://reactjs.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node
@@ -224,6 +236,7 @@ var ContextualMenu = function ContextualMenu(_ref) {
     appearance: toggleAppearance,
     "aria-controls": id,
     "aria-expanded": isOpen ? "true" : "false",
+    "aria-label": toggleLabel ? null : Label.Toggle,
     "aria-pressed": isOpen ? "true" : "false",
     "aria-haspopup": "true",
     className: (0, _classnames.default)("p-contextual-menu__toggle", toggleClassName),

package/dist/components/ContextualMenu/ContextualMenuDropdown/ContextualMenuDropdown.d.ts

@@ -1,6 +1,9 @@
 import type { HTMLProps, ReactNode } from "react";
 import type { ButtonProps } from "../../Button";
 import type { WindowFitment } from "../../../hooks";
+export declare enum Label {
+    Dropdown = "submenu"
+}
 /**
  * The type of the menu links.
  * @template L - The type of the link props.

package/dist/components/ContextualMenu/ContextualMenuDropdown/ContextualMenuDropdown.js

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.adjustForWindow = void 0;
+exports.default = exports.adjustForWindow = exports.Label = void 0;
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
@@ -48,6 +48,18 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 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; }
 
+var Label;
+/**
+ * The type of the menu links.
+ * @template L - The type of the link props.
+ */
+
+exports.Label = Label;
+
+(function (Label) {
+  Label["Dropdown"] = "submenu";
+})(Label || (exports.Label = Label = {}));
+
 /**
  * Calculate the styles for the menu.
  * @param position - The menu position.
@@ -200,7 +212,7 @@ var ContextualMenuDropdown = function ContextualMenuDropdown(_ref) {
     className: (0, _classnames.default)("p-contextual-menu__dropdown", dropdownClassName),
     id: id,
     "aria-hidden": isOpen ? "false" : "true",
-    "aria-label": "submenu",
+    "aria-label": Label.Dropdown,
     ref: dropdown,
     style: constrainPanelWidth && positionStyle !== null && positionStyle !== void 0 && positionStyle.width ? {
       width: positionStyle.width,

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

@@ -73,5 +73,5 @@ export declare type Props = {
      */
     validationId?: string;
 };
-declare const Field: ({ caution, children, className, error, forId, help, helpClassName, helpId, isSelect, isTickElement, label, labelClassName, labelFirst, required, stacked, success, validationId, }: Props) => JSX.Element;
+declare const Field: ({ caution, children, className, error, forId, help, helpClassName, helpId, isSelect, isTickElement, label, labelClassName, labelFirst, required, stacked, success, validationId, ...props }: Props) => JSX.Element;
 export default Field;

package/dist/components/Field/Field.js

@@ -13,8 +13,16 @@ var _Label = _interopRequireDefault(require("../Label"));
 
 var _Col = _interopRequireDefault(require("../Col"));
 
+var _excluded = ["caution", "children", "className", "error", "forId", "help", "helpClassName", "helpId", "isSelect", "isTickElement", "label", "labelClassName", "labelFirst", "required", "stacked", "success", "validationId"];
+
 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 _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; }
+
 var generateHelpText = function generateHelpText(_ref) {
   var help = _ref.help,
       helpId = _ref.helpId,
@@ -103,7 +111,9 @@ var Field = function Field(_ref3) {
       required = _ref3.required,
       stacked = _ref3.stacked,
       success = _ref3.success,
-      validationId = _ref3.validationId;
+      validationId = _ref3.validationId,
+      props = _objectWithoutProperties(_ref3, _excluded);
+
   var labelNode = generateLabel(forId, required, label, labelClassName, stacked);
   var content = generateContent({
     isSelect: isSelect,
@@ -119,14 +129,14 @@ var Field = function Field(_ref3) {
     validationId: validationId,
     helpId: helpId
   });
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement("div", _extends({
     className: (0, _classnames.default)("p-form__group", "p-form-validation", className, {
       "is-error": error,
       "is-caution": caution,
       "is-success": success,
       row: stacked
     })
-  }, labelFirst && labelNode, stacked ? /*#__PURE__*/_react.default.createElement(_Col.default, {
+  }, props), labelFirst && labelNode, stacked ? /*#__PURE__*/_react.default.createElement(_Col.default, {
     size: 8
   }, content) : content);
 };

package/dist/components/Input/Input.d.ts

@@ -52,10 +52,14 @@ export declare type Props = PropsWithSpread<{
      * Whether to focus on the input on initial render.
      */
     takeFocus?: boolean;
+    /**
+     * Delay takeFocus in milliseconds i.e. to let animations finish
+     */
+    takeFocusDelay?: number;
     /**
      * Optional class(es) to pass to the wrapping Field component
      */
     wrapperClassName?: string;
 }, InputHTMLAttributes<HTMLInputElement>>;
-declare const Input: ({ caution, className, error, help, helpClassName, id, label, labelClassName, required, stacked, success, takeFocus, type, wrapperClassName, ...inputProps }: Props) => JSX.Element;
+declare const Input: ({ caution, className, error, help, helpClassName, id, label, labelClassName, required, stacked, success, takeFocus, takeFocusDelay, type, wrapperClassName, ...inputProps }: Props) => JSX.Element;
 export default Input;

package/dist/components/Input/Input.js

@@ -19,7 +19,7 @@ var _RadioInput = _interopRequireDefault(require("../RadioInput"));
 
 var _hooks = require("../../hooks");
 
-var _excluded = ["caution", "className", "error", "help", "helpClassName", "id", "label", "labelClassName", "required", "stacked", "success", "takeFocus", "type", "wrapperClassName"];
+var _excluded = ["caution", "className", "error", "help", "helpClassName", "id", "label", "labelClassName", "required", "stacked", "success", "takeFocus", "takeFocusDelay", "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); }
 
@@ -52,6 +52,7 @@ var Input = function Input(_ref) {
       stacked = _ref.stacked,
       success = _ref.success,
       takeFocus = _ref.takeFocus,
+      takeFocusDelay = _ref.takeFocusDelay,
       type = _ref.type,
       wrapperClassName = _ref.wrapperClassName,
       inputProps = _objectWithoutProperties(_ref, _excluded);
@@ -63,7 +64,7 @@ var Input = function Input(_ref) {
   var hasError = !!error;
 
   var commonProps = _objectSpread({
-    "aria-describedby": help ? helpId : null,
+    "aria-describedby": [help ? helpId : null, success ? validationId : null].filter(Boolean).join(" "),
     "aria-errormessage": hasError ? validationId : null,
     "aria-invalid": hasError,
     id: id,
@@ -73,7 +74,13 @@ var Input = function Input(_ref) {
 
   (0, _react.useEffect)(function () {
     if (takeFocus) {
-      inputRef.current.focus();
+      if (takeFocusDelay) {
+        setTimeout(function () {
+          return inputRef.current.focus();
+        }, takeFocusDelay);
+      } else {
+        inputRef.current.focus();
+      }
     }
   }, [takeFocus]);
   var input;

package/dist/components/Modal/Modal.js

@@ -61,7 +61,12 @@ var Modal = function Modal(_ref) {
     }
   };
 
-  var keyListenersMap = new Map([["Escape", close], ["Tab", handleTabKey]]);
+  var handleEscKey = function handleEscKey(e) {
+    e.nativeEvent.stopImmediatePropagation();
+    close();
+  };
+
+  var keyListenersMap = new Map([["Escape", handleEscKey], ["Tab", handleTabKey]]);
   (0, _react.useEffect)(function () {
     modalRef.current.focus();
   }, [modalRef]);
@@ -69,7 +74,13 @@ var Modal = function Modal(_ref) {
     var _focusableModalElemen;
 
     focusableModalElements.current = modalRef.current.querySelectorAll(focusableElementSelectors);
-    (_focusableModalElemen = focusableModalElements.current[0]) === null || _focusableModalElemen === void 0 ? void 0 : _focusableModalElemen.focus();
+    var focusIndex = 0; // when the close button is rendered, focus on the 2nd content element and not the close btn.
+
+    if (close && focusableModalElements.current.length > 1) {
+      focusIndex = 1;
+    }
+
+    (_focusableModalElemen = focusableModalElements.current[focusIndex]) === null || _focusableModalElemen === void 0 ? void 0 : _focusableModalElemen.focus();
   }, []);
   (0, _react.useEffect)(function () {
     var keyDown = function keyDown(e) {

package/dist/components/Notification/Notification.d.ts

@@ -1,5 +1,8 @@
 import type { HTMLProps, ReactNode } from "react";
 import type { ClassName, PropsWithSpread, ValueOf } from "../../types";
+export declare enum Label {
+    Close = "Close notification"
+}
 export declare const NotificationSeverity: {
     readonly CAUTION: "caution";
     readonly INFORMATION: "information";

package/dist/components/Notification/Notification.js

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.NotificationSeverity = void 0;
+exports.default = exports.NotificationSeverity = exports.Label = void 0;
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
@@ -31,6 +31,13 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 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; }
 
+var Label;
+exports.Label = Label;
+
+(function (Label) {
+  Label["Close"] = "Close notification";
+})(Label || (exports.Label = Label = {}));
+
 var NotificationSeverity = {
   CAUTION: "caution",
   INFORMATION: "information",
@@ -89,11 +96,10 @@ var Notification = function Notification(_ref) {
   }, title), inline && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "\u2002"), /*#__PURE__*/_react.default.createElement("p", {
     className: "p-notification__message"
   }, children), onDismiss && /*#__PURE__*/_react.default.createElement("button", {
-    "aria-label": "Close notification",
     className: "p-notification__close",
     "data-testid": "notification-close-button",
     onClick: onDismiss
-  }, "Close")), showMeta && /*#__PURE__*/_react.default.createElement("div", {
+  }, Label.Close)), showMeta && /*#__PURE__*/_react.default.createElement("div", {
     className: "p-notification__meta",
     "data-testid": "notification-meta"
   }, timestamp && /*#__PURE__*/_react.default.createElement("span", {

package/dist/components/Pagination/PaginationButton/PaginationButton.d.ts

@@ -1,4 +1,8 @@
 import type { MouseEventHandler } from "react";
+export declare enum Label {
+    Next = "Next page",
+    Previous = "Previous page"
+}
 export declare type PaginationDirection = "forward" | "back";
 export declare type Props = {
     /**

package/dist/components/Pagination/PaginationButton/PaginationButton.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.Label = void 0;
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
@@ -11,12 +11,20 @@ var _react = _interopRequireDefault(require("react"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+var Label;
+exports.Label = Label;
+
+(function (Label) {
+  Label["Next"] = "Next page";
+  Label["Previous"] = "Previous page";
+})(Label || (exports.Label = Label = {}));
+
 var PaginationButton = function PaginationButton(_ref) {
   var direction = _ref.direction,
       onClick = _ref.onClick,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled;
-  var label = direction === "back" ? "Previous page" : "Next page";
+  var label = direction === "back" ? Label.Previous : Label.Next;
   return /*#__PURE__*/_react.default.createElement("li", {
     className: "p-pagination__item"
   }, /*#__PURE__*/_react.default.createElement("button", {

package/dist/components/PasswordToggle/PasswordToggle.d.ts

@@ -1,6 +1,10 @@
 import React from "react";
 import type { InputHTMLAttributes, ReactNode } from "react";
 import type { ClassName, PropsWithSpread } from "../../types";
+export declare enum Label {
+    Hide = "Hide",
+    Show = "Show"
+}
 /**
  * The props for the Password Toggle component.
  */

package/dist/components/PasswordToggle/PasswordToggle.js

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.Label = void 0;
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
@@ -45,6 +45,18 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 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; }
 
+var Label;
+/**
+ * The props for the Password Toggle component.
+ */
+
+exports.Label = Label;
+
+(function (Label) {
+  Label["Hide"] = "Hide";
+  Label["Show"] = "Show";
+})(Label || (exports.Label = Label = {}));
+
 var PasswordToggle = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var caution = _ref.caution,
       className = _ref.className,
@@ -102,10 +114,10 @@ var PasswordToggle = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
     }
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: "p-form-password-toggle__label"
-  }, isPassword ? "Show" : "Hide"), /*#__PURE__*/_react.default.createElement("i", {
+  }, isPassword ? Label.Show : Label.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-describedby": [help ? helpId : null, success ? validationId : null].filter(Boolean).join(" "),
     "aria-errormessage": hasError ? validationId : null,
     "aria-invalid": hasError,
     className: (0, _classnames.default)("p-form-validation__input", className),

package/dist/components/SearchAndFilter/SearchAndFilter.d.ts

@@ -1,4 +1,9 @@
 import type { SearchAndFilterChip, SearchAndFilterData } from "./types";
+export declare enum Label {
+    AddFilter = "Add filter",
+    Clear = "Clear input",
+    SearchAndFilter = "Search and filter"
+}
 export declare type Props = {
     /**
      * A list of chips to initialise inside the input.
@@ -13,5 +18,5 @@ export declare type Props = {
      */
     returnSearchData: (searchData: SearchAndFilterChip[]) => void;
 };
-declare const SearchAndFilter: ({ existingSearchData, filterPanelData, returnSearchData, }: Props) => JSX.Element;
+declare const SearchAndFilter: ({ existingSearchData, filterPanelData, returnSearchData, ...props }: Props) => JSX.Element;
 export default SearchAndFilter;

package/dist/components/SearchAndFilter/SearchAndFilter.js

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.Label = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -19,12 +19,16 @@ var _utils = require("./utils");
 
 var _hooks = require("../../hooks");
 
+var _excluded = ["existingSearchData", "filterPanelData", "returnSearchData"];
+
 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); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 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 _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -45,11 +49,25 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+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; }
+
+var Label;
+exports.Label = Label;
+
+(function (Label) {
+  Label["AddFilter"] = "Add filter";
+  Label["Clear"] = "Clear input";
+  Label["SearchAndFilter"] = "Search and filter";
+})(Label || (exports.Label = Label = {}));
+
 var SearchAndFilter = function SearchAndFilter(_ref) {
   var _ref$existingSearchDa = _ref.existingSearchData,
       existingSearchData = _ref$existingSearchDa === void 0 ? [] : _ref$existingSearchDa,
       filterPanelData = _ref.filterPanelData,
-      returnSearchData = _ref.returnSearchData;
+      returnSearchData = _ref.returnSearchData,
+      props = _objectWithoutProperties(_ref, _excluded);
 
   var _useState = (0, _react.useState)(existingSearchData),
       _useState2 = _slicedToArray(_useState, 2),
@@ -246,20 +264,21 @@ var SearchAndFilter = function SearchAndFilter(_ref) {
     setSearchTerm("");
   };
 
-  var placeholder = searchData.length ? "Add filter" : "Search and filter";
-  return /*#__PURE__*/_react.default.createElement("div", {
+  var placeholder = searchData.length ? Label.AddFilter : Label.SearchAndFilter;
+  return /*#__PURE__*/_react.default.createElement("div", _extends({
     className: "p-search-and-filter",
     ref: searchAndFilterRef,
     onClick: function onClick() {
       return filterPanelHidden && setFilterPanelHidden(false);
     }
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, props), /*#__PURE__*/_react.default.createElement("div", {
     className: "p-search-and-filter__search-container",
     "aria-expanded": searchBoxExpanded,
     "data-active": searchContainerActive || searchData.length === 0,
     "data-empty": searchData.length <= 0,
     ref: searchContainerRef
   }, searchTerm !== "" && /*#__PURE__*/_react.default.createElement("button", {
+    "aria-label": Label.Clear,
     className: "p-search-and-filter__clear",
     onClick: function onClick() {
       return clearAllSearchTerms();
@@ -288,7 +307,7 @@ var SearchAndFilter = function SearchAndFilter(_ref) {
   }, /*#__PURE__*/_react.default.createElement("label", {
     className: "u-off-screen",
     htmlFor: "search-and-filter-input"
-  }, searchData.length ? "Add filter" : "Search and filter"), /*#__PURE__*/_react.default.createElement("input", {
+  }, searchData.length ? Label.AddFilter : Label.SearchAndFilter), /*#__PURE__*/_react.default.createElement("input", {
     autoComplete: "off",
     className: "p-search-and-filter__input",
     id: "search-and-filter-input",

package/dist/components/SearchBox/SearchBox.d.ts

@@ -1,5 +1,9 @@
 import React, { HTMLProps } from "react";
 import type { ClassName, PropsWithSpread } from "../../types";
+export declare enum Label {
+    Clear = "Clear search field",
+    Search = "Search"
+}
 export declare type Props = PropsWithSpread<{
     /**
      * Whether autocomplete should be enabled for the search input.

package/dist/components/SearchBox/SearchBox.js

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.Label = void 0;
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
@@ -27,6 +27,14 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 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; }
 
+var Label;
+exports.Label = Label;
+
+(function (Label) {
+  Label["Clear"] = "Clear search field";
+  Label["Search"] = "Search";
+})(Label || (exports.Label = Label = {}));
+
 var SearchBox = /*#__PURE__*/_react.default.forwardRef(function (_ref, forwardedRef) {
   var _ref$autocomplete = _ref.autocomplete,
       autocomplete = _ref$autocomplete === void 0 ? "on" : _ref$autocomplete,
@@ -88,13 +96,13 @@ var SearchBox = /*#__PURE__*/_react.default.forwardRef(function (_ref, forwarded
     type: "reset"
   }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     name: "close"
-  }, "Clear search field")), /*#__PURE__*/_react.default.createElement("button", {
+  }, Label.Clear)), /*#__PURE__*/_react.default.createElement("button", {
     className: "p-search-box__button",
     disabled: disabled,
     onClick: triggerSearch
   }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     name: "search"
-  }, "Search")));
+  }, Label.Search)));
 });
 
 SearchBox.displayName = "SearchBox";

package/dist/components/Select/Select.js

@@ -84,7 +84,7 @@ var Select = function Select(_ref2) {
     success: success,
     validationId: validationId
   }, /*#__PURE__*/_react.default.createElement("select", _extends({
-    "aria-describedby": help ? helpId : null,
+    "aria-describedby": [help ? helpId : null, success ? validationId : null].filter(Boolean).join(" "),
     "aria-errormessage": hasError ? validationId : null,
     "aria-invalid": hasError,
     className: (0, _classnames.default)("p-form-validation__input", className),

package/dist/components/Textarea/Textarea.js

@@ -78,7 +78,7 @@ var Textarea = function Textarea(_ref) {
     success: success,
     validationId: validationId
   }, /*#__PURE__*/_react.default.createElement("textarea", _extends({
-    "aria-describedby": help ? helpId : null,
+    "aria-describedby": [help ? helpId : null, success ? validationId : null].filter(Boolean).join(" "),
     "aria-errormessage": hasError ? validationId : null,
     "aria-invalid": hasError,
     className: (0, _classnames.default)("p-form-validation__input", className),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "0.37.7",
+  "version": "0.37.9",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": "Huw Wilkins <huw.wilkins@canonical.com>",
@@ -43,7 +43,6 @@
     "@testing-library/user-event": "14.3.0",
     "@typescript-eslint/eslint-plugin": "5.32.0",
     "@typescript-eslint/parser": "5.32.0",
-    "@wojtekmaj/enzyme-adapter-react-17": "0.6.7",
     "babel-jest": "27.5.1",
     "babel-loader": "8.2.5",
     "babel-plugin-module-resolver": "4.1.0",
@@ -52,9 +51,6 @@
     "css-loader": "6.7.1",
     "cypress": "9.7.0",
     "deepmerge": "4.2.2",
-    "enzyme": "3.11.0",
-    "enzyme-adapter-react-16": "1.15.6",
-    "enzyme-to-json": "3.6.2",
     "eslint": "8.21.0",
     "eslint-config-prettier": "8.5.0",
     "eslint-config-react-app": "7.0.1",
@@ -83,7 +79,7 @@
     "ts-jest": "27.1.5",
     "tsc-alias": "1.7.0",
     "typescript": "4.7.4",
-    "vanilla-framework": "3.8.1",
+    "vanilla-framework": "3.10.0",
     "wait-on": "5.3.0",
     "webpack": "5.74.0"
   },
@@ -107,7 +103,7 @@
   "peerDependencies": {
     "react": "^17.0.2 || ^18.0.0",
     "react-dom": "^17.0.2 || ^18.0.0",
-    "vanilla-framework": "3.8.1"
+    "vanilla-framework": "3.10.0"
   },
   "scripts": {
     "build": "rm -rf dist && yarn build-local; yarn build-declaration",
@@ -156,9 +152,6 @@
     "roots": [
       "<rootDir>/src/"
     ],
-    "snapshotSerializers": [
-      "enzyme-to-json/serializer"
-    ],
     "setupFilesAfterEnv": [
       "<rootDir>/src/setupTests.js"
     ],