feat(breadcrumbs): add support for aria-current (#252)

zendeskgarden · Jan 14, 2019 · c5984a6 · c5984a6
1 parent 0a781f5
commit c5984a6
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 11 deletions.
diff --git 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
@@ -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
@@ -16,12 +16,17 @@ describe('BreadcrumbContainer', () => {
   beforeEach(() => {
     wrapper = mountWithTheme(
       <BreadcrumbContainer>
-        {({ getContainerProps }) => <div {...getContainerProps({ 'data-test-id': 'container' })} />}
+        {({ getContainerProps, getCurrentPageProps }) => (
+          <div {...getContainerProps({ 'data-test-id': 'container' })}>
+            <a {...getCurrentPageProps({ 'data-test-id': 'anchor' })}>Test</a>
+          </div>
+        )}
       </BreadcrumbContainer>
     );
   });
 
   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
@@ -23,7 +23,11 @@ export default class Breadcrumb extends Component {
     children: PropTypes.any
   };
 
-  renderItems = items => {
+  renderPage = (page, pageProps, itemProps) => {
+    return <Item {...itemProps}>{itemProps.current ? cloneElement(page, pageProps) : page}</Item>;
+  };
+
+  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 {...itemProps}>{item}</Item>
-      );
+      return hasType(item, Item)
+        ? cloneElement(item, itemProps)
+        : this.renderPage(item, getCurrentPageProps(), itemProps);
     });
   };
 
@@ -45,10 +47,10 @@ export default class Breadcrumb extends Component {
 
     return (
       <BreadcrumbContainer>
-        {({ getContainerProps }) => (
+        {({ getContainerProps, getCurrentPageProps }) => (
           /* role not needed as `BreadcrumbView` is a navigation landmark. */
           <BreadcrumbView {...getContainerProps({ role: null })}>
-            <List {...breadcrumbProps}>{this.renderItems(children)}</List>
+            <List {...breadcrumbProps}>{this.renderItems(children, getCurrentPageProps)}</List>
           </BreadcrumbView>
         )}
       </BreadcrumbContainer>

diff --git 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(
+      <Breadcrumb>
+        <a href="/#">First</a>
+        <a href="/#">Last</a>
+      </Breadcrumb>
+    );
+
+    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);