fix(core): use updated aria control attribute for root element (#1278)

Author: dhayab

packages/autocomplete-core/src/__tests__/getRootProps.test.ts

@@ -45,18 +45,18 @@ describe('getRootProps', () => {
     expect(rootProps['aria-haspopup']).toEqual('listbox');
   });
 
-  test('returns undefined aria-owns when panel is closed', () => {
+  test('returns undefined aria-controls when panel is closed', () => {
     const autocomplete = createAutocomplete({
       initialState: {
         isOpen: false,
       },
     });
     const rootProps = autocomplete.getRootProps({});
 
-    expect(rootProps['aria-owns']).toBeUndefined();
+    expect(rootProps['aria-controls']).toBeUndefined();
   });
 
-  test('returns list id in aria-owns when panel is open', () => {
+  test('returns list id in aria-controls when panel is open', () => {
     const autocomplete = createAutocomplete({
       id: 'autocomplete',
       initialState: {
@@ -70,7 +70,7 @@ describe('getRootProps', () => {
     });
     const rootProps = autocomplete.getRootProps({});
 
-    expect(rootProps['aria-owns']).toEqual('autocomplete-testSource-list');
+    expect(rootProps['aria-controls']).toEqual('autocomplete-testSource-list');
   });
 
   test('returns label id in aria-labelledby', () => {

packages/autocomplete-core/src/getPropGetters.ts

@@ -110,7 +110,7 @@ export function getPropGetters<
       role: 'combobox',
       'aria-expanded': store.getState().isOpen,
       'aria-haspopup': 'listbox',
-      'aria-owns': store.getState().isOpen
+      'aria-controls': store.getState().isOpen
         ? store
             .getState()
             .collections.map(({ source }) =>

packages/autocomplete-shared/src/core/AutocompletePropGetters.ts

@@ -42,7 +42,7 @@ export type GetRootProps = (props?: { [key: string]: unknown }) => {
     | 'listbox'
     | 'tree'
     | undefined;
-  'aria-owns': string | undefined;
+  'aria-controls': string | undefined;
   'aria-labelledby': string;
 };