[SpeedDial] Implement navigation behavior

Following the proposed spec with alternative B

packages/material-ui-lab/src/SpeedDial/SpeedDial.js

@@ -8,6 +8,7 @@ import Zoom from '@material-ui/core/Zoom';
 import { duration } from '@material-ui/core/styles/transitions';
 import Button from '@material-ui/core/Button';
 import { isMuiElement } from '@material-ui/core/utils/reactHelpers';
+import * as utils from './utils';
 
 export const styles = {
  /* Styles applied to the root element. */
@@ -51,26 +52,38 @@ export const styles = {
 
 class SpeedDial extends React.Component {
  /**
- * refs to all children SpeedDialActions
+ * refs to the Button in all children SpeedDialActions
+ * @type {HTMLButtonElement[]}
  */
  actions = [];
 
  state = {
+ /**
+ * an index in this.actions
+ */
  focusedAction: -1,
+ /**
+ * pressing this key while the focus is on a child SpeedDialAction focuses
+ * the next SpeedDialAction.
+ * It is equal to the first arrow key pressed while focus is on the SpeedDial
+ * that is not orthogonal to the direction.
+ * @type {utils.ArrowKey}
+ */
+ nextItemArrowKey: 'up',
  };
 
  handleButtonKeyDown = event => {
  const key = keycode(event);
  const { direction, onKeyDown, open } = this.props;
 
- if (open && key === direction) {
+ if (open && utils.sameOrientation(key, direction)) {
  event.preventDefault();
 
  const focusedAction = 0;
  const firstActionRef = this.actions[focusedAction];
  if (firstActionRef != null) {
  firstActionRef.focus();
- this.setState({ focusedAction });
+ this.setState({ focusedAction, nextItemArrowKey: key });
  }
  }
 
@@ -82,24 +95,19 @@ class SpeedDial extends React.Component {
  handleActionButtonKeyDown = event => {
  const key = keycode(event);
  const { direction, onClose, onKeyDown } = this.props;
- const { focusedAction } = this.state;
-
- const directionAxis = direction === 'up' || direction === 'down' ? 'vertical' : 'horizontal';
- const isNavigating =
- (directionAxis === 'vertical' && (key === 'up' || key === 'down')) ||
- (directionAxis === 'horizontal' && (key === 'left' || key === 'right'));
+ const { focusedAction, nextItemArrowKey } = this.state;
 
  if (key === 'esc') {
  this.fabRef.focus();
  if (onClose) {
  onClose(event, key);
  }
- } else if (isNavigating) {
+ } else if (utils.sameOrientation(key, direction)) {
  event.preventDefault();
 
- const actionStep = key === direction ? 1 : -1;
+ const actionStep = key === nextItemArrowKey ? 1 : -1;
 
- // consider the actions as a ring
+ // wrap at beginning/end
  const nextAction = (focusedAction + actionStep + this.actions.length) % this.actions.length;
  const nextActionRef = this.actions[nextAction];
  nextActionRef.focus();
@@ -111,12 +119,21 @@ class SpeedDial extends React.Component {
  }
  };
 
- createHandleSpeedDialActionButtonRef = (dialActionIndex, origButtonRef) => ref => {
- this.actions[dialActionIndex] = ref;
- if (origButtonRef) {
- origButtonRef(ref);
- }
- };
+ /**
+ * creates a ref callback for the Button in a SpeedDialAction
+ * Is called before the original ref callback for Button that was set in buttonProps
+ *
+ * @param dialActionIndex {number}
+ * @param origButtonRef {React.RefObject?}
+ */
+ createHandleSpeedDialActionButtonRef(dialActionIndex, origButtonRef) {
+ return ref => {
+ this.actions[dialActionIndex] = ref;
+ if (origButtonRef) {
+ origButtonRef(ref);
+ }
+ };
+ }
 
  render() {
  const {
@@ -142,6 +159,8 @@ class SpeedDial extends React.Component {
  // Filter the label for valid id characters.
  const id = ariaLabel.replace(/^[^a-z]+|[^\w:.-]+/gi, '');
 
+ const orientation = utils.getOrientation(direction);
+
  let totalValidChildren = 0;
  React.Children.forEach(childrenProp, child => {
  if (React.isValidElement(child)) totalValidChildren += 1;
@@ -222,14 +241,13 @@ class SpeedDial extends React.Component {
  </TransitionComponent>
  <div
  id={`${id}-actions`}
+ role="menu"
+ aria-orientation={orientation}
  className={classNames(
  classes.actions,
  { [classes.actionsClosed]: !open },
  actionsPlacementClass,
  )}
- ref={ref => {
- this.actionsRef = ref;
- }}
  >
  {children}
  </div>

packages/material-ui-lab/src/SpeedDial/utils.js

@@ -0,0 +1,28 @@
+/**
+ * An arrow key on the keyboard
+ * @typedef {'up'|'right'|'down'|'left'} ArrowKey
+ */
+
+/**
+ *
+ * @param direction {string}
+ * @returns value useable in aria-orientation or undefined if no ArrowKey given
+ */
+export function getOrientation(direction) {
+ if (direction === 'up' || direction === 'down') {
+ return 'vertical';
+ }
+ if (direction === 'right' || direction === 'left') {
+ return 'horizontal';
+ }
+ return undefined;
+}
+
+/**
+ * @param {string} directionA
+ * @param {string} directionB
+ * @returns {boolean}
+ */
+export function sameOrientation(directionA, directionB) {
+ return getOrientation(directionA) === getOrientation(directionB);
+}