updated docs with example and information on leadingVisual accessible…

… lable
primer · Nov 29, 2024 · 817076e · 817076e
1 parent 0f8bfa6
commit 817076e
Showing 1 changed file with 5 additions and 1 deletion.
diff --git a/apps/docs/content/components/BreakoutBanner/react.mdx b/apps/docs/content/components/BreakoutBanner/react.mdx
@@ -100,8 +100,12 @@ The content alignment can be changed using the `align` prop on the root `Breakou
 
 ### Leading visual
 
+An accessible label should always be provided for the leading visual.
+
 ```jsx live
-<BreakoutBanner leadingVisual={<LogoGithubIcon size="medium" />}>
+<BreakoutBanner
+  leadingVisual={<LogoGithubIcon size="medium" aria-label="GitHub logo" />}
+>
   <BreakoutBanner.Heading>
     Where the most ambitious teams build great things
   </BreakoutBanner.Heading>