@automattic/vip-design-system 0.28.7 → 0.30.0

package/build/system/Badge/Badge.js

@@ -41,16 +41,13 @@ var Badge = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef
       display: 'inline-block',
       borderRadius: 1,
       fontWeight: 'heading',
-      '&:hover, &:focus': {
-        backgroundColor: "tag." + variant + ".hover"
-      },
       a: {
         color: "tag." + variant + ".text",
         '&:hover, &:focus, &:active': {
           textDecoration: 'none'
         },
-        '&:active': {
-          color: variant + ".active"
+        '&:active, &:visited': {
+          color: "tag." + variant + ".text"
         }
       }
     }, sx),

package/build/system/Button/Button.stories.js

@@ -15,7 +15,7 @@ var _ScreenReaderText = _interopRequireDefault(require("../ScreenReaderText"));
 
 var _ = require("..");
 
-var _2 = require(".");
+var _variants = _interopRequireDefault(require("./variants"));
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
@@ -38,7 +38,7 @@ var _default = {
     },
     variant: {
       type: 'select',
-      options: _2.variants
+      options: _variants["default"]
     }
   }
 };

package/build/system/Button/ButtonSubmit.js

@@ -19,11 +19,11 @@ var _Spinner = require("../Spinner");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _ = require(".");
+var _variants = _interopRequireDefault(require("./variants"));
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["show", "variant", "label", "loading", "disabled", "loadingIcon", "loadingIconSize", "loadingIconColor"];
+var _excluded = ["show", "variant", "label", "loading", "disabled", "loadingIcon", "loadingIconSize"];
 
 var DefaultSpinner = function DefaultSpinner(_ref) {
   var size = _ref.size,
@@ -49,7 +49,7 @@ var ButtonSubmit = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, fo
   var _ref2$show = _ref2.show,
       show = _ref2$show === void 0 ? true : _ref2$show,
       _ref2$variant = _ref2.variant,
-      variant = _ref2$variant === void 0 ? 'secondary' : _ref2$variant,
+      variant = _ref2$variant === void 0 ? _variants["default"][1] : _ref2$variant,
       label = _ref2.label,
       _ref2$loading = _ref2.loading,
       loading = _ref2$loading === void 0 ? false : _ref2$loading,
@@ -59,18 +59,12 @@ var ButtonSubmit = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, fo
       loadingIcon = _ref2$loadingIcon === void 0 ? DefaultSpinner : _ref2$loadingIcon,
       _ref2$loadingIconSize = _ref2.loadingIconSize,
       loadingIconSize = _ref2$loadingIconSize === void 0 ? 20 : _ref2$loadingIconSize,
-      _ref2$loadingIconColo = _ref2.loadingIconColor,
-      loadingIconColor = _ref2$loadingIconColo === void 0 ? undefined : _ref2$loadingIconColo,
       rest = (0, _objectWithoutPropertiesLoose2["default"])(_ref2, _excluded);
 
   if (!show) {
     return null;
   }
 
-  if (!loadingIconColor && variant === 'display') {
-    loadingIconColor = 'button.display.label.default';
-  }
-
   return (0, _jsxRuntime.jsxs)(_Button.Button, (0, _extends2["default"])({
     ref: forwardRef,
     className: (0, _classnames["default"])('vip-button-submit-component', "vip-button-submit-" + variant),
@@ -80,7 +74,7 @@ var ButtonSubmit = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, fo
   }, rest, {
     children: [label, ' ', !!loading && loadingIcon({
       size: loadingIconSize,
-      color: loadingIconColor
+      color: "button." + variant + ".label.default"
     })]
   }));
 });
@@ -88,12 +82,11 @@ var ButtonSubmit = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, fo
 exports.ButtonSubmit = ButtonSubmit;
 ButtonSubmit.displayName = 'ButtonSubmit';
 ButtonSubmit.propTypes = {
-  label: _propTypes["default"].string.isRequired,
+  label: _propTypes["default"].node.isRequired,
   disabled: _propTypes["default"].bool,
   loading: _propTypes["default"].bool,
-  variant: _propTypes["default"].oneOf(_.variants),
+  variant: _propTypes["default"].oneOf(_variants["default"]),
   show: _propTypes["default"].bool,
   loadingIcon: _propTypes["default"].any,
-  loadingIconSize: _propTypes["default"].number,
-  loadingIconColor: _propTypes["default"].string
+  loadingIconSize: _propTypes["default"].number
 };

package/build/system/Button/ButtonSubmit.stories.js

@@ -11,7 +11,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _ = require("..");
 
-var _2 = require(".");
+var _variants = _interopRequireDefault(require("./variants"));
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
@@ -48,7 +48,7 @@ var _default = {
     },
     variant: {
       type: 'select',
-      options: _2.variants
+      options: _variants["default"]
     }
   }
 };
@@ -56,7 +56,7 @@ exports["default"] = _default;
 
 var Template = function Template(args) {
   return (0, _jsxRuntime.jsx)(_react["default"].Fragment, {
-    children: _2.variants.map(function (v) {
+    children: _variants["default"].map(function (v) {
       return (0, _jsxRuntime.jsx)(_.ButtonSubmit, (0, _extends2["default"])({
         sx: {
           m: 3

package/build/system/Button/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 exports.__esModule = true;
-exports.variants = void 0;
 
 var _Button = require("./Button");
 
@@ -9,10 +8,4 @@ exports.Button = _Button.Button;
 
 var _ButtonSubmit = require("./ButtonSubmit");
 
-exports.ButtonSubmit = _ButtonSubmit.ButtonSubmit;
-
-/**
- * Internal dependencies
- */
-var variants = ['primary', 'secondary', 'text', 'icon', 'tertiary', 'ghost', 'danger', 'display'];
-exports.variants = variants;
+exports.ButtonSubmit = _ButtonSubmit.ButtonSubmit;

package/build/system/Button/variants.js

@@ -0,0 +1,6 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+var _default = ['primary', 'secondary', 'text', 'icon', 'tertiary', 'ghost', 'danger', 'display'];
+exports["default"] = _default;

package/build/system/Form/Input.js

@@ -53,6 +53,7 @@ var Input = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
       ref: ref,
       id: forLabel,
       required: required,
+      "aria-required": required,
       "aria-describedby": hasError ? "describe-" + forLabel + "-validation" : undefined,
       sx: (0, _extends2["default"])({}, inputStyles, sx)
     }, props)), hasError && errorMessage && (0, _jsxRuntime.jsx)(_.Validation, {

package/build/system/Form/Radio.js

@@ -188,10 +188,10 @@ var Radio = /*#__PURE__*/_react["default"].forwardRef(function (_ref3, forwardRe
 exports.Radio = Radio;
 Radio.displayName = 'Radio';
 Radio.propTypes = {
-  disabled: _propTypes["default"].bool,
+  className: _propTypes["default"].any,
   defaultValue: _propTypes["default"].any,
-  onChange: _propTypes["default"].func,
-  options: _propTypes["default"].any,
+  disabled: _propTypes["default"].bool,
   name: _propTypes["default"].string,
-  className: _propTypes["default"].any
+  onChange: _propTypes["default"].func,
+  options: _propTypes["default"].any
 };

package/build/system/Form/index.js

@@ -22,10 +22,6 @@ var _ToggleRow = require("./ToggleRow");
 
 exports.ToggleRow = _ToggleRow.ToggleRow;
 
-var _ToggleGroup = require("./ToggleGroup");
-
-exports.ToggleGroup = _ToggleGroup.ToggleGroup;
-
 var _Select = require("./Select");
 
 exports.Select = _Select.Select;

package/build/system/NewForm/FormAutocomplete.js

@@ -37,7 +37,7 @@ var _Form = require("../Form");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["autoFilter", "className", "debounce", "displayMenu", "forLabel", "getOptionLabel", "getOptionValue", "id", "isInline", "label", "loading", "minLength", "noOptionsMessage", "onChange", "onInputChange", "options", "required", "searchIcon", "showAllValues", "source", "value", "hasError", "errorMessage"];
+var _excluded = ["autoFilter", "className", "debounce", "displayMenu", "forLabel", "getOptionLabel", "getOptionValue", "isInline", "label", "loading", "minLength", "noOptionsMessage", "onChange", "onInputChange", "options", "required", "searchIcon", "showAllValues", "source", "value", "hasError", "errorMessage"];
 
 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); }
 
@@ -138,11 +138,10 @@ var FormAutocomplete = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
       debounce = _ref$debounce === void 0 ? 0 : _ref$debounce,
       _ref$displayMenu = _ref.displayMenu,
       displayMenu = _ref$displayMenu === void 0 ? 'overlay' : _ref$displayMenu,
-      forLabel = _ref.forLabel,
+      _ref$forLabel = _ref.forLabel,
+      forLabel = _ref$forLabel === void 0 ? 'vip-autocomplete' : _ref$forLabel,
       getOptionLabel = _ref.getOptionLabel,
       getOptionValue = _ref.getOptionValue,
-      _ref$id = _ref.id,
-      id = _ref$id === void 0 ? 'vip-autocomplete' : _ref$id,
       isInline = _ref.isInline,
       label = _ref.label,
       loading = _ref.loading,
@@ -176,7 +175,7 @@ var FormAutocomplete = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
   var SelectLabel = function SelectLabel() {
     return (0, _jsxRuntime.jsx)(_Label.Label, {
       required: required,
-      htmlFor: forLabel || id,
+      htmlFor: forLabel,
       children: label
     });
   };
@@ -248,10 +247,24 @@ var FormAutocomplete = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
     global.document.querySelector('.autocomplete__menu').setAttribute('aria-label', label + " list");
   }, [label]);
   (0, _react.useEffect)(function () {
-    global.document.querySelector("#" + id).addEventListener('keydown', function () {
+    var input = global.document.querySelector("#" + forLabel);
+
+    if (!input || required === undefined) {
+      return;
+    }
+
+    input.setAttribute('aria-required', required);
+  }, [required]);
+  (0, _react.useEffect)(function () {
+    global.document.querySelector("#" + forLabel).addEventListener('keydown', function () {
       setIsDirty(true);
     });
-  }, [setIsDirty]);
+  }, [setIsDirty]); // For accessibility, we need to add the error message to the aria-describedby attribute
+
+  (0, _react.useEffect)(function () {
+    var input = global.document.querySelector("#" + forLabel);
+    input == null ? void 0 : input.setAttribute('aria-describedby', "describe-" + forLabel + "-validation " + input.getAttribute('aria-describedby'));
+  }, []);
   return (0, _jsxRuntime.jsxs)("div", {
     className: (0, _classnames["default"])('vip-form-autocomplete-component', className),
     children: [label && !isInline && (0, _jsxRuntime.jsx)(SelectLabel, {}), (0, _jsxRuntime.jsx)("div", {
@@ -260,7 +273,7 @@ var FormAutocomplete = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
         isInline: inlineLabel,
         label: inlineLabel ? (0, _jsxRuntime.jsx)(SelectLabel, {}) : null,
         children: [searchIcon && (0, _jsxRuntime.jsx)(_FormSelectSearch.FormSelectSearch, {}), (0, _jsxRuntime.jsx)(_react2["default"], (0, _extends2["default"])({
-          id: id,
+          id: forLabel,
           "aria-busy": loading,
           showAllValues: showAllValues,
           ref: forwardRef,
@@ -268,7 +281,8 @@ var FormAutocomplete = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
           defaultValue: value,
           displayMenu: displayMenu,
           onConfirm: onValueChange,
-          tNoResults: noOptionsMessage
+          tNoResults: noOptionsMessage,
+          required: required
         }, props)), loading && (0, _jsxRuntime.jsx)(_FormSelectLoading.FormSelectLoading, {}), (0, _jsxRuntime.jsx)(_FormSelectArrow.FormSelectArrow, {})]
       })
     }), hasError && errorMessage && (0, _jsxRuntime.jsx)(_Form.Validation, {
@@ -285,10 +299,11 @@ FormAutocomplete.propTypes = {
   className: _propTypes["default"].any,
   debounce: _propTypes["default"].number,
   displayMenu: _propTypes["default"].string,
+  errorMessage: _propTypes["default"].string,
   forLabel: _propTypes["default"].string,
   getOptionLabel: _propTypes["default"].func,
   getOptionValue: _propTypes["default"].func,
-  id: _propTypes["default"].string,
+  hasError: _propTypes["default"].bool,
   isInline: _propTypes["default"].bool,
   label: _propTypes["default"].string,
   loading: _propTypes["default"].bool,
@@ -301,8 +316,6 @@ FormAutocomplete.propTypes = {
   searchIcon: _propTypes["default"].bool,
   showAllValues: _propTypes["default"].bool,
   source: _propTypes["default"].func,
-  value: _propTypes["default"].string,
-  hasError: _propTypes["default"].bool,
-  errorMessage: _propTypes["default"].string
+  value: _propTypes["default"].string
 };
 FormAutocomplete.displayName = 'FormAutocomplete';

package/build/system/NewForm/FormAutocomplete.stories.js

@@ -73,7 +73,7 @@ var DefaultComponent = function DefaultComponent(_ref) {
           width: width
         },
         children: (0, _jsxRuntime.jsx)(Form.Autocomplete, (0, _extends2["default"])({
-          id: "form-autocomplete",
+          forLabel: "form-autocomplete",
           label: label
         }, rest))
       })
@@ -171,7 +171,8 @@ exports.WithCustomMessages = WithCustomMessages;
 var WithErrors = function WithErrors() {
   var customArgs = (0, _extends2["default"])({}, args, {
     hasError: true,
-    errorMessage: 'Please select a value'
+    errorMessage: 'Please select a value.',
+    required: true
   });
   return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: (0, _jsxRuntime.jsx)(DefaultComponent, (0, _extends2["default"])({}, customArgs))

package/build/system/NewForm/FormAutocomplete.test.js

@@ -46,7 +46,7 @@ describe('<FormAutocomplete />', function () {
         switch (_context.prev = _context.next) {
           case 0:
             _render = (0, _react.render)((0, _jsxRuntime.jsx)(_FormAutocomplete.FormAutocomplete, {
-              id: "my_desert_list",
+              forLabel: "my_desert_list",
               label: "This is a label"
             })), container = _render.container; // Check for accessibility issues
 
@@ -74,7 +74,7 @@ describe('<FormAutocomplete />', function () {
         switch (_context2.prev = _context2.next) {
           case 0:
             _render2 = (0, _react.render)((0, _jsxRuntime.jsx)(_FormAutocomplete.FormAutocomplete, (0, _extends2["default"])({
-              id: "my_desert_list"
+              forLabel: "my_desert_list"
             }, defaultProps))), container = _render2.container;
             expect(_react.screen.getByLabelText(defaultProps.label)).toBeInTheDocument(); // Check for accessibility issues
 

package/build/system/NewForm/FormSelect.js

@@ -65,7 +65,8 @@ var renderGroup = function renderGroup(groupLabel, groupOptions) {
 var FormSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, forwardRef) {
   var isInline = _ref2.isInline,
       placeholder = _ref2.placeholder,
-      forLabel = _ref2.forLabel,
+      _ref2$forLabel = _ref2.forLabel,
+      forLabel = _ref2$forLabel === void 0 ? 'vip-form-select' : _ref2$forLabel,
       options = _ref2.options,
       required = _ref2.required,
       label = _ref2.label,
@@ -110,7 +111,7 @@ var FormSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, forw
   var SelectLabel = function SelectLabel() {
     return (0, _jsxRuntime.jsx)(_Label.Label, {
       required: required,
-      htmlFor: forLabel || props.id,
+      htmlFor: forLabel,
       children: label
     });
   };
@@ -123,7 +124,11 @@ var FormSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, forw
       children: [(0, _jsxRuntime.jsxs)("select", (0, _extends2["default"])({
         onChange: onValueChange,
         ref: forwardRef,
-        sx: defaultStyles
+        sx: defaultStyles,
+        required: required,
+        "aria-required": required,
+        "aria-describedby": hasError ? "describe-" + forLabel + "-validation" : undefined,
+        id: forLabel
       }, props, {
         children: [placeholder && (0, _jsxRuntime.jsx)("option", {
           children: placeholder
@@ -143,17 +148,16 @@ var FormSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, forw
 
 exports.FormSelect = FormSelect;
 FormSelect.propTypes = {
-  id: _propTypes["default"].string,
-  isInline: _propTypes["default"].bool,
-  required: _propTypes["default"].bool,
+  errorMessage: _propTypes["default"].string,
   forLabel: _propTypes["default"].string,
-  placeholder: _propTypes["default"].string,
-  label: _propTypes["default"].string,
-  options: _propTypes["default"].array,
   getOptionLabel: _propTypes["default"].func,
   getOptionValue: _propTypes["default"].func,
   hasError: _propTypes["default"].bool,
-  errorMessage: _propTypes["default"].string,
-  onChange: _propTypes["default"].func
+  isInline: _propTypes["default"].bool,
+  label: _propTypes["default"].string,
+  onChange: _propTypes["default"].func,
+  options: _propTypes["default"].array,
+  placeholder: _propTypes["default"].string,
+  required: _propTypes["default"].bool
 };
 FormSelect.displayName = 'FormSelect';

package/build/system/NewForm/FormSelect.stories.js

@@ -90,7 +90,7 @@ var DefaultComponent = function DefaultComponent(_ref) {
           width: width
         },
         children: (0, _jsxRuntime.jsx)(Form.Select, (0, _extends2["default"])({
-          id: "form-select",
+          forLabel: "form-select",
           label: label,
           onChange: onChange
         }, rest))

package/build/system/index.js

@@ -74,7 +74,6 @@ exports.Input = _Form.Input;
 exports.Label = _Form.Label;
 exports.Toggle = _Form.Toggle;
 exports.ToggleRow = _Form.ToggleRow;
-exports.ToggleGroup = _Form.ToggleGroup;
 exports.Validation = _Form.Validation;
 exports.Radio = _Form.Radio;
 exports.RadioBoxGroup = _Form.RadioBoxGroup;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/vip-design-system",
-	"version": "0.28.7",
+	"version": "0.30.0",
 	"main": "build/system/index.js",
 	"scripts": {
 		"build-storybook": "build-storybook",

package/src/system/Badge/Badge.js

@@ -27,16 +27,13 @@ const Badge = React.forwardRef(
 				display: 'inline-block',
 				borderRadius: 1,
 				fontWeight: 'heading',
-				'&:hover, &:focus': {
-					backgroundColor: `tag.${ variant }.hover`,
-				},
 				a: {
 					color: `tag.${ variant }.text`,
 					'&:hover, &:focus, &:active': {
 						textDecoration: 'none',
 					},
-					'&:active': {
-						color: `${ variant }.active`,
+					'&:active, &:visited': {
+						color: `tag.${ variant }.text`,
 					},
 				},
 				...sx,

package/src/system/Button/Button.stories.jsx

@@ -9,7 +9,7 @@ import { BiCalendarHeart } from 'react-icons/bi';
  */
 import ScreenReaderText from '../ScreenReaderText';
 import { Button } from '..';
-import { variants } from '.';
+import variants from './variants';
 
 export default {
 	title: 'Button',

package/src/system/Button/ButtonSubmit.js

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import { Button } from './Button';
 import { Spinner } from '../Spinner';
 import classNames from 'classnames';
-import { variants } from '.';
+import variants from './variants';
 
 const DefaultSpinner = ( { size, color = 'link' } ) => (
 	<Spinner size={ size } sx={ { ml: 2, color } } className="vip-button-submit-spinner" />
@@ -25,13 +25,12 @@ export const ButtonSubmit = React.forwardRef(
 	(
 		{
 			show = true,
-			variant = 'secondary',
+			variant = variants[ 1 ],
 			label,
 			loading = false,
 			disabled = false,
 			loadingIcon = DefaultSpinner,
 			loadingIconSize = 20,
-			loadingIconColor = undefined,
 			...rest
 		},
 		forwardRef
@@ -40,10 +39,6 @@ export const ButtonSubmit = React.forwardRef(
 			return null;
 		}
 
-		if ( ! loadingIconColor && variant === 'display' ) {
-			loadingIconColor = 'button.display.label.default';
-		}
-
 		return (
 			<Button
 				ref={ forwardRef }
@@ -54,7 +49,8 @@ export const ButtonSubmit = React.forwardRef(
 				{ ...rest }
 			>
 				{ label }{ ' ' }
-				{ !! loading && loadingIcon( { size: loadingIconSize, color: loadingIconColor } ) }
+				{ !! loading &&
+					loadingIcon( { size: loadingIconSize, color: `button.${ variant }.label.default` } ) }
 			</Button>
 		);
 	}
@@ -63,12 +59,11 @@ export const ButtonSubmit = React.forwardRef(
 ButtonSubmit.displayName = 'ButtonSubmit';
 
 ButtonSubmit.propTypes = {
-	label: PropTypes.string.isRequired,
+	label: PropTypes.node.isRequired,
 	disabled: PropTypes.bool,
 	loading: PropTypes.bool,
 	variant: PropTypes.oneOf( variants ),
 	show: PropTypes.bool,
 	loadingIcon: PropTypes.any,
 	loadingIconSize: PropTypes.number,
-	loadingIconColor: PropTypes.string,
 };

package/src/system/Button/ButtonSubmit.stories.jsx

@@ -7,7 +7,7 @@ import React from 'react';
  * Internal dependencies
  */
 import { ButtonSubmit } from '..';
-import { variants } from '.';
+import variants from './variants';
 
 export default {
 	title: 'ButtonSubmit',

package/src/system/Button/index.js

@@ -2,18 +2,7 @@
  * Internal dependencies
  */
 
-const variants = [
-	'primary',
-	'secondary',
-	'text',
-	'icon',
-	'tertiary',
-	'ghost',
-	'danger',
-	'display',
-];
-
 import { Button } from './Button';
 import { ButtonSubmit } from './ButtonSubmit';
 
-export { Button, ButtonSubmit, variants };
+export { Button, ButtonSubmit };

package/src/system/Button/variants.js

@@ -0,0 +1 @@
+export default [ 'primary', 'secondary', 'text', 'icon', 'tertiary', 'ghost', 'danger', 'display' ];

package/src/system/Form/Input.js

@@ -38,6 +38,7 @@ const Input = React.forwardRef(
 				ref={ ref }
 				id={ forLabel }
 				required={ required }
+				aria-required={ required }
 				aria-describedby={ hasError ? `describe-${ forLabel }-validation` : undefined }
 				sx={ { ...inputStyles, ...sx } }
 				{ ...props }

package/src/system/Form/Radio.js

@@ -183,12 +183,12 @@ const Radio = React.forwardRef(
 Radio.displayName = 'Radio';
 
 Radio.propTypes = {
-	disabled: PropTypes.bool,
+	className: PropTypes.any,
 	defaultValue: PropTypes.any,
+	disabled: PropTypes.bool,
+	name: PropTypes.string,
 	onChange: PropTypes.func,
 	options: PropTypes.any,
-	name: PropTypes.string,
-	className: PropTypes.any,
 };
 
 export { Radio };

package/src/system/Form/index.js

@@ -6,7 +6,6 @@ import { Label } from './Label';
 import { Toggle } from './Toggle';
 import { Validation } from './Validation';
 import { ToggleRow } from './ToggleRow';
-import { ToggleGroup } from './ToggleGroup';
 import { Select } from './Select';
 import { Radio } from './Radio';
 import { RadioBoxGroup } from './RadioBoxGroup';
@@ -18,7 +17,6 @@ export {
 	Label,
 	Radio,
 	RadioBoxGroup,
-	ToggleGroup,
 	Select,
 	Textarea,
 	Toggle,

package/src/system/NewForm/FormAutocomplete.js

@@ -99,10 +99,9 @@ const FormAutocomplete = React.forwardRef(
 			className,
 			debounce = 0,
 			displayMenu = 'overlay',
-			forLabel,
+			forLabel = 'vip-autocomplete',
 			getOptionLabel,
 			getOptionValue,
-			id = 'vip-autocomplete',
 			isInline,
 			label,
 			loading,
@@ -126,7 +125,7 @@ const FormAutocomplete = React.forwardRef(
 		let debounceTimeout;
 
 		const SelectLabel = () => (
-			<Label required={ required } htmlFor={ forLabel || id }>
+			<Label required={ required } htmlFor={ forLabel }>
 				{ label }
 			</Label>
 		);
@@ -212,11 +211,31 @@ const FormAutocomplete = React.forwardRef(
 		}, [ label ] );
 
 		useEffect( () => {
-			global.document.querySelector( `#${ id }` ).addEventListener( 'keydown', () => {
+			const input = global.document.querySelector( `#${ forLabel }` );
+
+			if ( ! input || required === undefined ) {
+				return;
+			}
+
+			input.setAttribute( 'aria-required', required );
+		}, [ required ] );
+
+		useEffect( () => {
+			global.document.querySelector( `#${ forLabel }` ).addEventListener( 'keydown', () => {
 				setIsDirty( true );
 			} );
 		}, [ setIsDirty ] );
 
+		// For accessibility, we need to add the error message to the aria-describedby attribute
+		useEffect( () => {
+			const input = global.document.querySelector( `#${ forLabel }` );
+
+			input?.setAttribute(
+				'aria-describedby',
+				`describe-${ forLabel }-validation ${ input.getAttribute( 'aria-describedby' ) }`
+			);
+		}, [] );
+
 		return (
 			<div className={ classNames( 'vip-form-autocomplete-component', className ) }>
 				{ label && ! isInline && <SelectLabel /> }
@@ -233,8 +252,9 @@ const FormAutocomplete = React.forwardRef(
 						label={ inlineLabel ? <SelectLabel /> : null }
 					>
 						{ searchIcon && <FormSelectSearch /> }
+
 						<Autocomplete
-							id={ id }
+							id={ forLabel }
 							aria-busy={ loading }
 							showAllValues={ showAllValues }
 							ref={ forwardRef }
@@ -243,6 +263,7 @@ const FormAutocomplete = React.forwardRef(
 							displayMenu={ displayMenu }
 							onConfirm={ onValueChange }
 							tNoResults={ noOptionsMessage }
+							required={ required }
 							{ ...props }
 						/>
 						{ loading && <FormSelectLoading /> }
@@ -265,10 +286,11 @@ FormAutocomplete.propTypes = {
 	className: PropTypes.any,
 	debounce: PropTypes.number,
 	displayMenu: PropTypes.string,
+	errorMessage: PropTypes.string,
 	forLabel: PropTypes.string,
 	getOptionLabel: PropTypes.func,
 	getOptionValue: PropTypes.func,
-	id: PropTypes.string,
+	hasError: PropTypes.bool,
 	isInline: PropTypes.bool,
 	label: PropTypes.string,
 	loading: PropTypes.bool,
@@ -282,8 +304,6 @@ FormAutocomplete.propTypes = {
 	showAllValues: PropTypes.bool,
 	source: PropTypes.func,
 	value: PropTypes.string,
-	hasError: PropTypes.bool,
-	errorMessage: PropTypes.string,
 };
 
 FormAutocomplete.displayName = 'FormAutocomplete';

package/src/system/NewForm/FormAutocomplete.stories.jsx

@@ -36,7 +36,7 @@ const DefaultComponent = ( { label = 'Label', width = 250, ...rest } ) => (
 	<>
 		<Form.Root>
 			<div sx={ { width } }>
-				<Form.Autocomplete id="form-autocomplete" label={ label } { ...rest } />
+				<Form.Autocomplete forLabel="form-autocomplete" label={ label } { ...rest } />
 			</div>
 		</Form.Root>
 	</>
@@ -138,7 +138,8 @@ export const WithErrors = () => {
 	const customArgs = {
 		...args,
 		hasError: true,
-		errorMessage: 'Please select a value',
+		errorMessage: 'Please select a value.',
+		required: true,
 	};
 
 	return (

package/src/system/NewForm/FormAutocomplete.test.js

@@ -23,7 +23,7 @@ const defaultProps = {
 describe( '<FormAutocomplete />', () => {
 	it( 'renders the FormAutocomplete component', async () => {
 		const { container } = render(
-			<FormAutocomplete id="my_desert_list" label="This is a label" />
+			<FormAutocomplete forLabel="my_desert_list" label="This is a label" />
 		);
 
 		// Check for accessibility issues
@@ -31,7 +31,9 @@ describe( '<FormAutocomplete />', () => {
 	} );
 
 	it( 'renders the FormAutocomplete component with options', async () => {
-		const { container } = render( <FormAutocomplete id="my_desert_list" { ...defaultProps } /> );
+		const { container } = render(
+			<FormAutocomplete forLabel="my_desert_list" { ...defaultProps } />
+		);
 
 		expect( screen.getByLabelText( defaultProps.label ) ).toBeInTheDocument();
 

package/src/system/NewForm/FormSelect.js

@@ -49,7 +49,7 @@ const FormSelect = React.forwardRef(
 		{
 			isInline,
 			placeholder,
-			forLabel,
+			forLabel = 'vip-form-select',
 			options,
 			required,
 			label,
@@ -102,7 +102,7 @@ const FormSelect = React.forwardRef(
 		);
 
 		const SelectLabel = () => (
-			<Label required={ required } htmlFor={ forLabel || props.id }>
+			<Label required={ required } htmlFor={ forLabel }>
 				{ label }
 			</Label>
 		);
@@ -114,7 +114,16 @@ const FormSelect = React.forwardRef(
 				{ label && ! isInline && <SelectLabel /> }
 
 				<FormSelectContent isInline={ inlineLabel } label={ inlineLabel ? <SelectLabel /> : null }>
-					<select onChange={ onValueChange } ref={ forwardRef } sx={ defaultStyles } { ...props }>
+					<select
+						onChange={ onValueChange }
+						ref={ forwardRef }
+						sx={ defaultStyles }
+						required={ required }
+						aria-required={ required }
+						aria-describedby={ hasError ? `describe-${ forLabel }-validation` : undefined }
+						id={ forLabel }
+						{ ...props }
+					>
 						{ placeholder && <option>{ placeholder }</option> }
 						{ options.map( ( { options: groupOptions, ...option } ) =>
 							groupOptions
@@ -136,18 +145,17 @@ const FormSelect = React.forwardRef(
 );
 
 FormSelect.propTypes = {
-	id: PropTypes.string,
-	isInline: PropTypes.bool,
-	required: PropTypes.bool,
+	errorMessage: PropTypes.string,
 	forLabel: PropTypes.string,
-	placeholder: PropTypes.string,
-	label: PropTypes.string,
-	options: PropTypes.array,
 	getOptionLabel: PropTypes.func,
 	getOptionValue: PropTypes.func,
 	hasError: PropTypes.bool,
-	errorMessage: PropTypes.string,
+	isInline: PropTypes.bool,
+	label: PropTypes.string,
 	onChange: PropTypes.func,
+	options: PropTypes.array,
+	placeholder: PropTypes.string,
+	required: PropTypes.bool,
 };
 
 FormSelect.displayName = 'FormSelect';

package/src/system/NewForm/FormSelect.stories.jsx

@@ -62,7 +62,7 @@ const DefaultComponent = ( { label = 'Label', width = 250, onChange, ...rest } )
 		</p>
 		<Form.Root>
 			<div sx={ { width } }>
-				<Form.Select id="form-select" label={ label } onChange={ onChange } { ...rest } />
+				<Form.Select forLabel="form-select" label={ label } onChange={ onChange } { ...rest } />
 			</div>
 		</Form.Root>
 	</>

package/src/system/index.js

@@ -30,7 +30,6 @@ import {
 	Label,
 	Toggle,
 	ToggleRow,
-	ToggleGroup,
 	Validation,
 	Radio,
 	RadioBoxGroup,
@@ -105,7 +104,6 @@ export {
 	TabsList,
 	Toggle,
 	ToggleRow,
-	ToggleGroup,
 	Time,
 	Timeline,
 	Validation,

package/src/system/Form/ToggleGroup.js

@@ -1,67 +0,0 @@
-/** @jsxImportSource theme-ui */
-
-/**
- * External dependencies
- */
-import React from 'react';
-import PropTypes from 'prop-types';
-import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
-
-const ToggleGroup = React.forwardRef(
-	( { onChange, groupLabel, value, options, ...props }, forwardRef ) => (
-		<RadioGroupPrimitive.Root
-			onValueChange={ onChange }
-			value={ value }
-			aria-label={ groupLabel }
-			sx={ {
-				bg: 'backgroundSecondary',
-				p: 1,
-				display: 'flex',
-				alignItems: 'center',
-			} }
-			ref={ forwardRef }
-			{ ...props }
-		>
-			{ options.map( ( option, index ) => (
-				<RadioGroupPrimitive.Item
-					key={ option.value }
-					value={ option.value }
-					id={ `o${ index }` }
-					sx={ {
-						fontSize: 1,
-						color: 'muted',
-						background: 'none',
-						border: 'none',
-						cursor: 'pointer',
-						borderRadius: 1,
-						py: 1,
-						px: 2,
-						flex: '1 1 auto',
-						textAlign: 'center',
-						'&:hover': {
-							color: 'heading',
-						},
-						'&[data-state=checked]': {
-							backgroundColor: 'background',
-							boxShadow: 'low',
-							color: 'heading',
-						},
-					} }
-				>
-					{ option.label }
-				</RadioGroupPrimitive.Item>
-			) ) }
-		</RadioGroupPrimitive.Root>
-	)
-);
-
-ToggleGroup.displayName = 'ToggleGroup';
-
-ToggleGroup.propTypes = {
-	onChange: PropTypes.func,
-	options: PropTypes.array,
-	value: PropTypes.string,
-	groupLabel: PropTypes.string,
-};
-
-export { ToggleGroup };

package/src/system/Form/ToggleGroup.stories.jsx

@@ -1,41 +0,0 @@
-/**
- * External dependencies
- */
-import { useState } from 'react';
-
-/**
- * Internal dependencies
- */
-import { ToggleGroup } from '..';
-
-export default {
-	title: 'ToggleGroup',
-	component: ToggleGroup,
-};
-
-const options = [
-	{
-		label: 'One',
-		value: 'one',
-	},
-	{
-		label: 'Two',
-		value: 'two',
-	},
-	{
-		label: 'Three',
-		value: 'three',
-	},
-];
-
-export const Default = () => {
-	const [ value, setValue ] = useState( 'one' );
-	return (
-		<ToggleGroup
-			value={ value }
-			onChange={ newValue => setValue( newValue ) }
-			groupLabel="group"
-			options={ options }
-		/>
-	);
-};