From 6fbf7dc04a3bd6594a3f510da4aa9f2946aa8909 Mon Sep 17 00:00:00 2001
From: Makoto Morimoto <humbertomakotomorimoto@gmail.com>
Date: Wed, 13 Dec 2023 12:42:45 -0800
Subject: [PATCH] fix: User-provided props win over defined defaults in Link
 component (#30062)

* fix: User-provided props win over defined defaults in Link component.

* Adding change file.

---------

Co-authored-by: Humberto Makoto Morimoto Burgos <makotom@microsoft.com>
---
 ...-0346db3c-ee8d-4d9e-b3a9-0c785ab3c830.json |  7 +++++++
 .../src/components/Link/Link.test.tsx         | 20 +++++++++++++++++++
 .../react-link/src/components/Link/useLink.ts |  4 ++--
 3 files changed, 29 insertions(+), 2 deletions(-)
 create mode 100644 change/@fluentui-react-link-0346db3c-ee8d-4d9e-b3a9-0c785ab3c830.json

diff --git a/change/@fluentui-react-link-0346db3c-ee8d-4d9e-b3a9-0c785ab3c830.json b/change/@fluentui-react-link-0346db3c-ee8d-4d9e-b3a9-0c785ab3c830.json
new file mode 100644
index 0000000000000..9890e5449420b
--- /dev/null
+++ b/change/@fluentui-react-link-0346db3c-ee8d-4d9e-b3a9-0c785ab3c830.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: User-provided props win over defined defaults in Link component.",
+  "packageName": "@fluentui/react-link",
+  "email": "makotom@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-link/src/components/Link/Link.test.tsx b/packages/react-components/react-link/src/components/Link/Link.test.tsx
index d8a8b064b503b..57ab9a049db1d 100644
--- a/packages/react-components/react-link/src/components/Link/Link.test.tsx
+++ b/packages/react-components/react-link/src/components/Link/Link.test.tsx
@@ -76,6 +76,16 @@ describe('Link', () => {
 
       expect(link.getAttribute('tabIndex')).toBe('-1');
     });
+
+    it('allows overriding "role"', () => {
+      const result = render(
+        <Link href="https://www.bing.com" role="button">
+          This is a link
+        </Link>,
+      );
+      expect(result.queryAllByRole('link')).toHaveLength(0);
+      expect(result.queryAllByRole('button')).toHaveLength(1);
+    });
   });
 
   describe('when rendered as a button', () => {
@@ -120,5 +130,15 @@ describe('Link', () => {
 
       expect(button.getAttribute('tabIndex')).toBe('-1');
     });
+
+    it('allows overriding "role"', () => {
+      const result = render(
+        <Link href="https://www.bing.com" role="presentation">
+          This is a link
+        </Link>,
+      );
+      expect(result.queryAllByRole('link')).toHaveLength(0);
+      expect(result.queryAllByRole('presentation')).toHaveLength(1);
+    });
   });
 });
diff --git a/packages/react-components/react-link/src/components/Link/useLink.ts b/packages/react-components/react-link/src/components/Link/useLink.ts
index ff893386cb0be..87d70432975c5 100644
--- a/packages/react-components/react-link/src/components/Link/useLink.ts
+++ b/packages/react-components/react-link/src/components/Link/useLink.ts
@@ -20,10 +20,10 @@ export const useLink_unstable = (
 
   // Casting is required here as `as` prop would break the union between `a`, `button` and `span` types
   const propsWithAssignedAs = {
-    ...props,
-    as: elementType,
     role: elementType === 'span' ? 'button' : undefined,
     type: elementType === 'button' ? 'button' : undefined,
+    ...props,
+    as: elementType,
   } as LinkProps;
 
   const state: LinkState = {