Icon button fixes removes iconLabel and adds aria-label to the type

Author: pksjce

docs/content/IconButton.mdx

@@ -28,15 +28,9 @@ A separate component called `IconButton` is used if the action shows only an ico
 
 ```jsx live drafts
 <>
-  <IconButton icon={SearchIcon} size="small">
-    Search
-  </IconButton>
-  <IconButton sx={{ml: 2}} icon={SearchIcon}>
-    Search
-  </IconButton>
-  <IconButton sx={{ml: 2}} icon={SearchIcon} size="large">
-    Search
-  </IconButton>
+  <IconButton aria-label="Search" icon={SearchIcon} size="small" />
+  <IconButton aria-label="Search" sx={{ml: 2}} icon={SearchIcon} />
+  <IconButton aria-label="Search" sx={{ml: 2}} icon={SearchIcon} size="large" />
 </>
 ```
 

src/Button/Button2.stories.tsx renamed to src/Button/Button.stories.tsx

@@ -6,7 +6,7 @@ import {XIcon, SearchIcon, EyeIcon, EyeClosedIcon, TriangleDownIcon, TriangleRig
 import Box from '../Box'
 
 export default {
-  title: 'Composite components/Button2',
+  title: 'Composite components/Button',
 
   decorators: [
     Story => {
@@ -69,19 +69,19 @@ export const iconButton = ({...args}: ButtonProps) => {
   return (
     <>
       <Box mb={2}>
-        <IconButton icon={XIcon} iconLabel="Close" {...args} />
+        <IconButton icon={XIcon} aria-label="Close" {...args} />
       </Box>
       <Box mb={2}>
-        <IconButton icon={XIcon} iconLabel="Close" {...args} variant="invisible" sx={{mt: 2}} />
+        <IconButton icon={XIcon} aria-label="Close" {...args} variant="invisible" sx={{mt: 2}} />
       </Box>
       <Box mb={2}>
-        <IconButton icon={XIcon} iconLabel="Close" {...args} variant="danger" />
+        <IconButton icon={XIcon} aria-label="Close" {...args} variant="danger" />
       </Box>
       <Box mb={2}>
-        <IconButton icon={XIcon} iconLabel="Close" {...args} variant="primary" />
+        <IconButton icon={XIcon} aria-label="Close" {...args} variant="primary" />
       </Box>
       <Box mb={2}>
-        <IconButton icon={XIcon} iconLabel="Close" {...args} variant="outline" />
+        <IconButton icon={XIcon} aria-label="Close" {...args} variant="outline" />
       </Box>
     </>
   )

src/Button/IconButton.tsx

@@ -4,11 +4,9 @@ import {useTheme} from '../ThemeProvider'
 import Box from '../Box'
 import {IconButtonProps, StyledButton} from './types'
 import {getBaseStyles, getSizeStyles, getVariantStyles} from './styles'
-import {useSSRSafeId} from '@react-aria/ssr'
 
 const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>((props, forwardedRef): JSX.Element => {
-  const {variant = 'default', size = 'medium', sx: sxProp = {}, icon: Icon, iconLabel, ...rest} = props
-  const iconLabelId = useSSRSafeId()
+  const {variant = 'default', size = 'medium', sx: sxProp = {}, icon: Icon, ...rest} = props
   const {theme} = useTheme()
   const sxStyles = merge.all([
     getBaseStyles(theme),
@@ -17,12 +15,7 @@ const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>((props, forwar
     sxProp as SxProp
   ])
   return (
-    <StyledButton aria-labelledby={iconLabelId} sx={sxStyles} {...rest} ref={forwardedRef}>
-      {iconLabel && (
-        <span id={iconLabelId} hidden={true}>
-          {iconLabel}
-        </span>
-      )}
+    <StyledButton sx={sxStyles} {...rest} ref={forwardedRef}>
       <Box as="span" sx={{display: 'inline-block'}}>
         <Icon />
       </Box>

src/Button/types.ts

@@ -45,7 +45,7 @@ export type IconButtonProps = {
    * This is to be used if it is an icon-only button. Will make text visually hidden
    */
   icon: React.FunctionComponent<IconProps>
-  iconLabel: string
+  'aria-label': string
 } & ButtonBaseProps
 
 // adopted from React.AnchorHTMLAttributes