@instructure/ui-form-field 8.55.1-snapshot-3 → 8.55.1-snapshot-4

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [8.55.1-snapshot-3](https://github.com/instructure/instructure-ui/compare/v8.55.0...v8.55.1-snapshot-3) (2024-04-17)
+## [8.55.1-snapshot-4](https://github.com/instructure/instructure-ui/compare/v8.55.0...v8.55.1-snapshot-4) (2024-04-17)
 
 **Note:** Version bump only for package @instructure/ui-form-field
 

package/es/FormField/__new-tests__/FormField.test.js

@@ -0,0 +1,58 @@
+var _FormField, _FormField2, _FormField3;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { runAxeCheck } from '@instructure/ui-axe-check';
+import '@testing-library/jest-dom';
+import { FormField } from '../index';
+describe('<FormField />', () => {
+  it('should render', () => {
+    render(_FormField || (_FormField = /*#__PURE__*/React.createElement(FormField, {
+      label: "foo",
+      id: "bar"
+    })));
+    const formField = screen.getByText('foo').closest('label');
+    expect(formField).toBeInTheDocument();
+  });
+  it('passes props through to FormField', () => {
+    render(_FormField2 || (_FormField2 = /*#__PURE__*/React.createElement(FormField, {
+      label: "foo",
+      id: "bar",
+      "data-automation": "baz"
+    })));
+    const formField = screen.getByText('foo').closest('label');
+    expect(formField).toHaveAttribute('data-automation', 'baz');
+  });
+  it('should meet a11y standards', async () => {
+    const _render = render(_FormField3 || (_FormField3 = /*#__PURE__*/React.createElement(FormField, {
+        label: "foo",
+        id: "bar"
+      }))),
+      container = _render.container;
+    const axeCheck = await runAxeCheck(container);
+    expect(axeCheck).toBe(true);
+  });
+});

package/es/FormFieldGroup/__new-tests__/FormFieldGroup.test.js

@@ -0,0 +1,95 @@
+var _FormFieldGroup, _label, _label2, _label3, _label4, _label5, _label6, _label7, _FormFieldGroup2;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { runAxeCheck } from '@instructure/ui-axe-check';
+import '@testing-library/jest-dom';
+import { FormFieldGroup } from '../index';
+describe('<FormFieldGroup />', () => {
+  it('should render', () => {
+    const _render = render(_FormFieldGroup || (_FormFieldGroup = /*#__PURE__*/React.createElement(FormFieldGroup, {
+        description: "Please enter your full name"
+      }, /*#__PURE__*/React.createElement("label", null, "First: ", /*#__PURE__*/React.createElement("input", null)), /*#__PURE__*/React.createElement("label", null, "Middle: ", /*#__PURE__*/React.createElement("input", null)), /*#__PURE__*/React.createElement("label", null, "Last: ", /*#__PURE__*/React.createElement("input", null))))),
+      container = _render.container;
+    const formFieldGroup = container.querySelector("fieldset[class$='-formFieldLayout']");
+    const firstNameInput = screen.getByLabelText('First:');
+    const middleNameInput = screen.getByLabelText('Middle:');
+    const lastNameInput = screen.getByLabelText('Last:');
+    expect(formFieldGroup).toBeInTheDocument();
+    expect(formFieldGroup).toHaveTextContent('Please enter your full name');
+    expect(firstNameInput).toBeInTheDocument();
+    expect(middleNameInput).toBeInTheDocument();
+    expect(lastNameInput).toBeInTheDocument();
+  });
+  it('can handle null children', () => {
+    const children = [_label || (_label = /*#__PURE__*/React.createElement("label", {
+      key: "first"
+    }, "First: ", /*#__PURE__*/React.createElement("input", null))), null];
+    const _render2 = render( /*#__PURE__*/React.createElement(FormFieldGroup, {
+        description: "Please enter your full name"
+      }, children)),
+      container = _render2.container;
+    const formFieldGroup = container.querySelector("fieldset[class$='-formFieldLayout']");
+    expect(formFieldGroup).toBeInTheDocument();
+  });
+  it('links the messages to the fieldset via aria-describedby', () => {
+    const messages = [{
+      text: 'Invalid name',
+      type: 'error'
+    }];
+    const _render3 = render( /*#__PURE__*/React.createElement(FormFieldGroup, {
+        description: "Please enter your full name",
+        messages: messages
+      }, _label2 || (_label2 = /*#__PURE__*/React.createElement("label", null, "First: ", /*#__PURE__*/React.createElement("input", null))), _label3 || (_label3 = /*#__PURE__*/React.createElement("label", null, "Middle: ", /*#__PURE__*/React.createElement("input", null))), _label4 || (_label4 = /*#__PURE__*/React.createElement("label", null, "Last: ", /*#__PURE__*/React.createElement("input", null))))),
+      container = _render3.container;
+    const formFieldGroup = container.querySelector("fieldset[class$='-formFieldLayout']");
+    const message = container.querySelector("span[id^='FormFieldLayout_']");
+    expect(message).toBeInTheDocument();
+    expect(formFieldGroup).toBeInTheDocument();
+    expect(formFieldGroup).toHaveAttribute('aria-describedby');
+    const messagesId = formFieldGroup.getAttribute('aria-describedby');
+    expect(message).toHaveTextContent('Invalid name');
+    expect(message).toHaveAttribute('id', messagesId);
+  });
+  it('displays description message inside the legend', () => {
+    const description = 'Please enter your full name';
+    const _render4 = render( /*#__PURE__*/React.createElement(FormFieldGroup, {
+        description: description
+      }, _label5 || (_label5 = /*#__PURE__*/React.createElement("label", null, "First: ", /*#__PURE__*/React.createElement("input", null))), _label6 || (_label6 = /*#__PURE__*/React.createElement("label", null, "Middle: ", /*#__PURE__*/React.createElement("input", null))), _label7 || (_label7 = /*#__PURE__*/React.createElement("label", null, "Last: ", /*#__PURE__*/React.createElement("input", null))))),
+      container = _render4.container;
+    const legend = container.querySelector("legend[class$='-screenReaderContent']");
+    expect(legend).toBeInTheDocument();
+    expect(legend).toHaveTextContent(description);
+  });
+  it('should meet a11y standards', async () => {
+    const _render5 = render(_FormFieldGroup2 || (_FormFieldGroup2 = /*#__PURE__*/React.createElement(FormFieldGroup, {
+        description: "Please enter your full name"
+      }, /*#__PURE__*/React.createElement("label", null, "First: ", /*#__PURE__*/React.createElement("input", null)), /*#__PURE__*/React.createElement("label", null, "Middle: ", /*#__PURE__*/React.createElement("input", null)), /*#__PURE__*/React.createElement("label", null, "Last: ", /*#__PURE__*/React.createElement("input", null))))),
+      container = _render5.container;
+    const axeCheck = await runAxeCheck(container);
+    expect(axeCheck).toBe(true);
+  });
+});

package/es/FormFieldLabel/__new-tests__/FormFieldLabel.test.js

@@ -0,0 +1,54 @@
+var _FormFieldLabel, _FormFieldLabel2, _FormFieldLabel3;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import { runAxeCheck } from '@instructure/ui-axe-check';
+import '@testing-library/jest-dom';
+import { FormFieldLabel } from '../index';
+describe('<FormFieldLabel />', () => {
+  it('should render', () => {
+    const _render = render(_FormFieldLabel || (_FormFieldLabel = /*#__PURE__*/React.createElement(FormFieldLabel, null, "Foo"))),
+      container = _render.container;
+    const formFieldLabel = container.querySelector("span[class$='-formFieldLabel']");
+    expect(formFieldLabel).toBeInTheDocument();
+    expect(formFieldLabel).toHaveTextContent('Foo');
+  });
+  it('should render as specified via the `as` prop', () => {
+    const _render2 = render(_FormFieldLabel2 || (_FormFieldLabel2 = /*#__PURE__*/React.createElement(FormFieldLabel, {
+        as: "li"
+      }, "Foo"))),
+      container = _render2.container;
+    const formFieldLabel = container.querySelector('li');
+    expect(formFieldLabel).toBeInTheDocument();
+    expect(formFieldLabel).toHaveTextContent('Foo');
+  });
+  it('should meet a11y standards', async () => {
+    const _render3 = render(_FormFieldLabel3 || (_FormFieldLabel3 = /*#__PURE__*/React.createElement(FormFieldLabel, null, "Foo"))),
+      container = _render3.container;
+    const axeCheck = await runAxeCheck(container);
+    expect(axeCheck).toBe(true);
+  });
+});

package/es/FormFieldLayout/__new-tests__/FormFieldLayout.test.js

@@ -0,0 +1,62 @@
+var _FormFieldLayout, _FormFieldLayout2, _input;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { runAxeCheck } from '@instructure/ui-axe-check';
+import '@testing-library/jest-dom';
+import { FormFieldLayout } from '../index';
+describe('<FormFieldLayout />', () => {
+  it('should render', () => {
+    const _render = render(_FormFieldLayout || (_FormFieldLayout = /*#__PURE__*/React.createElement(FormFieldLayout, {
+        label: "Username"
+      }))),
+      container = _render.container;
+    const formFieldLayout = container.querySelector("label[class$='-formFieldLayout']");
+    const formFieldLabel = container.querySelector("span[class$='-formFieldLabel']");
+    expect(formFieldLayout).toBeInTheDocument();
+    expect(formFieldLabel).toBeInTheDocument();
+    expect(formFieldLabel).toHaveTextContent('Username');
+  });
+  it('should meet a11y standards', async () => {
+    const _render2 = render(_FormFieldLayout2 || (_FormFieldLayout2 = /*#__PURE__*/React.createElement(FormFieldLayout, {
+        label: "Username"
+      }))),
+      container = _render2.container;
+    const axeCheck = await runAxeCheck(container);
+    expect(axeCheck).toBe(true);
+  });
+  it('should provide a ref to the input container', () => {
+    const inputContainerRef = jest.fn();
+    render( /*#__PURE__*/React.createElement(FormFieldLayout, {
+      label: "Username",
+      inputContainerRef: inputContainerRef
+    }, _input || (_input = /*#__PURE__*/React.createElement("input", {
+      type: "text"
+    }))));
+    const input = screen.getByLabelText('Username');
+    expect(inputContainerRef).toHaveBeenCalledWith(input.parentElement);
+  });
+});

package/es/FormFieldMessage/__new-tests__/FormFieldMessage.test.js

@@ -0,0 +1,55 @@
+var _FormFieldMessage, _FormFieldMessage2, _FormFieldMessage3;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import { runAxeCheck } from '@instructure/ui-axe-check';
+import { IconWarningLine } from '@instructure/ui-icons';
+import '@testing-library/jest-dom';
+import { FormFieldMessage } from '../index';
+describe('<FormFieldMessage />', () => {
+  it('should render message', () => {
+    const _render = render(_FormFieldMessage || (_FormFieldMessage = /*#__PURE__*/React.createElement(FormFieldMessage, null, "hello world"))),
+      container = _render.container;
+    const formFieldMessage = container.querySelector("span[class$='-formFieldMessage']");
+    expect(formFieldMessage).toBeInTheDocument();
+    expect(formFieldMessage).toHaveTextContent('hello world');
+  });
+  it('should render message if Node is passed', () => {
+    const _render2 = render(_FormFieldMessage2 || (_FormFieldMessage2 = /*#__PURE__*/React.createElement(FormFieldMessage, null, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(IconWarningLine, null), " Invalid name")))),
+      container = _render2.container;
+    const formFieldMessage = container.querySelector("span[class$='-formFieldMessage']");
+    const iconSvg = container.querySelector('svg[name="IconWarning"]');
+    expect(iconSvg).toBeInTheDocument();
+    expect(formFieldMessage).toBeInTheDocument();
+    expect(formFieldMessage).toHaveTextContent('Invalid name');
+  });
+  it('should meet a11y standards', async () => {
+    const _render3 = render(_FormFieldMessage3 || (_FormFieldMessage3 = /*#__PURE__*/React.createElement(FormFieldMessage, null))),
+      container = _render3.container;
+    const axeCheck = await runAxeCheck(container);
+    expect(axeCheck).toBe(true);
+  });
+});

package/es/FormFieldMessages/__new-tests__/FormFieldMessages.test.js

@@ -0,0 +1,85 @@
+var _span;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import { runAxeCheck } from '@instructure/ui-axe-check';
+import { IconWarningLine } from '@instructure/ui-icons';
+import '@testing-library/jest-dom';
+import { FormFieldMessages } from '../index';
+describe('<FormFieldMessages />', () => {
+  it('should render', () => {
+    const messages = [{
+      text: 'Invalid name',
+      type: 'error'
+    }, {
+      text: 'Good job!',
+      type: 'success'
+    }, {
+      text: 'Full name, first and last',
+      type: 'hint'
+    }];
+    const _render = render( /*#__PURE__*/React.createElement(FormFieldMessages, {
+        messages: messages
+      })),
+      container = _render.container;
+    const formFieldMessages = container.querySelector("span[class$='-formFieldMessages']");
+    expect(formFieldMessages).toBeInTheDocument();
+    expect(formFieldMessages).toHaveTextContent('Invalid nameGood job!Full name, first and last');
+  });
+  it('should render if Node is passed as message text', () => {
+    const messages = [{
+      text: _span || (_span = /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(IconWarningLine, null), " Invalid name")),
+      type: 'error'
+    }];
+    const _render2 = render( /*#__PURE__*/React.createElement(FormFieldMessages, {
+        messages: messages
+      })),
+      container = _render2.container;
+    const formFieldMessages = container.querySelector("span[class$='-formFieldMessages']");
+    const iconSvg = container.querySelector('svg[name="IconWarning"]');
+    expect(iconSvg).toBeInTheDocument();
+    expect(formFieldMessages).toBeInTheDocument();
+    expect(formFieldMessages).toHaveTextContent('Invalid name');
+  });
+  it('should meet a11y standards', async () => {
+    const messages = [{
+      text: 'Invalid name',
+      type: 'error'
+    }, {
+      text: 'Good job!',
+      type: 'success'
+    }, {
+      text: 'Full name, first and last',
+      type: 'hint'
+    }];
+    const _render3 = render( /*#__PURE__*/React.createElement(FormFieldMessages, {
+        messages: messages
+      })),
+      container = _render3.container;
+    const axeCheck = await runAxeCheck(container);
+    expect(axeCheck).toBe(true);
+  });
+});

package/lib/FormField/__new-tests__/FormField.test.js

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
+require("@testing-library/jest-dom");
+var _index = require("../index");
+var _FormField, _FormField2, _FormField3;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+describe('<FormField />', () => {
+  it('should render', () => {
+    (0, _react2.render)(_FormField || (_FormField = /*#__PURE__*/_react.default.createElement(_index.FormField, {
+      label: "foo",
+      id: "bar"
+    })));
+    const formField = _react2.screen.getByText('foo').closest('label');
+    expect(formField).toBeInTheDocument();
+  });
+  it('passes props through to FormField', () => {
+    (0, _react2.render)(_FormField2 || (_FormField2 = /*#__PURE__*/_react.default.createElement(_index.FormField, {
+      label: "foo",
+      id: "bar",
+      "data-automation": "baz"
+    })));
+    const formField = _react2.screen.getByText('foo').closest('label');
+    expect(formField).toHaveAttribute('data-automation', 'baz');
+  });
+  it('should meet a11y standards', async () => {
+    const _render = (0, _react2.render)(_FormField3 || (_FormField3 = /*#__PURE__*/_react.default.createElement(_index.FormField, {
+        label: "foo",
+        id: "bar"
+      }))),
+      container = _render.container;
+    const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
+    expect(axeCheck).toBe(true);
+  });
+});

package/lib/FormFieldGroup/__new-tests__/FormFieldGroup.test.js

@@ -0,0 +1,97 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
+require("@testing-library/jest-dom");
+var _index = require("../index");
+var _FormFieldGroup, _label, _label2, _label3, _label4, _label5, _label6, _label7, _FormFieldGroup2;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+describe('<FormFieldGroup />', () => {
+  it('should render', () => {
+    const _render = (0, _react2.render)(_FormFieldGroup || (_FormFieldGroup = /*#__PURE__*/_react.default.createElement(_index.FormFieldGroup, {
+        description: "Please enter your full name"
+      }, /*#__PURE__*/_react.default.createElement("label", null, "First: ", /*#__PURE__*/_react.default.createElement("input", null)), /*#__PURE__*/_react.default.createElement("label", null, "Middle: ", /*#__PURE__*/_react.default.createElement("input", null)), /*#__PURE__*/_react.default.createElement("label", null, "Last: ", /*#__PURE__*/_react.default.createElement("input", null))))),
+      container = _render.container;
+    const formFieldGroup = container.querySelector("fieldset[class$='-formFieldLayout']");
+    const firstNameInput = _react2.screen.getByLabelText('First:');
+    const middleNameInput = _react2.screen.getByLabelText('Middle:');
+    const lastNameInput = _react2.screen.getByLabelText('Last:');
+    expect(formFieldGroup).toBeInTheDocument();
+    expect(formFieldGroup).toHaveTextContent('Please enter your full name');
+    expect(firstNameInput).toBeInTheDocument();
+    expect(middleNameInput).toBeInTheDocument();
+    expect(lastNameInput).toBeInTheDocument();
+  });
+  it('can handle null children', () => {
+    const children = [_label || (_label = /*#__PURE__*/_react.default.createElement("label", {
+      key: "first"
+    }, "First: ", /*#__PURE__*/_react.default.createElement("input", null))), null];
+    const _render2 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.FormFieldGroup, {
+        description: "Please enter your full name"
+      }, children)),
+      container = _render2.container;
+    const formFieldGroup = container.querySelector("fieldset[class$='-formFieldLayout']");
+    expect(formFieldGroup).toBeInTheDocument();
+  });
+  it('links the messages to the fieldset via aria-describedby', () => {
+    const messages = [{
+      text: 'Invalid name',
+      type: 'error'
+    }];
+    const _render3 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.FormFieldGroup, {
+        description: "Please enter your full name",
+        messages: messages
+      }, _label2 || (_label2 = /*#__PURE__*/_react.default.createElement("label", null, "First: ", /*#__PURE__*/_react.default.createElement("input", null))), _label3 || (_label3 = /*#__PURE__*/_react.default.createElement("label", null, "Middle: ", /*#__PURE__*/_react.default.createElement("input", null))), _label4 || (_label4 = /*#__PURE__*/_react.default.createElement("label", null, "Last: ", /*#__PURE__*/_react.default.createElement("input", null))))),
+      container = _render3.container;
+    const formFieldGroup = container.querySelector("fieldset[class$='-formFieldLayout']");
+    const message = container.querySelector("span[id^='FormFieldLayout_']");
+    expect(message).toBeInTheDocument();
+    expect(formFieldGroup).toBeInTheDocument();
+    expect(formFieldGroup).toHaveAttribute('aria-describedby');
+    const messagesId = formFieldGroup.getAttribute('aria-describedby');
+    expect(message).toHaveTextContent('Invalid name');
+    expect(message).toHaveAttribute('id', messagesId);
+  });
+  it('displays description message inside the legend', () => {
+    const description = 'Please enter your full name';
+    const _render4 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.FormFieldGroup, {
+        description: description
+      }, _label5 || (_label5 = /*#__PURE__*/_react.default.createElement("label", null, "First: ", /*#__PURE__*/_react.default.createElement("input", null))), _label6 || (_label6 = /*#__PURE__*/_react.default.createElement("label", null, "Middle: ", /*#__PURE__*/_react.default.createElement("input", null))), _label7 || (_label7 = /*#__PURE__*/_react.default.createElement("label", null, "Last: ", /*#__PURE__*/_react.default.createElement("input", null))))),
+      container = _render4.container;
+    const legend = container.querySelector("legend[class$='-screenReaderContent']");
+    expect(legend).toBeInTheDocument();
+    expect(legend).toHaveTextContent(description);
+  });
+  it('should meet a11y standards', async () => {
+    const _render5 = (0, _react2.render)(_FormFieldGroup2 || (_FormFieldGroup2 = /*#__PURE__*/_react.default.createElement(_index.FormFieldGroup, {
+        description: "Please enter your full name"
+      }, /*#__PURE__*/_react.default.createElement("label", null, "First: ", /*#__PURE__*/_react.default.createElement("input", null)), /*#__PURE__*/_react.default.createElement("label", null, "Middle: ", /*#__PURE__*/_react.default.createElement("input", null)), /*#__PURE__*/_react.default.createElement("label", null, "Last: ", /*#__PURE__*/_react.default.createElement("input", null))))),
+      container = _render5.container;
+    const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
+    expect(axeCheck).toBe(true);
+  });
+});

package/lib/FormFieldLabel/__new-tests__/FormFieldLabel.test.js

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
+require("@testing-library/jest-dom");
+var _index = require("../index");
+var _FormFieldLabel, _FormFieldLabel2, _FormFieldLabel3;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+describe('<FormFieldLabel />', () => {
+  it('should render', () => {
+    const _render = (0, _react2.render)(_FormFieldLabel || (_FormFieldLabel = /*#__PURE__*/_react.default.createElement(_index.FormFieldLabel, null, "Foo"))),
+      container = _render.container;
+    const formFieldLabel = container.querySelector("span[class$='-formFieldLabel']");
+    expect(formFieldLabel).toBeInTheDocument();
+    expect(formFieldLabel).toHaveTextContent('Foo');
+  });
+  it('should render as specified via the `as` prop', () => {
+    const _render2 = (0, _react2.render)(_FormFieldLabel2 || (_FormFieldLabel2 = /*#__PURE__*/_react.default.createElement(_index.FormFieldLabel, {
+        as: "li"
+      }, "Foo"))),
+      container = _render2.container;
+    const formFieldLabel = container.querySelector('li');
+    expect(formFieldLabel).toBeInTheDocument();
+    expect(formFieldLabel).toHaveTextContent('Foo');
+  });
+  it('should meet a11y standards', async () => {
+    const _render3 = (0, _react2.render)(_FormFieldLabel3 || (_FormFieldLabel3 = /*#__PURE__*/_react.default.createElement(_index.FormFieldLabel, null, "Foo"))),
+      container = _render3.container;
+    const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
+    expect(axeCheck).toBe(true);
+  });
+});