diff --git a/packages/react/src/components/ListBox/ListBoxField.js b/packages/react/src/components/ListBox/ListBoxField.js
index ba3419a1b6ec..bc5baac4971f 100644
--- a/packages/react/src/components/ListBox/ListBoxField.js
+++ b/packages/react/src/components/ListBox/ListBoxField.js
@@ -11,36 +11,42 @@ import PropTypes from 'prop-types';
const { prefix } = settings;
-export const translationIds = {}; // No longer used, left export for backward-compatibility
+// No longer used, left export for backward-compatibility
+export const translationIds = {};
/**
* `ListBoxField` is responsible for creating the containing node for valid
* elements inside of a field. It also provides a11y-related attributes like
* `role` to make sure a user can focus the given field.
*/
-const ListBoxField = ({ children, id, disabled, tabIndex, ...rest }) => (
-
- {children}
-
-);
+function ListBoxField({ children, disabled, tabIndex, ...rest }) {
+ return (
+
+ {children}
+
+ );
+}
ListBoxField.propTypes = {
/**
- * Provide the contents of your ListBoxField
+ * Typically set by `getToggleButtonProps`, this should specify whether the
+ * field has a popup.
*/
- children: PropTypes.node,
+ 'aria-haspopup': PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
/**
- * Specify a custom `id`
+ * The role for the component, should be set by `getToggleButtonProps` coming
+ * from Downshift
*/
- id: PropTypes.string.isRequired,
+ role: PropTypes.string,
+
+ /**
+ * Provide the contents of your ListBoxField
+ */
+ children: PropTypes.node,
/**
* Specify if the parent
is disabled
diff --git a/packages/react/src/components/ListBox/__tests__/ListBoxField-test.js b/packages/react/src/components/ListBox/__tests__/ListBoxField-test.js
index 8dd85e59faaa..ca5e63a9dfd0 100644
--- a/packages/react/src/components/ListBox/__tests__/ListBoxField-test.js
+++ b/packages/react/src/components/ListBox/__tests__/ListBoxField-test.js
@@ -32,19 +32,4 @@ describe('ListBoxField', () => {
const wrapper = mount();
expect(wrapper.children().prop('tabIndex')).toBe(-1);
});
-
- it('should set `aria-owns` based when expanded', () => {
- const wrapper = mount(
-
-
-
- );
- expect(wrapper.find('div[aria-expanded]').props()['aria-owns']).toBe(
- 'test-listbox__menu'
- );
- expect(wrapper.find('div[aria-expanded]').props()['aria-controls']).toBe(
- 'test-listbox__menu'
- );
- expect(wrapper).toMatchSnapshot();
- });
});
diff --git a/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBox-test.js.snap b/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBox-test.js.snap
index 4d97e570b4eb..2239ac661572 100644
--- a/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBox-test.js.snap
+++ b/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBox-test.js.snap
@@ -17,11 +17,8 @@ exports[`ListBox should render 1`] = `
id="test-listbox"
>
diff --git a/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxField-test.js.snap b/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxField-test.js.snap
index 3b9d33b2a3dc..d72c42efd258 100644
--- a/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxField-test.js.snap
+++ b/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxField-test.js.snap
@@ -5,69 +5,8 @@ exports[`ListBoxField should render 1`] = `
id="test-listbox"
>
-
-`;
-
-exports[`ListBoxField should set \`aria-owns\` based when expanded 1`] = `
-
-
{titleText && (
-