diff --git a/src/app/components/AvailableModulesMenu.jsx b/src/app/components/AvailableModulesMenu.jsx
index a31960cd..6d10c191 100644
--- a/src/app/components/AvailableModulesMenu.jsx
+++ b/src/app/components/AvailableModulesMenu.jsx
@@ -1,504 +1,504 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import * as ModuleUtils from '../shipyard/ModuleUtils';
-import TranslatedComponent from './TranslatedComponent';
-import { stopCtxPropagation } from '../utils/UtilityFunctions';
-import cn from 'classnames';
-import { MountFixed, MountGimballed, MountTurret } from './SvgIcons';
-
-const PRESS_THRESHOLD = 500; // mouse/touch down threshold
-
-/*
- * Categorisation of module groups
- */
-const GRPCAT = {
-  'sg': 'shields',
-  'bsg': 'shields',
-  'psg': 'shields',
-  'scb': 'shields',
-  'cc': 'limpet controllers',
-  'fx': 'limpet controllers',
-  'hb': 'limpet controllers',
-  'pc': 'limpet controllers',
-  'rpl': 'limpet controllers',
-  'pce': 'passenger cabins',
-  'pci': 'passenger cabins',
-  'pcm': 'passenger cabins',
-  'pcq': 'passenger cabins',
-  'fh': 'hangars',
-  'pv': 'hangars',
-  'fs': 'fuel',
-  'ft': 'fuel',
-  'hr': 'structural reinforcement',
-  'mrp': 'structural reinforcement',
-  'bl': 'lasers',
-  'pl': 'lasers',
-  'ul': 'lasers',
-  'ml': 'lasers',
-  'c': 'projectiles',
-  'mc': 'projectiles',
-  'axmc': 'experimental',
-  'fc': 'projectiles',
-  'rfl':  'experimental',
-  'pa': 'projectiles',
-  'rg': 'projectiles',
-  'mr': 'ordnance',
-  'axmr': 'experimental',
-  'rcpl': 'experimental',
-  'tp': 'ordnance',
-  'nl': 'ordnance',
-  'sc': 'scanners',
-  'ss': 'scanners',
-  // Utilities
-  'cs': 'scanners',
-  'kw': 'scanners',
-  'ws': 'scanners',
-  'xs': 'scanners',
-  'ch': 'defence',
-  'po': 'defence',
-  'ec': 'defence',
-  'sfn': 'defence',
-  // Standard
-  'gpp': 'guardian',
-  'gpc': 'guardian',
-  'ggc': 'guardian'
-};
-// Order here is the order in which items will be shown in the modules menu
-const CATEGORIES = {
-  // Internals
-  'am': ['am'],
-  'cr': ['cr'],
-  'fi': ['fi'],
-  'fuel': ['ft', 'fs'],
-  'hangars': ['fh', 'pv'],
-  'limpet controllers': ['cc', 'fx', 'hb', 'pc', 'rpl'],
-  'passenger cabins': ['pce', 'pci', 'pcm', 'pcq'],
-  'rf': ['rf'],
-  'shields': ['sg', 'bsg', 'psg', 'scb'],
-  'structural reinforcement': ['hr', 'mrp'],
-  'dc': ['dc'],
-  // Hardpoints
-  'lasers': ['pl', 'ul', 'bl', 'ml'],
-  'projectiles': ['mc', 'c', 'fc', 'pa', 'rg'],
-  'ordnance': ['mr', 'tp', 'nl'],
-  // Utilities
-  'sb': ['sb'],
-  'hs': ['hs'],
-  'defence': ['ch', 'po', 'ec'],
-  'scanners': ['sc', 'ss', 'cs', 'kw', 'ws'], // Overloaded with internal scanners
-  // Experimental
-  'experimental': ['axmc', 'axmr', 'rfl', 'xs', 'sfn', 'rcpl'],
-
-  // Guardian
-  'guardian': ['gpp', 'gpc', 'ggc']
-};
-
-/**
- * Available modules menu
- */
-export default class AvailableModulesMenu extends TranslatedComponent {
-
-  static propTypes = {
-    modules: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired,
-    onSelect: PropTypes.func.isRequired,
-    diffDetails: PropTypes.func,
-    m: PropTypes.object,
-    shipMass: PropTypes.number,
-    warning: PropTypes.func,
-    firstSlotId: PropTypes.string,
-    lastSlotId: PropTypes.string,
-    activeSlotId: PropTypes.string,
-    slotDiv: PropTypes.object
-  };
-
-  static defaultProps = {
-    shipMass: 0
-  };
-
-  /**
-   * Constructor
-   * @param  {Object} props   React Component properties
-   * @param  {Object} context React Component context
-   */
-  constructor(props, context) {
-    super(props);
-    this._hideDiff = this._hideDiff.bind(this);
-    this.state = this._initState(props, context);
-    this.slotItems = [];// Array to hold <li> refs.
-  }
-
-  /**
-   * Initiate the list of available moduels
-   * @param  {Object} props   React Component properties
-   * @param  {Object} context React Component context
-   * @return {Object}         list: Array of React Components, currentGroup Component if any
-   */
-  _initState(props, context) {
-    let translate = context.language.translate;
-    let { m, warning, shipMass, onSelect, modules, firstSlotId, lastSlotId } = props;
-    let list, currentGroup;
-
-    let buildGroup = this._buildGroup.bind(
-      this,
-      translate,
-      m,
-      warning,
-      shipMass - (m && m.mass ? m.mass : 0),
-      (m, event) => {
-        this._hideDiff(event);
-        onSelect(m);
-      }
-   );
-
-    if (modules instanceof Array) {
-      list = buildGroup(modules[0].grp, modules);
-    } else {
-      list = [];
-      // At present time slots with grouped options (Hardpoints and Internal) can be empty
-      if (m) {
-        let emptyId = 'empty';
-        if(this.firstSlotId == null) this.firstSlotId = emptyId;
-        let keyDown = this._keyDown.bind(this, onSelect);
-        list.push(<div className='empty-c upp' key={emptyId} data-id={emptyId} onClick={onSelect.bind(null, null)} onKeyDown={keyDown} tabIndex="0" ref={slotItem => this.slotItems[emptyId] = slotItem} >{translate('empty')}</div>);
-      }
-
-      // Need to regroup the modules by our own categorisation
-      let catmodules = {};
-      // Pre-create to preserve ordering
-      for (let cat in CATEGORIES) {
-        catmodules[cat] = [];
-      }
-      for (let g in modules) {
-        const moduleCategory = GRPCAT[g] || g;
-        const existing = catmodules[moduleCategory] || [];
-        catmodules[moduleCategory] = existing.concat(modules[g]);
-      }
-
-      for (let category in catmodules) {
-        let categoryHeader = false;
-        // Order through CATEGORIES if present
-        const categories = CATEGORIES[category] || [category];
-        if (categories && categories.length) {
-          for (let n in categories) {
-            const grp = categories[n];
-            // We now have the group and the category.  We might not have any modules, though...
-            if (modules[grp]) {
-              // Decide if we need a category header as well as a group header
-              if (categories.length === 1) {
-                // Show category header instead of group header
-                if (m && grp == m.grp) {
-                  list.push(<div ref={(elem) => this.groupElem = elem} key={category} className={'select-category upp'}>{translate(category)}</div>);
-                } else {
-                  list.push(<div key={category} className={'select-category upp'}>{translate(category)}</div>);
-                }
-              } else {
-                // Show category header as well as group header
-                if (!categoryHeader) {
-                  list.push(<div key={category} className={'select-category upp'}>{translate(category)}</div>);
-                  categoryHeader = true;
-                }
-                if (m && grp == m.grp) {
-                  list.push(<div ref={(elem) => this.groupElem = elem} key={grp} className={'select-group cap'}>{translate(grp)}</div>);
-                } else {
-                  list.push(<div key={grp} className={'select-group cap'}>{translate(grp)}</div>);
-                }
-              }
-              list.push(buildGroup(grp, modules[grp]));
-            }
-          }
-        }
-      }
-    }
-    let trackingFocus = false;
-    return { list, currentGroup, trackingFocus };
-  }
-
-  /**
-   * Generate React Components for Module Group
-   * @param  {Function} translate   Translate function
-   * @param  {Object} mountedModule Mounted Module
-   * @param  {Function} warningFunc Warning function
-   * @param  {number} mass          Mass
-   * @param  {function} onSelect    Select/Mount callback
-   * @param  {string} grp           Group name
-   * @param  {Array} modules        Available modules
-   * @return {*}      Available Module Group contents
-   * @param {*} firstSlotId ID of the first slot
-   * @param {*} lastSlotId ID of the last slot
-   */
-  _buildGroup(translate, mountedModule, warningFunc, mass, onSelect, grp, modules, firstSlotId, lastSlotId) {
-    let prevClass = null, prevRating = null, prevName;
-    let elems = [];
-
-    const sortedModules = modules.sort(this._moduleOrder);
-
-
-    // Calculate the number of items per class.  Used so we don't have long lists with only a few items in each row
-    const tmp = sortedModules.map((v, i) => v['class']).reduce((count, cls) => { count[cls] = ++count[cls] || 1; return count; }, {});
-    const itemsPerClass = Math.max.apply(null, Object.keys(tmp).map(key => tmp[key]));
-
-    let itemsOnThisRow = 0;
-    for (let i = 0; i < sortedModules.length; i++) {
-      let m = sortedModules[i];
-      let mount = null;
-      let disabled = false;
-      prevName = m.name;
-      if (ModuleUtils.isShieldGenerator(m.grp)) {
-        // Shield generators care about maximum hull mass
-        disabled = mass > m.maxmass;
-      } else if (m.maxmass) {
-        // Thrusters care about total mass
-        disabled = mass + m.mass > m.maxmass;
-      }
-      let active = mountedModule && mountedModule.id === m.id;
-      let classes = cn(m.name ? 'lc' : 'c', {
-        warning: !disabled && warningFunc && warningFunc(m),
-        active,
-        disabled
-      });
-      let eventHandlers;
-
-      if (disabled) {
-        eventHandlers = {
-          onKeyDown: this._keyDown.bind(this, null),
-          onKeyUp: this._keyUp.bind(this, null)
-
-        };
-      } else {
-        /**
-         * Get the ids of the first and last <li> elements in the <ul> that are focusable (i.e. are not active or disabled)
-         * Will be used to keep focus inside the <ul> on Tab and Shift-Tab while it is visible
-         */
-        if (this.firstSlotId == null) this.firstSlotId = sortedModules[i].id;
-        if (active) this.activeSlotId = sortedModules[i].id;
-        this.lastSlotId = sortedModules[i].id;
-
-        let showDiff = this._showDiff.bind(this, mountedModule, m);
-        let select = onSelect.bind(null, m);
-
-        eventHandlers = {
-          onMouseEnter: this._over.bind(this, showDiff),
-          onTouchStart: this._touchStart.bind(this, showDiff),
-          onTouchEnd: this._touchEnd.bind(this, select),
-          onMouseLeave: this._hideDiff,
-          onClick: select,
-          onKeyDown: this._keyDown.bind(this, select),
-          onKeyUp: this._keyUp.bind(this, select)
-        };
-      }
-
-      switch(m.mount) {
-        case 'F': mount = <MountFixed className={'lg'} />; break;
-        case 'G': mount = <MountGimballed className={'lg'}/>; break;
-        case 'T': mount = <MountTurret className={'lg'}/>; break;
-      }
-      if (m.name && m.name === prevName) {
-        // elems.push(<br key={'b' + m.grp + i} />);
-        itemsOnThisRow = 0;
-      }
-      if (itemsOnThisRow == 6 || i > 0 && sortedModules.length > 3 && itemsPerClass > 2 && m.class != prevClass && (m.rating != prevRating || m.mount)) {
-        elems.push(<br key={'b' + m.grp + i} />);
-        itemsOnThisRow = 0;
-      }
-      let tbIdx = (classes.indexOf('disabled') < 0) ? 0 : undefined;
-      elems.push(
-        <li key={m.id} data-id={m.id} className={classes} {...eventHandlers} tabIndex={tbIdx} ref={slotItem => this.slotItems[m.id] = slotItem}>
-          {mount}
-          {(mount ? ' ' : '') + m.class + m.rating + (m.missile ? '/' + m.missile : '') + (m.name ? ' ' + translate(m.name) : '')}
-        </li>
-      );
-
-      itemsOnThisRow++;
-      prevClass = m.class;
-      prevRating = m.rating;
-      prevName = m.name;
-    }
-    return <ul key={'modules' + grp}>{elems}</ul>;
-  }
-
-  /**
-   * Generate tooltip content for the difference between the
-   * mounted module and the hovered modules
-   * @param  {Object} mm    The module mounet currently
-   * @param  {Object} m     The hovered module
-   * @param  {DOMRect} rect DOMRect for target element
-   */
-  _showDiff(mm, m, rect) {
-    if (this.props.diffDetails) {
-      this.touchTimeout = null;
-      this.context.tooltip(this.props.diffDetails(m, mm), rect);
-    }
-  }
-
-  /**
-   * Mouse over diff handler
-   * @param  {Function} showDiff diff tooltip callback
-   * @param  {SyntheticEvent} event Event
-   */
-  _over(showDiff, event) {
-    event.preventDefault();
-    showDiff(event.currentTarget.getBoundingClientRect());
-  }
-
-  /**
-   * Toucch Start - Show diff after press, otherwise treat as tap
-   * @param  {Function} showDiff diff tooltip callback
-   * @param  {SyntheticEvent} event Event
-   */
-  _touchStart(showDiff, event) {
-    event.preventDefault();
-    let rect = event.currentTarget.getBoundingClientRect();
-    this.touchTimeout = setTimeout(showDiff.bind(this, rect), PRESS_THRESHOLD);
-  }
-
-  /**
-   * Touch End - Select module on tap
-   * @param  {Function} select Select module callback
-   * @param  {SyntheticEvent} event Event
-   */
-  _touchEnd(select, event) {
-    event.preventDefault();
-    if (this.touchTimeout !== null) {  // If timeout has not fired (been nulled out) yet
-      select();
-    }
-    this._hideDiff();
-  }
-
-  /**
-   * Key down - select module on Enter key, move to next/previous module on Tab/Shift-Tab, close on Esc
-   * @param  {Function} select Select module callback
-   * @param  {SyntheticEvent} event Event
-   */
-  _keyDown(select, event) {
-    let className = event.currentTarget.attributes['class'].value;
-    if (event.key == 'Enter' && className.indexOf('disabled') < 0 && className.indexOf('active') < 0) {
-      select();
-      return;
-    }
-    let elemId = event.currentTarget.attributes['data-id'].value;
-    if (className.indexOf('disabled') < 0 && event.key == 'Tab') {
-      if (event.shiftKey && elemId == this.firstSlotId) {
-        event.preventDefault();
-        this.slotItems[this.lastSlotId].focus();
-        return;
-      }
-      if (!event.shiftKey && elemId == this.lastSlotId) {
-        event.preventDefault();
-        this.slotItems[this.firstSlotId].focus();
-        return;
-      }
-    }
-  }
-
-  /**
-   * Key Up
-   * @param {Function} select Select function
-   * @param {SyntheticEvent} event Event
-   */
-  _keyUp(select,event) {
-    // nothing here yet
-  }
-
-  /**
-   * Hide diff tooltip
-   * @param  {SyntheticEvent} event Event
-   */
-  _hideDiff(event) {
-    clearTimeout(this.touchTimeout);
-    this.touchTimeout = null;
-    this.context.tooltip();
-  }
-
-  /**
-   * Order two modules suitably for display in module selection
-   * @param  {Object} a the first module
-   * @param  {Object} b the second module
-   * @return {int}      -1 if the first module should go first, 1 if the second module should go first
-   */
-  _moduleOrder(a, b) {
-    // Named modules go last
-    if (!a.name && b.name) {
-      return -1;
-    }
-    if (a.name && !b.name) {
-      return 1;
-    }
-    // Class ordered from highest (8) to lowest (1)
-    if (a.class < b.class) {
-      return 1;
-    }
-    if (a.class > b.class) {
-      return -1;
-    }
-    // Mount type, if applicable
-    if (a.mount && b.mount && a.mount !== b.mount) {
-      if (a.mount === 'F' || (a.mount === 'G' && b.mount === 'T')) {
-        return -1;
-      } else {
-        return 1;
-      }
-    }
-    // Rating ordered from highest (A) to lowest (E)
-    if (a.rating < b.rating) {
-      return -1;
-    }
-    if (a.rating > b.rating) {
-      return 1;
-    }
-    // Do not attempt to order by name at this point, as that mucks up the order of armour
-    return 0;
-  }
-
-  /**
-   * Scroll to mounted (if it exists) module group on mount
-   */
-  componentDidMount() {
-    if (this.groupElem) {  // Scroll to currently selected group
-      this.node.scrollTop = this.groupElem.offsetTop;
-    }
-    /**
-     * Set focus on active or first slot element, if applicable.
-     */
-    if (this.slotItems[this.activeSlotId]) {
-      this.slotItems[this.activeSlotId].focus();
-    } else if (this.slotItems[this.firstSlotId]) {
-      this.slotItems[this.firstSlotId].focus();
-    }
-  }
-  /**
-   * Set focus to slot element ref (if we have one) after modules component unmounts
-   */
-  componentWillUnmount() {
-    if(this.props.slotDiv) {
-      this.props.slotDiv.focus();
-    }
-  }
-
-  /**
-   * Update state based on property and context changes
-   * @param  {Object} nextProps   Incoming/Next properties
-   * @param  {Object} nextContext Incoming/Next conext
-   */
-  componentWillReceiveProps(nextProps, nextContext) {
-    this.setState(this._initState(nextProps, nextContext));
-  }
-
-  /**
-   * Render the list
-   * @return {React.Component} List
-   */
-  render() {
-    console.log('Tracking focus? ' + this.state.trackingFocus);
-    return (
-      <div ref={node => this.node = node}
-          className={cn('select', this.props.className)}
-          onScroll={this._hideDiff}
-          onClick={(e) => e.stopPropagation() }
-          onContextMenu={stopCtxPropagation}
-      >
-        {this.state.list}
-      </div>
-    );
-  }
-
-}
+import React from 'react';
+import PropTypes from 'prop-types';
+import * as ModuleUtils from '../shipyard/ModuleUtils';
+import TranslatedComponent from './TranslatedComponent';
+import { stopCtxPropagation } from '../utils/UtilityFunctions';
+import cn from 'classnames';
+import { MountFixed, MountGimballed, MountTurret } from './SvgIcons';
+
+const PRESS_THRESHOLD = 500; // mouse/touch down threshold
+
+/*
+ * Categorisation of module groups
+ */
+const GRPCAT = {
+  'sg': 'shields',
+  'bsg': 'shields',
+  'psg': 'shields',
+  'scb': 'shields',
+  'cc': 'limpet controllers',
+  'fx': 'limpet controllers',
+  'hb': 'limpet controllers',
+  'pc': 'limpet controllers',
+  'rpl': 'limpet controllers',
+  'pce': 'passenger cabins',
+  'pci': 'passenger cabins',
+  'pcm': 'passenger cabins',
+  'pcq': 'passenger cabins',
+  'fh': 'hangars',
+  'pv': 'hangars',
+  'fs': 'fuel',
+  'ft': 'fuel',
+  'hr': 'structural reinforcement',
+  'mrp': 'structural reinforcement',
+  'bl': 'lasers',
+  'pl': 'lasers',
+  'ul': 'lasers',
+  'ml': 'lasers',
+  'c': 'projectiles',
+  'mc': 'projectiles',
+  'axmc': 'experimental',
+  'fc': 'projectiles',
+  'rfl':  'experimental',
+  'pa': 'projectiles',
+  'rg': 'projectiles',
+  'mr': 'ordnance',
+  'axmr': 'experimental',
+  'rcpl': 'experimental',
+  'tp': 'ordnance',
+  'nl': 'ordnance',
+  'sc': 'scanners',
+  'ss': 'scanners',
+  // Utilities
+  'cs': 'scanners',
+  'kw': 'scanners',
+  'ws': 'scanners',
+  'xs': 'scanners',
+  'ch': 'defence',
+  'po': 'defence',
+  'ec': 'defence',
+  'sfn': 'defence',
+  // Standard
+  'gpp': 'guardian',
+  'gpc': 'guardian',
+  'ggc': 'guardian'
+};
+// Order here is the order in which items will be shown in the modules menu
+const CATEGORIES = {
+  // Internals
+  'am': ['am'],
+  'cr': ['cr'],
+  'fi': ['fi'],
+  'fuel': ['ft', 'fs'],
+  'hangars': ['fh', 'pv'],
+  'limpet controllers': ['cc', 'fx', 'hb', 'pc', 'rpl'],
+  'passenger cabins': ['pce', 'pci', 'pcm', 'pcq'],
+  'rf': ['rf'],
+  'shields': ['sg', 'bsg', 'psg', 'scb'],
+  'structural reinforcement': ['hr', 'mrp'],
+  'dc': ['dc'],
+  // Hardpoints
+  'lasers': ['pl', 'ul', 'bl', 'ml'],
+  'projectiles': ['mc', 'c', 'fc', 'pa', 'rg'],
+  'ordnance': ['mr', 'tp', 'nl'],
+  // Utilities
+  'sb': ['sb'],
+  'hs': ['hs'],
+  'defence': ['ch', 'po', 'ec'],
+  'scanners': ['sc', 'ss', 'cs', 'kw', 'ws'], // Overloaded with internal scanners
+  // Experimental
+  'experimental': ['axmc', 'axmr', 'rfl', 'xs', 'sfn', 'rcpl'],
+
+  // Guardian
+  'guardian': ['gpp', 'gpc', 'ggc']
+};
+
+/**
+ * Available modules menu
+ */
+export default class AvailableModulesMenu extends TranslatedComponent {
+
+  static propTypes = {
+    modules: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired,
+    onSelect: PropTypes.func.isRequired,
+    diffDetails: PropTypes.func,
+    m: PropTypes.object,
+    shipMass: PropTypes.number,
+    warning: PropTypes.func,
+    firstSlotId: PropTypes.string,
+    lastSlotId: PropTypes.string,
+    activeSlotId: PropTypes.string,
+    slotDiv: PropTypes.object
+  };
+
+  static defaultProps = {
+    shipMass: 0
+  };
+
+  /**
+   * Constructor
+   * @param  {Object} props   React Component properties
+   * @param  {Object} context React Component context
+   */
+  constructor(props, context) {
+    super(props);
+    this._hideDiff = this._hideDiff.bind(this);
+    this.state = this._initState(props, context);
+    this.slotItems = [];// Array to hold <li> refs.
+  }
+
+  /**
+   * Initiate the list of available moduels
+   * @param  {Object} props   React Component properties
+   * @param  {Object} context React Component context
+   * @return {Object}         list: Array of React Components, currentGroup Component if any
+   */
+  _initState(props, context) {
+    let translate = context.language.translate;
+    let { m, warning, shipMass, onSelect, modules, firstSlotId, lastSlotId } = props;
+    let list, currentGroup;
+
+    let buildGroup = this._buildGroup.bind(
+      this,
+      translate,
+      m,
+      warning,
+      shipMass - (m && m.mass ? m.mass : 0),
+      (m, event) => {
+        this._hideDiff(event);
+        onSelect(m);
+      }
+   );
+
+    if (modules instanceof Array) {
+      list = buildGroup(modules[0].grp, modules);
+    } else {
+      list = [];
+      // At present time slots with grouped options (Hardpoints and Internal) can be empty
+      if (m) {
+        let emptyId = 'empty';
+        if(this.firstSlotId == null) this.firstSlotId = emptyId;
+        let keyDown = this._keyDown.bind(this, onSelect);
+        list.push(<div className='empty-c upp' key={emptyId} data-id={emptyId} onClick={onSelect.bind(null, null)} onKeyDown={keyDown} tabIndex="0" ref={slotItem => this.slotItems[emptyId] = slotItem} >{translate('empty')}</div>);
+      }
+
+      // Need to regroup the modules by our own categorisation
+      let catmodules = {};
+      // Pre-create to preserve ordering
+      for (let cat in CATEGORIES) {
+        catmodules[cat] = [];
+      }
+      for (let g in modules) {
+        const moduleCategory = GRPCAT[g] || g;
+        const existing = catmodules[moduleCategory] || [];
+        catmodules[moduleCategory] = existing.concat(modules[g]);
+      }
+
+      for (let category in catmodules) {
+        let categoryHeader = false;
+        // Order through CATEGORIES if present
+        const categories = CATEGORIES[category] || [category];
+        if (categories && categories.length) {
+          for (let n in categories) {
+            const grp = categories[n];
+            // We now have the group and the category.  We might not have any modules, though...
+            if (modules[grp]) {
+              // Decide if we need a category header as well as a group header
+              if (categories.length === 1) {
+                // Show category header instead of group header
+                if (m && grp == m.grp) {
+                  list.push(<div ref={(elem) => this.groupElem = elem} key={category} className={'select-category upp'}>{translate(category)}</div>);
+                } else {
+                  list.push(<div key={category} className={'select-category upp'}>{translate(category)}</div>);
+                }
+              } else {
+                // Show category header as well as group header
+                if (!categoryHeader) {
+                  list.push(<div key={category} className={'select-category upp'}>{translate(category)}</div>);
+                  categoryHeader = true;
+                }
+                if (m && grp == m.grp) {
+                  list.push(<div ref={(elem) => this.groupElem = elem} key={grp} className={'select-group cap'}>{translate(grp)}</div>);
+                } else {
+                  list.push(<div key={grp} className={'select-group cap'}>{translate(grp)}</div>);
+                }
+              }
+              list.push(buildGroup(grp, modules[grp]));
+            }
+          }
+        }
+      }
+    }
+    let trackingFocus = false;
+    return { list, currentGroup, trackingFocus };
+  }
+
+  /**
+   * Generate React Components for Module Group
+   * @param  {Function} translate   Translate function
+   * @param  {Object} mountedModule Mounted Module
+   * @param  {Function} warningFunc Warning function
+   * @param  {number} mass          Mass
+   * @param  {function} onSelect    Select/Mount callback
+   * @param  {string} grp           Group name
+   * @param  {Array} modules        Available modules
+   * @param  {string} firstSlotId   id of first slot item
+   * @param  {string} lastSlotId    id of last slot item
+   * @return {React.Component}      Available Module Group contents
+   */
+  _buildGroup(translate, mountedModule, warningFunc, mass, onSelect, grp, modules, firstSlotId, lastSlotId) {
+    let prevClass = null, prevRating = null, prevName;
+    let elems = [];
+
+    const sortedModules = modules.sort(this._moduleOrder);
+
+
+    // Calculate the number of items per class.  Used so we don't have long lists with only a few items in each row
+    const tmp = sortedModules.map((v, i) => v['class']).reduce((count, cls) => { count[cls] = ++count[cls] || 1; return count; }, {});
+    const itemsPerClass = Math.max.apply(null, Object.keys(tmp).map(key => tmp[key]));
+
+    let itemsOnThisRow = 0;
+    for (let i = 0; i < sortedModules.length; i++) {
+      let m = sortedModules[i];
+      let mount = null;
+      let disabled = false;
+      prevName = m.name;
+      if (ModuleUtils.isShieldGenerator(m.grp)) {
+        // Shield generators care about maximum hull mass
+        disabled = mass > m.maxmass;
+      } else if (m.maxmass) {
+        // Thrusters care about total mass
+        disabled = mass + m.mass > m.maxmass;
+      }
+      let active = mountedModule && mountedModule.id === m.id;
+      let classes = cn(m.name ? 'lc' : 'c', {
+        warning: !disabled && warningFunc && warningFunc(m),
+        active,
+        disabled
+      });
+      let eventHandlers;
+
+      if (disabled) {
+        eventHandlers = {
+          onKeyDown: this._keyDown.bind(this, null),
+          onKeyUp: this._keyUp.bind(this, null)
+
+        };
+      } else {
+        /**
+         * Get the ids of the first and last <li> elements in the <ul> that are focusable (i.e. are not active or disabled)
+         * Will be used to keep focus inside the <ul> on Tab and Shift-Tab while it is visible
+         */
+        if (this.firstSlotId == null) this.firstSlotId = sortedModules[i].id;
+        if (active) this.activeSlotId = sortedModules[i].id;
+        this.lastSlotId = sortedModules[i].id;
+
+        let showDiff = this._showDiff.bind(this, mountedModule, m);
+        let select = onSelect.bind(null, m);
+
+        eventHandlers = {
+          onMouseEnter: this._over.bind(this, showDiff),
+          onTouchStart: this._touchStart.bind(this, showDiff),
+          onTouchEnd: this._touchEnd.bind(this, select),
+          onMouseLeave: this._hideDiff,
+          onClick: select,
+          onKeyDown: this._keyDown.bind(this, select),
+          onKeyUp: this._keyUp.bind(this, select)
+        };
+      }
+
+      switch(m.mount) {
+        case 'F': mount = <MountFixed className={'lg'} />; break;
+        case 'G': mount = <MountGimballed className={'lg'}/>; break;
+        case 'T': mount = <MountTurret className={'lg'}/>; break;
+      }
+      if (m.name && m.name === prevName) {
+        // elems.push(<br key={'b' + m.grp + i} />);
+        itemsOnThisRow = 0;
+      }
+      if (itemsOnThisRow == 6 || i > 0 && sortedModules.length > 3 && itemsPerClass > 2 && m.class != prevClass && (m.rating != prevRating || m.mount)) {
+        elems.push(<br key={'b' + m.grp + i} />);
+        itemsOnThisRow = 0;
+      }
+      let tbIdx = (classes.indexOf('disabled') < 0) ? 0 : undefined;
+      elems.push(
+        <li key={m.id} data-id={m.id} className={classes} {...eventHandlers} tabIndex={tbIdx} ref={slotItem => this.slotItems[m.id] = slotItem}>
+          {mount}
+          {(mount ? ' ' : '') + m.class + m.rating + (m.missile ? '/' + m.missile : '') + (m.name ? ' ' + translate(m.name) : '')}
+        </li>
+      );
+
+      itemsOnThisRow++;
+      prevClass = m.class;
+      prevRating = m.rating;
+      prevName = m.name;
+    }
+    return <ul key={'modules' + grp}>{elems}</ul>;
+  }
+
+  /**
+   * Generate tooltip content for the difference between the
+   * mounted module and the hovered modules
+   * @param  {Object} mm    The module mounet currently
+   * @param  {Object} m     The hovered module
+   * @param  {DOMRect} rect DOMRect for target element
+   */
+  _showDiff(mm, m, rect) {
+    if (this.props.diffDetails) {
+      this.touchTimeout = null;
+      this.context.tooltip(this.props.diffDetails(m, mm), rect);
+    }
+  }
+
+  /**
+   * Mouse over diff handler
+   * @param  {Function} showDiff diff tooltip callback
+   * @param  {SyntheticEvent} event Event
+   */
+  _over(showDiff, event) {
+    event.preventDefault();
+    showDiff(event.currentTarget.getBoundingClientRect());
+  }
+
+  /**
+   * Toucch Start - Show diff after press, otherwise treat as tap
+   * @param  {Function} showDiff diff tooltip callback
+   * @param  {SyntheticEvent} event Event
+   */
+  _touchStart(showDiff, event) {
+    event.preventDefault();
+    let rect = event.currentTarget.getBoundingClientRect();
+    this.touchTimeout = setTimeout(showDiff.bind(this, rect), PRESS_THRESHOLD);
+  }
+
+  /**
+   * Touch End - Select module on tap
+   * @param  {Function} select Select module callback
+   * @param  {SyntheticEvent} event Event
+   */
+  _touchEnd(select, event) {
+    event.preventDefault();
+    if (this.touchTimeout !== null) {  // If timeout has not fired (been nulled out) yet
+      select();
+    }
+    this._hideDiff();
+  }
+
+  /**
+   * Key down - select module on Enter key, move to next/previous module on Tab/Shift-Tab, close on Esc
+   * @param  {Function} select Select module callback
+   * @param  {SyntheticEvent} event Event
+   */
+  _keyDown(select, event) {
+    let className = event.currentTarget.attributes['class'].value;
+    if (event.key == 'Enter' && className.indexOf('disabled') < 0 && className.indexOf('active') < 0) {
+      select();
+      return;
+    }
+    let elemId = event.currentTarget.attributes['data-id'].value;
+    if (className.indexOf('disabled') < 0 && event.key == 'Tab') {
+      if (event.shiftKey && elemId == this.firstSlotId) {
+        event.preventDefault();
+        this.slotItems[this.lastSlotId].focus();
+        return;
+      }
+      if (!event.shiftKey && elemId == this.lastSlotId) {
+        event.preventDefault();
+        this.slotItems[this.firstSlotId].focus();
+        return;
+      }
+    }
+  }
+
+  /**
+   * Key Up
+   * @param {Function}  select Select module callback
+   * @param {SytheticEvent} event Event
+   */
+  _keyUp(select,event) {
+    // nothing here yet
+  }
+
+  /**
+   * Hide diff tooltip
+   * @param  {SyntheticEvent} event Event
+   */
+  _hideDiff(event) {
+    clearTimeout(this.touchTimeout);
+    this.touchTimeout = null;
+    this.context.tooltip();
+  }
+
+  /**
+   * Order two modules suitably for display in module selection
+   * @param  {Object} a the first module
+   * @param  {Object} b the second module
+   * @return {int}      -1 if the first module should go first, 1 if the second module should go first
+   */
+  _moduleOrder(a, b) {
+    // Named modules go last
+    if (!a.name && b.name) {
+      return -1;
+    }
+    if (a.name && !b.name) {
+      return 1;
+    }
+    // Class ordered from highest (8) to lowest (1)
+    if (a.class < b.class) {
+      return 1;
+    }
+    if (a.class > b.class) {
+      return -1;
+    }
+    // Mount type, if applicable
+    if (a.mount && b.mount && a.mount !== b.mount) {
+      if (a.mount === 'F' || (a.mount === 'G' && b.mount === 'T')) {
+        return -1;
+      } else {
+        return 1;
+      }
+    }
+    // Rating ordered from highest (A) to lowest (E)
+    if (a.rating < b.rating) {
+      return -1;
+    }
+    if (a.rating > b.rating) {
+      return 1;
+    }
+    // Do not attempt to order by name at this point, as that mucks up the order of armour
+    return 0;
+  }
+
+  /**
+   * Scroll to mounted (if it exists) module group on mount
+   */
+  componentDidMount() {
+    if (this.groupElem) {  // Scroll to currently selected group
+      this.node.scrollTop = this.groupElem.offsetTop;
+    }
+    /**
+     * Set focus on active or first slot element, if applicable.
+     */
+    if (this.slotItems[this.activeSlotId]) {
+      this.slotItems[this.activeSlotId].focus();
+    } else if (this.slotItems[this.firstSlotId]) {
+      this.slotItems[this.firstSlotId].focus();
+    }
+  }
+  /**
+   * Handle focus if the component updates
+   * 
+   */
+  componentWillUnmount() {
+    if(this.props.slotDiv) {
+      this.props.slotDiv.focus();
+    }
+  }
+
+  /**
+   * Update state based on property and context changes
+   * @param  {Object} nextProps   Incoming/Next properties
+   * @param  {Object} nextContext Incoming/Next conext
+   */
+  componentWillReceiveProps(nextProps, nextContext) {
+    this.setState(this._initState(nextProps, nextContext));
+  }
+
+  /**
+   * Render the list
+   * @return {React.Component} List
+   */
+  render() {
+    return (
+      <div ref={node => this.node = node}
+          className={cn('select', this.props.className)}
+          onScroll={this._hideDiff}
+          onClick={(e) => e.stopPropagation() }
+          onContextMenu={stopCtxPropagation}
+      >
+        {this.state.list}
+      </div>
+    );
+  }
+
+}
diff --git a/src/app/components/HardpointSlotSection.jsx b/src/app/components/HardpointSlotSection.jsx
index dfcb9acb..a603ecc5 100644
--- a/src/app/components/HardpointSlotSection.jsx
+++ b/src/app/components/HardpointSlotSection.jsx
@@ -17,14 +17,25 @@ export default class HardpointSlotSection extends SlotSection {
    */
   constructor(props, context) {
     super(props, context, 'hardpoints', 'hardpoints');
-
     this._empty = this._empty.bind(this);
+    this.selectedRefId = null;
+    this.firstRefId = 'emptyall';
+    this.lastRefId = 'nl-F';
+  }
+
+  /**
+   * Handle focus when component updates
+   * @param {Object} prevProps React Component properties
+   */
+  componentDidUpdate(prevProps) {
+    this._handleSectionFocus(prevProps,this.firstRefId, this.lastRefId);
   }
 
   /**
    * Empty all slots
    */
   _empty() {
+    this.selectedRefId = 'emptyall';
     this.props.ship.emptyWeapons();
     this.props.onChange();
     this._close();
@@ -37,6 +48,7 @@ export default class HardpointSlotSection extends SlotSection {
    * @param  {SyntheticEvent} event   Event
    */
   _fill(group, mount, event) {
+    this.selectedRefId = group + '-' + mount;
     this.props.ship.useWeapon(group, mount, null, event.getModifierState('Alt'));
     this.props.onChange();
     this._close();
@@ -95,52 +107,52 @@ export default class HardpointSlotSection extends SlotSection {
 
     return <div className='select hardpoint' onClick={(e) => e.stopPropagation()} onContextMenu={stopCtxPropagation}>
       <ul>
-        <li className='lc' onClick={this._empty}>{translate('empty all')}</li>
+        <li className='lc' tabIndex='0' onClick={this._empty} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['emptyall'] = smRef}>{translate('empty all')}</li>
         <li className='optional-hide' style={{ textAlign: 'center', marginTop: '1em' }}>{translate('PHRASE_ALT_ALL')}</li>
       </ul>
       <div className='select-group cap'>{translate('pl')}</div>
       <ul>
-        <li className='c' onClick={_fill.bind(this, 'pl', 'F')}><MountFixed className='lg'/></li>
-        <li className='c' onClick={_fill.bind(this, 'pl', 'G')}><MountGimballed className='lg'/></li>
-        <li className='c' onClick={_fill.bind(this, 'pl', 'T')}><MountTurret className='lg'/></li>
+        <li className='c' tabIndex='0' onClick={_fill.bind(this, 'pl', 'F')} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['pl-F'] = smRef}><MountFixed className='lg'/></li>
+        <li className='c' tabIndex='0' onClick={_fill.bind(this, 'pl', 'G')} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['pl-G'] = smRef}><MountGimballed className='lg'/></li>
+        <li className='c' tabIndex='0' onClick={_fill.bind(this, 'pl', 'T')} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['pl-T'] = smRef}><MountTurret className='lg'/></li>
       </ul>
       <div className='select-group cap'>{translate('ul')}</div>
       <ul>
-        <li className='c' onClick={_fill.bind(this, 'ul', 'F')}><MountFixed className='lg'/></li>
-        <li className='c' onClick={_fill.bind(this, 'ul', 'G')}><MountGimballed className='lg'/></li>
-        <li className='c' onClick={_fill.bind(this, 'ul', 'T')}><MountTurret className='lg'/></li>
+        <li className='c' tabIndex='0' onClick={_fill.bind(this, 'ul', 'F')} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['ul-F'] = smRef}><MountFixed className='lg'/></li>
+        <li className='c' tabIndex='0' onClick={_fill.bind(this, 'ul', 'G')} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['ul-G'] = smRef}><MountGimballed className='lg'/></li>
+        <li className='c' tabIndex='0' onClick={_fill.bind(this, 'ul', 'T')} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['ul-T'] = smRef}><MountTurret className='lg'/></li>
       </ul>
       <div className='select-group cap'>{translate('bl')}</div>
       <ul>
-        <li className='c' onClick={_fill.bind(this, 'bl', 'F')}><MountFixed className='lg'/></li>
-        <li className='c' onClick={_fill.bind(this, 'bl', 'G')}><MountGimballed className='lg'/></li>
-        <li className='c' onClick={_fill.bind(this, 'bl', 'T')}><MountTurret className='lg'/></li>
+        <li className='c' tabIndex='0' onClick={_fill.bind(this, 'bl', 'F')} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['bl-F'] = smRef}><MountFixed className='lg'/></li>
+        <li className='c' tabIndex='0' onClick={_fill.bind(this, 'bl', 'G')} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['bl-G'] = smRef}><MountGimballed className='lg'/></li>
+        <li className='c' tabIndex='0' onClick={_fill.bind(this, 'bl', 'T')} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['bl-T'] = smRef}><MountTurret className='lg'/></li>
       </ul>
       <div className='select-group cap'>{translate('mc')}</div>
       <ul>
-        <li className='c' onClick={_fill.bind(this, 'mc', 'F')}><MountFixed className='lg'/></li>
-        <li className='c' onClick={_fill.bind(this, 'mc', 'G')}><MountGimballed className='lg'/></li>
-        <li className='c' onClick={_fill.bind(this, 'mc', 'T')}><MountTurret className='lg'/></li>
+        <li className='c' tabIndex='0' onClick={_fill.bind(this, 'mc', 'F')} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['mc-F'] = smRef}><MountFixed className='lg'/></li>
+        <li className='c' tabIndex='0' onClick={_fill.bind(this, 'mc', 'G')} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['mc-G'] = smRef}><MountGimballed className='lg'/></li>
+        <li className='c' tabIndex='0' onClick={_fill.bind(this, 'mc', 'T')} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['mc-T'] = smRef}><MountTurret className='lg'/></li>
       </ul>
       <div className='select-group cap'>{translate('c')}</div>
       <ul>
-        <li className='c' onClick={_fill.bind(this, 'c', 'F')}><MountFixed className='lg'/></li>
-        <li className='c' onClick={_fill.bind(this, 'c', 'G')}><MountGimballed className='lg'/></li>
-        <li className='c' onClick={_fill.bind(this, 'c', 'T')}><MountTurret className='lg'/></li>
+        <li className='c' tabIndex='0' onClick={_fill.bind(this, 'c', 'F')} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['c-F'] = smRef}><MountFixed className='lg'/></li>
+        <li className='c' tabIndex='0' onClick={_fill.bind(this, 'c', 'G')} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['c-G'] = smRef}><MountGimballed className='lg'/></li>
+        <li className='c' tabIndex='0' onClick={_fill.bind(this, 'c', 'T')} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['c-T'] = smRef}><MountTurret className='lg'/></li>
       </ul>
       <div className='select-group cap'>{translate('fc')}</div>
       <ul>
-        <li className='c' onClick={_fill.bind(this, 'fc', 'F')}><MountFixed className='lg'/></li>
-        <li className='c' onClick={_fill.bind(this, 'fc', 'G')}><MountGimballed className='lg'/></li>
-        <li className='c' onClick={_fill.bind(this, 'fc', 'T')}><MountTurret className='lg'/></li>
+        <li className='c' tabIndex='0' onClick={_fill.bind(this, 'fc', 'F')} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['fc-F'] = smRef}><MountFixed className='lg'/></li>
+        <li className='c' tabIndex='0' onClick={_fill.bind(this, 'fc', 'G')} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['fc-G'] = smRef}><MountGimballed className='lg'/></li>
+        <li className='c' tabIndex='0' onClick={_fill.bind(this, 'fc', 'T')} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['fc-T'] = smRef}><MountTurret className='lg'/></li>
       </ul>
       <div className='select-group cap'>{translate('pa')}</div>
       <ul>
-        <li className='lc' onClick={_fill.bind(this, 'pa', 'F')}>{translate('pa')}</li>
+        <li className='lc' tabIndex='0'  onClick={_fill.bind(this, 'pa', 'F')} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['pa-F'] = smRef}>{translate('pa')}</li>
       </ul>
       <div className='select-group cap'>{translate('nl')}</div>
       <ul>
-        <li className='lc' onClick={_fill.bind(this, 'nl', 'F')}>{translate('nl')}</li>
+        <li className='lc' tabIndex='0' onClick={_fill.bind(this, 'nl', 'F')} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['nl-F'] = smRef}>{translate('nl')}</li>
       </ul>
     </div>;
   }
diff --git a/src/app/components/InternalSlotSection.jsx b/src/app/components/InternalSlotSection.jsx
index dd4b00b5..f7995c34 100644
--- a/src/app/components/InternalSlotSection.jsx
+++ b/src/app/components/InternalSlotSection.jsx
@@ -18,7 +18,6 @@ export default class InternalSlotSection extends SlotSection {
    */
   constructor(props, context) {
     super(props, context, 'internal', 'optional internal');
-
     this._empty = this._empty.bind(this);
     this._fillWithCargo = this._fillWithCargo.bind(this);
     this._fillWithCells = this._fillWithCells.bind(this);
@@ -29,12 +28,24 @@ export default class InternalSlotSection extends SlotSection {
     this._fillWithFirstClassCabins = this._fillWithFirstClassCabins.bind(this);
     this._fillWithBusinessClassCabins = this._fillWithBusinessClassCabins.bind(this);
     this._fillWithEconomyClassCabins = this._fillWithEconomyClassCabins.bind(this);
+    this.selectedRefId = null;
+    this.firstRefId = 'emptyall';
+    this.lastRefId = this.sectionRefArr['pcq'] ? 'pcq' : 'pcm';
+  }
+
+  /**
+   * Handle focus when component updates
+   * @param {Object} prevProps React Component properties
+   */
+  componentDidUpdate(prevProps) {
+    this._handleSectionFocus(prevProps,this.firstRefId, this.lastRefId);
   }
 
   /**
    * Empty all slots
    */
   _empty() {
+    this.selectedRefId = 'emptyall';
     this.props.ship.emptyInternal();
     this.props.onChange();
     this._close();
@@ -45,6 +56,7 @@ export default class InternalSlotSection extends SlotSection {
    * @param  {SyntheticEvent} event Event
    */
   _fillWithCargo(event) {
+    this.selectedRefId = 'cargo';
     let clobber = event.getModifierState('Alt');
     let ship = this.props.ship;
     ship.internal.forEach((slot) => {
@@ -61,6 +73,7 @@ export default class InternalSlotSection extends SlotSection {
    * @param  {SyntheticEvent} event Event
    */
   _fillWithFuelTanks(event) {
+    this.selectedRefId = 'ft';
     let clobber = event.getModifierState('Alt');
     let ship = this.props.ship;
     ship.internal.forEach((slot) => {
@@ -77,6 +90,7 @@ export default class InternalSlotSection extends SlotSection {
    * @param  {SyntheticEvent} event Event
    */
   _fillWithLuxuryCabins(event) {
+    this.selectedRefId = 'pcq';
     let clobber = event.getModifierState('Alt');
     let ship = this.props.ship;
     ship.internal.forEach((slot) => {
@@ -93,6 +107,7 @@ export default class InternalSlotSection extends SlotSection {
    * @param  {SyntheticEvent} event Event
    */
   _fillWithFirstClassCabins(event) {
+    this.selectedRefId = 'pcm';
     let clobber = event.getModifierState('Alt');
     let ship = this.props.ship;
     ship.internal.forEach((slot) => {
@@ -109,6 +124,7 @@ export default class InternalSlotSection extends SlotSection {
    * @param  {SyntheticEvent} event Event
    */
   _fillWithBusinessClassCabins(event) {
+    this.selectedRefId = 'pci';
     let clobber = event.getModifierState('Alt');
     let ship = this.props.ship;
     ship.internal.forEach((slot) => {
@@ -125,6 +141,7 @@ export default class InternalSlotSection extends SlotSection {
    * @param  {SyntheticEvent} event Event
    */
   _fillWithEconomyClassCabins(event) {
+    this.selectedRefId = 'pce';
     let clobber = event.getModifierState('Alt');
     let ship = this.props.ship;
     ship.internal.forEach((slot) => {
@@ -141,6 +158,7 @@ export default class InternalSlotSection extends SlotSection {
    * @param  {SyntheticEvent} event Event
    */
   _fillWithCells(event) {
+    this.selectedRefId = 'scb';
     let clobber = event.getModifierState('Alt');
     let ship = this.props.ship;
     let chargeCap = 0; // Capacity of single activation
@@ -160,6 +178,7 @@ export default class InternalSlotSection extends SlotSection {
    * @param  {SyntheticEvent} event Event
    */
   _fillWithArmor(event) {
+    this.selectedRefId = 'hr';
     let clobber = event.getModifierState('Alt');
     let ship = this.props.ship;
     ship.internal.forEach((slot) => {
@@ -176,6 +195,7 @@ export default class InternalSlotSection extends SlotSection {
    * @param  {SyntheticEvent} event Event
    */
   _fillWithModuleReinforcementPackages(event) {
+    this.selectedRefId = 'mrp';
     let clobber = event.getModifierState('Alt');
     let ship = this.props.ship;
     ship.internal.forEach((slot) => {
@@ -240,16 +260,16 @@ export default class InternalSlotSection extends SlotSection {
   _getSectionMenu(translate, ship) {
     return <div className='select' onClick={e => e.stopPropagation()} onContextMenu={stopCtxPropagation}>
       <ul>
-        <li className='lc' onClick={this._empty}>{translate('empty all')}</li>
-        <li className='lc' onClick={this._fillWithCargo}>{translate('cargo')}</li>
-        <li className='lc' onClick={this._fillWithCells}>{translate('scb')}</li>
-        <li className='lc' onClick={this._fillWithArmor}>{translate('hr')}</li>
-        <li className='lc' onClick={this._fillWithModuleReinforcementPackages}>{translate('mrp')}</li>
-        <li className='lc' onClick={this._fillWithFuelTanks}>{translate('ft')}</li>
-        <li className='lc' onClick={this._fillWithEconomyClassCabins}>{translate('pce')}</li>
-        <li className='lc' onClick={this._fillWithBusinessClassCabins}>{translate('pci')}</li>
-        <li className='lc' onClick={this._fillWithFirstClassCabins}>{translate('pcm')}</li>
-	{ ship.luxuryCabins ? <li className='lc' onClick={this._fillWithLuxuryCabins}>{translate('pcq')}</li> : ''}
+        <li className='lc' tabIndex='0' onClick={this._empty} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['emptyall'] = smRef}>{translate('empty all')}</li>
+        <li className='lc' tabIndex='0' onClick={this._fillWithCargo} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['cargo'] = smRef}>{translate('cargo')}</li>
+        <li className='lc' tabIndex='0' onClick={this._fillWithCells} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['scb'] = smRef}>{translate('scb')}</li>
+        <li className='lc' tabIndex='0' onClick={this._fillWithArmor} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['hr'] = smRef}>{translate('hr')}</li>
+        <li className='lc' tabIndex='0' onClick={this._fillWithModuleReinforcementPackages} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['mrp'] = smRef}>{translate('mrp')}</li>
+        <li className='lc' tabIndex='0' onClick={this._fillWithFuelTanks} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['ft'] = smRef}>{translate('ft')}</li>
+        <li className='lc' tabIndex='0' onClick={this._fillWithEconomyClassCabins} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['pce'] = smRef}>{translate('pce')}</li>
+        <li className='lc' tabIndex='0' onClick={this._fillWithBusinessClassCabins} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['pci'] = smRef}>{translate('pci')}</li>
+        <li className='lc' tabIndex='0' onClick={this._fillWithFirstClassCabins} onKeyDown={ship.luxuryCabins ? '' : this._keyDown} ref={smRef => this.sectionRefArr['pcm'] = smRef}>{translate('pcm')}</li>
+	{ ship.luxuryCabins ? <li className='lc' tabIndex='0' onClick={this._fillWithLuxuryCabins} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['pcq'] = smRef}>{translate('pcq')}</li> : ''}
         <li className='optional-hide' style={{ textAlign: 'center', marginTop: '1em' }}>{translate('PHRASE_ALT_ALL')}</li>
       </ul>
     </div>;
diff --git a/src/app/components/ModificationsMenu.jsx b/src/app/components/ModificationsMenu.jsx
index 8755e836..55dea6f6 100644
--- a/src/app/components/ModificationsMenu.jsx
+++ b/src/app/components/ModificationsMenu.jsx
@@ -1,476 +1,474 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import * as _ from 'lodash';
-import TranslatedComponent from './TranslatedComponent';
-import { isEmpty, stopCtxPropagation } from '../utils/UtilityFunctions';
-import cn from 'classnames';
-import { Modifications } from 'coriolis-data/dist';
-import Modification from './Modification';
-import {
-  getBlueprint,
-  blueprintTooltip,
-  setPercent,
-  getPercent,
-  setRandom,
-  specialToolTip
-} from '../utils/BlueprintFunctions';
-
-/**
- * Modifications menu
- */
-export default class ModificationsMenu extends TranslatedComponent {
-
-  static propTypes = {
-    ship: PropTypes.object.isRequired,
-    m: PropTypes.object.isRequired,
-    marker: PropTypes.string.isRequired,
-    onChange: PropTypes.func.isRequired,
-    modButton:PropTypes.object
-  };
-
-  /**
-   * Constructor
-   * @param  {Object} props   React Component properties
-   * @param  {Object} context React Component context
-   */
-  constructor(props, context) {
-    super(props);
-
-    this._toggleBlueprintsMenu = this._toggleBlueprintsMenu.bind(this);
-    this._toggleSpecialsMenu = this._toggleSpecialsMenu.bind(this);
-    this._rollFifty = this._rollFifty.bind(this);
-    this._rollRandom = this._rollRandom.bind(this);
-    this._rollBest = this._rollBest.bind(this);
-    this._rollWorst = this._rollWorst.bind(this);
-    this._reset = this._reset.bind(this);
-
-    this._keyDown = this._keyDown.bind(this);
-
-    this.modItems = [];// Array to hold various element refs (<li>, <div>, <ul>, etc.)
-    this.firstModId = null;
-    this.firstBPLabel = null;// First item in mod menu
-    this.lastModId = null;
-    this.lastNeId = null;// Last number editor id. Used to set focus to last number editor when shift-tab pressed on first element in mod menu.
-    this.modValDidChange = false; // used to determine if component update was caused by change in modification value.
-    this._handleModChange = this._handleModChange.bind(this);
-
-    this.state = {
-      blueprintMenuOpened: !(props.m.blueprint && props.m.blueprint.name),
-      specialMenuOpened: false
-    };
-  }
-
-  /**
-   * Render the blueprints
-   * @param  {Object} props   React component properties
-   * @param  {Object} context React component context
-   * @return {Object}         list: Array of React Components
-   */
-  _renderBlueprints(props, context) {
-    const { m } = props;
-    const { language, tooltip, termtip } = context;
-    const translate = language.translate;
-    const blueprints = [];
-    for (const blueprintName in Modifications.modules[m.grp].blueprints) {
-      const blueprint = getBlueprint(blueprintName, m);
-      let blueprintGrades = [];
-      for (let grade in Modifications.modules[m.grp].blueprints[blueprintName].grades) {
-        // Grade is a string in the JSON so make it a number
-        grade = Number(grade);
-        const classes = cn('c', {
-          active: m.blueprint && blueprint.id === m.blueprint.id && grade === m.blueprint.grade
-        });
-        const close = this._blueprintSelected.bind(this, blueprintName, grade);
-        const key = blueprintName + ':' + grade;
-        const tooltipContent = blueprintTooltip(translate, blueprint.grades[grade], Modifications.modules[m.grp].blueprints[blueprintName].grades[grade].engineers, m.grp);
-
-
-        blueprintGrades.unshift(<li key={key} tabIndex="0" data-id={key} className={classes} style={{ width: '2em' }} onMouseOver={termtip.bind(null, tooltipContent)} onMouseOut={tooltip.bind(null, null)} onClick={close} onKeyDown={this._keyDown} ref={modItem => this.modItems[key] = modItem}>{grade}</li>);
-      }
-      if (blueprintGrades) {
-        const thisLen = blueprintGrades.length;
-        if (this.firstModId == null) this.firstModId = blueprintGrades[0].key;
-        this.lastModId = blueprintGrades[thisLen - 1].key;
-        blueprints.push(<div key={blueprint.name} className={'select-group cap'}>{translate(blueprint.name)}</div>);
-        blueprints.push(<ul key={blueprintName}>{blueprintGrades}</ul>);
-      }
-    }
-    return blueprints;
-  }
-
-  /**
-   * Key down - select module on Enter key, move to next/previous module on Tab/Shift-Tab, close on Esc
-   * @param  {Function} event Select module callback
-   */
-  _keyDown(event) {
-    let className = null;
-    let elemId = null;
-    if (event.currentTarget.attributes['class']) className = event.currentTarget.attributes['class'].value;
-    if (event.currentTarget.attributes['data-id']) elemId = event.currentTarget.attributes['data-id'].value;
-
-    if (event.key == 'Enter' && className.indexOf('disabled') < 0 && className.indexOf('active') < 0) {
-      event.stopPropagation();
-      if (elemId != null) {
-        this.modItems[elemId].click();
-      } else {
-        event.currentTarget.click();
-      }
-      return;
-    }
-    if (event.key == 'Tab') {
-      // Shift-Tab
-      if(event.shiftKey) {
-        if (elemId == this.firstModId && elemId != null) {
-          // Initial modification menu
-          event.preventDefault();
-          this.modItems[this.lastModId].focus();
-          return;
-        } else  if (event.currentTarget.className.indexOf('button-inline-menu') >= 0 && event.currentTarget.previousElementSibling == null && this.lastNeId != null && this.modItems[this.lastNeId] != null) {
-          // shift-tab on first element in modifications menu. set focus to last number editor field if open
-          event.preventDefault();
-          this.modItems[this.lastNeId].lastChild.focus();
-          return;
-        } else if (event.currentTarget.className.indexOf('button-inline-menu') >= 0 && event.currentTarget.previousElementSibling == null) {
-          // shift-tab on button-inline-menu with no number editor
-          event.preventDefault();
-          event.currentTarget.parentElement.lastElementChild.focus();
-        }
-      } else {
-        if (elemId == this.lastModId && elemId != null) {
-          // Initial modification menu
-          event.preventDefault();
-          this.modItems[this.firstModId].focus();
-          return;
-        } else if (event.currentTarget.className.indexOf('button-inline-menu') >= 0 && event.currentTarget.nextSibling == null && event.currentTarget.nodeName != 'TD') {
-          // Experimental menu
-          event.preventDefault();
-          event.currentTarget.parentElement.firstElementChild.focus();
-          return;
-        } else if (event.currentTarget.className == 'cb' && event.currentTarget.parentElement.nextSibling == null) {
-          event.preventDefault();
-          this.modItems[this.firstBPLabel].focus();
-        }
-      }
-    }
-  }
-
-
-  /**
-   * Render the specials
-   * @param  {Object} props   React component properties
-   * @param  {Object} context React component context
-   * @return {Object}         list: Array of React Components
-   */
-  _renderSpecials(props, context) {
-    const { m } = props;
-    const { language, tooltip, termtip } = context;
-    const translate = language.translate;
-    const specials = [];
-    const specialsId = m.missile && Modifications.modules[m.grp]['specials_' + m.missile] ? 'specials_' + m.missile : 'specials';
-    if (Modifications.modules[m.grp][specialsId] && Modifications.modules[m.grp][specialsId].length > 0) {
-      const close = this._specialSelected.bind(this, null);
-      specials.push(<div tabIndex="0" style={{ cursor: 'pointer', fontWeight: 'bold' }} className={ 'button-inline-menu warning' } key={ 'none' } data-id={ 'none' } onClick={ close } onKeyDown={this._keyDown} ref={modItem => this.modItems['none'] = modItem}>{translate('PHRASE_NO_SPECIAL')}</div>);
-      for (const specialName of Modifications.modules[m.grp][specialsId]) {
-        if (Modifications.specials[specialName].name.search('Legacy') >= 0) {
-          continue;
-        }
-        const classes = cn('button-inline-menu', {
-          active: m.blueprint && m.blueprint.special && m.blueprint.special.edname == specialName
-        });
-        const close = this._specialSelected.bind(this, specialName);
-        if (m.blueprint && m.blueprint.name) {
-          let tmp = {};
-          if (m.blueprint.special) {
-            tmp = m.blueprint.special;
-          } else {
-            tmp = undefined;
-          }
-          m.blueprint.special = Modifications.specials[specialName];
-          let specialTt = specialToolTip(translate, m.blueprint.grades[m.blueprint.grade], m.grp, m, specialName);
-          m.blueprint.special = tmp;
-          specials.push(<div tabIndex="0" style={{ cursor: 'pointer' }} className={classes} key={ specialName } data-id={ specialName } onMouseOver={termtip.bind(null, specialTt)} onMouseOut={tooltip.bind(null, null)} onClick={ close } onKeyDown={this._keyDown} ref={modItem => this.modItems[specialName] = modItem}>{translate(Modifications.specials[specialName].name)}</div>);
-        } else {
-          specials.push(<div tabIndex="0" style={{ cursor: 'pointer' }} className={classes} key={ specialName } data-id={ specialName }onClick={ close } onKeyDown={this._keyDown} ref={modItem => this.modItems[specialName] = modItem}>{translate(Modifications.specials[specialName].name)}</div>);
-        }
-      }
-    }
-    console.log('_renderSpecials. specials: %O', specials);
-    return specials;
-  }
-
-  /**
-   * Render the modifications
-   * @param  {Object} props   React Component properties
-   * @return {Object}         list: Array of React Components
-   */
-  _renderModifications(props) {
-    const { m, onChange, ship } = props;
-    const modifications = [];
-    for (const modName of Modifications.modules[m.grp].modifications) {
-      if (!Modifications.modifications[modName].hidden) {
-        const key = modName + (m.getModValue(modName) / 100 || 0);
-        this.lastNeId = modName;
-        modifications.push(<Modification key={ key } ship={ ship } m={ m } name={ modName } value={ m.getModValue(modName) / 100 || 0 } onChange={ onChange } onKeyDown={ this._keyDown } modItems={ this.modItems } handleModChange = {this._handleModChange} />);
-      }
-    }
-    console.log('_renderModifications. modItems: %O', this.modItems);
-    return modifications;
-  }
-
-  /**
-   * Toggle the blueprints menu
-   */
-  _toggleBlueprintsMenu() {
-    const blueprintMenuOpened = !this.state.blueprintMenuOpened;
-    this.setState({ blueprintMenuOpened });
-  }
-
-  /**
-   * Activated when a blueprint is selected
-   * @param  {int} fdname     The Frontier name of the blueprint
-   * @param  {int} grade      The grade of the selected blueprint
-   */
-  _blueprintSelected(fdname, grade) {
-    this.context.tooltip(null);
-    const { m, ship } = this.props;
-    const blueprint = getBlueprint(fdname, m);
-    blueprint.grade = grade;
-    ship.setModuleBlueprint(m, blueprint);
-    setPercent(ship, m, 100);
-
-    this.setState({ blueprintMenuOpened: false, specialMenuOpened: true });
-    this.props.onChange();
-  }
-
-  /**
-   * Toggle the specials menu
-   */
-  _toggleSpecialsMenu() {
-    const specialMenuOpened = !this.state.specialMenuOpened;
-    this.setState({ specialMenuOpened });
-  }
-
-  /**
-   * Activated when a special is selected
-   * @param  {int} special     The name of the selected special
-   */
-  _specialSelected(special) {
-    this.context.tooltip(null);
-    const { m, ship } = this.props;
-
-    if (special === null) {
-      ship.clearModuleSpecial(m);
-    } else {
-      ship.setModuleSpecial(m, Modifications.specials[special]);
-    }
-
-    this.setState({ specialMenuOpened: false });
-    this.props.onChange();
-  }
-
-  /**
-   * Provide a '50%' roll within the information we have
-   */
-  _rollFifty() {
-    const { m, ship } = this.props;
-    setPercent(ship, m, 50);
-
-    // this will change the values in the modifications. Set modDidChange to true to prevent focus change when component updates
-    this._handleModChange(true);
-
-    this.props.onChange();
-  }
-
-  /**
-   * Provide a random roll within the information we have
-   */
-  _rollRandom() {
-    const { m, ship } = this.props;
-    setRandom(ship, m);
-
-    // this will change the values in the modifications. Set modDidChange to true to prevent focus change when component updates
-    this._handleModChange(true);
-
-    this.props.onChange();
-  }
-
-  /**
-   * Provide a 'best' roll within the information we have
-   */
-  _rollBest() {
-    const { m, ship } = this.props;
-    setPercent(ship, m, 100);
-
-    // this will change the values in the modifications. Set modDidChange to true to prevent focus change when component updates
-    this._handleModChange(true);
-
-    this.props.onChange();
-  }
-
-  /**
-   * Provide a 'worst' roll within the information we have
-   */
-  _rollWorst() {
-    const { m, ship } = this.props;
-    setPercent(ship, m, 0);
-
-    // this will change the values in the modifications. Set modDidChange to true to prevent focus change when component updates
-    this._handleModChange(true);
-
-    this.props.onChange();
-  }
-
-  /**
-   * Reset modification information
-   */
-  _reset() {
-    const { m, ship } = this.props;
-    ship.clearModifications(m);
-    ship.clearModuleBlueprint(m);
-    this.props.onChange();
-  }
-
-  /**
-   * set mod did change boolean
-   * @param {Boolean} b Did the mod value change?
-   */
-  _handleModChange(b) {
-    this.modValDidChange = b;
-  }
-  /**
-   * Set focus on first element in modifications menu
-   * after it first mounts
-   */
-  componentDidMount() {
-    let firstEleCn = this.modItems['modMainDiv'].children.length > 0 ? this.modItems['modMainDiv'].children[0].className : null;
-    if (firstEleCn.indexOf('select-group cap') >= 0) {
-      this.modItems['modMainDiv'].children[1].firstElementChild.focus();
-    } else {
-      this.modItems['modMainDiv'].firstElementChild.focus();
-    }
-  }
-  /**
-   * Set focus on first element in modifications menu
-   * if component updates, unless update is due to value change
-   * in a modification
-   */
-  componentDidUpdate() {
-    if (!this.modValDidChange) {
-      if (this.modItems['modMainDiv'].children.length > 0) {
-        let firstEleCn = this.modItems['modMainDiv'].children[0].className;
-        if (firstEleCn.indexOf('button-inline-menu') >= 0) {
-          this.modItems['modMainDiv'].firstElementChild.focus();
-        } else if (firstEleCn.indexOf('select-group cap') >= 0)  {
-          this.modItems['modMainDiv'].children[1].firstElementChild.focus();
-        }
-      }
-    } else {
-      this._handleModChange(false);// Need to reset if component update due to value change
-    }
-  }
-
-  /**
-   * Set focus to the modification menu icon
-   */
-  componentWillUnmount() {
-    if (this.props.modButton) {
-      this.props.modButton.focus();// set focus to the modification menu icon after mod menu is unmounted.
-    }
-  }
-
-  /**
-   * Render the list
-   * @return {React.Component} List
-   */
-  render() {
-    const { language, tooltip, termtip } = this.context;
-    const translate = language.translate;
-    const { m } = this.props;
-    const { blueprintMenuOpened, specialMenuOpened } = this.state;
-
-    const _toggleBlueprintsMenu = this._toggleBlueprintsMenu;
-    const _toggleSpecialsMenu = this._toggleSpecialsMenu;
-    const _rollFull = this._rollBest;
-    const _rollWorst = this._rollWorst;
-    const _rollFifty = this._rollFifty;
-    const _rollRandom = this._rollRandom;
-    const _reset = this._reset;
-
-    let blueprintLabel;
-    let haveBlueprint = false;
-    let blueprintTt;
-    let blueprintCv;
-    // TODO: Fix this to actually find the correct blueprint.
-    if (!m.blueprint || !m.blueprint.name || !m.blueprint.fdname || !Modifications.modules[m.grp].blueprints || !Modifications.modules[m.grp].blueprints[m.blueprint.fdname]) {
-      this.props.ship.clearModuleBlueprint(m);
-      this.props.ship.clearModuleSpecial(m);
-    }
-    if (m.blueprint && m.blueprint.name && Modifications.modules[m.grp].blueprints[m.blueprint.fdname].grades[m.blueprint.grade]) {
-      blueprintLabel = translate(m.blueprint.name) + ' ' + translate('grade') + ' ' + m.blueprint.grade;
-      haveBlueprint = true;
-      blueprintTt  = blueprintTooltip(translate, m.blueprint.grades[m.blueprint.grade], Modifications.modules[m.grp].blueprints[m.blueprint.fdname].grades[m.blueprint.grade].engineers, m.grp);
-      blueprintCv = getPercent(m);
-    }
-
-    let specialLabel;
-    let specialTt;
-    if (m.blueprint && m.blueprint.special) {
-      specialLabel = m.blueprint.special.name;
-      specialTt = specialToolTip(translate, m.blueprint.grades[m.blueprint.grade], m.grp, m, m.blueprint.special.edname);
-    } else {
-      specialLabel = translate('PHRASE_SELECT_SPECIAL');
-    }
-
-    const specials = this._renderSpecials(this.props, this.context);
-    /**
-     * pnellesen - 05/28/2018 - added additional checks for specials.length below to ensure menus
-     * display correctly in cases where there are no specials (ex: AFMUs.)
-     */
-    const showBlueprintsMenu = blueprintMenuOpened;
-    const showSpecial = haveBlueprint && specials.length && !blueprintMenuOpened;
-    const showSpecialsMenu = specialMenuOpened && specials.length;
-    const showRolls = haveBlueprint && !blueprintMenuOpened && (!specialMenuOpened || !specials.length);
-    const showReset = !blueprintMenuOpened && (!specialMenuOpened || !specials.length) && haveBlueprint;
-    const showMods = !blueprintMenuOpened && (!specialMenuOpened || !specials.length) && haveBlueprint;
-    if (haveBlueprint) {
-      this.firstBPLabel = blueprintLabel;
-    } else {
-      this.firstBPLabel = 'selectBP';
-    }
-    return (
-      <div
-          className={cn('select', this.props.className)}
-          onClick={(e) => e.stopPropagation() }
-          onContextMenu={stopCtxPropagation}
-          ref={modItem => this.modItems['modMainDiv'] = modItem}
-      >
-        { showBlueprintsMenu | showSpecialsMenu ? '' : haveBlueprint ?
-          <div tabIndex="0" className={ cn('section-menu button-inline-menu', { selected: blueprintMenuOpened })} style={{ cursor: 'pointer' }} onMouseOver={termtip.bind(null, blueprintTt)} onMouseOut={tooltip.bind(null, null)} onClick={_toggleBlueprintsMenu} onKeyDown={ this._keyDown } ref={modItems => this.modItems[this.firstBPLabel] = modItems}>{blueprintLabel}</div> :
-          <div tabIndex="0" className={ cn('section-menu button-inline-menu', { selected: blueprintMenuOpened })} style={{ cursor: 'pointer' }} onClick={_toggleBlueprintsMenu} onKeyDown={ this._keyDown } ref={modItems => this.modItems[this.firstBPLabel] = modItems}>{translate('PHRASE_SELECT_BLUEPRINT')}</div> }
-        { showBlueprintsMenu ? this._renderBlueprints(this.props, this.context) : null }
-        { showSpecial & !showSpecialsMenu ? <div tabIndex="0" className={ cn('section-menu button-inline-menu', { selected: specialMenuOpened })} style={{ cursor: 'pointer' }} onMouseOver={specialTt ? termtip.bind(null, specialTt) : null} onMouseOut={specialTt ? tooltip.bind(null, null) : null}  onClick={_toggleSpecialsMenu} onKeyDown={ this._keyDown }>{specialLabel}</div> : null }
-        { showSpecialsMenu ? specials : null }
-        { showReset ? <div tabIndex="0" className={'section-menu button-inline-menu warning'} style={{ cursor: 'pointer' }} onClick={_reset} onKeyDown={ this._keyDown } onMouseOver={termtip.bind(null, 'PHRASE_BLUEPRINT_RESET')} onMouseOut={tooltip.bind(null, null)}> { translate('reset') } </div> : null }
-		{ showRolls ?
-
-            <table style={{ width: '100%', backgroundColor: 'transparent' }}>
-              <tbody>
-          { showRolls ?
-                <tr>
-                  <td tabIndex="0" className={ cn('section-menu button-inline-menu', { active: false })}> { translate('roll') }: </td>
-                  <td tabIndex="0" className={ cn('section-menu button-inline-menu', { active: blueprintCv ===    0 })} style={{ cursor: 'pointer' }} onClick={_rollWorst} onKeyDown={ this._keyDown } onMouseOver={termtip.bind(null, 'PHRASE_BLUEPRINT_WORST')} onMouseOut={tooltip.bind(null, null)}> { translate('0%') } </td>
-                  <td tabIndex="0" className={ cn('section-menu button-inline-menu', { active: blueprintCv ===   50 })} style={{ cursor: 'pointer' }} onClick={_rollFifty} onKeyDown={ this._keyDown } onMouseOver={termtip.bind(null, 'PHRASE_BLUEPRINT_FIFTY')} onMouseOut={tooltip.bind(null, null)}> { translate('50%') } </td>
-                  <td tabIndex="0" className={ cn('section-menu button-inline-menu', { active: blueprintCv ===  100 })} style={{ cursor: 'pointer' }} onClick={_rollFull} onKeyDown={ this._keyDown } onMouseOver={termtip.bind(null, 'PHRASE_BLUEPRINT_BEST')} onMouseOut={tooltip.bind(null, null)}> { translate('100%') } </td>
-                  <td tabIndex="0" className={ cn('section-menu button-inline-menu', { active: blueprintCv === null || blueprintCv % 50 != 0 })} style={{ cursor: 'pointer' }} onClick={_rollRandom} onKeyDown={ this._keyDown } onMouseOver={termtip.bind(null, 'PHRASE_BLUEPRINT_RANDOM')} onMouseOut={tooltip.bind(null, null)}> { translate('random') } </td>
-                </tr> : null }
-              </tbody>
-          </table> : null }
-        { showMods ? <hr /> : null }
-        { showMods ?
-          <span onMouseOver={termtip.bind(null, 'HELP_MODIFICATIONS_MENU')} onMouseOut={tooltip.bind(null, null)} >
-            { this._renderModifications(this.props) }
-          </span> : null }
-      </div>
-    );
-  }
-}
+import React from 'react';
+import PropTypes from 'prop-types';
+import * as _ from 'lodash';
+import TranslatedComponent from './TranslatedComponent';
+import { isEmpty, stopCtxPropagation } from '../utils/UtilityFunctions';
+import cn from 'classnames';
+import { Modifications } from 'coriolis-data/dist';
+import Modification from './Modification';
+import {
+  getBlueprint,
+  blueprintTooltip,
+  setPercent,
+  getPercent,
+  setRandom,
+  specialToolTip
+} from '../utils/BlueprintFunctions';
+
+/**
+ * Modifications menu
+ */
+export default class ModificationsMenu extends TranslatedComponent {
+
+  static propTypes = {
+    ship: PropTypes.object.isRequired,
+    m: PropTypes.object.isRequired,
+    marker: PropTypes.string.isRequired,
+    onChange: PropTypes.func.isRequired,
+    modButton:PropTypes.object
+  };
+
+  /**
+   * Constructor
+   * @param  {Object} props   React Component properties
+   * @param  {Object} context React Component context
+   */
+  constructor(props, context) {
+    super(props);
+
+    this._toggleBlueprintsMenu = this._toggleBlueprintsMenu.bind(this);
+    this._toggleSpecialsMenu = this._toggleSpecialsMenu.bind(this);
+    this._rollFifty = this._rollFifty.bind(this);
+    this._rollRandom = this._rollRandom.bind(this);
+    this._rollBest = this._rollBest.bind(this);
+    this._rollWorst = this._rollWorst.bind(this);
+    this._reset = this._reset.bind(this);
+
+    this._keyDown = this._keyDown.bind(this);
+
+    this.modItems = [];// Array to hold various element refs (<li>, <div>, <ul>, etc.)
+    this.firstModId = null;
+    this.firstBPLabel = null;// First item in mod menu
+    this.lastModId = null;
+    this.lastNeId = null;// Last number editor id. Used to set focus to last number editor when shift-tab pressed on first element in mod menu.
+    this.modValDidChange = false; // used to determine if component update was caused by change in modification value.
+    this._handleModChange = this._handleModChange.bind(this);
+
+    this.state = {
+      blueprintMenuOpened: !(props.m.blueprint && props.m.blueprint.name),
+      specialMenuOpened: false
+    };
+  }
+
+  /**
+   * Render the blueprints
+   * @param  {Object} props   React component properties
+   * @param  {Object} context React component context
+   * @return {Object}         list: Array of React Components
+   */
+  _renderBlueprints(props, context) {
+    const { m } = props;
+    const { language, tooltip, termtip } = context;
+    const translate = language.translate;
+    const blueprints = [];
+    for (const blueprintName in Modifications.modules[m.grp].blueprints) {
+      const blueprint = getBlueprint(blueprintName, m);
+      let blueprintGrades = [];
+      for (let grade in Modifications.modules[m.grp].blueprints[blueprintName].grades) {
+        // Grade is a string in the JSON so make it a number
+        grade = Number(grade);
+        const classes = cn('c', {
+          active: m.blueprint && blueprint.id === m.blueprint.id && grade === m.blueprint.grade
+        });
+        const close = this._blueprintSelected.bind(this, blueprintName, grade);
+        const key = blueprintName + ':' + grade;
+        const tooltipContent = blueprintTooltip(translate, blueprint.grades[grade], Modifications.modules[m.grp].blueprints[blueprintName].grades[grade].engineers, m.grp);
+
+
+        blueprintGrades.unshift(<li key={key} tabIndex="0" data-id={key} className={classes} style={{ width: '2em' }} onMouseOver={termtip.bind(null, tooltipContent)} onMouseOut={tooltip.bind(null, null)} onClick={close} onKeyDown={this._keyDown} ref={modItem => this.modItems[key] = modItem}>{grade}</li>);
+      }
+      if (blueprintGrades) {
+        const thisLen = blueprintGrades.length;
+        if (this.firstModId == null) this.firstModId = blueprintGrades[0].key;
+        this.lastModId = blueprintGrades[thisLen - 1].key;
+        blueprints.push(<div key={blueprint.name} className={'select-group cap'}>{translate(blueprint.name)}</div>);
+        blueprints.push(<ul key={blueprintName}>{blueprintGrades}</ul>);
+      }
+    }
+    return blueprints;
+  }
+
+  /**
+   * Key down - select module on Enter key, move to next/previous module on Tab/Shift-Tab, close on Esc
+   * @param  {SyntheticEvent} event Event
+   *
+   */
+  _keyDown(event) {
+    let className = null;
+    let elemId = null;
+    if (event.currentTarget.attributes['class']) className = event.currentTarget.attributes['class'].value;
+    if (event.currentTarget.attributes['data-id']) elemId = event.currentTarget.attributes['data-id'].value;
+
+    if (event.key == 'Enter' && className.indexOf('disabled') < 0 && className.indexOf('active') < 0) {
+      event.stopPropagation();
+      if (elemId != null) {
+        this.modItems[elemId].click();
+      } else {
+        event.currentTarget.click();
+      }
+      return;
+    }
+    if (event.key == 'Tab') {
+      // Shift-Tab
+      if(event.shiftKey) {
+        if (elemId == this.firstModId && elemId != null) {
+          // Initial modification menu
+          event.preventDefault();
+          this.modItems[this.lastModId].focus();
+          return;        
+        } else  if (event.currentTarget.className.indexOf('button-inline-menu') >= 0 && event.currentTarget.previousElementSibling == null && this.lastNeId != null && this.modItems[this.lastNeId] != null) {
+          // shift-tab on first element in modifications menu. set focus to last number editor field if open
+          event.preventDefault();
+          this.modItems[this.lastNeId].lastChild.focus();
+          return;
+        } else if (event.currentTarget.className.indexOf('button-inline-menu') >= 0 && event.currentTarget.previousElementSibling == null) {
+          // shift-tab on button-inline-menu with no number editor
+          event.preventDefault();
+          event.currentTarget.parentElement.lastElementChild.focus();
+        }
+      } else {
+        if (elemId == this.lastModId && elemId != null) {
+          // Initial modification menu
+          event.preventDefault();
+          this.modItems[this.firstModId].focus();
+          return;
+        } else if (event.currentTarget.className.indexOf('button-inline-menu') >= 0 && event.currentTarget.nextSibling == null && event.currentTarget.nodeName != 'TD') {
+          // Experimental menu
+          event.preventDefault();
+          event.currentTarget.parentElement.firstElementChild.focus();
+          return;
+        } else if (event.currentTarget.className == 'cb' && event.currentTarget.parentElement.nextSibling == null) {
+          event.preventDefault();
+          this.modItems[this.firstBPLabel].focus();
+        }
+      }
+    }
+  }
+
+
+  /**
+   * Render the specials
+   * @param  {Object} props   React component properties
+   * @param  {Object} context React component context
+   * @return {Object}         list: Array of React Components
+   */
+  _renderSpecials(props, context) {
+    const { m } = props;
+    const { language, tooltip, termtip } = context;
+    const translate = language.translate;
+    const specials = [];
+    const specialsId = m.missile && Modifications.modules[m.grp]['specials_' + m.missile] ? 'specials_' + m.missile : 'specials';
+    if (Modifications.modules[m.grp][specialsId] && Modifications.modules[m.grp][specialsId].length > 0) {
+      const close = this._specialSelected.bind(this, null);
+      specials.push(<div tabIndex="0" style={{ cursor: 'pointer', fontWeight: 'bold' }} className={ 'button-inline-menu warning' } key={ 'none' } data-id={ 'none' } onClick={ close } onKeyDown={this._keyDown} ref={modItem => this.modItems['none'] = modItem}>{translate('PHRASE_NO_SPECIAL')}</div>);
+      for (const specialName of Modifications.modules[m.grp][specialsId]) {
+        if (Modifications.specials[specialName].name.search('Legacy') >= 0) {
+          continue;
+        }
+        const classes = cn('button-inline-menu', {
+          active: m.blueprint && m.blueprint.special && m.blueprint.special.edname == specialName
+        });
+        const close = this._specialSelected.bind(this, specialName);
+        if (m.blueprint && m.blueprint.name) {
+          let tmp = {};
+          if (m.blueprint.special) {
+            tmp = m.blueprint.special;
+          } else {
+            tmp = undefined;
+          }
+          m.blueprint.special = Modifications.specials[specialName];
+          let specialTt = specialToolTip(translate, m.blueprint.grades[m.blueprint.grade], m.grp, m, specialName);
+          m.blueprint.special = tmp;
+          specials.push(<div tabIndex="0" style={{ cursor: 'pointer' }} className={classes} key={ specialName } data-id={ specialName } onMouseOver={termtip.bind(null, specialTt)} onMouseOut={tooltip.bind(null, null)} onClick={ close } onKeyDown={this._keyDown} ref={modItem => this.modItems[specialName] = modItem}>{translate(Modifications.specials[specialName].name)}</div>);
+        } else {
+          specials.push(<div tabIndex="0" style={{ cursor: 'pointer' }} className={classes} key={ specialName } data-id={ specialName }onClick={ close } onKeyDown={this._keyDown} ref={modItem => this.modItems[specialName] = modItem}>{translate(Modifications.specials[specialName].name)}</div>);
+        }
+      }
+    }
+    return specials;
+  }
+
+  /**
+   * Render the modifications
+   * @param  {Object} props   React Component properties
+   * @return {Object}         list: Array of React Components
+   */
+  _renderModifications(props) {
+    const { m, onChange, ship } = props;
+    const modifications = [];
+    for (const modName of Modifications.modules[m.grp].modifications) {
+      if (!Modifications.modifications[modName].hidden) {
+        const key = modName + (m.getModValue(modName) / 100 || 0);
+        this.lastNeId = modName;
+        modifications.push(<Modification key={ key } ship={ ship } m={ m } name={ modName } value={ m.getModValue(modName) / 100 || 0 } onChange={ onChange } onKeyDown={ this._keyDown } modItems={ this.modItems } handleModChange = {this._handleModChange} />);
+      }
+    }
+    return modifications;
+  }
+
+  /**
+   * Toggle the blueprints menu
+   */
+  _toggleBlueprintsMenu() {
+    const blueprintMenuOpened = !this.state.blueprintMenuOpened;
+    this.setState({ blueprintMenuOpened });
+  }
+
+  /**
+   * Activated when a blueprint is selected
+   * @param  {int} fdname     The Frontier name of the blueprint
+   * @param  {int} grade      The grade of the selected blueprint
+   */
+  _blueprintSelected(fdname, grade) {
+    this.context.tooltip(null);
+    const { m, ship } = this.props;
+    const blueprint = getBlueprint(fdname, m);
+    blueprint.grade = grade;
+    ship.setModuleBlueprint(m, blueprint);
+    setPercent(ship, m, 100);
+
+    this.setState({ blueprintMenuOpened: false, specialMenuOpened: true });
+    this.props.onChange();
+  }
+
+  /**
+   * Toggle the specials menu
+   */
+  _toggleSpecialsMenu() {
+    const specialMenuOpened = !this.state.specialMenuOpened;
+    this.setState({ specialMenuOpened });
+  }
+
+  /**
+   * Activated when a special is selected
+   * @param  {int} special     The name of the selected special
+   */
+  _specialSelected(special) {
+    this.context.tooltip(null);
+    const { m, ship } = this.props;
+
+    if (special === null) {
+      ship.clearModuleSpecial(m);
+    } else {
+      ship.setModuleSpecial(m, Modifications.specials[special]);
+    }
+
+    this.setState({ specialMenuOpened: false });
+    this.props.onChange();
+  }
+
+  /**
+   * Provide a '50%' roll within the information we have
+   */
+  _rollFifty() {
+    const { m, ship } = this.props;
+    setPercent(ship, m, 50);
+
+    // this will change the values in the modifications. Set modDidChange to true to prevent focus change when component updates
+    this._handleModChange(true);
+
+    this.props.onChange();
+  }
+
+  /**
+   * Provide a random roll within the information we have
+   */
+  _rollRandom() {
+    const { m, ship } = this.props;
+    setRandom(ship, m);
+
+    // this will change the values in the modifications. Set modDidChange to true to prevent focus change when component updates
+    this._handleModChange(true);
+
+    this.props.onChange();
+  }
+
+  /**
+   * Provide a 'best' roll within the information we have
+   */
+  _rollBest() {
+    const { m, ship } = this.props;
+    setPercent(ship, m, 100);
+
+    // this will change the values in the modifications. Set modDidChange to true to prevent focus change when component updates
+    this._handleModChange(true);
+
+    this.props.onChange();
+  }
+
+  /**
+   * Provide a 'worst' roll within the information we have
+   */
+  _rollWorst() {
+    const { m, ship } = this.props;
+    setPercent(ship, m, 0);
+    // this will change the values in the modifications. Set modDidChange to true to prevent focus change when component updates
+    this._handleModChange(true);
+    this.props.onChange();
+  }
+
+  /**
+   * Reset modification information
+   */
+  _reset() {
+    const { m, ship } = this.props;
+    ship.clearModifications(m);
+    ship.clearModuleBlueprint(m);
+    this.props.onChange();
+  }
+
+  /**
+   * set mod did change boolean
+   * @param {boolean} b Boolean to determine if a change has been made to a module
+   */
+  _handleModChange(b) {
+    this.modValDidChange = b;
+  }
+
+  /**
+   * Set focus on first element in modifications menu
+   * after it first mounts
+   */
+  componentDidMount() {
+    let firstEleCn = this.modItems['modMainDiv'].children.length > 0 ? this.modItems['modMainDiv'].children[0].className : null;
+    if (firstEleCn.indexOf('select-group cap') >= 0) {
+      this.modItems['modMainDiv'].children[1].firstElementChild.focus();
+    } else {
+      this.modItems['modMainDiv'].firstElementChild.focus();
+    }
+  }
+
+  /**
+   * Set focus on first element in modifications menu
+   * if component updates, unless update is due to value change
+   * in a modification
+   */
+  componentDidUpdate() {
+    if (!this.modValDidChange) {
+      if (this.modItems['modMainDiv'].children.length > 0) {
+        let firstEleCn = this.modItems['modMainDiv'].children[0].className;
+        if (firstEleCn.indexOf('button-inline-menu') >= 0) {
+          this.modItems['modMainDiv'].firstElementChild.focus();
+        } else if (firstEleCn.indexOf('select-group cap') >= 0)  {
+          this.modItems['modMainDiv'].children[1].firstElementChild.focus();
+        }
+      }
+    } else {
+      this._handleModChange(false);// Need to reset if component update due to value change
+    }
+  }
+  /**
+   * set focus to the modification menu icon after mod menu is unmounted.
+   */
+  componentWillUnmount() {
+    if (this.props.modButton) {
+      this.props.modButton.focus();
+    }
+  }
+
+  /**
+   * Render the list
+   * @return {React.Component} List
+   */
+  render() {
+    const { language, tooltip, termtip } = this.context;
+    const translate = language.translate;
+    const { m } = this.props;
+    const { blueprintMenuOpened, specialMenuOpened } = this.state;
+
+    const _toggleBlueprintsMenu = this._toggleBlueprintsMenu;
+    const _toggleSpecialsMenu = this._toggleSpecialsMenu;
+    const _rollFull = this._rollBest;
+    const _rollWorst = this._rollWorst;
+    const _rollFifty = this._rollFifty;
+    const _rollRandom = this._rollRandom;
+    const _reset = this._reset;
+
+    let blueprintLabel;
+    let haveBlueprint = false;
+    let blueprintTt;
+    let blueprintCv;
+    // TODO: Fix this to actually find the correct blueprint.
+    if (!m.blueprint || !m.blueprint.name || !m.blueprint.fdname || !Modifications.modules[m.grp].blueprints || !Modifications.modules[m.grp].blueprints[m.blueprint.fdname]) {
+      this.props.ship.clearModuleBlueprint(m);
+      this.props.ship.clearModuleSpecial(m);
+    }
+    if (m.blueprint && m.blueprint.name && Modifications.modules[m.grp].blueprints[m.blueprint.fdname].grades[m.blueprint.grade]) {
+      blueprintLabel = translate(m.blueprint.name) + ' ' + translate('grade') + ' ' + m.blueprint.grade;
+      haveBlueprint = true;
+      blueprintTt  = blueprintTooltip(translate, m.blueprint.grades[m.blueprint.grade], Modifications.modules[m.grp].blueprints[m.blueprint.fdname].grades[m.blueprint.grade].engineers, m.grp);
+      blueprintCv = getPercent(m);
+    }
+
+    let specialLabel;
+    let specialTt;
+    if (m.blueprint && m.blueprint.special) {
+      specialLabel = m.blueprint.special.name;
+      specialTt = specialToolTip(translate, m.blueprint.grades[m.blueprint.grade], m.grp, m, m.blueprint.special.edname);
+    } else {
+      specialLabel = translate('PHRASE_SELECT_SPECIAL');
+    }
+
+    const specials = this._renderSpecials(this.props, this.context);
+    /**
+     * pnellesen - 05/28/2018 - added additional checks for specials.length below to ensure menus
+     * display correctly in cases where there are no specials (ex: AFMUs.)
+     */
+    const showBlueprintsMenu = blueprintMenuOpened;
+    const showSpecial = haveBlueprint && specials.length && !blueprintMenuOpened;
+    const showSpecialsMenu = specialMenuOpened && specials.length;
+    const showRolls = haveBlueprint && !blueprintMenuOpened && (!specialMenuOpened || !specials.length);
+    const showReset = !blueprintMenuOpened && (!specialMenuOpened || !specials.length) && haveBlueprint;
+    const showMods = !blueprintMenuOpened && (!specialMenuOpened || !specials.length) && haveBlueprint;
+    if (haveBlueprint) {
+      this.firstBPLabel = blueprintLabel;
+    } else {
+      this.firstBPLabel = 'selectBP';
+    }
+    return (
+      <div
+          className={cn('select', this.props.className)}
+          onClick={(e) => e.stopPropagation() }
+          onContextMenu={stopCtxPropagation}
+          ref={modItem => this.modItems['modMainDiv'] = modItem}
+      >
+        { showBlueprintsMenu | showSpecialsMenu ? '' : haveBlueprint ?
+          <div tabIndex="0" className={ cn('section-menu button-inline-menu', { selected: blueprintMenuOpened })} style={{ cursor: 'pointer' }} onMouseOver={termtip.bind(null, blueprintTt)} onMouseOut={tooltip.bind(null, null)} onClick={_toggleBlueprintsMenu} onKeyDown={ this._keyDown } ref={modItems => this.modItems[this.firstBPLabel] = modItems}>{blueprintLabel}</div> :
+          <div tabIndex="0" className={ cn('section-menu button-inline-menu', { selected: blueprintMenuOpened })} style={{ cursor: 'pointer' }} onClick={_toggleBlueprintsMenu} onKeyDown={ this._keyDown } ref={modItems => this.modItems[this.firstBPLabel] = modItems}>{translate('PHRASE_SELECT_BLUEPRINT')}</div> }
+        { showBlueprintsMenu ? this._renderBlueprints(this.props, this.context) : null }
+        { showSpecial & !showSpecialsMenu ? <div tabIndex="0" className={ cn('section-menu button-inline-menu', { selected: specialMenuOpened })} style={{ cursor: 'pointer' }} onMouseOver={specialTt ? termtip.bind(null, specialTt) : null} onMouseOut={specialTt ? tooltip.bind(null, null) : null}  onClick={_toggleSpecialsMenu} onKeyDown={ this._keyDown }>{specialLabel}</div> : null }
+        { showSpecialsMenu ? specials : null }
+        { showReset ? <div tabIndex="0" className={'section-menu button-inline-menu warning'} style={{ cursor: 'pointer' }} onClick={_reset} onKeyDown={ this._keyDown } onMouseOver={termtip.bind(null, 'PHRASE_BLUEPRINT_RESET')} onMouseOut={tooltip.bind(null, null)}> { translate('reset') } </div> : null }
+		{ showRolls ?
+
+            <table style={{ width: '100%', backgroundColor: 'transparent' }}>
+              <tbody>
+          { showRolls ?
+                <tr>
+                  <td tabIndex="0" className={ cn('section-menu button-inline-menu', { active: false}) }> { translate('roll') }: </td>
+                  <td tabIndex="0" className={ cn('section-menu button-inline-menu', { active: blueprintCv ===    0 }) } style={{ cursor: 'pointer' }} onClick={_rollWorst} onKeyDown={ this._keyDown } onMouseOver={termtip.bind(null, 'PHRASE_BLUEPRINT_WORST')} onMouseOut={tooltip.bind(null, null)}> { translate('0%') } </td>
+                  <td tabIndex="0" className={ cn('section-menu button-inline-menu', { active: blueprintCv ===   50 })} style={{ cursor: 'pointer' }} onClick={_rollFifty} onKeyDown={ this._keyDown } onMouseOver={termtip.bind(null, 'PHRASE_BLUEPRINT_FIFTY')} onMouseOut={tooltip.bind(null, null)}> { translate('50%') } </td>
+                  <td tabIndex="0" className={ cn('section-menu button-inline-menu', { active: blueprintCv ===  100 })} style={{ cursor: 'pointer' }} onClick={_rollFull} onKeyDown={ this._keyDown } onMouseOver={termtip.bind(null, 'PHRASE_BLUEPRINT_BEST')} onMouseOut={tooltip.bind(null, null)}> { translate('100%') } </td>
+                  <td tabIndex="0" className={ cn('section-menu button-inline-menu', { active: blueprintCv === null || blueprintCv % 50 != 0 })} style={{ cursor: 'pointer' }} onClick={_rollRandom} onKeyDown={ this._keyDown } onMouseOver={termtip.bind(null, 'PHRASE_BLUEPRINT_RANDOM')} onMouseOut={tooltip.bind(null, null)}> { translate('random') } </td>
+                </tr> : null }
+              </tbody>
+          </table> : null }
+        { showMods ? <hr /> : null }
+        { showMods ?
+          <span onMouseOver={termtip.bind(null, 'HELP_MODIFICATIONS_MENU')} onMouseOut={tooltip.bind(null, null)} >
+            { this._renderModifications(this.props) }
+          </span> : null }
+      </div>
+    );
+  }
+}
diff --git a/src/app/components/Slider.jsx b/src/app/components/Slider.jsx
index 7d6b5583..16a398f2 100644
--- a/src/app/components/Slider.jsx
+++ b/src/app/components/Slider.jsx
@@ -94,7 +94,6 @@ export default class Slider extends React.Component {
       case 'Enter':
         event.preventDefault();
         this.sliderInputBox._setDisplay('block');
-        // this.enterTimer = setTimeout(() => this.sliderInputBox.sliderVal.focus(), 10);
         return;
       default:
         return;
@@ -103,17 +102,17 @@ export default class Slider extends React.Component {
   /**
    * Key down handler
    * increment slider position by +/- 1 when right/left arrow key is pressed or held
-   * @param {Event} event The key down event.
+   * @param {Event} event Keyboard even
    */
   _keydown(event) {
-    let newVal;
+    let newVal = this.props.percent * this.props.max;
     switch (event.key) {
       case 'ArrowRight':
-        newVal = this.props.percent * this.props.max + 1;
+        newVal += 1;
         if (newVal <= this.props.max) this.props.onChange(newVal / this.props.max);
         return;
       case 'ArrowLeft':
-        newVal = this.props.percent * this.props.max - 1;
+        newVal -= 1;
         if (newVal >= 0) this.props.onChange(newVal / this.props.max);
         return;
       default:
@@ -124,15 +123,16 @@ export default class Slider extends React.Component {
   /**
    * Touch start handler
    * @param  {Event} event  DOM Event
-   *
+   * 
    */
   _touchstart(event) {
     this.touchStartTimer = setTimeout(() => this.sliderInputBox._setDisplay('block'), 1500);
   }
-
+  
   /**
    * Touch end handler
-   * @param {Event} event DOM Event
+   * @param  {Event} event  DOM Event
+   * 
    */
   _touchend(event) {
     this.sliderInputBox.sliderVal.focus();
@@ -201,22 +201,18 @@ export default class Slider extends React.Component {
   render() {
     let outerWidth = this.state.outerWidth;
     let { axis, axisUnit, min, max, scale } = this.props;
-
     let style = {
       width: '100%',
       height: axis ? '2.5em' : '1.5em',
       boxSizing: 'border-box'
     };
-
     if (!outerWidth) {
       return <svg style={style} ref={node => this.node = node} />;
     }
-
     let margin = MARGIN_LR * scale;
     let width = outerWidth - (margin * 2);
     let pctPos = width * this.props.percent;
-
-    return <div><svg
+    return <div><svg 
       onMouseUp={this._up} onMouseEnter={this._enter.bind(this)} onMouseMove={this._move} onKeyUp={this._keyup} onKeyDown={this._keydown} style={style} ref={node => this.node = node} tabIndex="0">
       <rect className='primary' style={{ opacity: 0.3 }} x={margin} y='0.25em' rx='0.3em' ry='0.3em' width={width} height='0.7em' />
       <rect className='primary-disabled' x={margin} y='0.45em' rx='0.15em' ry='0.15em' width={pctPos} height='0.3em' />
@@ -234,11 +230,9 @@ export default class Slider extends React.Component {
       axisUnit={this.props.axisUnit}
       scale={this.props.scale}
       max={this.props.max}
-
     />
    </div>;
   }
-
 }
 /**
  * New component to add keyboard support for sliders - works on all devices (desktop, iOS, Android)
@@ -251,133 +245,120 @@ class TextInputBox extends React.Component {
     percent: PropTypes.number.isRequired,// value of slider
     scale: PropTypes.number
   };
-
   /**
-   * Constructor for TextInputBox
-   * @param {Object} props  The props
+   * Determine if the user is still dragging
+   * @param  {Object} props React Component properties
    */
   constructor(props) {
     super(props);
-    this._handleFocus = this._handleFocus.bind(this);
-    this._handleBlur = this._handleBlur.bind(this);
-    this._handleChange = this._handleChange.bind(this);
-      // this._keydown = this._keydown.bind(this);
-    this._keyup = this._keyup.bind(this);
-    this.state = this._getInitialState();
-    this.percent = this.props.percent;
-    this.max = this.props.max;
-    this.setState({ inputValue: this.percent * this.max });
+      this._handleFocus = this._handleFocus.bind(this);
+      this._handleBlur = this._handleBlur.bind(this);
+      this._handleChange = this._handleChange.bind(this);
+      this._keyup = this._keyup.bind(this);
+      this.state = this._getInitialState();
   }
-
   /**
-   * Slider willrecieveprops
-   * @param {Object} nextProps The next props
-   * @param {Object} nextState The next state
+   * Update input value if slider changes will change props/state
+   * @param  {Object} nextProps React Component properites
+   * @param  {Object} nextState React Component state values
    */
   componentWillReceiveProps(nextProps, nextState) {
-    let nextValue = nextProps.percent * nextProps.max;
-        // See https://stackoverflow.com/questions/32414308/updating-state-on-props-change-in-react-form
-    if (nextValue !== this.state.inputValue && nextValue <= nextProps.max) {
-      this.setState({ inputValue: nextValue });
+      let nextValue = nextProps.percent * nextProps.max;
+      // See https://stackoverflow.com/questions/32414308/updating-state-on-props-change-in-react-form
+      if (nextValue !== this.state.inputValue && nextValue <= nextProps.max) {
+          this.setState({ inputValue: nextValue });
     }
   }
-
-  /**
-   * Slider Component did update
-   * @param {Object} prevProps The prev props
-   * @param {Object} prevState The prev state
+    /**
+   * Update slider textbox visibility/values if changes are made to slider
+   * @param  {Object} prevProps React Component properites
+   * @param  {Object} prevState React Component state values
    */
   componentDidUpdate(prevProps, prevState) {
     if (prevState.divStyle.display == 'none' && this.state.divStyle.display == 'block') {
-      this.enterTimer = setTimeout(() => this.sliderVal.focus(), 10);
+        this.enterTimer = setTimeout(() => this.sliderVal.focus(), 10);  
     }
-
     if (prevProps.max !== this.props.max && this.state.inputValue > this.props.max) {
-          // they chose a different module
-      this.setState({ inputValue: this.props.max });
+        // they chose a different module
+        this.setState({ inputValue: this.props.max });
     }
-
     if (this.state.inputValue != prevState.inputValue && prevProps.max == this.props.max) {
-      this.props.onChange(this.state.inputValue / this.props.max);
+        this.props.onChange(this.state.inputValue/this.props.max);
     }
   }
-
   /**
-   * Get the initial state.
-   * @returns {{divStyle: {display: string}, inputStyle: {width: string}, labelStyle: {marginLeft: string}, maxLength: number, size: number, min: number, tabIndex: number, type: string, readOnly: boolean}} Initial state.
-   * @private
+   * Set initial state for the textbox. 
+   * We may want to rethink this to 
+   * try and make it a stateless component
+   * @returns {object} React state object with initial values set
    */
   _getInitialState() {
     return {
-      divStyle: { display:'none' },
-      inputStyle: { width:'4em' },
-      labelStyle: { marginLeft: '.1em' },
+      divStyle: {display:'none'}, 
+      inputStyle: {width:'4em'},
+      labelStyle: {marginLeft: '.1em'},
       maxLength:5,
       size:5,
       min:0,
       tabIndex:-1,
       type:'number',
-      readOnly: true
-    };
+      readOnly: true,
+      inputValue: this.props.percent * this.props.max
+    }
   }
-
   /**
-   * Set display style
-   * @param {string} val The display CSS code.
-   * @private
+   * 
+   * @param {string} val block or none
    */
   _setDisplay(val) {
     this.setState({
-      divStyle: { display:val }
+      divStyle: {display:val}
     });
   }
-
   /**
-   * Focus handler
-   * @private
+   * Update the input value
+   * when textbox gets focus
    */
   _handleFocus() {
     this.setState({
       inputValue:this._getValue()
     });
   }
-
   /**
-   * Handles blurring
+   * Update inputValue when textbox loses focus
    */
   _handleBlur() {
     this._setDisplay('none');
     if (this.state.inputValue !== '') {
-      this.props.onChange(this.state.inputValue / this.props.max);
+      this.props.onChange(this.state.inputValue/this.props.max);
     } else {
-      this.setState({ inputValue: this.props.percent * this.props.max });
+      this.setState({
+        inputValue: this.props.percent * this.props.max
+      });
     }
   }
-
   /**
-   * Get inputValue
-   * @returns {number|Number|*} inputValue
-   * @private
+   * Get the value in the text box
    */
   _getValue() {
     return this.state.inputValue;
   }
-
   /**
-   * Handle changes
-   * @param {Event} event DOM Event
-   * @private
+   * Update and set limits on input box
+   * values depending on what user
+   * has selected
+   * 
+   * @param {SyntheticEvent} event 
    */
   _handleChange(event) {
     if (event.target.value < 0) {
-      this.setState({ inputValue: 0 });
+      this.setState({inputValue: 0});
     } else if (event.target.value <= this.props.max)  {
-      this.setState({ inputValue: event.target.value });
+      this.setState({inputValue: event.target.value});
     } else {
-      this.setState({ inputValue: this.props.max });
+      this.setState({inputValue: this.props.max});
     }
   }
-
   /**
    * Key up handler for input field.
    * If user hits Enter key, blur/close the input field
@@ -392,14 +373,9 @@ class TextInputBox extends React.Component {
         return;
     }
   }
-
-  /**
-   * JSX Render handler
-   * @returns {*} Slider
-   */
   render() {
     let {  axisUnit, onChange, percent, scale } = this.props;
-    return <div style={this.state.divStyle}><input style={this.state.inputStyle} value={this._getValue()} min={this.state.min} max={this.props.max} onChange={this._handleChange} onKeyUp={this._keyup} tabIndex={this.state.tabIndex} maxLength={this.state.maxLength} size={this.state.size} onBlur={() => {this._handleBlur();}} onFocus={() => {this._handleFocus();}} type={this.state.type} ref={(ip) => this.sliderVal = ip}/><text className="primary upp" style={this.state.labelStyle}>{this.props.axisUnit}</text></div>;
+    return <div style={this.state.divStyle}><input style={this.state.inputStyle} value={this._getValue()} min={this.state.min} max={this.props.max} onChange={this._handleChange} onKeyUp={this._keyup} tabIndex={this.state.tabIndex} maxLength={this.state.maxLength} size={this.state.size} onBlur={() => {this._handleBlur()}} onFocus={() => {this._handleFocus()}} type={this.state.type} ref={(ip) => this.sliderVal = ip}/><text className="primary upp" style={this.state.labelStyle}>{this.props.axisUnit}</text></div>;
   }
- }
+}
 
diff --git a/src/app/components/Slot.jsx b/src/app/components/Slot.jsx
index e76b3795..706ba618 100644
--- a/src/app/components/Slot.jsx
+++ b/src/app/components/Slot.jsx
@@ -1,164 +1,161 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import TranslatedComponent from './TranslatedComponent';
-import cn from 'classnames';
-import AvailableModulesMenu from './AvailableModulesMenu';
-import ModificationsMenu from './ModificationsMenu';
-import { diffDetails } from '../utils/SlotFunctions';
-import { wrapCtxMenu } from '../utils/UtilityFunctions';
-import { stopCtxPropagation } from '../utils/UtilityFunctions';
-
-/**
- * Abstract Slot
- */
-export default class Slot extends TranslatedComponent {
-
-  static propTypes = {
-    availableModules: PropTypes.func.isRequired,
-    onSelect: PropTypes.func.isRequired,
-    onOpen: PropTypes.func.isRequired,
-    maxClass: PropTypes.number.isRequired,
-    selected: PropTypes.bool,
-    m: PropTypes.object,
-    enabled: PropTypes.bool.isRequired,
-    ship: PropTypes.object.isRequired,
-    eligible: PropTypes.object,
-    warning: PropTypes.func,
-    drag: PropTypes.func,
-    drop: PropTypes.func,
-    dropClass: PropTypes.string
-  };
-
-  /**
-   * Constructor
-   * @param  {Object} props   React Component properties
-   */
-  constructor(props) {
-    super(props);
-
-    this._modificationsSelected = false;
-
-    this._contextMenu = wrapCtxMenu(this._contextMenu.bind(this));
-    this._getMaxClassLabel = this._getMaxClassLabel.bind(this);
-    this._keyDown = this._keyDown.bind(this);
-    this.slotDiv = null;
-  }
-
-  // Must be implemented by subclasses:
-  // _getSlotDetails()
-
-  /**
-   * Get the CSS class name for the slot. Can/should be overriden
-   * as necessary.
-   * @return {string} CSS Class name
-   */
-  _getClassNames() {
-    return null;
-  }
-
-  /**
-   * Get the label for the slot size/class
-   * Should be overriden if necessary
-   * @return {string} label
-   */
-  _getMaxClassLabel() {
-    return this.props.maxClass;
-  }
-
-  /**
-   * Empty slot on right-click
-   * @param  {SyntheticEvent} event Event
-   */
-  _contextMenu(event) {
-    event.stopPropagation();
-    event.preventDefault();
-    this.props.onSelect(null,null);
-  }
-
-  /** Key Down handler
-   *  @param {SyntheticEvent} event Event
-   *  ToDo: see if this can be moved up
-   *  we do more or less the same thing
-   *  in every section when Enter key is pressed
-   *  on a focusable item
-   *
-   */
-  _keyDown(event) {
-    if (event.key == 'Enter') {
-      if(event.target.className == 'r') {
-        console.log('Slot: Enter key pressed on mod icon');
-        this._toggleModifications();
-      } else {
-        console.log('Slot: Enter key pressed on: %O', event.target);
-      }
-      this.props.onOpen(event); 
-    }
-  }
-  /**
-   * Render the slot
-   * @return {React.Component} The slot
-   */
-  render() {
-    let language = this.context.language;
-    let translate = language.translate;
-    let { ship, m, enabled, dropClass, dragOver, onOpen, onChange, selected, eligible, onSelect, warning, availableModules } = this.props;
-    let slotDetails, modificationsMarker, menu;
-
-    if (!selected) {
-      // If not selected then sure that modifications flag is unset
-      this._modificationsSelected = false;
-    }
-
-    if (m) {
-      slotDetails = this._getSlotDetails(m, enabled, translate, language.formats, language.units);  // Must be implemented by sub classes
-      modificationsMarker = JSON.stringify(m);
-    } else {
-      slotDetails = <div className={'empty'}>{translate(eligible ? 'emptyrestricted' : 'empty')}</div>;
-      modificationsMarker = '';
-    }
-
-    if (selected) {
-      if (this._modificationsSelected) {
-        menu = <ModificationsMenu
-          className={this._getClassNames()}
-          onChange={onChange}
-          ship={ship}
-          m={m}
-          marker={modificationsMarker}
-          modButton = {this.modButton}
-        />;
-      } else {
-        menu = <AvailableModulesMenu
-          className={this._getClassNames()}
-          modules={availableModules()}
-          shipMass={ship.hullMass}
-          m={m}
-          onSelect={onSelect}
-          warning={warning}
-          diffDetails={diffDetails.bind(ship, this.context.language)}
-          slotDiv = {this.slotDiv}
-        />;
-      }
-    }
-
-    // TODO: implement touch dragging
-
-    return (
-      <div className={cn('slot', dropClass, { selected })} onClick={onOpen} onKeyDown={this._keyDown} onContextMenu={this._contextMenu} onDragOver={dragOver} tabIndex="0" ref={slotDiv => this.slotDiv = slotDiv}>
-        <div className='details-container'>
-          <div className='sz'>{this._getMaxClassLabel(translate)}</div>
-            {slotDetails}
-  	  </div>
-        {menu}
-      </div>
-    );
-  }
-
-
-  /**
-   * Toggle the modifications flag when selecting the modifications icon
-   */
-  _toggleModifications() {
-    this._modificationsSelected = !this._modificationsSelected;
-  }
-}
+import React from 'react';
+import PropTypes from 'prop-types';
+import TranslatedComponent from './TranslatedComponent';
+import cn from 'classnames';
+import AvailableModulesMenu from './AvailableModulesMenu';
+import ModificationsMenu from './ModificationsMenu';
+import { diffDetails } from '../utils/SlotFunctions';
+import { wrapCtxMenu } from '../utils/UtilityFunctions';
+import { stopCtxPropagation } from '../utils/UtilityFunctions';
+
+/**
+ * Abstract Slot
+ */
+export default class Slot extends TranslatedComponent {
+
+  static propTypes = {
+    availableModules: PropTypes.func.isRequired,
+    onSelect: PropTypes.func.isRequired,
+    onOpen: PropTypes.func.isRequired,
+    maxClass: PropTypes.number.isRequired,
+    selected: PropTypes.bool,
+    m: PropTypes.object,
+    enabled: PropTypes.bool.isRequired,
+    ship: PropTypes.object.isRequired,
+    eligible: PropTypes.object,
+    warning: PropTypes.func,
+    drag: PropTypes.func,
+    drop: PropTypes.func,
+    dropClass: PropTypes.string
+  };
+
+  /**
+   * Constructor
+   * @param  {Object} props   React Component properties
+   */
+  constructor(props) {
+    super(props);
+
+    this._modificationsSelected = false;
+
+    this._contextMenu = wrapCtxMenu(this._contextMenu.bind(this));
+    this._getMaxClassLabel = this._getMaxClassLabel.bind(this);
+    this._keyDown = this._keyDown.bind(this);
+    this.slotDiv = null;
+  }
+
+  // Must be implemented by subclasses:
+  // _getSlotDetails()
+
+  /**
+   * Get the CSS class name for the slot. Can/should be overriden
+   * as necessary.
+   * @return {string} CSS Class name
+   */
+  _getClassNames() {
+    return null;
+  }
+
+  /**
+   * Get the label for the slot size/class
+   * Should be overriden if necessary
+   * @return {string} label
+   */
+  _getMaxClassLabel() {
+    return this.props.maxClass;
+  }
+
+  /**
+   * Empty slot on right-click
+   * @param  {SyntheticEvent} event Event
+   */
+  _contextMenu(event) {
+    event.stopPropagation();
+    event.preventDefault();
+    this.props.onSelect(null,null);
+  }
+
+  /** Key Down handler
+   *  @param {SyntheticEvent} event Event
+   *  ToDo: see if this can be moved up
+   *  we do more or less the same thing
+   *  in every section when Enter key is pressed
+   *  on a focusable item
+   *
+   */
+  _keyDown(event) {
+    if (event.key == 'Enter') {
+        if(event.target.className == 'r') {
+            this._toggleModifications();
+        }
+        this.props.onOpen(event); 
+    }
+  }
+  /**
+   * Render the slot
+   * @return {React.Component} The slot
+   */
+  render() {
+    let language = this.context.language;
+    let translate = language.translate;
+    let { ship, m, enabled, dropClass, dragOver, onOpen, onChange, selected, eligible, onSelect, warning, availableModules } = this.props;
+    let slotDetails, modificationsMarker, menu;
+
+    if (!selected) {
+      // If not selected then sure that modifications flag is unset
+      this._modificationsSelected = false;
+    }
+
+    if (m) {
+      slotDetails = this._getSlotDetails(m, enabled, translate, language.formats, language.units);  // Must be implemented by sub classes
+      modificationsMarker = JSON.stringify(m);
+    } else {
+      slotDetails = <div className={'empty'}>{translate(eligible ? 'emptyrestricted' : 'empty')}</div>;
+      modificationsMarker = '';
+    }
+
+    if (selected) {
+      if (this._modificationsSelected) {
+        menu = <ModificationsMenu
+          className={this._getClassNames()}
+          onChange={onChange}
+          ship={ship}
+          m={m}
+          marker={modificationsMarker}
+          modButton = {this.modButton}
+        />;
+      } else {
+        menu = <AvailableModulesMenu
+          className={this._getClassNames()}
+          modules={availableModules()}
+          shipMass={ship.hullMass}
+          m={m}
+          onSelect={onSelect}
+          warning={warning}
+          diffDetails={diffDetails.bind(ship, this.context.language)}
+          slotDiv = {this.slotDiv}
+        />;
+      }
+    }
+
+    // TODO: implement touch dragging
+
+    return (
+      <div className={cn('slot', dropClass, { selected })} onClick={onOpen} onKeyDown={this._keyDown} onContextMenu={this._contextMenu} onDragOver={dragOver} tabIndex="0" ref={slotDiv => this.slotDiv = slotDiv}>
+        <div className='details-container'>
+          <div className='sz'>{this._getMaxClassLabel(translate)}</div>
+            {slotDetails}
+  	  </div>
+        {menu}
+      </div>
+    );
+  }
+
+
+  /**
+   * Toggle the modifications flag when selecting the modifications icon
+   */
+  _toggleModifications() {
+    this._modificationsSelected = !this._modificationsSelected;
+  }
+}
diff --git a/src/app/components/SlotSection.jsx b/src/app/components/SlotSection.jsx
index 41dff6e3..0f837773 100644
--- a/src/app/components/SlotSection.jsx
+++ b/src/app/components/SlotSection.jsx
@@ -18,7 +18,8 @@ export default class SlotSection extends TranslatedComponent {
     onCargoChange: PropTypes.func.isRequired,
     onFuelChange: PropTypes.func.isRequired,
     code: PropTypes.string.isRequired,
-    togglePwr: PropTypes.func
+    togglePwr: PropTypes.func,
+    sectionMenuRefs: PropTypes.object
   };
 
   /**
@@ -32,7 +33,10 @@ export default class SlotSection extends TranslatedComponent {
     super(props);
     this.sectionId = sectionId;
     this.sectionName = sectionName;
-
+    this.ssHeadRef = null;
+    
+    this.sectionRefArr = this.props.sectionMenuRefs[this.sectionId] = [];
+    this.sectionRefArr['selectedRef'] = null;
     this._getSlots = this._getSlots.bind(this);
     this._selectModule = this._selectModule.bind(this);
     this._getSectionMenu = this._getSectionMenu.bind(this);
@@ -40,6 +44,8 @@ export default class SlotSection extends TranslatedComponent {
     this._drop = this._drop.bind(this);
     this._dragOverNone = this._dragOverNone.bind(this);
     this._close = this._close.bind(this);
+    this._keyDown = this._keyDown.bind(this);
+    this._handleSectionFocus = this._handleSectionFocus.bind(this);
     this.state = {};
   }
 
@@ -47,7 +53,59 @@ export default class SlotSection extends TranslatedComponent {
   //  _getSlots()
   //  _getSectionMenu()
   //  _contextMenu()
+  //  componentDidUpdate(prevProps)
 
+  /** 
+   * TODO: May either need to send the function to be triggered when Enter key is pressed, or else 
+   * may need a separate keyDown handler for each subclass (StandardSlotSection, HardpointSlotSection, etc.)
+   * ex: _keyDown(_keyDownfn, event)
+   * 
+   * @param {SyntheticEvent} event KeyDown event
+   */
+  _keyDown(event) {
+    if (event.key == 'Enter') {
+      event.stopPropagation();
+      if (event.currentTarget.nodeName === 'H1') {
+        this._openMenu(this.sectionName, event);
+      } else {
+        event.currentTarget.click();
+      }
+      return;
+    }
+    if (event.key == 'Tab') {
+      if (event.shiftKey) {
+          if ((event.currentTarget === this.sectionRefArr[this.firstRefId]) && this.sectionRefArr[this.lastRefId]) {
+          event.preventDefault();
+          this.sectionRefArr[this.lastRefId].focus();
+        }
+      } else {
+        if ((event.currentTarget === this.sectionRefArr[this.lastRefId]) &&  this.sectionRefArr[this.firstRefId]) {
+          event.preventDefault();
+          this.sectionRefArr[this.firstRefId].focus();
+        }
+      }
+    }
+  } 
+
+  /**
+   * Set focus on appropriate Slot Section Menu element
+   * @param {Object} focusPrevProps prevProps for componentDidUpdate() from ...SlotSection.jsx 
+   * @param {String} firstRef id of the first ref in ...SlotSection.jsx
+   * @param {String} lastRef id of the last ref in ...SlotSection.jsx
+   * 
+   */
+  _handleSectionFocus(focusPrevProps, firstRef, lastRef) {
+    if (this.selectedRefId !== null && this.sectionRefArr[this.selectedRefId]) {
+      // set focus on the previously selected option for the currently open section menu
+      this.sectionRefArr[this.selectedRefId].focus();
+    } else if (this.sectionRefArr[firstRef] && this.sectionRefArr[firstRef] != null) {
+      // set focus on the first option in the currently open section menu if none have been selected previously
+      this.sectionRefArr[firstRef].focus();
+    }  else if (this.props.currentMenu == null && focusPrevProps.currentMenu == this.sectionName && this.sectionRefArr['ssHeadRef']) {
+      // set focus on the section menu header when section menu is closed
+      this.sectionRefArr['ssHeadRef'].focus();
+    }
+  }
   /**
    * Open a menu
    * @param  {string} menu    Menu name
@@ -225,7 +283,7 @@ export default class SlotSection extends TranslatedComponent {
     return (
       <div id={this.sectionId} className={'group'}  onDragLeave={this._dragOverNone}>
         <div className={cn('section-menu', { selected: sectionMenuOpened })} onClick={open} onContextMenu={ctx}>
-          <h1>{translate(this.sectionName)} <Equalizer/></h1>
+          <h1 tabIndex="0" onKeyDown={this._keyDown} ref={ssHead => this.sectionRefArr['ssHeadRef'] = ssHead}>{translate(this.sectionName)} <Equalizer/></h1>
           {sectionMenuOpened ? this._getSectionMenu(translate, this.props.ship) : null }
         </div>
         {this._getSlots()}
diff --git a/src/app/components/StandardSlot.jsx b/src/app/components/StandardSlot.jsx
index 8e7f5075..6af5ab78 100644
--- a/src/app/components/StandardSlot.jsx
+++ b/src/app/components/StandardSlot.jsx
@@ -1,161 +1,159 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cn from 'classnames';
-import Persist from '../stores/Persist';
-import TranslatedComponent from './TranslatedComponent';
-import { diffDetails } from '../utils/SlotFunctions';
-import AvailableModulesMenu from './AvailableModulesMenu';
-import ModificationsMenu from './ModificationsMenu';
-import * as ModuleUtils from '../shipyard/ModuleUtils';
-import { ListModifications, Modified } from './SvgIcons';
-import { Modifications } from 'coriolis-data/dist';
-import { stopCtxPropagation } from '../utils/UtilityFunctions';
-import { blueprintTooltip } from '../utils/BlueprintFunctions';
-
-/**
- * Standard Slot
- */
-export default class StandardSlot extends TranslatedComponent {
-
-  static propTypes = {
-    slot: PropTypes.object,
-    modules: PropTypes.array.isRequired,
-    onSelect: PropTypes.func.isRequired,
-    onOpen: PropTypes.func.isRequired,
-    onChange: PropTypes.func.isRequired,
-    ship: PropTypes.object.isRequired,
-    selected: PropTypes.bool,
-    warning: PropTypes.func,
-  };
-
-  /**
-   * Construct the slot
-   * @param {object} props Object properties
-   */
-  constructor(props) {
-    super(props);
-    this._modificationsSelected = false;
-    this._keyDown = this._keyDown.bind(this);
-    this.modButton = null;
-    this.slotDiv = null;
-  }
-
-  /**
-   * Fired on key down
-   * @param {KeyboardEvent} event The keydown event
-   * @private
-   */
-  _keyDown(event) {
-    if (event.key == 'Enter') {
-      if(event.target.className == 'r') {
-        this._toggleModifications();
-      }
-      this.props.onOpen(event);
-    }
-  }
-
-  /**
-   * Render the slot
-   * @return {React.Component} Slot component
-   */
-  render() {
-    let { termtip, tooltip } = this.context;
-    let { translate, formats, units } = this.context.language;
-    let { modules, slot, selected, warning, onSelect, onChange, ship } = this.props;
-    let m = slot.m;
-    let classRating = m.class + m.rating;
-    let menu;
-    let validMods = m == null || !Modifications.modules[m.grp] ? [] : (Modifications.modules[m.grp].modifications || []);
-    if (m && m.name && m.name === 'Guardian Hybrid Power Plant') {
-      validMods = [];
-    }
-    let showModuleResistances = Persist.showModuleResistances();
-    let mass = m.getMass() || m.cargo || m.fuel || 0;
-
-    // Modifications tooltip shows blueprint and grade, if available
-    let modTT = translate('modified');
-    if (m && m.blueprint && m.blueprint.name) {
-      modTT = translate(m.blueprint.name) + ' ' + translate('grade') + ' ' + m.blueprint.grade;
-      if (m.blueprint.special && m.blueprint.special.id >= 0) {
-        modTT += ', ' + translate(m.blueprint.special.name);
-      }
-      modTT = (
-          <div>
-            <div>{modTT}</div>
-            {blueprintTooltip(translate, m.blueprint.grades[m.blueprint.grade], null, m.grp, m)}
-          </div>
-        );
-    }
-
-    if (!selected) {
-      // If not selected then sure that modifications flag is unset
-      this._modificationsSelected = false;
-    }
-
-    const modificationsMarker = JSON.stringify(m);
-
-    if (selected) {
-      if (this._modificationsSelected) {
-        menu = <ModificationsMenu
-          className='standard'
-          onChange={onChange}
-          ship={ship}
-          m={m}
-          marker={modificationsMarker}
-          modButton = {this.modButton}
-        />;
-      } else {
-        menu = <AvailableModulesMenu
-          className='standard'
-          modules={modules}
-          shipMass={ModuleUtils.isShieldGenerator(m.grp) ? ship.hullMass : ship.unladenMass}
-          m={m}
-          onSelect={onSelect}
-          warning={warning}
-          diffDetails={diffDetails.bind(ship, this.context.language)}
-          slotDiv = {this.slotDiv}
-        />;
-      }
-    }
-
-    return (
-      <div className={cn('slot', { selected: this.props.selected })} onClick={this.props.onOpen} onKeyDown={this._keyDown} onContextMenu={stopCtxPropagation} tabIndex="0" ref={ slotDiv => this.slotDiv = slotDiv }>
-        <div className={cn('details-container', { warning: warning && warning(slot.m), disabled: m.grp !== 'bh' && !slot.enabled })}>
-          <div className={'sz'}>{m.grp == 'bh' ? m.name.charAt(0) : slot.maxClass}</div>
-          <div>
-            <div className={'l'}>{classRating} {translate(m.name || m.grp)}{m.mods && Object.keys(m.mods).length > 0 ? <span className='r' onMouseOver={termtip.bind(null, modTT)} onMouseOut={tooltip.bind(null, null)}><Modified /></span> : null }</div>
-            <div className={'r'}>{formats.round(mass)}{units.T}</div>
-	    <div/>
-            <div className={'cb'}>
-                { m.getMinMass() ? <div className='l'>{translate('minimum mass')}: {formats.int(m.getMinMass())}{units.T}</div> : null }
-                { m.getOptMass() ? <div className='l'>{translate('optimal mass')}: {formats.int(m.getOptMass())}{units.T}</div> : null }
-                { m.getMaxMass() ? <div className='l'>{translate('max mass')}: {formats.int(m.getMaxMass())}{units.T}</div> : null }
-                { m.getOptMul() ? <div className='l'>{translate('optimal multiplier')}: {formats.rPct(m.getOptMul())}</div> : null }
-                { m.getRange() ? <div className='l'>{translate('range', m.grp)}: {formats.f2(m.getRange())}{units.km}</div> : null }
-                { m.time ? <div className='l'>{translate('time')}: {formats.time(m.time)}</div> : null }
-                { m.getThermalEfficiency() ? <div className='l'>{translate('efficiency')}: {formats.f2(m.getThermalEfficiency())}</div> : null }
-                { m.getPowerGeneration() > 0 ? <div className='l'>{translate('pgen')}: {formats.f1(m.getPowerGeneration())}{units.MW}</div> : null }
-                { m.getMaxFuelPerJump() ? <div className='l'>{translate('max')} {translate('fuel')}: {formats.f1(m.getMaxFuelPerJump())}{units.T}</div> : null }
-                { m.getWeaponsCapacity() ? <div className='l'>{translate('WEP')}: {formats.f1(m.getWeaponsCapacity())}{units.MJ} / {formats.f1(m.getWeaponsRechargeRate())}{units.MW}</div> : null }
-                { m.getSystemsCapacity() ? <div className='l'>{translate('SYS')}: {formats.f1(m.getSystemsCapacity())}{units.MJ} / {formats.f1(m.getSystemsRechargeRate())}{units.MW}</div> : null }
-                { m.getEnginesCapacity() ? <div className='l'>{translate('ENG')}: {formats.f1(m.getEnginesCapacity())}{units.MJ} / {formats.f1(m.getEnginesRechargeRate())}{units.MW}</div> : null }
-                { showModuleResistances && m.getExplosiveResistance() ? <div className='l'>{translate('explres')}: {formats.pct(m.getExplosiveResistance())}</div> : null }
-                { showModuleResistances && m.getKineticResistance() ? <div className='l'>{translate('kinres')}: {formats.pct(m.getKineticResistance())}</div> : null }
-                { showModuleResistances && m.getThermalResistance() ? <div className='l'>{translate('thermres')}: {formats.pct(m.getThermalResistance())}</div> : null }
-                { m.getIntegrity() ? <div className='l'>{translate('integrity')}: {formats.int(m.getIntegrity())}</div> : null }
-	        { validMods.length > 0 ? <div className='r' tabIndex="0" ref={ modButton => this.modButton = modButton }><button  tabIndex="-1" onClick={this._toggleModifications.bind(this)} onContextMenu={stopCtxPropagation} onMouseOver={termtip.bind(null, 'modifications')} onMouseOut={tooltip.bind(null, null)}><ListModifications /></button></div> : null }
-            </div>
-          </div>
-        </div>
-        {menu}
-      </div>
-    );
-  }
-
-  /**
-   * Toggle the modifications flag when selecting the modifications icon
-   */
-  _toggleModifications() {
-    this._modificationsSelected = !this._modificationsSelected;
-  }
-}
+import React from 'react';
+import PropTypes from 'prop-types';
+import cn from 'classnames';
+import Persist from '../stores/Persist';
+import TranslatedComponent from './TranslatedComponent';
+import { diffDetails } from '../utils/SlotFunctions';
+import AvailableModulesMenu from './AvailableModulesMenu';
+import ModificationsMenu from './ModificationsMenu';
+import * as ModuleUtils from '../shipyard/ModuleUtils';
+import { ListModifications, Modified } from './SvgIcons';
+import { Modifications } from 'coriolis-data/dist';
+import { stopCtxPropagation } from '../utils/UtilityFunctions';
+import { blueprintTooltip } from '../utils/BlueprintFunctions';
+
+/**
+ * Standard Slot
+ */
+export default class StandardSlot extends TranslatedComponent {
+
+  static propTypes = {
+    slot: PropTypes.object,
+    modules: PropTypes.array.isRequired,
+    onSelect: PropTypes.func.isRequired,
+    onOpen: PropTypes.func.isRequired,
+    onChange: PropTypes.func.isRequired,
+    ship: PropTypes.object.isRequired,
+    selected: PropTypes.bool,
+    warning: PropTypes.func,
+  };
+
+  /**
+   * Construct the slot
+   * @param {object} props Object properties
+   */
+  constructor(props) {
+    super(props);
+    this._modificationsSelected = false;
+    this._keyDown = this._keyDown.bind(this);
+    this.modButton = null;
+    this.slotDiv = null;
+  }
+  /**
+   * Handle Enter key
+   * @param {SyntheticEvent} event KeyDown event
+   */
+   _keyDown(event) {
+    if (event.key == 'Enter') {
+      if(event.target.className == 'r') {
+        this._toggleModifications();
+      }
+      this.props.onOpen(event);
+    }
+  }
+
+  /**
+   * Render the slot
+   * @return {React.Component} Slot component
+   */
+  render() {
+    let { termtip, tooltip } = this.context;
+    let { translate, formats, units } = this.context.language;
+    let { modules, slot, selected, warning, onSelect, onChange, ship } = this.props;
+    let m = slot.m;
+    let classRating = m.class + m.rating;
+    let menu;
+    let validMods = m == null || !Modifications.modules[m.grp] ? [] : (Modifications.modules[m.grp].modifications || []);
+    if (m && m.name && m.name === 'Guardian Hybrid Power Plant') {
+      validMods = [];
+    }
+    let showModuleResistances = Persist.showModuleResistances();
+    let mass = m.getMass() || m.cargo || m.fuel || 0;
+
+    // Modifications tooltip shows blueprint and grade, if available
+    let modTT = translate('modified');
+    if (m && m.blueprint && m.blueprint.name) {
+      modTT = translate(m.blueprint.name) + ' ' + translate('grade') + ' ' + m.blueprint.grade;
+      if (m.blueprint.special && m.blueprint.special.id >= 0) {
+        modTT += ', ' + translate(m.blueprint.special.name);
+      }
+      modTT = (
+          <div>
+            <div>{modTT}</div>
+            {blueprintTooltip(translate, m.blueprint.grades[m.blueprint.grade], null, m.grp, m)}
+          </div>
+        );
+    }
+
+    if (!selected) {
+      // If not selected then sure that modifications flag is unset
+      this._modificationsSelected = false;
+    }
+
+    const modificationsMarker = JSON.stringify(m);
+
+    if (selected) {
+      if (this._modificationsSelected) {
+        menu = <ModificationsMenu
+          className='standard'
+          onChange={onChange}
+          ship={ship}
+          m={m}
+          marker={modificationsMarker}
+          modButton = {this.modButton}
+        />;
+      } else {
+        menu = <AvailableModulesMenu
+          className='standard'
+          modules={modules}
+          shipMass={ModuleUtils.isShieldGenerator(m.grp) ? ship.hullMass : ship.unladenMass}
+          m={m}
+          onSelect={onSelect}
+          warning={warning}
+          diffDetails={diffDetails.bind(ship, this.context.language)}
+          slotDiv = {this.slotDiv}
+        />;
+      }
+    }
+
+    return (
+      <div className={cn('slot', { selected: this.props.selected })} onClick={this.props.onOpen} onKeyDown={this._keyDown} onContextMenu={stopCtxPropagation} tabIndex="0" ref={ slotDiv => this.slotDiv = slotDiv }>
+        <div className={cn('details-container', { warning: warning && warning(slot.m), disabled: m.grp !== 'bh' && !slot.enabled })}>
+          <div className={'sz'}>{m.grp == 'bh' ? m.name.charAt(0) : slot.maxClass}</div>
+          <div>
+            <div className={'l'}>{classRating} {translate(m.name || m.grp)}{m.mods && Object.keys(m.mods).length > 0 ? <span className='r' onMouseOver={termtip.bind(null, modTT)} onMouseOut={tooltip.bind(null, null)}><Modified /></span> : null }</div>
+            <div className={'r'}>{formats.round(mass)}{units.T}</div>
+	    <div/>
+            <div className={'cb'}>
+                { m.getMinMass() ? <div className='l'>{translate('minimum mass')}: {formats.int(m.getMinMass())}{units.T}</div> : null }
+                { m.getOptMass() ? <div className='l'>{translate('optimal mass')}: {formats.int(m.getOptMass())}{units.T}</div> : null }
+                { m.getMaxMass() ? <div className='l'>{translate('max mass')}: {formats.int(m.getMaxMass())}{units.T}</div> : null }
+                { m.getOptMul() ? <div className='l'>{translate('optimal multiplier')}: {formats.rPct(m.getOptMul())}</div> : null }
+                { m.getRange() ? <div className='l'>{translate('range', m.grp)}: {formats.f2(m.getRange())}{units.km}</div> : null }
+                { m.time ? <div className='l'>{translate('time')}: {formats.time(m.time)}</div> : null }
+                { m.getThermalEfficiency() ? <div className='l'>{translate('efficiency')}: {formats.f2(m.getThermalEfficiency())}</div> : null }
+                { m.getPowerGeneration() > 0 ? <div className='l'>{translate('pgen')}: {formats.f1(m.getPowerGeneration())}{units.MW}</div> : null }
+                { m.getMaxFuelPerJump() ? <div className='l'>{translate('max')} {translate('fuel')}: {formats.f1(m.getMaxFuelPerJump())}{units.T}</div> : null }
+                { m.getWeaponsCapacity() ? <div className='l'>{translate('WEP')}: {formats.f1(m.getWeaponsCapacity())}{units.MJ} / {formats.f1(m.getWeaponsRechargeRate())}{units.MW}</div> : null }
+                { m.getSystemsCapacity() ? <div className='l'>{translate('SYS')}: {formats.f1(m.getSystemsCapacity())}{units.MJ} / {formats.f1(m.getSystemsRechargeRate())}{units.MW}</div> : null }
+                { m.getEnginesCapacity() ? <div className='l'>{translate('ENG')}: {formats.f1(m.getEnginesCapacity())}{units.MJ} / {formats.f1(m.getEnginesRechargeRate())}{units.MW}</div> : null }
+                { showModuleResistances && m.getExplosiveResistance() ? <div className='l'>{translate('explres')}: {formats.pct(m.getExplosiveResistance())}</div> : null }
+                { showModuleResistances && m.getKineticResistance() ? <div className='l'>{translate('kinres')}: {formats.pct(m.getKineticResistance())}</div> : null }
+                { showModuleResistances && m.getThermalResistance() ? <div className='l'>{translate('thermres')}: {formats.pct(m.getThermalResistance())}</div> : null }
+                { m.getIntegrity() ? <div className='l'>{translate('integrity')}: {formats.int(m.getIntegrity())}</div> : null }
+	        { validMods.length > 0 ? <div className='r' tabIndex="0" ref={ modButton => this.modButton = modButton }><button  tabIndex="-1" onClick={this._toggleModifications.bind(this)} onContextMenu={stopCtxPropagation} onMouseOver={termtip.bind(null, 'modifications')} onMouseOut={tooltip.bind(null, null)}><ListModifications /></button></div> : null }
+            </div>
+          </div>
+        </div>
+        {menu}
+      </div>
+    );
+  }
+
+  /**
+   * Toggle the modifications flag when selecting the modifications icon
+   */
+  _toggleModifications() {
+    this._modificationsSelected = !this._modificationsSelected;
+  }
+}
diff --git a/src/app/components/StandardSlotSection.jsx b/src/app/components/StandardSlotSection.jsx
index 566478f2..7ed5cb55 100644
--- a/src/app/components/StandardSlotSection.jsx
+++ b/src/app/components/StandardSlotSection.jsx
@@ -20,12 +20,23 @@ export default class StandardSlotSection extends SlotSection {
     super(props, context, 'standard', 'core internal');
     this._optimizeStandard = this._optimizeStandard.bind(this);
     this._selectBulkhead = this._selectBulkhead.bind(this);
+    this.selectedRefId = null;
+    this.firstRefId = 'maxjump';
+    this.lastRefId = 'racer';
+  }
+  /**
+   * Handle focus if the component updates
+   * @param {Object} prevProps React Component properties
+   */
+  componentDidUpdate(prevProps) {
+    this._handleSectionFocus(prevProps,this.firstRefId, this.lastRefId);
   }
 
   /**
    * Use the lightest/optimal available standard modules
    */
   _optimizeStandard() {
+    this.selectedRefId = 'maxjump';
     this.props.ship.useLightestStandard();
     this.props.onChange();
     this.props.onCargoChange(this.props.ship.cargoCapacity);
@@ -39,6 +50,8 @@ export default class StandardSlotSection extends SlotSection {
    * @param {integer} bulkheadIndex Bulkhead to use see Constants.BulkheadNames
    */
   _multiPurpose(shielded, bulkheadIndex) {
+    this.selectedRefId = 'multipurpose';
+    if (bulkheadIndex === 2) this.selectedRefId = 'combat';
     ShipRoles.multiPurpose(this.props.ship, shielded, bulkheadIndex);
     this.props.onChange();
     this.props.onCargoChange(this.props.ship.cargoCapacity);
@@ -51,6 +64,7 @@ export default class StandardSlotSection extends SlotSection {
    * @param  {Boolean} shielded True if shield generator should be included
    */
   _optimizeCargo(shielded) {
+    this.selectedRefId = 'trader';
     ShipRoles.trader(this.props.ship, shielded);
     this.props.onChange();
     this.props.onCargoChange(this.props.ship.cargoCapacity);
@@ -63,6 +77,7 @@ export default class StandardSlotSection extends SlotSection {
    * @param  {Boolean} shielded True if shield generator should be included
    */
   _optimizeMiner(shielded) {
+    this.selectedRefId = 'miner';
     ShipRoles.miner(this.props.ship, shielded);
     this.props.onChange();
     this.props.onCargoChange(this.props.ship.cargoCapacity);
@@ -75,6 +90,8 @@ export default class StandardSlotSection extends SlotSection {
    * @param  {Boolean} planetary True if Planetary Vehicle Hangar (PVH) should be included
    */
   _optimizeExplorer(planetary) {
+    this.selectedRefId = 'explorer';
+    if (planetary) this.selectedRefId = 'planetary';
     ShipRoles.explorer(this.props.ship, planetary);
     this.props.onChange();
     this.props.onCargoChange(this.props.ship.cargoCapacity);
@@ -86,6 +103,7 @@ export default class StandardSlotSection extends SlotSection {
    * Racer role
    */
   _optimizeRacer() {
+    this.selectedRefId = 'racer';
     ShipRoles.racer(this.props.ship);
     this.props.onChange();
     this.props.onCargoChange(this.props.ship.cargoCapacity);
@@ -229,17 +247,17 @@ export default class StandardSlotSection extends SlotSection {
     let planetaryDisabled = this.props.ship.internal.length < 4;
     return <div className='select' onClick={(e) => e.stopPropagation()} onContextMenu={stopCtxPropagation}>
       <ul>
-        <li className='lc' onClick={this._optimizeStandard}>{translate('Maximize Jump Range')}</li>
+        <li className='lc' tabIndex="0" onClick={this._optimizeStandard} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['maxjump'] = smRef}>{translate('Maximize Jump Range')}</li>
       </ul>
       <div className='select-group cap'>{translate('roles')}</div>
       <ul>
-        <li className='lc' onClick={this._multiPurpose.bind(this, false, 0)}>{translate('Multi-purpose')}</li>
-        <li className='lc' onClick={this._multiPurpose.bind(this, true, 2)}>{translate('Combat')}</li>
-        <li className='lc' onClick={this._optimizeCargo.bind(this, true)}>{translate('Trader')}</li>
-        <li className='lc' onClick={this._optimizeExplorer.bind(this, false)}>{translate('Explorer')}</li>
-        <li className={cn('lc', { disabled:  planetaryDisabled })} onClick={!planetaryDisabled && this._optimizeExplorer.bind(this, true)}>{translate('Planetary Explorer')}</li>
-        <li className='lc' onClick={this._optimizeMiner.bind(this, true)}>{translate('Miner')}</li>
-        <li className='lc' onClick={this._optimizeRacer.bind(this)}>{translate('Racer')}</li>
+        <li className='lc' tabIndex="0" onClick={this._multiPurpose.bind(this, false, 0)} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['multipurpose'] = smRef}>{translate('Multi-purpose')}</li>
+        <li className='lc' tabIndex="0" onClick={this._multiPurpose.bind(this, true, 2)} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['combat'] = smRef}>{translate('Combat')}</li>
+        <li className='lc' tabIndex="0" onClick={this._optimizeCargo.bind(this, true)} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['trader'] = smRef}>{translate('Trader')}</li>
+        <li className='lc' tabIndex="0" onClick={this._optimizeExplorer.bind(this, false)} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['explorer'] = smRef}>{translate('Explorer')}</li>
+        <li className={cn('lc', { disabled:  planetaryDisabled })} tabIndex={planetaryDisabled ? '' : '0'} onClick={!planetaryDisabled && this._optimizeExplorer.bind(this, true)} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['planetary'] = smRef}>{translate('Planetary Explorer')}</li>
+        <li className='lc' tabIndex="0" onClick={this._optimizeMiner.bind(this, true)} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['miner'] = smRef}>{translate('Miner')}</li>
+        <li className='lc' tabIndex="0" onClick={this._optimizeRacer.bind(this)} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['racer'] = smRef}>{translate('Racer')}</li>
       </ul>
     </div>;
   }
diff --git a/src/app/components/UtilitySlotSection.jsx b/src/app/components/UtilitySlotSection.jsx
index 594e75d7..0b30e57b 100644
--- a/src/app/components/UtilitySlotSection.jsx
+++ b/src/app/components/UtilitySlotSection.jsx
@@ -17,6 +17,16 @@ export default class UtilitySlotSection extends SlotSection {
   constructor(props, context) {
     super(props, context, 'utility', 'utility mounts');
     this._empty = this._empty.bind(this);
+    this.selectedRefId = null;
+    this.firstRefId = 'emptyall';
+    this.lastRefId = 'po';
+  }
+  /**
+   * Handle focus if the component updates
+   * @param {Object} prevProps React Component properties
+   */
+  componentDidUpdate(prevProps) {
+    this._handleSectionFocus(prevProps,this.firstRefId, this.lastRefId);
   }
 
   /**
@@ -36,6 +46,9 @@ export default class UtilitySlotSection extends SlotSection {
    * @param  {Synthetic} event  Event
    */
   _use(group, rating, name, event) {
+    this.selectedRefId = group;
+    if (rating !== null) this.selectedRefId += '-' + rating;
+
     this.props.ship.useUtility(group, rating, name, event.getModifierState('Alt'));
     this.props.onChange();
     this._close();
@@ -94,28 +107,28 @@ export default class UtilitySlotSection extends SlotSection {
 
     return <div className='select' onClick={(e) => e.stopPropagation()} onContextMenu={stopCtxPropagation}>
       <ul>
-        <li className='lc' onClick={this._empty}>{translate('empty all')}</li>
+        <li className='lc' tabIndex='0' onClick={this._empty} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['emptyall'] = smRef}>{translate('empty all')}</li>
         <li className='optional-hide' style={{ textAlign: 'center', marginTop: '1em' }}>{translate('PHRASE_ALT_ALL')}</li>
       </ul>
       <div className='select-group cap'>{translate('sb')}</div>
       <ul>
-        <li className='c' onClick={_use.bind(this, 'sb', 'A', null)}>A</li>
-        <li className='c' onClick={_use.bind(this, 'sb', 'B', null)}>B</li>
-        <li className='c' onClick={_use.bind(this, 'sb', 'C', null)}>C</li>
-        <li className='c' onClick={_use.bind(this, 'sb', 'D', null)}>D</li>
-        <li className='c' onClick={_use.bind(this, 'sb', 'E', null)}>E</li>
+        <li className='c' tabIndex='0' onClick={_use.bind(this, 'sb', 'A', null)} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['sb-A'] = smRef}>A</li>
+        <li className='c' tabIndex='0' onClick={_use.bind(this, 'sb', 'B', null)} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['sb-B'] = smRef}>B</li>
+        <li className='c' tabIndex='0' onClick={_use.bind(this, 'sb', 'C', null)} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['sb-C'] = smRef}>C</li>
+        <li className='c' tabIndex='0' onClick={_use.bind(this, 'sb', 'D', null)} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['sb-D'] = smRef}>D</li>
+        <li className='c' tabIndex='0' onClick={_use.bind(this, 'sb', 'E', null)} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['sb-E'] = smRef}>E</li>
       </ul>
       <div className='select-group cap'>{translate('hs')}</div>
       <ul>
-        <li className='lc' onClick={_use.bind(this, 'hs', null, 'Heat Sink Launcher')}>{translate('Heat Sink Launcher')}</li>
+        <li className='lc' tabIndex='0' onClick={_use.bind(this, 'hs', null, 'Heat Sink Launcher')} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['hs'] = smRef}>{translate('Heat Sink Launcher')}</li>
       </ul>
       <div className='select-group cap'>{translate('ch')}</div>
       <ul>
-        <li className='lc' onClick={_use.bind(this, 'ch', null, 'Chaff Launcher')}>{translate('Chaff Launcher')}</li>
+        <li className='lc' tabIndex='0' onClick={_use.bind(this, 'ch', null, 'Chaff Launcher')} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['ch'] = smRef}>{translate('Chaff Launcher')}</li>
       </ul>
       <div className='select-group cap'>{translate('po')}</div>
       <ul>
-        <li className='lc' onClick={_use.bind(this, 'po', null, 'Point Defence')}>{translate('Point Defence')}</li>
+        <li className='lc' tabIndex='0' onClick={_use.bind(this, 'po', null, 'Point Defence')} onKeyDown={this._keyDown} ref={smRef => this.sectionRefArr['po'] = smRef}>{translate('Point Defence')}</li>
       </ul>
     </div>;
   }
diff --git a/src/app/pages/OutfittingPage.jsx b/src/app/pages/OutfittingPage.jsx
index a26efcc4..81209df1 100644
--- a/src/app/pages/OutfittingPage.jsx
+++ b/src/app/pages/OutfittingPage.jsx
@@ -58,6 +58,7 @@ export default class OutfittingPage extends Page {
     this._fuelUpdated = this._fuelUpdated.bind(this);
     this._opponentUpdated = this._opponentUpdated.bind(this);
     this._engagementRangeUpdated = this._engagementRangeUpdated.bind(this);
+    this._sectionMenuRefs = {};
   }
 
   /**
@@ -555,7 +556,6 @@ export default class OutfittingPage extends Page {
 
     const requirements = Ships[ship.id].requirements;
     let requirementElements = [];
-
     /**
      * Render the requirements for a ship / etc
      * @param {string} className Class names
@@ -608,11 +608,11 @@ export default class OutfittingPage extends Page {
         </div>
 
         {/* Main tables */}
-        <ShipSummaryTable ship={ship} fuel={fuel} cargo={cargo} marker={shipSummaryMarker} pips={{ sys: this.state.sys, wep: this.state.wep, eng: this.state.eng }} />
-        <StandardSlotSection ship={ship} fuel={fuel} cargo={cargo} code={standardSlotMarker} onChange={shipUpdated} onCargoChange={this._cargoUpdated} onFuelChange={this._fuelUpdated} currentMenu={menu} />
-        <InternalSlotSection ship={ship} code={internalSlotMarker} onChange={shipUpdated} onCargoChange={this._cargoUpdated} onFuelChange={this._fuelUpdated} currentMenu={menu} />
-        <HardpointSlotSection ship={ship} code={hardpointsSlotMarker} onChange={shipUpdated} onCargoChange={this._cargoUpdated} onFuelChange={this._fuelUpdated} currentMenu={menu} />
-        <UtilitySlotSection ship={ship} code={hardpointsSlotMarker} onChange={shipUpdated} onCargoChange={this._cargoUpdated} onFuelChange={this._fuelUpdated} currentMenu={menu} />
+        <ShipSummaryTable ship={ship} fuel={fuel} cargo={cargo} marker={shipSummaryMarker} pips={{sys: this.state.sys, wep: this.state.wep, eng: this.state.eng}} />
+        <StandardSlotSection ship={ship} fuel={fuel} cargo={cargo} code={standardSlotMarker} onChange={shipUpdated} onCargoChange={this._cargoUpdated} onFuelChange={this._fuelUpdated} currentMenu={menu} sectionMenuRefs={this._sectionMenuRefs}/>
+        <InternalSlotSection ship={ship} code={internalSlotMarker} onChange={shipUpdated} onCargoChange={this._cargoUpdated} onFuelChange={this._fuelUpdated} currentMenu={menu} sectionMenuRefs={this._sectionMenuRefs}/>
+        <HardpointSlotSection ship={ship} code={hardpointsSlotMarker} onChange={shipUpdated} onCargoChange={this._cargoUpdated} onFuelChange={this._fuelUpdated} currentMenu={menu} sectionMenuRefs={this._sectionMenuRefs}/>
+        <UtilitySlotSection ship={ship} code={hardpointsSlotMarker} onChange={shipUpdated} onCargoChange={this._cargoUpdated} onFuelChange={this._fuelUpdated} currentMenu={menu} sectionMenuRefs={this._sectionMenuRefs}/>
 
         {/* Control of ship and opponent */}
         <div className='group quarter'>