feat: Add 'rel' attribute to Button (#757)

Author: Rúben Carvalho

src/__tests__/__snapshots__/documenter.test.ts.snap

@@ -2757,6 +2757,13 @@ It prevents users from clicking the button.",
       "optional": true,
       "type": "string",
     },
+    Object {
+      "description": "Adds a \`rel\` attribute to the link. By default, the component sets the \`rel\` attribute to \\"noopener noreferrer\\" when \`target\` is \`\\"_blank\\"\`.
+If the \`rel\` property is provided, it overrides the default behavior.",
+      "name": "rel",
+      "optional": true,
+      "type": "string",
+    },
     Object {
       "description": "Specifies where to open the linked URL (for example, to open in a new browser window or tab use \`_blank\`).
 This property only applies when an \`href\` is provided.",

src/button/__tests__/button.test.tsx

@@ -368,6 +368,11 @@ describe('Button Component', () => {
       expect(wrapper.getElement()).not.toHaveAttribute('rel');
     });
 
+    test('does not set the default "rel" attribute for "target=_blank" if a "rel" prop is provided', () => {
+      const wrapper = renderButton({ href: 'https://amazon.com', target: '_blank', rel: 'nofollow' });
+      expect(wrapper.getElement()).toHaveAttribute('rel', 'nofollow');
+    });
+
     test('can add a download attribute if it is a link', () => {
       let wrapper = renderButton({ download: 'fileName' });
       expect(wrapper.getElement()).not.toHaveAttribute('download');

src/button/index.tsx

@@ -25,6 +25,7 @@ const Button = React.forwardRef(
       wrapText = true,
       href,
       target,
+      rel,
       download,
       formAction = 'submit',
       ariaLabel,
@@ -54,6 +55,7 @@ const Button = React.forwardRef(
         wrapText={wrapText}
         href={href}
         target={target}
+        rel={rel}
         download={download}
         formAction={formAction}
         ariaLabel={ariaLabel}

src/button/interfaces.ts

@@ -81,6 +81,12 @@ export interface ButtonProps extends BaseComponentProps {
    */
   target?: string;
 
+  /**
+   * Adds a `rel` attribute to the link. By default, the component sets the `rel` attribute to "noopener noreferrer" when `target` is `"_blank"`.
+   * If the `rel` property is provided, it overrides the default behavior.
+   */
+  rel?: string;
+
   /**
    * Specifies whether the linked URL, when selected, will prompt the user to download instead of navigate.
    * You can specify a string value that will be suggested as the name of the downloaded file.

src/button/internal.tsx

@@ -40,6 +40,7 @@ export const InternalButton = React.forwardRef(
       wrapText = true,
       href,
       target,
+      rel,
       download,
       formAction = 'submit',
       ariaLabel,
@@ -125,7 +126,7 @@ export const InternalButton = React.forwardRef(
             href={href}
             target={target}
             // security recommendation: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target
-            rel={target === '_blank' ? 'noopener noreferrer' : undefined}
+            rel={rel ?? (target === '_blank' ? 'noopener noreferrer' : undefined)}
             tabIndex={isDisabled ? -1 : undefined}
             aria-disabled={isDisabled ? true : undefined}
             download={download}