diff --git a/packages/breadcrumbs/package.json b/packages/breadcrumbs/package.json
index fbd72f352b3..4918dd8d18e 100644
--- a/packages/breadcrumbs/package.json
+++ b/packages/breadcrumbs/package.json
@@ -29,7 +29,7 @@
"styled-components": "^3.2.6"
},
"devDependencies": {
- "@zendeskgarden/css-breadcrumbs": "0.2.0",
+ "@zendeskgarden/css-breadcrumbs": "0.2.2",
"@zendeskgarden/react-theming": "^3.2.1",
"@zendeskgarden/react-utilities": "^0.2.5"
},
diff --git a/packages/breadcrumbs/src/containers/BreadcrumbContainer.js b/packages/breadcrumbs/src/containers/BreadcrumbContainer.js
index 4210ab58ee7..ef1af4deb05 100644
--- a/packages/breadcrumbs/src/containers/BreadcrumbContainer.js
+++ b/packages/breadcrumbs/src/containers/BreadcrumbContainer.js
@@ -13,6 +13,7 @@ export default class BreadcrumbContainer extends Component {
/**
* @param {Object} renderProps
* @param {Function} renderProps.getContainerProps - Props to be spread onto containing element
+ * @param {Function} renderProps.getCurrentPageProps - Props to be spread onto current page element
*/
children: PropTypes.func,
/**
@@ -29,11 +30,19 @@ export default class BreadcrumbContainer extends Component {
};
};
+ getCurrentPageProps = props => {
+ return {
+ 'aria-current': 'page',
+ ...props
+ };
+ };
+
render() {
const { children, render = children } = this.props;
return render({
- getContainerProps: this.getContainerProps
+ getContainerProps: this.getContainerProps,
+ getCurrentPageProps: this.getCurrentPageProps
});
}
}
diff --git a/packages/breadcrumbs/src/containers/BreadcrumbContainer.spec.js b/packages/breadcrumbs/src/containers/BreadcrumbContainer.spec.js
index 8b5bd5a45e8..4ffca00fe20 100644
--- a/packages/breadcrumbs/src/containers/BreadcrumbContainer.spec.js
+++ b/packages/breadcrumbs/src/containers/BreadcrumbContainer.spec.js
@@ -16,12 +16,17 @@ describe('BreadcrumbContainer', () => {
beforeEach(() => {
wrapper = mountWithTheme(
- {({ getContainerProps }) => }
+ {({ getContainerProps, getCurrentPageProps }) => (
+
+ )}
);
});
const findContainer = enzymeWrapper => enzymeWrapper.find('[data-test-id="container"]');
+ const findAnchor = enzymeWrapper => enzymeWrapper.find('[data-test-id="anchor"]');
describe('getContainerProps()', () => {
it('applies correct accessibility attributes', () => {
@@ -31,4 +36,12 @@ describe('BreadcrumbContainer', () => {
expect(container).toHaveProp('aria-label', 'Breadcrumb navigation');
});
});
+
+ describe('getCurrentPageProps()', () => {
+ it('applies correct accessibility attributes', () => {
+ const anchor = findAnchor(wrapper);
+
+ expect(anchor).toHaveProp('aria-current', 'page');
+ });
+ });
});
diff --git a/packages/breadcrumbs/src/elements/Breadcrumb.js b/packages/breadcrumbs/src/elements/Breadcrumb.js
index 211258ac13e..5e36ae77c58 100644
--- a/packages/breadcrumbs/src/elements/Breadcrumb.js
+++ b/packages/breadcrumbs/src/elements/Breadcrumb.js
@@ -23,7 +23,11 @@ export default class Breadcrumb extends Component {
children: PropTypes.any
};
- renderItems = items => {
+ renderPage = (page, pageProps, itemProps) => {
+ return - {itemProps.current ? cloneElement(page, pageProps) : page}
;
+ };
+
+ renderItems = (items, getCurrentPageProps) => {
const total = Children.count(items);
return Children.map(items, (item, index) => {
@@ -32,11 +36,9 @@ export default class Breadcrumb extends Component {
key: index
};
- return hasType(item, Item) ? (
- cloneElement(item, itemProps)
- ) : (
- - {item}
- );
+ return hasType(item, Item)
+ ? cloneElement(item, itemProps)
+ : this.renderPage(item, getCurrentPageProps(), itemProps);
});
};
@@ -45,10 +47,10 @@ export default class Breadcrumb extends Component {
return (
- {({ getContainerProps }) => (
+ {({ getContainerProps, getCurrentPageProps }) => (
/* role not needed as `BreadcrumbView` is a navigation landmark. */
- {this.renderItems(children)}
+ {this.renderItems(children, getCurrentPageProps)}
)}
diff --git a/packages/breadcrumbs/src/elements/Breadcrumb.spec.js b/packages/breadcrumbs/src/elements/Breadcrumb.spec.js
index 4d490a0bba1..403f1f9a007 100644
--- a/packages/breadcrumbs/src/elements/Breadcrumb.spec.js
+++ b/packages/breadcrumbs/src/elements/Breadcrumb.spec.js
@@ -44,6 +44,28 @@ describe('Breadcrumb', () => {
});
});
+ describe('Anchor List', () => {
+ wrapper = mountWithTheme(
+
+ First
+ Last
+
+ );
+
+ expect(
+ wrapper
+ .find(Item)
+ .first()
+ .find('a')
+ ).not.toHaveProp('aria-current', 'page');
+ expect(
+ wrapper
+ .find(Item)
+ .last()
+ .find('a')
+ ).toHaveProp('aria-current', 'page');
+ });
+
describe('Item', () => {
it('receives Item props', () => {
expect(wrapper.find(Item).last()).toHaveProp('data-test-item', true);