fix(IconButton): loosen polymorphic type to allow for any type of JSX…

…Element (#1494)
dequelabs · Jun 5, 2024 · 0408555 · 0408555
1 parent b4ee4f3
commit 0408555
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 17 deletions.
diff --git a/packages/react/src/components/IconButton/IconButton.test.tsx b/packages/react/src/components/IconButton/IconButton.test.tsx
@@ -40,10 +40,7 @@ it('should add button role for custom components', () => {
   ) {
     return <div data-testid="custom" ref={ref} {...props}></div>;
   });
-  render(
-    // @ts-expect-error this technically should be allowed
-    <IconButton icon="pencil" label="Edit" as={CustomButton} />
-  );
+  render(<IconButton icon="pencil" label="Edit" as={CustomButton} />);
   expect(screen.getByTestId('custom')).toBeInTheDocument();
   expect(screen.getByTestId('custom')).toHaveAttribute('role', 'button');
   expect(screen.getByTestId('custom')).toHaveAttribute('tabIndex', '0');
@@ -121,15 +118,7 @@ test('should return no axe violations when rendered as CustomElement', async ()
   ) {
     return <div data-testid="custom" ref={ref} {...props}></div>;
   });
-  render(
-    <IconButton
-      icon="pencil"
-      label="Edit"
-      // @ts-expect-error this technically should be allowed
-      as={CustomButton}
-      href="/somewhere"
-    />
-  );
+  render(<IconButton icon="pencil" label="Edit" as={CustomButton} />);
   const results = await axe(screen.getByTestId('custom'));
   expect(results).toHaveNoViolations();
 });
diff --git a/packages/react/src/components/IconButton/index.tsx b/packages/react/src/components/IconButton/index.tsx
@@ -16,8 +16,7 @@ import {
 
 export interface IconButtonProps
   extends PolymorphicProps<
-    React.HTMLAttributes<HTMLButtonElement | HTMLAnchorElement>,
-    'button' | 'a'
+    React.HTMLAttributes<HTMLButtonElement | HTMLAnchorElement>
   > {
   icon: IconType;
   label: React.ReactNode;
@@ -112,7 +111,6 @@ const IconButton = forwardRef(
             'IconButton--error': variant === 'error',
             'IconButton--large': large
           })}
-          // @ts-expect-error the concrete type is unknown, so HTMLElement is expected
           ref={internalRef}
           disabled={disabled}
           tabIndex={disabled ? -1 : tabIndex}
@@ -130,7 +128,7 @@ const IconButton = forwardRef(
       </React.Fragment>
     );
   }
-) as PolymorphicComponent<IconButtonProps, 'button' | 'a'>;
+) as PolymorphicComponent<IconButtonProps>;
 
 IconButton.displayName = 'IconButton';