Fix(web-react): Pass aria props rel and target based on elemen type t…

…o the dom element

packages/web-react/src/components/ButtonLink/ButtonLink.tsx

@@ -31,7 +31,7 @@ const _ButtonLink = <T extends ElementType = 'a', C = void, S = void>(
     ...restProps
   } = propsWithDefaults;
 
-  const { buttonLinkProps } = useButtonLinkAriaProps(restProps);
+  const { buttonLinkProps } = useButtonLinkAriaProps(propsWithDefaults);
   const { classProps, props: modifiedProps } = useButtonLinkStyleProps(restProps);
   const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
 

packages/web-react/src/components/ButtonLink/__tests__/ButtonLink.test.tsx

@@ -71,4 +71,18 @@ describe('ButtonLink', () => {
     const element = container.querySelector('a') as HTMLElement;
     expect(element).not.toHaveAttribute('type');
   });
+
+  it('should pass rel attribute', () => {
+    const { container } = render(<ButtonLink rel="noopener" />);
+
+    const element = container.querySelector('a') as HTMLElement;
+    expect(element).toHaveAttribute('rel', 'noopener');
+  });
+
+  it('should pass target attribute', () => {
+    const { container } = render(<ButtonLink target="_blank" />);
+
+    const element = container.querySelector('a') as HTMLElement;
+    expect(element).toHaveAttribute('target', '_blank');
+  });
 });

packages/web-react/src/components/ButtonLink/__tests__/useButtonLinkAriaProps.test.ts

@@ -0,0 +1,88 @@
+import { renderHook } from '@testing-library/react';
+import { UseButtonLinkAriaProps, useButtonLinkAriaProps } from '../useButtonLinkAriaProps';
+
+describe('useButtonAriaProps', () => {
+  it('should return aria props for anchor tag', () => {
+    const props = {
+      elementType: 'a',
+      href: '/',
+      isDisabled: false,
+      target: '_blank',
+      rel: 'noopener',
+    } as UseButtonLinkAriaProps;
+    const { result } = renderHook(() => useButtonLinkAriaProps(props));
+
+    expect(result.current.buttonLinkProps).toEqual({
+      'aria-label': undefined,
+      disabled: undefined,
+      href: '/',
+      onClick: expect.any(Function),
+      rel: 'noopener',
+      role: 'button',
+      target: '_blank',
+    });
+  });
+
+  it('should return aria props for disabled anchor tag', () => {
+    const props = {
+      elementType: 'a',
+      href: '/',
+      isDisabled: true,
+      target: '_blank',
+      rel: 'noopener',
+    } as UseButtonLinkAriaProps;
+    const { result } = renderHook(() => useButtonLinkAriaProps(props));
+
+    expect(result.current.buttonLinkProps).toEqual({
+      'aria-label': undefined,
+      disabled: true,
+      href: undefined,
+      onClick: expect.any(Function),
+      rel: 'noopener',
+      role: 'button',
+      target: '_blank',
+    });
+  });
+
+  it('should return aria props for button tag', () => {
+    const props = {
+      elementType: 'button',
+      href: '/',
+      isDisabled: false,
+      target: '_blank',
+      rel: 'noopener',
+    } as unknown as UseButtonLinkAriaProps;
+    const { result } = renderHook(() => useButtonLinkAriaProps(props));
+
+    expect(result.current.buttonLinkProps).toEqual({
+      'aria-label': undefined,
+      disabled: undefined,
+      href: '/',
+      onClick: expect.any(Function),
+      rel: undefined,
+      role: 'button',
+      target: undefined,
+    });
+  });
+
+  it('should return aria props for disabled button tag', () => {
+    const props = {
+      elementType: 'button',
+      href: '/',
+      isDisabled: true,
+      target: '_blank',
+      rel: 'noopener',
+    } as unknown as UseButtonLinkAriaProps;
+    const { result } = renderHook(() => useButtonLinkAriaProps(props));
+
+    expect(result.current.buttonLinkProps).toEqual({
+      'aria-label': undefined,
+      disabled: true,
+      href: '/',
+      onClick: expect.any(Function),
+      rel: undefined,
+      role: 'button',
+      target: undefined,
+    });
+  });
+});