Add disableKeyboardExpansion prop to Accordion component

src/components/accordion/Accordion.spec.tsx

@@ -242,6 +242,39 @@ describe('<Accordion>', () => {
     expect(screen.queryByRole('region')).toBeNull();
   });
 
+  it('does not expand/collapse on keyboard when disableKeyboardExpansion is true', async () => {
+    const accordionId = 'id-1';
+
+    render(
+      <Accordion disableKeyboardExpansion reduceMotion>
+        <AccordionItem title={accordionId} id={accordionId} tabIndex={1}>
+          Accordion Item Description
+        </AccordionItem>
+      </Accordion>
+    );
+    const item = screen.getByRole('button');
+
+    expect(item.getAttribute('aria-expanded')).toEqual('false');
+    expect(screen.queryByRole('region')).toBeNull();
+
+    focusElement(item);
+
+    // Try to expand with Enter - should not work
+    fireEvent.keyDown(item, {key: 'Enter', keyCode: '13'});
+    expect(item.getAttribute('aria-expanded')).toEqual('false');
+    expect(screen.queryByRole('region')).toBeNull();
+
+    // Try to expand with Space - should not work
+    fireEvent.keyDown(item, {key: 'Space', keyCode: '32'});
+    expect(item.getAttribute('aria-expanded')).toEqual('false');
+    expect(screen.queryByRole('region')).toBeNull();
+
+    // But clicking should still work
+    fireEvent.click(item);
+    expect(item.getAttribute('aria-expanded')).toEqual('true');
+    expect(screen.getByRole('region')).toBeTruthy();
+  });
+
   it('has an accessible name', () => {
     const label = 'Accordion name';
     const accordion = render(<Accordion aria-label={label} />);

src/components/accordion/Accordion.stories.mdx

@@ -76,6 +76,13 @@ const spacingOptions = [
         options: spacingOptions,
       },
     },
+    disableKeyboardExpansion: {
+      description:
+        'Disables expanding/collapsing accordion items using Space/Enter keys',
+      control: {
+        type: 'boolean',
+      },
+    },
   }}
   args={{
     allowMultiple: true,
@@ -146,6 +153,19 @@ const spacingOptions = [
   </Story>
 </Canvas>
 
+### Disabled Keyboard Expansion
+
+When `disableKeyboardExpansion` is enabled, accordion items cannot be expanded/collapsed using Space or Enter keys. Mouse clicks will still work normally.
+
+<Canvas>
+  <Story
+    name="DisabledKeyboardExpansion"
+    args={{disableKeyboardExpansion: true}}
+  >
+    {args => <Accordion {...args} />}
+  </Story>
+</Canvas>
+
 ## Responsive props
 
 To control styles that differ across screen sizes you can use responsive props. All props marked as Responsive support [object and array syntax](/story/foundation-✨-responsive-props--page). Resize window to check how component is changing padding size.

src/components/accordion/Accordion.tsx

@@ -68,6 +68,7 @@ export type AccordionPropsType = Readonly<{
   expanded?: string | Array<string>;
   defaultExpanded?: string | Array<string>;
   onChange?: (arg0: string) => void;
+  disableKeyboardExpansion?: boolean;
   'aria-label'?: string;
   'aria-labelledby'?: string;
 }>;
@@ -90,6 +91,7 @@ const Accordion = ({
   defaultExpanded,
   expanded,
   onChange,
+  disableKeyboardExpansion = false,
   'aria-label': ariaLabel,
   'aria-labelledby': ariaLabelledby,
 }: AccordionPropsType) => {
@@ -178,9 +180,11 @@ const Accordion = ({
           event.preventDefault();
         }
 
-        dispatch({
-          type: 'accordion/KEYBOARD_SET_EXPANDED',
-        });
+        if (!disableKeyboardExpansion) {
+          dispatch({
+            type: 'accordion/KEYBOARD_SET_EXPANDED',
+          });
+        }
       }
     }
 
@@ -190,7 +194,7 @@ const Accordion = ({
       if (!wrapper) return;
       wrapper.removeEventListener('keydown', handleKeyDown);
     };
-  }, [state.focusedElementId]);
+  }, [state.focusedElementId, disableKeyboardExpansion]);
 
   function reducer(state: StateType, action: ActionType): StateType {
     switch (action.type) {

src/components/accordion/stories/Accordion.a11y.mdx

@@ -28,6 +28,17 @@ import rules, {accordionItemRules} from './rules.a11y';
 </Accordion>
 ```
 
+- with disabled keyboard expansion
+
+<!-- prettier-ignore -->
+```jsx
+<Accordion disableKeyboardExpansion>
+  <AccordionItem title="Item 1">
+    Accordion Item 1 Description
+  </AccordionItem>
+</Accordion>
+```
+
 - with a custom heading level for item
 
 <!-- prettier-ignore -->

src/components/accordion/stories/rules.a11y.ts

@@ -12,6 +12,8 @@ export const accordionItemRules = [
   {
     pattern:
       '<b>Should</b> expend/collapse content by pressing <code>Space</code>/<code>Enter</code> and mouse click.',
+    comment: `Keyboard expansion can be disabled by setting <code>disableKeyboardExpansion</code> prop to <code>true</code>. 
+      Mouse click interaction will always work regardless of this setting.`,
     status: 'DONE',
     tests: 'DONE',
   },