Improve aria-labels for example icon buttons and add guidance

src/Button/IconButton.docs.json

@@ -35,6 +35,12 @@
       "defaultValue": "",
       "description": "provide an octicon. It will be placed in the center of the button"
     },
+    {
+      "name": "aria-label",
+      "type": "string",
+      "defaultValue": "",
+      "description": "Use an aria label to describe the functionality of the button. Please refer to [our guidance on alt text](https://primer.style/guides/accessibility/alternative-text-for-images) for tips on writing good alternative text."
+    },
     {
       "name": "sx",
       "type": "SystemStyleObject"

src/Button/IconButton.features.stories.tsx

@@ -6,16 +6,16 @@ export default {
   title: 'Components/IconButton/Features',
 }
 
-export const Primary = () => <IconButton icon={HeartIcon} variant="primary" aria-label="Primary" />
+export const Primary = () => <IconButton icon={HeartIcon} variant="primary" aria-label="Favorite" />
 
-export const Danger = () => <IconButton icon={HeartIcon} variant="danger" aria-label="Danger" />
+export const Danger = () => <IconButton icon={HeartIcon} variant="danger" aria-label="Favorite" />
 
-export const Invisible = () => <IconButton icon={HeartIcon} variant="invisible" aria-label="Invisible" />
+export const Invisible = () => <IconButton icon={HeartIcon} variant="invisible" aria-label="Favorite" />
 
-export const Disabled = () => <IconButton disabled icon={HeartIcon} aria-label="Disabled" />
+export const Disabled = () => <IconButton disabled icon={HeartIcon} aria-label="Favorite" />
 
-export const Small = () => <IconButton size="small" icon={HeartIcon} aria-label="Default" />
+export const Small = () => <IconButton size="small" icon={HeartIcon} aria-label="Favorite" />
 
-export const Medium = () => <IconButton size="medium" icon={HeartIcon} aria-label="Default" />
+export const Medium = () => <IconButton size="medium" icon={HeartIcon} aria-label="Favorite" />
 
-export const Large = () => <IconButton size="large" icon={HeartIcon} aria-label="Default" />
+export const Large = () => <IconButton size="large" icon={HeartIcon} aria-label="Favorite" />

src/Button/IconButton.stories.tsx

@@ -41,8 +41,8 @@ Playground.args = {
   disabled: false,
   inactive: false,
   variant: 'default',
-  'aria-label': 'Icon button description',
-  icon: XIcon,
+  'aria-label': 'Favorite',
+  icon: HeartIcon,
 }
 
-export const Default = () => <IconButton icon={HeartIcon} aria-label="Default" />
+export const Default = () => <IconButton icon={HeartIcon} aria-label="Favorite" />