fix: User-provided props win over defined defaults in Link component (m…

…icrosoft#30062) * fix: User-provided props win over defined defaults in Link component. * Adding change file. --------- Co-authored-by: Humberto Makoto Morimoto Burgos <[email protected]>
spmonahan · Dec 13, 2023 · 6fbf7dc · 6fbf7dc
1 parent b6766ba
commit 6fbf7dc
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 2 deletions.
diff --git a/change/@fluentui-react-link-0346db3c-ee8d-4d9e-b3a9-0c785ab3c830.json 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": "[email protected]",
+  "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
@@ -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
@@ -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 = {