fix(#5745): Allow typing in Accordion (#5888)

* Allow typing in Accordion

* Remove empty line

---------

Co-authored-by: Reid Barber <reid@reidbarber.com>

Author: FosterSamuel

packages/@react-aria/accordion/src/useAccordion.ts

@@ -70,6 +70,7 @@ export function useAccordion<T>(props: AriaAccordionProps<T>, state: TreeState<T
     ...props,
     ...state,
     allowsTabNavigation: true,
+    disallowTypeAhead: true,
     ref
   });
   return {

packages/@react-spectrum/accordion/stories/Accordion.stories.tsx

@@ -68,6 +68,24 @@ export const ControlledExpandedKeys: AccordionStory = {
   name: 'controlled ExpandedKeys'
 };
 
+export const WithInput: AccordionStory = {
+  args: {...Default.args, defaultExpandedKeys: ['step1']},
+  render: (args) => (
+    <Accordion {...args} >
+      <Item key="step1" title="Shipping" hasChildItems={false}>
+        <input type="text" />
+      </Item>
+      <Item key="step2" title="Billing" hasChildItems={false}>
+        <input type="text" />
+      </Item>
+      <Item key="step3" title="Payment" hasChildItems={false}>
+        <input type="text" />
+      </Item>
+    </Accordion>
+  ),
+  name: 'With input'
+};
+
 
 function ControlledAccordion<T>(props: SpectrumAccordionProps<T>) {
   let [openKeys, setOpenKeys] = useState<Set<Key>>(new Set(['files']));

packages/@react-spectrum/accordion/test/Accordion.test.js

@@ -20,15 +20,15 @@ import userEvent from '@testing-library/user-event';
 let items = [
   {key: 'one', title: 'one title', children: 'one children'},
   {key: 'two', title: 'two title', children: 'two children'},
-  {key: 'three', title: 'three title', children: 'three children'}
+  {key: 'three', title: 'three title', children: <input type="text" />, hasChildItems: false}
 ];
 
 function renderComponent(props) {
   return render(
     <Provider theme={theme}>
       <Accordion {...props} defaultExpandedKeys={['one']} items={items}>
         {item => (
-          <Item key={item.key} title={item.title}>
+          <Item key={item.key} title={item.title} hasChildItems={item.hasChildItems}>
             {item.children}
           </Item>
         )}
@@ -131,4 +131,17 @@ describe('Accordion', function () {
     await user.tab({shift: true});
     expect(document.activeElement).toBe(thirdItem);
   });
+
+  it('allows users to type inside accordion items', async function () {
+    let tree = renderComponent();
+    let buttons = tree.getAllByRole('button');
+    let itemWithInputHeader = buttons[2];
+    act(() => itemWithInputHeader.click());
+
+    let [input] = tree.getAllByRole('textbox');
+    act(() => input.focus());
+
+    await user.type(input, 'Type example');
+    expect(input.value).toEqual('Type example');
+  });
 });