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 }) => ( +
+ Test +
+ )} ); }); 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);