fix(react-link): support Enter and Space keys interaction, if rendered as span

change/@fluentui-react-link-3fcc87af-d93e-43d3-8c48-d38b192fd9ac.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: support Enter and Space interaction, if rendered as span",
+  "packageName": "@fluentui/react-link",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-link/library/src/components/Link/Link.test.tsx

@@ -1,9 +1,11 @@
 import * as React from 'react';
 import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { linkBehaviorDefinition, validateBehavior, ComponentTestFacade } from '@fluentui/a11y-testing';
 import { isConformant } from '../../testing/isConformant';
 import { Link } from './Link';
 import { LinkProps } from './Link.types';
+import { Enter } from '@fluentui/keyboard-keys';
 
 describe('Link', () => {
   isConformant<LinkProps>({
@@ -140,5 +142,45 @@ describe('Link', () => {
       expect(result.queryAllByRole('link')).toHaveLength(0);
       expect(result.queryAllByRole('presentation')).toHaveLength(1);
     });
+
+    describe('when rendered as span', () => {
+      it('should call onClick by pressing Enter', () => {
+        const onClick = jest.fn();
+
+        render(
+          <Link as="span" onClick={onClick}>
+            This is a buttonlink
+          </Link>,
+        );
+
+        userEvent.tab();
+        userEvent.keyboard('{Enter}');
+
+        expect(onClick).toHaveBeenCalledTimes(1);
+      });
+
+      it('should trigger onClick once, if onKeyDown is provided', () => {
+        const onClick = jest.fn();
+
+        render(
+          <Link
+            as="span"
+            onClick={onClick}
+            onKeyDown={ev => {
+              if (ev.key === Enter) {
+                ev.currentTarget.click();
+              }
+            }}
+          >
+            This is a buttonlink
+          </Link>,
+        );
+
+        userEvent.tab();
+        userEvent.keyboard('{Enter}');
+
+        expect(onClick).toHaveBeenCalledTimes(1);
+      });
+    });
   });
 });

packages/react-components/react-link/library/src/components/Link/useLinkState.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Enter, Space } from '@fluentui/keyboard-keys';
 import type { LinkState } from './Link.types';
+import { mergeCallbacks } from '@fluentui/react-utilities';
 
 /**
  * The useLinkState_unstable hook processes the Link state.
@@ -35,14 +36,24 @@ export const useLinkState_unstable = (state: LinkState): LinkState => {
   };
 
   // Disallow keydown event when component is disabled and eat events when disabledFocusable is set to true.
-  state.root.onKeyDown = (ev: React.KeyboardEvent<HTMLAnchorElement & HTMLButtonElement>) => {
-    if ((disabled || disabledFocusable) && (ev.key === Enter || ev.key === Space)) {
-      ev.preventDefault();
-      ev.stopPropagation();
-    } else {
-      onKeyDown?.(ev);
-    }
-  };
+  state.root.onKeyDown = mergeCallbacks(
+    state.root.onKeyDown,
+    (ev: React.KeyboardEvent<HTMLAnchorElement & HTMLButtonElement>) => {
+      const keyPressed = ev.key === Enter || ev.key === Space;
+
+      if ((disabled || disabledFocusable) && keyPressed) {
+        ev.preventDefault();
+        ev.stopPropagation();
+        return;
+      }
+
+      // if there is already onKeyDown provided - respect it
+      if (state.root.as === 'span' && !!state.root.onClick && !onKeyDown && keyPressed) {
+        ev.preventDefault();
+        ev.currentTarget.click();
+      }
+    },
+  );
 
   // Set the aria-disabled and disabled props correctly.
   state.disabled = disabled || disabledFocusable;

packages/react-components/react-link/stories/src/Link/LinkAsSpan.stories.tsx

@@ -8,7 +8,7 @@ const useDivWithWidthClassName = makeResetStyles({
 export const AsSpan = () => (
   <div className={useDivWithWidthClassName()}>
     The following link renders as a span.{' '}
-    <Link as="span" inline>
+    <Link as="span" inline onClick={() => alert('Link rendered as span')}>
       Links that render as a span wrap correctly between lines when their content is very long
     </Link>
     . This is because they behave as regular inline elements.