Skip to content

Commit

Permalink
Update BreakoutBanner docs information on leading visual accessible l…
Browse files Browse the repository at this point in the history
…abel (#839)

* updated docs with example and information on leadingVisual accessible lable

* use a note for added prominence
  • Loading branch information
joshfarrant authored Nov 29, 2024
1 parent 0f8bfa6 commit e3d0a94
Showing 1 changed file with 7 additions and 1 deletion.
8 changes: 7 additions & 1 deletion apps/docs/content/components/BreakoutBanner/react.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down

0 comments on commit e3d0a94

Please sign in to comment.