@instructure/ui-simple-select 10.3.1-snapshot-8 → 10.3.1-snapshot-9

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.
 
-## [10.3.1-snapshot-8](https://github.com/instructure/instructure-ui/compare/v10.3.0...v10.3.1-snapshot-8) (2024-10-10)
+## [10.3.1-snapshot-9](https://github.com/instructure/instructure-ui/compare/v10.3.0...v10.3.1-snapshot-9) (2024-10-11)
 
 **Note:** Version bump only for package @instructure/ui-simple-select
 

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

@@ -1,3 +1,5 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+var _SimpleSelect, _SimpleSelect2, _SimpleSelect3, _SimpleSelect4, _SimpleSelect5, _SimpleSelect6, _IconCheckSolid;
 /*
  * The MIT License (MIT)
  *
@@ -22,46 +24,249 @@
  * SOFTWARE.
  */
 import React from 'react';
-import { render, fireEvent, screen } from '@testing-library/react';
-import { vi } from 'vitest';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { vi, it } from 'vitest';
+import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
+
+// eslint-disable-next-line no-restricted-imports
+import { generateA11yTests } from '@instructure/ui-scripts/lib/test/generateA11yTests';
+import { IconCheckSolid } from '@instructure/ui-icons';
+import { runAxeCheck } from '@instructure/ui-axe-check';
+import SimpleSelectExamples from '../__examples__/SimpleSelect.examples';
 import SimpleSelect from '../index';
-import * as utils from '@instructure/ui-utils';
-vi.mock('@instructure/ui-utils', async importOriginal => {
-  const originalModule = await importOriginal();
-  return {
-    __esModule: true,
-    ...originalModule,
-    isSafari: vi.fn(() => true)
-  };
-});
-const mockUtils = utils;
+const defaultOptions = ['foo', 'bar', 'baz'];
+const getOptions = disabled => defaultOptions.map(opt => /*#__PURE__*/React.createElement(SimpleSelect.Option, {
+  id: opt,
+  key: opt,
+  value: opt,
+  isDisabled: opt === disabled
+}, opt));
 describe('<SimpleSelect />', () => {
-  const defaultOptions = ['foo', 'bar', 'baz'];
-  const getOptions = disabled => defaultOptions.map(opt => /*#__PURE__*/React.createElement(SimpleSelect.Option, {
-    id: opt,
-    key: opt,
-    value: opt,
-    isDisabled: opt === disabled
-  }, opt));
-
-  // convert to e2e fail in vitest
-  // it('should have role button in Safari', async () => {
-  //   const { container } = render(
-  //     <SimpleSelect renderLabel="Choose an option">{getOptions()}</SimpleSelect>
-  //   )
-  //   const input = container.querySelector('input')
-  //   expect(input).toHaveAttribute('role', 'button')
-  // })
-
-  it('should have role combobox in different browsers than Safari', async () => {
-    mockUtils.isSafari = vi.fn(() => false);
-    const _render = render(/*#__PURE__*/React.createElement(SimpleSelect, {
+  let consoleErrorMock;
+  beforeEach(() => {
+    // Mocking console to prevent test output pollution and expect for messages
+    consoleErrorMock = vi.spyOn(console, 'error').mockImplementation(() => {});
+  });
+  afterEach(() => {
+    consoleErrorMock.mockRestore();
+  });
+  it('should render an input and a list', async () => {
+    render(/*#__PURE__*/React.createElement(SimpleSelect, {
+      renderLabel: "Choose an option"
+    }, getOptions()));
+    const input = screen.getByLabelText('Choose an option');
+    const listInitial = screen.queryByRole('listbox');
+    expect(listInitial).not.toBeInTheDocument();
+    expect(input).toBeInTheDocument();
+    await userEvent.click(input);
+    await waitFor(() => {
+      const list = screen.queryByRole('listbox');
+      expect(list).toBeInTheDocument();
+    });
+  });
+  it('should render groups', async () => {
+    render(_SimpleSelect || (_SimpleSelect = /*#__PURE__*/React.createElement(SimpleSelect, {
+      renderLabel: "Choose an option"
+    }, /*#__PURE__*/React.createElement(SimpleSelect.Option, {
+      id: "0",
+      value: "0"
+    }, "ungrouped option one"), /*#__PURE__*/React.createElement(SimpleSelect.Group, {
+      renderLabel: "Group one"
+    }, /*#__PURE__*/React.createElement(SimpleSelect.Option, {
+      id: "1",
+      value: "1"
+    }, "grouped option one")), /*#__PURE__*/React.createElement(SimpleSelect.Group, {
+      renderLabel: "Group two"
+    }, /*#__PURE__*/React.createElement(SimpleSelect.Option, {
+      id: "2",
+      value: "2"
+    }, "grouped option two")), /*#__PURE__*/React.createElement(SimpleSelect.Option, {
+      id: "3",
+      value: "3"
+    }, "ungrouped option two"))));
+    const input = screen.getByLabelText('Choose an option');
+    await userEvent.click(input);
+    await waitFor(() => {
+      const groups = screen.getAllByRole('group');
+      const labelOne = screen.getByText('Group one');
+      const labelOneID = labelOne.getAttribute('id');
+      expect(groups.length).toBe(2);
+      expect(groups[0]).toHaveAttribute('aria-labelledby', labelOneID);
+      expect(labelOne).toHaveAttribute('role', 'presentation');
+    });
+  });
+  it('should ignore invalid children', async () => {
+    render(_SimpleSelect2 || (_SimpleSelect2 = /*#__PURE__*/React.createElement(SimpleSelect, {
+      renderLabel: "Choose an option"
+    }, /*#__PURE__*/React.createElement(SimpleSelect.Option, {
+      id: "0",
+      value: 0
+    }, "valid"), /*#__PURE__*/React.createElement("div", null, "invalid"))));
+    const input = screen.getByLabelText('Choose an option');
+    await userEvent.click(input);
+    await waitFor(() => {
+      const invalidChild = screen.queryByText('invalid');
+      expect(invalidChild).not.toBeInTheDocument();
+      expect(consoleErrorMock).toHaveBeenCalledWith(expect.any(String), expect.any(String), expect.stringContaining('Expected one of Group, Option'), expect.any(String));
+    });
+  });
+  it('should fire onFocus when input gains focus', async () => {
+    const onFocus = vi.fn();
+    render(/*#__PURE__*/React.createElement(SimpleSelect, {
+      renderLabel: "Choose an option",
+      onFocus: onFocus
+    }, getOptions()));
+    const input = screen.getByLabelText('Choose an option');
+    input.focus();
+    await waitFor(() => {
+      expect(onFocus).toHaveBeenCalled();
+    });
+  });
+  describe('input', () => {
+    it('should render with a custom id if given', async () => {
+      render(_SimpleSelect3 || (_SimpleSelect3 = /*#__PURE__*/React.createElement(SimpleSelect, {
+        renderLabel: "Choose an option",
+        id: "customSelect"
+      })));
+      const input = screen.getByLabelText('Choose an option');
+      expect(input).toHaveAttribute('id', 'customSelect');
+    });
+    it('should always render readonly', async () => {
+      render(_SimpleSelect4 || (_SimpleSelect4 = /*#__PURE__*/React.createElement(SimpleSelect, {
+        renderLabel: "Choose an option",
+        interaction: "enabled"
+      })));
+      const input = screen.getByLabelText('Choose an option');
+      expect(input).toHaveAttribute('readonly');
+      expect(input).not.toHaveAttribute('disabled');
+    });
+    it('should render disabled when interaction="disabled"', async () => {
+      render(_SimpleSelect5 || (_SimpleSelect5 = /*#__PURE__*/React.createElement(SimpleSelect, {
+        renderLabel: "Choose an option",
+        interaction: "disabled"
+      })));
+      const input = screen.getByLabelText('Choose an option');
+      expect(input).toHaveAttribute('disabled');
+      expect(input).not.toHaveAttribute('readonly');
+    });
+    it('should render required when isRequired={true}', async () => {
+      render(_SimpleSelect6 || (_SimpleSelect6 = /*#__PURE__*/React.createElement(SimpleSelect, {
+        renderLabel: "Choose an option",
+        isRequired: true
+      })));
+      const input = screen.getByLabelText('Choose an option');
+      expect(input).toHaveAttribute('required');
+    });
+    it('should allow assistive text', async () => {
+      render(/*#__PURE__*/React.createElement(SimpleSelect, {
+        renderLabel: "Choose an option",
+        assistiveText: "hello world"
+      }, getOptions()));
+      const input = screen.getByLabelText('Choose an option');
+      const assistiveText = screen.getByText('hello world');
+      const assistiveTextID = assistiveText.getAttribute('id');
+      expect(input).toHaveAttribute('aria-describedby', assistiveTextID);
+    });
+    it('should allow custom props to pass through', async () => {
+      render(/*#__PURE__*/React.createElement(SimpleSelect, {
+        renderLabel: "Choose an option",
+        "data-custom-attr": "true"
+      }, getOptions()));
+      const input = screen.getByLabelText('Choose an option');
+      expect(input).toHaveAttribute('data-custom-attr', 'true');
+    });
+    it('should provide a ref to the input element', async () => {
+      const inputRef = vi.fn();
+      render(/*#__PURE__*/React.createElement(SimpleSelect, {
+        renderLabel: "Choose an option",
+        inputRef: inputRef
+      }, getOptions()));
+      const input = screen.getByLabelText('Choose an option');
+      expect(inputRef).toHaveBeenCalledWith(input);
+    });
+  });
+  it('should render icons before option and call renderBeforeLabel callback with necessary props', async () => {
+    const renderBeforeLabel = vi.fn(() => _IconCheckSolid || (_IconCheckSolid = /*#__PURE__*/React.createElement(IconCheckSolid, {
+      "data-testid": "option-icon"
+    })));
+    render(/*#__PURE__*/React.createElement(SimpleSelect, {
+      renderLabel: "Choose an option"
+    }, /*#__PURE__*/React.createElement(SimpleSelect.Option, {
+      id: "option-1",
+      value: "1",
+      isDisabled: true,
+      renderBeforeLabel: renderBeforeLabel
+    }, "option one"), /*#__PURE__*/React.createElement(SimpleSelect.Option, {
+      id: "option-2",
+      value: "2",
+      renderBeforeLabel: renderBeforeLabel
+    }, "option two")));
+    const input = screen.getByLabelText('Choose an option');
+    await userEvent.click(input);
+    await waitFor(() => {
+      const optionIcons = screen.getAllByTestId('option-icon');
+      expect(optionIcons.length).toBe(2);
+      expect(renderBeforeLabel).toHaveBeenCalledTimes(2);
+      const _ref = renderBeforeLabel.mock.calls,
+        _ref2 = _slicedToArray(_ref, 2),
+        _ref2$ = _slicedToArray(_ref2[0], 1),
+        argsOption1 = _ref2$[0],
+        _ref2$2 = _slicedToArray(_ref2[1], 1),
+        argsOption2 = _ref2$2[0];
+      expect(argsOption1).toMatchObject({
+        id: 'option-1',
+        isDisabled: true,
+        isSelected: true,
+        isHighlighted: true,
+        children: 'option one'
+      });
+      expect(argsOption2).toMatchObject({
+        id: 'option-2',
+        isDisabled: false,
+        isSelected: false,
+        isHighlighted: false,
+        children: 'option two'
+      });
+    });
+  });
+  describe('list', () => {
+    it('should set aria-disabled on options when isDisabled={true}', async () => {
+      render(/*#__PURE__*/React.createElement(SimpleSelect, {
         renderLabel: "Choose an option"
-      }, getOptions())),
-      container = _render.container;
-    const input = container.querySelector('input');
-    expect(input).toHaveAttribute('role', 'combobox');
+      }, getOptions(defaultOptions[2])));
+      const input = screen.getByLabelText('Choose an option');
+      await userEvent.click(input);
+      await waitFor(() => {
+        const options = screen.getAllByRole('option');
+        expect(options[0]).not.toHaveAttribute('aria-disabled');
+        expect(options[2]).toHaveAttribute('aria-disabled', 'true');
+      });
+    });
+    it('should provide a ref to the list element', async () => {
+      const listRef = vi.fn();
+      render(/*#__PURE__*/React.createElement(SimpleSelect, {
+        renderLabel: "Choose an option",
+        listRef: listRef
+      }, getOptions()));
+      const input = screen.getByLabelText('Choose an option');
+      await userEvent.click(input);
+      await waitFor(() => {
+        const listbox = screen.getByRole('listbox');
+        expect(listRef).toHaveBeenCalledWith(listbox);
+      });
+    });
+  });
+  describe('with generated examples', () => {
+    const generatedComponents = generateA11yTests(SimpleSelect, SimpleSelectExamples);
+    it.each(generatedComponents)('should be accessible with example: $description', async ({
+      content
+    }) => {
+      const _render = render(content),
+        container = _render.container;
+      const axeCheck = await runAxeCheck(container);
+      expect(axeCheck).toBe(true);
+    });
   });
   describe('children', () => {
     const initialOptions = ['foo', 'bar'];

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

@@ -1,13 +1,18 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
 var _vitest = require("vitest");
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 require("@testing-library/jest-dom");
+var _generateA11yTests = require("@instructure/ui-scripts/lib/test/generateA11yTests");
+var _IconCheckSolid2 = require("@instructure/ui-icons/lib/IconCheckSolid.js");
+var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
+var _SimpleSelect7 = _interopRequireDefault(require("../__examples__/SimpleSelect.examples"));
 var _index = _interopRequireDefault(require("../index"));
-var utils = _interopRequireWildcard(require("@instructure/ui-utils"));
+var _SimpleSelect, _SimpleSelect2, _SimpleSelect3, _SimpleSelect4, _SimpleSelect5, _SimpleSelect6, _IconCheckSolid;
 /*
  * The MIT License (MIT)
  *
@@ -31,42 +36,239 @@ var utils = _interopRequireWildcard(require("@instructure/ui-utils"));
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-
-_vitest.vi.mock('@instructure/ui-utils', async importOriginal => {
-  const originalModule = await importOriginal();
-  return {
-    __esModule: true,
-    ...originalModule,
-    isSafari: _vitest.vi.fn(() => true)
-  };
-});
-const mockUtils = utils;
+// eslint-disable-next-line no-restricted-imports
+const defaultOptions = ['foo', 'bar', 'baz'];
+const getOptions = disabled => defaultOptions.map(opt => /*#__PURE__*/_react.default.createElement(_index.default.Option, {
+  id: opt,
+  key: opt,
+  value: opt,
+  isDisabled: opt === disabled
+}, opt));
 describe('<SimpleSelect />', () => {
-  const defaultOptions = ['foo', 'bar', 'baz'];
-  const getOptions = disabled => defaultOptions.map(opt => /*#__PURE__*/_react.default.createElement(_index.default.Option, {
-    id: opt,
-    key: opt,
-    value: opt,
-    isDisabled: opt === disabled
-  }, opt));
-
-  // convert to e2e fail in vitest
-  // it('should have role button in Safari', async () => {
-  //   const { container } = render(
-  //     <SimpleSelect renderLabel="Choose an option">{getOptions()}</SimpleSelect>
-  //   )
-  //   const input = container.querySelector('input')
-  //   expect(input).toHaveAttribute('role', 'button')
-  // })
-
-  it('should have role combobox in different browsers than Safari', async () => {
-    mockUtils.isSafari = _vitest.vi.fn(() => false);
-    const _render = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.default, {
+  let consoleErrorMock;
+  beforeEach(() => {
+    // Mocking console to prevent test output pollution and expect for messages
+    consoleErrorMock = _vitest.vi.spyOn(console, 'error').mockImplementation(() => {});
+  });
+  afterEach(() => {
+    consoleErrorMock.mockRestore();
+  });
+  (0, _vitest.it)('should render an input and a list', async () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.default, {
+      renderLabel: "Choose an option"
+    }, getOptions()));
+    const input = _react2.screen.getByLabelText('Choose an option');
+    const listInitial = _react2.screen.queryByRole('listbox');
+    expect(listInitial).not.toBeInTheDocument();
+    expect(input).toBeInTheDocument();
+    await _userEvent.default.click(input);
+    await (0, _react2.waitFor)(() => {
+      const list = _react2.screen.queryByRole('listbox');
+      expect(list).toBeInTheDocument();
+    });
+  });
+  (0, _vitest.it)('should render groups', async () => {
+    (0, _react2.render)(_SimpleSelect || (_SimpleSelect = /*#__PURE__*/_react.default.createElement(_index.default, {
+      renderLabel: "Choose an option"
+    }, /*#__PURE__*/_react.default.createElement(_index.default.Option, {
+      id: "0",
+      value: "0"
+    }, "ungrouped option one"), /*#__PURE__*/_react.default.createElement(_index.default.Group, {
+      renderLabel: "Group one"
+    }, /*#__PURE__*/_react.default.createElement(_index.default.Option, {
+      id: "1",
+      value: "1"
+    }, "grouped option one")), /*#__PURE__*/_react.default.createElement(_index.default.Group, {
+      renderLabel: "Group two"
+    }, /*#__PURE__*/_react.default.createElement(_index.default.Option, {
+      id: "2",
+      value: "2"
+    }, "grouped option two")), /*#__PURE__*/_react.default.createElement(_index.default.Option, {
+      id: "3",
+      value: "3"
+    }, "ungrouped option two"))));
+    const input = _react2.screen.getByLabelText('Choose an option');
+    await _userEvent.default.click(input);
+    await (0, _react2.waitFor)(() => {
+      const groups = _react2.screen.getAllByRole('group');
+      const labelOne = _react2.screen.getByText('Group one');
+      const labelOneID = labelOne.getAttribute('id');
+      expect(groups.length).toBe(2);
+      expect(groups[0]).toHaveAttribute('aria-labelledby', labelOneID);
+      expect(labelOne).toHaveAttribute('role', 'presentation');
+    });
+  });
+  (0, _vitest.it)('should ignore invalid children', async () => {
+    (0, _react2.render)(_SimpleSelect2 || (_SimpleSelect2 = /*#__PURE__*/_react.default.createElement(_index.default, {
+      renderLabel: "Choose an option"
+    }, /*#__PURE__*/_react.default.createElement(_index.default.Option, {
+      id: "0",
+      value: 0
+    }, "valid"), /*#__PURE__*/_react.default.createElement("div", null, "invalid"))));
+    const input = _react2.screen.getByLabelText('Choose an option');
+    await _userEvent.default.click(input);
+    await (0, _react2.waitFor)(() => {
+      const invalidChild = _react2.screen.queryByText('invalid');
+      expect(invalidChild).not.toBeInTheDocument();
+      expect(consoleErrorMock).toHaveBeenCalledWith(expect.any(String), expect.any(String), expect.stringContaining('Expected one of Group, Option'), expect.any(String));
+    });
+  });
+  (0, _vitest.it)('should fire onFocus when input gains focus', async () => {
+    const onFocus = _vitest.vi.fn();
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.default, {
+      renderLabel: "Choose an option",
+      onFocus: onFocus
+    }, getOptions()));
+    const input = _react2.screen.getByLabelText('Choose an option');
+    input.focus();
+    await (0, _react2.waitFor)(() => {
+      expect(onFocus).toHaveBeenCalled();
+    });
+  });
+  describe('input', () => {
+    (0, _vitest.it)('should render with a custom id if given', async () => {
+      (0, _react2.render)(_SimpleSelect3 || (_SimpleSelect3 = /*#__PURE__*/_react.default.createElement(_index.default, {
+        renderLabel: "Choose an option",
+        id: "customSelect"
+      })));
+      const input = _react2.screen.getByLabelText('Choose an option');
+      expect(input).toHaveAttribute('id', 'customSelect');
+    });
+    (0, _vitest.it)('should always render readonly', async () => {
+      (0, _react2.render)(_SimpleSelect4 || (_SimpleSelect4 = /*#__PURE__*/_react.default.createElement(_index.default, {
+        renderLabel: "Choose an option",
+        interaction: "enabled"
+      })));
+      const input = _react2.screen.getByLabelText('Choose an option');
+      expect(input).toHaveAttribute('readonly');
+      expect(input).not.toHaveAttribute('disabled');
+    });
+    (0, _vitest.it)('should render disabled when interaction="disabled"', async () => {
+      (0, _react2.render)(_SimpleSelect5 || (_SimpleSelect5 = /*#__PURE__*/_react.default.createElement(_index.default, {
+        renderLabel: "Choose an option",
+        interaction: "disabled"
+      })));
+      const input = _react2.screen.getByLabelText('Choose an option');
+      expect(input).toHaveAttribute('disabled');
+      expect(input).not.toHaveAttribute('readonly');
+    });
+    (0, _vitest.it)('should render required when isRequired={true}', async () => {
+      (0, _react2.render)(_SimpleSelect6 || (_SimpleSelect6 = /*#__PURE__*/_react.default.createElement(_index.default, {
+        renderLabel: "Choose an option",
+        isRequired: true
+      })));
+      const input = _react2.screen.getByLabelText('Choose an option');
+      expect(input).toHaveAttribute('required');
+    });
+    (0, _vitest.it)('should allow assistive text', async () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.default, {
+        renderLabel: "Choose an option",
+        assistiveText: "hello world"
+      }, getOptions()));
+      const input = _react2.screen.getByLabelText('Choose an option');
+      const assistiveText = _react2.screen.getByText('hello world');
+      const assistiveTextID = assistiveText.getAttribute('id');
+      expect(input).toHaveAttribute('aria-describedby', assistiveTextID);
+    });
+    (0, _vitest.it)('should allow custom props to pass through', async () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.default, {
+        renderLabel: "Choose an option",
+        "data-custom-attr": "true"
+      }, getOptions()));
+      const input = _react2.screen.getByLabelText('Choose an option');
+      expect(input).toHaveAttribute('data-custom-attr', 'true');
+    });
+    (0, _vitest.it)('should provide a ref to the input element', async () => {
+      const inputRef = _vitest.vi.fn();
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.default, {
+        renderLabel: "Choose an option",
+        inputRef: inputRef
+      }, getOptions()));
+      const input = _react2.screen.getByLabelText('Choose an option');
+      expect(inputRef).toHaveBeenCalledWith(input);
+    });
+  });
+  (0, _vitest.it)('should render icons before option and call renderBeforeLabel callback with necessary props', async () => {
+    const renderBeforeLabel = _vitest.vi.fn(() => _IconCheckSolid || (_IconCheckSolid = /*#__PURE__*/_react.default.createElement(_IconCheckSolid2.IconCheckSolid, {
+      "data-testid": "option-icon"
+    })));
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.default, {
+      renderLabel: "Choose an option"
+    }, /*#__PURE__*/_react.default.createElement(_index.default.Option, {
+      id: "option-1",
+      value: "1",
+      isDisabled: true,
+      renderBeforeLabel: renderBeforeLabel
+    }, "option one"), /*#__PURE__*/_react.default.createElement(_index.default.Option, {
+      id: "option-2",
+      value: "2",
+      renderBeforeLabel: renderBeforeLabel
+    }, "option two")));
+    const input = _react2.screen.getByLabelText('Choose an option');
+    await _userEvent.default.click(input);
+    await (0, _react2.waitFor)(() => {
+      const optionIcons = _react2.screen.getAllByTestId('option-icon');
+      expect(optionIcons.length).toBe(2);
+      expect(renderBeforeLabel).toHaveBeenCalledTimes(2);
+      const _ref = renderBeforeLabel.mock.calls,
+        _ref2 = (0, _slicedToArray2.default)(_ref, 2),
+        _ref2$ = (0, _slicedToArray2.default)(_ref2[0], 1),
+        argsOption1 = _ref2$[0],
+        _ref2$2 = (0, _slicedToArray2.default)(_ref2[1], 1),
+        argsOption2 = _ref2$2[0];
+      expect(argsOption1).toMatchObject({
+        id: 'option-1',
+        isDisabled: true,
+        isSelected: true,
+        isHighlighted: true,
+        children: 'option one'
+      });
+      expect(argsOption2).toMatchObject({
+        id: 'option-2',
+        isDisabled: false,
+        isSelected: false,
+        isHighlighted: false,
+        children: 'option two'
+      });
+    });
+  });
+  describe('list', () => {
+    (0, _vitest.it)('should set aria-disabled on options when isDisabled={true}', async () => {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.default, {
         renderLabel: "Choose an option"
-      }, getOptions())),
-      container = _render.container;
-    const input = container.querySelector('input');
-    expect(input).toHaveAttribute('role', 'combobox');
+      }, getOptions(defaultOptions[2])));
+      const input = _react2.screen.getByLabelText('Choose an option');
+      await _userEvent.default.click(input);
+      await (0, _react2.waitFor)(() => {
+        const options = _react2.screen.getAllByRole('option');
+        expect(options[0]).not.toHaveAttribute('aria-disabled');
+        expect(options[2]).toHaveAttribute('aria-disabled', 'true');
+      });
+    });
+    (0, _vitest.it)('should provide a ref to the list element', async () => {
+      const listRef = _vitest.vi.fn();
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.default, {
+        renderLabel: "Choose an option",
+        listRef: listRef
+      }, getOptions()));
+      const input = _react2.screen.getByLabelText('Choose an option');
+      await _userEvent.default.click(input);
+      await (0, _react2.waitFor)(() => {
+        const listbox = _react2.screen.getByRole('listbox');
+        expect(listRef).toHaveBeenCalledWith(listbox);
+      });
+    });
+  });
+  describe('with generated examples', () => {
+    const generatedComponents = (0, _generateA11yTests.generateA11yTests)(_index.default, _SimpleSelect7.default);
+    _vitest.it.each(generatedComponents)('should be accessible with example: $description', async ({
+      content
+    }) => {
+      const _render = (0, _react2.render)(content),
+        container = _render.container;
+      const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
+      expect(axeCheck).toBe(true);
+    });
   });
   describe('children', () => {
     const initialOptions = ['foo', 'bar'];
@@ -81,7 +283,7 @@ describe('<SimpleSelect />', () => {
         renderLabel: "Choose an option"
       }, getOptions(options)));
     };
-    it('should clear selection if selected option does not exist in updated options', () => {
+    (0, _vitest.it)('should clear selection if selected option does not exist in updated options', () => {
       const _renderSimpleSelect = renderSimpleSelect(initialOptions),
         rerender = _renderSimpleSelect.rerender;
       const input = _react2.screen.getByRole('combobox', {
@@ -98,7 +300,7 @@ describe('<SimpleSelect />', () => {
       }, getOptions(updatedOptions)));
       expect(input).toHaveValue('');
     });
-    it('should persist selected option if it exists in updated options', () => {
+    (0, _vitest.it)('should persist selected option if it exists in updated options', () => {
       const _renderSimpleSelect2 = renderSimpleSelect(initialOptions),
         rerender = _renderSimpleSelect2.rerender;
       const input = _react2.screen.getByRole('combobox', {