diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-colorblind-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-colorblind-linux.png index 678cdcf2d27..8da124c94e2 100644 Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-colorblind-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-dimmed-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-dimmed-linux.png index 79c93e143b8..da437eaea9b 100644 Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-dimmed-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-high-contrast-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-high-contrast-linux.png index 4250d1c091a..a6ce76707cd 100644 Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-high-contrast-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-linux.png index 678cdcf2d27..8da124c94e2 100644 Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-linux.png differ diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-tritanopia-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-tritanopia-linux.png index 678cdcf2d27..8da124c94e2 100644 Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-tritanopia-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-light-colorblind-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-light-colorblind-linux.png index 8eb9badcadc..df8513d7dc9 100644 Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-light-colorblind-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-light-high-contrast-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-light-high-contrast-linux.png index 23381372f26..98b75993318 100644 Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-light-high-contrast-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-light-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-light-linux.png index 8eb9badcadc..d78e1632609 100644 Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-light-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-light-linux.png differ diff --git a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-light-tritanopia-linux.png b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-light-tritanopia-linux.png index 8eb9badcadc..df8513d7dc9 100644 Binary files a/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-light-tritanopia-linux.png and b/.playwright/snapshots/components/IconButton.test.ts-snapshots/IconButton-Playground-light-tritanopia-linux.png differ diff --git a/src/Button/IconButton.docs.json b/src/Button/IconButton.docs.json index ad1529202a8..9b8306fb460 100644 --- a/src/Button/IconButton.docs.json +++ b/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" diff --git a/src/Button/IconButton.features.stories.tsx b/src/Button/IconButton.features.stories.tsx index 2f8b979aac3..0f27d91c397 100644 --- a/src/Button/IconButton.features.stories.tsx +++ b/src/Button/IconButton.features.stories.tsx @@ -6,16 +6,16 @@ export default { title: 'Components/IconButton/Features', } -export const Primary = () => +export const Primary = () => -export const Danger = () => +export const Danger = () => -export const Invisible = () => +export const Invisible = () => -export const Disabled = () => +export const Disabled = () => -export const Small = () => +export const Small = () => -export const Medium = () => +export const Medium = () => -export const Large = () => +export const Large = () => diff --git a/src/Button/IconButton.stories.tsx b/src/Button/IconButton.stories.tsx index a60e2fc9340..9422c85a01b 100644 --- a/src/Button/IconButton.stories.tsx +++ b/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 = () => +export const Default = () =>