diff --git a/packages/ui-breadcrumb/src/Breadcrumb/README.md b/packages/ui-breadcrumb/src/Breadcrumb/README.md index 7f39e1bd8c..2ff80bed13 100644 --- a/packages/ui-breadcrumb/src/Breadcrumb/README.md +++ b/packages/ui-breadcrumb/src/Breadcrumb/README.md @@ -23,7 +23,7 @@ type: example {(props, matches) => { if (matches.includes('tablet')) { return ( - + Student Forecast University of Utah University of Utah Colleges @@ -52,7 +52,7 @@ Change the `size` prop to control the font-size of the breadcrumbs (default is ` type: example ---
- + English 204 Rabbit Is Rich - + English 204 Rabbit Is Rich - + English 204 { this.ref = el } + addAriaCurrent = (child: React.ReactNode) => { + const updatedChild = React.cloneElement( + child as React.ReactElement<{ 'aria-current'?: string }>, + { + 'aria-current': 'true' + } + ) + return updatedChild + } + componentDidMount() { this.props.makeStyles?.() } @@ -78,9 +88,13 @@ class Breadcrumb extends Component { maxWidth: `${Math.floor(100 / numChildren)}%` } return React.Children.map(children, (child, index) => { + const isLastElement = index === numChildren - 1 + const hasHref = + React.isValidElement(child) && (child.props as { href?: string }).href + return (
  • - {child} + {isLastElement && hasHref ? this.addAriaCurrent(child) : child} {index < numChildren - 1 && ( )}