[Breadcrumbs] Fix expand/collapsed Breadcrumbs via keyboard

docs/pages/api/breadcrumbs.md

@@ -27,6 +27,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 | <span class="prop-name required">children&nbsp;*</span> | <span class="prop-type">node</span> |  | The breadcrumb children. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
 | <span class="prop-name">component</span> | <span class="prop-type">elementType</span> | <span class="prop-default">'nav'</span> | The component used for the root node. Either a string to use a DOM element or a component. By default, it maps the variant to a good default headline component. |
+| <span class="prop-name">expandText</span> | <span class="prop-type">string</span> | <span class="prop-default">'Show path'</span> | Override the default label for the expand button.<br>For localization purposes, you can use the provided [translations](/guides/localization/). |
 | <span class="prop-name">itemsAfterCollapse</span> | <span class="prop-type">number</span> | <span class="prop-default">1</span> | If max items is exceeded, the number of items to show after the ellipsis. |
 | <span class="prop-name">itemsBeforeCollapse</span> | <span class="prop-type">number</span> | <span class="prop-default">1</span> | If max items is exceeded, the number of items to show before the ellipsis. |
 | <span class="prop-name">maxItems</span> | <span class="prop-type">number</span> | <span class="prop-default">8</span> | Specifies the maximum number of breadcrumbs to display. When there are more than the maximum number, only the first `itemsBeforeCollapse` and last `itemsAfterCollapse` will be shown, with an ellipsis in between. |

packages/material-ui/src/Breadcrumbs/BreadcrumbCollapsed.js

@@ -3,19 +3,16 @@ import PropTypes from 'prop-types';
 import withStyles from '../styles/withStyles';
 import { emphasize } from '../styles/colorManipulator';
 import MoreHorizIcon from '../internal/svg-icons/MoreHoriz';
+import ButtonBase from '../ButtonBase';
 
 const styles = theme => ({
   root: {
     display: 'flex',
-  },
-  icon: {
-    width: 24,
-    height: 16,
+    marginLeft: theme.spacing(0.5),
+    marginRight: theme.spacing(0.5),
     backgroundColor: theme.palette.grey[100],
     color: theme.palette.grey[700],
     borderRadius: 2,
-    marginLeft: theme.spacing(0.5),
-    marginRight: theme.spacing(0.5),
     cursor: 'pointer',
     '&:hover, &:focus': {
       backgroundColor: theme.palette.grey[200],
@@ -25,17 +22,22 @@ const styles = theme => ({
       backgroundColor: emphasize(theme.palette.grey[200], 0.12),
     },
   },
+  icon: {
+    width: 24,
+    height: 16,
+  },
 });
 
 /**
  * @ignore - internal component.
  */
 function BreadcrumbCollapsed(props) {
   const { classes, ...other } = props;
+
   return (
-    <li className={classes.root} {...other}>
+    <ButtonBase component="li" className={classes.root} focusRipple {...other}>
       <MoreHorizIcon className={classes.icon} />
-    </li>
+    </ButtonBase>
   );
 }
 

packages/material-ui/src/Breadcrumbs/BreadcrumbCollapsed.test.js

@@ -1,32 +1,42 @@
 import React from 'react';
-import { assert } from 'chai';
-import { createShallow, createMount, getClasses } from '@material-ui/core/test-utils';
+import { expect } from 'chai';
+import { spy } from 'sinon';
+import { getClasses } from '@material-ui/core/test-utils';
 import BreadcrumbCollapsed from './BreadcrumbCollapsed';
-import MoreHorizIcon from '../internal/svg-icons/MoreHoriz';
+import { fireEvent, createClientRender } from 'test/utils/createClientRender';
 
 describe('<BreadcrumbCollapsed />', () => {
-  let mount;
-  let shallow;
   let classes;
+  const render = createClientRender();
 
   before(() => {
-    shallow = createShallow({ dive: true });
-    mount = createMount({ strict: true });
     classes = getClasses(<BreadcrumbCollapsed />);
   });
 
-  after(() => {
-    mount.cleanUp();
-  });
-
-  it('should render an <SvgIcon>', () => {
-    const wrapper = shallow(<BreadcrumbCollapsed />);
+  it('should render an icon', () => {
+    const { container } = render(<BreadcrumbCollapsed />);
 
-    assert.strictEqual(wrapper.find(MoreHorizIcon).length, 1);
-    assert.strictEqual(wrapper.hasClass(classes.root), true);
+    expect(container.querySelectorAll('svg').length).to.equal(1);
+    expect(container.firstChild).to.have.class(classes.root);
   });
 
-  it('should mount', () => {
-    mount(<BreadcrumbCollapsed />);
+  describe('prop: onKeyDown', () => {
+    it(`should be called on key down - Enter`, () => {
+      const handleClick = spy();
+      const { container } = render(<BreadcrumbCollapsed onClick={handleClick} />);
+      const expand = container.firstChild;
+      expand.focus();
+      fireEvent.keyDown(expand, { key: 'Enter' });
+      expect(handleClick.callCount).to.equal(1);
+    });
+
+    it(`should be called on key up - Space`, () => {
+      const handleClick = spy();
+      const { container } = render(<BreadcrumbCollapsed onClick={handleClick} />);
+      const expand = container.firstChild;
+      expand.focus();
+      fireEvent.keyUp(expand, { key: ' ' });
+      expect(handleClick.callCount).to.equal(1);
+    });
   });
 });

packages/material-ui/src/Breadcrumbs/Breadcrumbs.js

@@ -52,6 +52,7 @@ const Breadcrumbs = React.forwardRef(function Breadcrumbs(props, ref) {
     classes,
     className,
     component: Component = 'nav',
+    expandText = 'Show path',
     itemsAfterCollapse = 1,
     itemsBeforeCollapse = 1,
     maxItems = 8,
@@ -82,7 +83,7 @@ const Breadcrumbs = React.forwardRef(function Breadcrumbs(props, ref) {
 
     return [
       ...allItems.slice(0, itemsBeforeCollapse),
-      <BreadcrumbCollapsed key="ellipsis" onClick={handleClickExpand} />,
+      <BreadcrumbCollapsed aria-label={expandText} key="ellipsis" onClick={handleClickExpand} />,
       ...allItems.slice(allItems.length - itemsAfterCollapse, allItems.length),
     ];
   };
@@ -149,6 +150,12 @@ Breadcrumbs.propTypes = {
    * By default, it maps the variant to a good default headline component.
    */
   component: PropTypes.elementType,
+  /**
+   * Override the default label for the expand button.
+   *
+   * For localization purposes, you can use the provided [translations](/guides/localization/).
+   */
+  expandText: PropTypes.string,
   /**
    * If max items is exceeded, the number of items to show after the ellipsis.
    */

packages/material-ui/src/Breadcrumbs/Breadcrumbs.test.js

@@ -57,13 +57,14 @@ describe('<Breadcrumbs />', () => {
     );
 
     const listitems = getAllByRole('listitem', { hidden: false });
-    expect(listitems).to.have.length(3);
+
+    expect(listitems).to.have.length(2);
     expect(getByRole('list')).to.have.text('first//ninth');
-    expect(listitems[1].querySelector('[data-mui-test="MoreHorizIcon"]')).to.be.ok;
+    expect(getByRole('button').querySelector('[data-mui-test="MoreHorizIcon"]')).to.be.ok;
   });
 
   it('should expand when `BreadcrumbCollapsed` is clicked', () => {
-    const { getAllByRole } = render(
+    const { getAllByRole, getByRole } = render(
       <Breadcrumbs>
         <span>first</span>
         <span>second</span>
@@ -77,9 +78,9 @@ describe('<Breadcrumbs />', () => {
       </Breadcrumbs>,
     );
 
-    getAllByRole('listitem', { hidden: false })[2].click();
+    getByRole('button').click();
 
-    expect(getAllByRole('listitem', { hidden: false })).to.have.length(3);
+    expect(getAllByRole('listitem', { hidden: false })).to.have.length(9);
   });
 
   describe('warnings', () => {

packages/material-ui/src/locale/index.js

@@ -291,6 +291,9 @@ export const fiFI = {
 
 export const frFR = {
   props: {
+    MuiBreadcrumbs: {
+      expandText: 'Montrer le chemin',
+    },
     MuiTablePagination: {
       backIconButtonText: 'Page précédente',
       labelRowsPerPage: 'Lignes par page :',