Update BreakoutBanner docs information on leading visual accessible label (#839)

* updated docs with example and information on leadingVisual accessible lable

* use a note for added prominence

Author: joshfarrant

apps/docs/content/components/BreakoutBanner/react.mdx

@@ -100,8 +100,14 @@ The content alignment can be changed using the `align` prop on the root `Breakou
 
 ### Leading visual
 
+<Note variant="warning">
+  An accessible label should always be provided for the leading visual.
+</Note>
+
 ```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>