@pingux/astro 2.33.0-alpha.11 → 2.33.0-alpha.2

package/lib/cjs/utils/testUtils/universalComponentTest.js

@@ -44,22 +44,20 @@ var ComponentWithRef = function ComponentWithRef(_ref) {
 };
 var universalComponentTests = /*#__PURE__*/function () {
   var _ref3 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(_ref2) {
-    var renderComponent, _ref2$rules, rules;
+    var renderComponent, props, _ref2$rules, rules;
     return _regeneratorRuntime().wrap(function _callee2$(_context2) {
       while (1) switch (_context2.prev = _context2.next) {
         case 0:
-          renderComponent = _ref2.renderComponent, _ref2$rules = _ref2.rules, rules = _ref2$rules === void 0 ? {} : _ref2$rules;
+          renderComponent = _ref2.renderComponent, props = _ref2.props, _ref2$rules = _ref2.rules, rules = _ref2$rules === void 0 ? {} : _ref2$rules;
           test('should have no accessibility violations', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
             var _render, container, results;
             return _regeneratorRuntime().wrap(function _callee$(_context) {
               while (1) switch (_context.prev = _context.next) {
                 case 0:
                   jest.useRealTimers();
-                  _render = (0, _react2.render)(renderComponent()), container = _render.container;
+                  _render = (0, _react2.render)(renderComponent(props)), container = _render.container;
                   _context.next = 4;
-                  return (0, _jestAxe.axe)(container, {
-                    rules: rules
-                  });
+                  return (0, _jestAxe.axe)(container, rules);
                 case 4:
                   results = _context.sent;
                   expect(results).toHaveNoViolations();

package/lib/components/AccordionGridGroup/AccordionGridGroup.test.js

@@ -15,21 +15,14 @@ import React from 'react';
 import { Item } from 'react-stately';
 import userEvent from '@testing-library/user-event';
 import { Box, Link, OverlayPanel, Text, TextField } from '../../index';
+import axeTest from '../../utils/testUtils/testAxe';
 import { act, fireEvent, render, screen, waitFor } from '../../utils/testUtils/testWrapper';
-import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
 import AccordionGridGroup from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-accordion';
 var defaultProps = {
   'data-testid': testId
 };
-
-// Needs to be added to each components test file
-universalComponentTests({
-  renderComponent: function renderComponent(props) {
-    return ___EmotionJSX(AccordionGridGroup, props);
-  }
-});
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(AccordionGridGroup, _extends({}, defaultProps, props), ___EmotionJSX(Item, {
@@ -71,6 +64,14 @@ var getComponentWithTextFields = function getComponentWithTextFields() {
     label: "label 2"
   })))));
 };
+axeTest(getComponent, {
+  // landmark-unique rule conflicts with react-aria role definition
+  rules: {
+    'landmark-unique': {
+      enabled: false
+    }
+  }
+});
 test('button press uses callback', function () {
   var onPress = jest.fn();
   getComponent({

package/lib/components/AccordionGroup/AccordionGroup.test.js

@@ -5,8 +5,8 @@ import React from 'react';
 import { Item } from 'react-stately';
 import userEvent from '@testing-library/user-event';
 import { Box, Button, Menu, OverlayPanel, PopoverMenu, TextField } from '../../index';
+import axeTest from '../../utils/testUtils/testAxe';
 import { act, fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
-import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
 import { validHeadingTags } from '../AccordionItem/AccordionItem';
 import Text from '../Text';
 import AccordionGroup from '.';
@@ -15,13 +15,6 @@ var testId = 'test-accordion';
 var defaultProps = {
   'data-testid': testId
 };
-
-// Needs to be added to each components test file
-universalComponentTests({
-  renderComponent: function renderComponent(props) {
-    return ___EmotionJSX(AccordionGroup, props);
-  }
-});
 var items = [{
   key: 'identityProvider',
   label: 'some label1',
@@ -154,6 +147,16 @@ var getComponentWithMultipleAccordion = function getComponentWithMultipleAccordi
     "data-id": "connection-configuration-custom-form"
   }, ___EmotionJSX(Box, null, ___EmotionJSX(Text, null, "other text1"), ___EmotionJSX(Text, null, "another text1")))))));
 };
+
+// Need to be added to each test file to test accessibility using axe.
+axeTest(getComponent, {
+  // landmark-unique rule conflicts with react-aria role definition
+  rules: {
+    'landmark-unique': {
+      enabled: false
+    }
+  }
+});
 test('button press uses callback', function () {
   var onPress = jest.fn();
   getComponent({

package/lib/components/ArrayField/ArrayField.js

@@ -16,7 +16,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
-import React, { forwardRef, useCallback, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { mergeProps, useLabel } from 'react-aria';
 import PropTypes from 'prop-types';
 import { v4 as uuid } from 'uuid';
@@ -26,7 +26,7 @@ import isValidPositiveInt from '../../utils/devUtils/props/isValidPositiveInt';
 import { ariaAttributesBasePropTypes, getAriaAttributeProps } from '../../utils/docUtils/ariaAttributes';
 import { statusPropTypes } from '../../utils/docUtils/statusProp';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var ArrayField = /*#__PURE__*/forwardRef(function (props, ref) {
+var ArrayField = function ArrayField(props) {
   var _context2;
   var addButtonLabel = props.addButtonLabel,
     defaultValue = props.defaultValue,
@@ -119,9 +119,7 @@ var ArrayField = /*#__PURE__*/forwardRef(function (props, ref) {
   var _getAriaAttributeProp = getAriaAttributeProps(others),
     ariaProps = _getAriaAttributeProp.ariaProps,
     nonAriaProps = _getAriaAttributeProp.nonAriaProps;
-  return ___EmotionJSX(Box, _extends({}, nonAriaProps, {
-    ref: ref
-  }), ___EmotionJSX(Label, _extends({}, raLabelProps, mergeProps(labelProps, raLabelProps, {
+  return ___EmotionJSX(Box, nonAriaProps, ___EmotionJSX(Label, _extends({}, raLabelProps, mergeProps(labelProps, raLabelProps, {
     children: label
   }))), ___EmotionJSX(Box, _extends({
     as: "ul",
@@ -152,7 +150,7 @@ var ArrayField = /*#__PURE__*/forwardRef(function (props, ref) {
     variant: "label",
     color: "active"
   }, addButtonLabel)));
-});
+};
 ArrayField.propTypes = _objectSpread(_objectSpread({
   /** Label for add button */
   addButtonLabel: PropTypes.string,

package/lib/components/ArrayField/ArrayField.test.js

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import { fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
-import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
 import TextField from '../TextField';
 import ArrayField from './ArrayField';
 import ArrayFieldDeleteButton from './ArrayFieldDeleteButton';
@@ -21,12 +20,13 @@ var defaultData = [{
   value: 'World'
 }];
 var defaultProps = {
-  defaultValue: defaultData,
-  label: 'test-label'
+  defaultValue: defaultData
 };
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return render(___EmotionJSX(ArrayField, _extends({}, defaultProps, props)));
+  return render(___EmotionJSX(ArrayField, _extends({
+    label: "test-label"
+  }, defaultProps, props)));
 };
 var renderField = function renderField(id, value, onFieldValueChange, onFieldDelete, otherFieldProps) {
   return ___EmotionJSX(TextField, _extends({
@@ -46,15 +46,6 @@ var renderField = function renderField(id, value, onFieldValueChange, onFieldDel
     }
   }, otherFieldProps));
 };
-
-// Needs to be added to each components test file
-universalComponentTests({
-  renderComponent: function renderComponent(props) {
-    return ___EmotionJSX(ArrayField, _extends({
-      renderField: renderField
-    }, defaultProps, props));
-  }
-});
 test('displays multiple text fields', function () {
   var onChange = jest.fn();
   getComponent({

package/lib/components/Avatar/Avatar.test.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import { faker } from '@faker-js/faker';
+import axeTest from '../../utils/testUtils/testAxe';
 import { render, screen } from '../../utils/testUtils/testWrapper';
-import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
 import Avatar from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var defaultProps = {
@@ -12,12 +12,9 @@ var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(Avatar, _extends({}, defaultProps, props)));
 };
-// Needs to be added to each components test file
-universalComponentTests({
-  renderComponent: function renderComponent(props) {
-    return ___EmotionJSX(Avatar, _extends({}, defaultProps, props));
-  }
-});
+
+// Need to be added to each test file to test accessibility using axe.
+axeTest(getComponent);
 test('an avatar is rendered', function () {
   getComponent();
   var img = screen.getByRole('img');

package/lib/components/Badge/Badge.test.js

@@ -3,7 +3,7 @@ import React from 'react';
 import Earth from '@pingux/mdi-react/EarthIcon';
 import { render, screen } from '@testing-library/react';
 import { Badge, Button, Icon } from '../..';
-import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
+import axeTest from '../../utils/testUtils/testAxe';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-separator';
 var defaultProps = {
@@ -15,12 +15,8 @@ var getComponent = function getComponent() {
   return render(___EmotionJSX(Badge, _extends({}, defaultProps, props)));
 };
 
-// Needs to be added to each components test file
-universalComponentTests({
-  renderComponent: function renderComponent(props) {
-    return ___EmotionJSX(Badge, props);
-  }
-});
+// Need to be added to each test file to test accessibility using axe.
+axeTest(getComponent);
 test('renders Badge component', function () {
   getComponent();
   var badge = screen.getByTestId(testId);

package/lib/components/Box/Box.test.js

@@ -3,7 +3,7 @@ import React from 'react';
 import createCache from '@emotion/cache';
 import { CacheProvider } from '@emotion/react';
 import { render, screen } from '@testing-library/react';
-import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
+import axeTest from '../../utils/testUtils/testAxe';
 import Box from '.';
 
 // Emotion Cache added as test fails otherwise, root cause of this failure is unknown.
@@ -24,12 +24,9 @@ var getComponent = function getComponent() {
     value: emotionCache
   }, ___EmotionJSX(Box, _extends({}, defaultProps, props))));
 };
-// Needs to be added to each components test file
-universalComponentTests({
-  renderComponent: function renderComponent(props) {
-    return ___EmotionJSX(Box, props);
-  }
-});
+
+// Need to be added to each test file to test accessibility using axe.
+axeTest(getComponent);
 test('default box', function () {
   getComponent();
   var box = screen.getByTestId(testId);

package/lib/components/Bracket/Bracket.js

@@ -28,9 +28,7 @@ var Bracket = /*#__PURE__*/forwardRef(function (props, ref) {
   }, []);
   return ___EmotionJSX(Box, _extends({
     variant: "bracket.base"
-  }, others, {
-    ref: bracketRef
-  }), !isLast && ___EmotionJSX(Box, {
+  }, others), !isLast && ___EmotionJSX(Box, {
     width: 15,
     sx: {
       position: 'absolute',

package/lib/components/Bracket/Bracket.test.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
+import axeTest from '../../utils/testUtils/testAxe';
 import Bracket from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-bracket';
@@ -13,12 +13,8 @@ var getComponent = function getComponent() {
   return render(___EmotionJSX(Bracket, _extends({}, defaultProps, props)));
 };
 
-// Needs to be added to each components test file
-universalComponentTests({
-  renderComponent: function renderComponent(props) {
-    return ___EmotionJSX(Bracket, props);
-  }
-});
+// // Need to be added to each test file to test accessibility using axe.
+axeTest(getComponent);
 test('default bracket', function () {
   getComponent();
   var bracket = screen.getByTestId(testId);

package/lib/components/Breadcrumbs/Breadcrumbs.test.js

@@ -6,8 +6,8 @@ import { Item } from 'react-stately';
 import ChevronRightIcon from '@pingux/mdi-react/ChevronRightIcon';
 import CreateIcon from '@pingux/mdi-react/CreateIcon';
 import userEvent from '@testing-library/user-event';
+import axeTest from '../../utils/testUtils/testAxe';
 import { render, screen } from '../../utils/testUtils/testWrapper';
-import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
 import Breadcrumbs from './Breadcrumbs';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-breadcrumbs';
@@ -31,12 +31,8 @@ var getComponent = function getComponent() {
   })));
 };
 
-// Needs to be added to each components test file
-universalComponentTests({
-  renderComponent: function renderComponent(props) {
-    return ___EmotionJSX(Breadcrumbs, mergeProps(defaultProps, props), ___EmotionJSX(Item, null, testItemsArr[0]));
-  }
-});
+// Need to be added to each test file to test accessibility using axe.
+axeTest(getComponent);
 test('default breadcrumbs', function () {
   getComponent();
   expect(screen.getByTestId(testId)).toBeInTheDocument();

package/lib/components/ButtonBar/ButtonBar.js

@@ -1,20 +1,19 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["align", "children"];
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { Box } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var ButtonBar = /*#__PURE__*/forwardRef(function (props, ref) {
+var ButtonBar = function ButtonBar(props) {
   var align = props.align,
     children = props.children,
     others = _objectWithoutProperties(props, _excluded);
   return ___EmotionJSX(Box, _extends({
-    ref: ref,
     isRow: true,
     variant: align === 'right' ? 'buttonBar.justifyRightContainer' : 'buttonBar.container'
   }, others), children);
-});
+};
 ButtonBar.propTypes = {
   /** Justifies the component's children. */
   align: PropTypes.oneOf(['left', 'right'])

package/lib/components/ButtonBar/ButtonBar.stories.js

@@ -50,38 +50,12 @@ export var RightAligned = function RightAligned() {
   return ___EmotionJSX(ButtonBar, {
     align: "right"
   }, ___EmotionJSX(Button, {
-    variant: "link",
-    "data-id": "cancel-button",
-    onPress: function onPress() {
-      return alert('Cancel button pressed');
-    }
-  }, "Cancel"), ___EmotionJSX(Button, {
     variant: "primary",
     "data-id": "next-button",
     onPress: function onPress() {
       return alert('Next button pressed');
     }
-  }, "Next"));
-};
-RightAligned.parameters = {
-  design: {
-    type: 'figma',
-    url: FIGMA_LINKS.buttonBar.rightAligned
-  }
-};
-export var Secondary = function Secondary() {
-  return ___EmotionJSX(ButtonBar, null, ___EmotionJSX(Button, {
-    variant: "primary",
-    "data-id": "save-button",
-    onPress: function onPress() {
-      return alert('Save button pressed');
-    }
-  }, "Save"), ___EmotionJSX(Button, {
-    "data-id": "close-button",
-    onPress: function onPress() {
-      return alert('Close button pressed');
-    }
-  }, "Close"), ___EmotionJSX(Button, {
+  }, "Next"), ___EmotionJSX(Button, {
     variant: "link",
     "data-id": "cancel-button",
     onPress: function onPress() {
@@ -89,37 +63,9 @@ export var Secondary = function Secondary() {
     }
   }, "Cancel"));
 };
-Secondary.parameters = {
-  design: {
-    type: 'figma',
-    url: FIGMA_LINKS.buttonBar.secondary
-  }
-};
-export var SecondaryRightAligned = function SecondaryRightAligned() {
-  return ___EmotionJSX(ButtonBar, {
-    align: "right"
-  }, ___EmotionJSX(Button, {
-    variant: "link",
-    "data-id": "cancel-button",
-    onPress: function onPress() {
-      return alert('Cancel button pressed');
-    }
-  }, "Cancel"), ___EmotionJSX(Button, {
-    "data-id": "close-button",
-    onPress: function onPress() {
-      return alert('Close button pressed');
-    }
-  }, "Close"), ___EmotionJSX(Button, {
-    variant: "primary",
-    "data-id": "next-button",
-    onPress: function onPress() {
-      return alert('Next button pressed');
-    }
-  }, "Next"));
-};
-SecondaryRightAligned.parameters = {
+RightAligned.parameters = {
   design: {
     type: 'figma',
-    url: FIGMA_LINKS.buttonBar.secondaryRightAligned
+    url: FIGMA_LINKS.buttonBar.rightAligned
   }
 };

package/lib/components/ButtonBar/ButtonBar.test.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import { Button, ButtonBar } from '../../index';
+import axeTest from '../../utils/testUtils/testAxe';
 import { render, screen } from '../../utils/testUtils/testWrapper';
-import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-ButtonBar';
 var defaultProps = {
@@ -26,23 +26,13 @@ var getComponent = function getComponent() {
 };
 var getComponentCustomChildren = function getComponentCustomChildren() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return render(___EmotionJSX(ButtonBar, _extends({}, defaultProps, props), ___EmotionJSX("button", {
-    type: "button"
-  }, "custom text"), ___EmotionJSX("button", {
-    type: "button"
-  }, "Also custom text")));
+  return render(___EmotionJSX(ButtonBar, _extends({}, defaultProps, props), ___EmotionJSX("button", null, "custom text"), ___EmotionJSX("button", null, "Also custom text")));
 };
 var getComponentTextChildren = function getComponentTextChildren() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(ButtonBar, props, "custom text"));
 };
-
-// Needs to be added to each components test file
-universalComponentTests({
-  renderComponent: function renderComponent(props) {
-    return ___EmotionJSX(ButtonBar, props);
-  }
-});
+axeTest(getComponent);
 afterEach(function () {
   jest.resetAllMocks();
 });

package/lib/components/Callout/Callout.js

@@ -13,7 +13,7 @@ var _excluded = ["children", "status"];
 var _calloutProps;
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, 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 _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-import React, { forwardRef } from 'react';
+import React from 'react';
 import { Box } from '../..';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { statusDefaultProp, statusPropTypes } from '../../utils/docUtils/statusProp';
@@ -45,12 +45,11 @@ var defaultIconProps = {
  or give warnings of unexpected events.
  */
 
-var Callout = /*#__PURE__*/forwardRef(function (_ref, ref) {
+var Callout = function Callout(_ref) {
   var children = _ref.children,
     status = _ref.status,
     others = _objectWithoutProperties(_ref, _excluded);
   return ___EmotionJSX(Box, _extends({
-    ref: ref,
     "data-testid": CALLOUT_TEST_ID,
     isRow: true,
     role: "note",
@@ -60,7 +59,7 @@ var Callout = /*#__PURE__*/forwardRef(function (_ref, ref) {
     status: status,
     "aria-label": "".concat(status, "-icon")
   }, defaultIconProps)), children);
-});
+};
 Callout.propTypes = _objectSpread({}, statusPropTypes);
 Callout.defaultProps = _objectSpread({}, statusDefaultProp);
 Callout.displayName = 'Callout';

package/lib/components/Callout/Callout.test.js

@@ -4,19 +4,11 @@ import React from 'react';
 import { screen } from '@testing-library/react';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { render } from '../../utils/testUtils/testWrapper';
-import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
 import { noticeIcons } from '../Icon/NoticeIcon';
 import Callout, { CALLOUT_TEST_ID } from './Callout';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var TEST_TEXT = 'test text';
 var testColors = (_testColors = {}, _defineProperty(_testColors, statuses.DEFAULT, 'var(--theme-ui-colors-text-secondary)'), _defineProperty(_testColors, statuses.ERROR, 'var(--theme-ui-colors-critical-bright)'), _defineProperty(_testColors, statuses.SUCCESS, 'var(--theme-ui-colors-success-bright)'), _defineProperty(_testColors, statuses.WARNING, 'var(--theme-ui-colors-warning-bright)'), _testColors);
-
-// Needs to be added to each components test file
-universalComponentTests({
-  renderComponent: function renderComponent(props) {
-    return ___EmotionJSX(Callout, props);
-  }
-});
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(Callout, props, TEST_TEXT));

package/lib/components/Card/Card.test.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
+import axeTest from '../../utils/testUtils/testAxe';
 import Button from '../Button';
 import Card from './Card';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -15,12 +15,9 @@ var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(Card, _extends({}, defaultProps, props)));
 };
-// Needs to be added to each components test file
-universalComponentTests({
-  renderComponent: function renderComponent(props) {
-    return ___EmotionJSX(Card, props);
-  }
-});
+
+// Need to be added to each test file to test accessibility using axe.
+axeTest(getComponent);
 test('renders Card component', function () {
   getComponent();
   var separator = screen.getByTestId(testId);

package/lib/components/Checkbox/Checkbox.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
+import axeTest from '../../utils/testUtils/testAxe';
 import Checkbox from './Checkbox';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var getComponent = function getComponent() {
@@ -8,12 +8,9 @@ var getComponent = function getComponent() {
   return render(___EmotionJSX(Checkbox, props));
 };
 
-// Needs to be added to each components test file
-universalComponentTests({
-  renderComponent: function renderComponent(props) {
-    return ___EmotionJSX(Checkbox, props);
-  },
-  // Checkbox label is provided by CheckboxField
+// Need to be added to each test file to test accessibility using axe.
+axeTest(getComponent, {
+  // Checkbox with label provided by CheckboxField
   rules: {
     'label': {
       enabled: false

package/lib/components/CodeView/CodeView.js

@@ -94,7 +94,6 @@ var CodeView = /*#__PURE__*/forwardRef(function (props, ref) {
     }, mergeProps(focusProps, hoverProps, others)), content);
   }
   return ___EmotionJSX(CopyText, {
-    ref: ref,
     mode: "link",
     textToCopy: children,
     tooltipProps: {

package/lib/components/CodeView/CodeView.test.js

@@ -24,8 +24,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { CodeView } from '../..';
+import axeTest from '../../utils/testUtils/testAxe';
 import { act, fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
-import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-code-sample';
 var originalClipboard = _objectSpread({}, global.navigator.clipboard);
@@ -52,12 +52,8 @@ afterEach(function () {
   global.document.execCommand = originalExecCommand;
 });
 
-// Needs to be added to each components test file
-universalComponentTests({
-  renderComponent: function renderComponent(props) {
-    return ___EmotionJSX(CodeView, props, textValue);
-  }
-});
+// Need to be added to each test file to test accessibility using axe.
+axeTest(getComponent);
 test('renders component in the default state', function () {
   getComponent();
   var container = screen.getByTestId(testId);

package/lib/components/CollapsiblePanel/CollapsiblePanel.test.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
+import axeTest from '../../utils/testUtils/testAxe';
 import { render, screen } from '../../utils/testUtils/testWrapper';
-import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
 import CollapsiblePanel from './CollapsiblePanel';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'collapsible-panel-item';
@@ -43,10 +43,15 @@ afterAll(function () {
   jest.restoreAllMocks();
 });
 
-// Needs to be added to each components test file
-universalComponentTests({
-  renderComponent: function renderComponent(props) {
-    return ___EmotionJSX(CollapsiblePanel, _extends({}, defaultProps, props));
+// Need to be added to each test file to test accessibility using axe.
+axeTest(getComponent, {
+  rules: {
+    'aria-required-children': {
+      enabled: false
+    },
+    'aria-required-parent': {
+      enabled: false
+    }
   }
 });
 test('default CollapsiblePanel', function () {