mirror of
https://github.com/EDCD/coriolis.git
synced 2025-12-10 15:15:34 +00:00
Feature/#271 keyboard nav (#288)
* Initial stab at Tab/Enter key handlers for Slots - Added tabIndex="0" attribute for the Slot sections and for the <li> elements inside. * Set up refs for slot <li> elements to allow focus manipulation. * Added initial keyDown handlers for Enter and Tab keys. * Additional update for focus handling inside slot selection <ul> * Added Tab/Enter/Shift-Tab key handlers for Outfitting section. Needs some fine-tuning but is usable in current state * Added keydown handler for Empty module selection. ToDo: handlers for engineering sections * Cleanup * Update to add focus on Modifications icon and Enter key handler to open modifications menu * Updates to add keydown handlers for modifications menu, and tab/shift-tab/enter key handlers while mod menus are open. * Additional updates for keyDown handlers * Update to add tabindex=0 and Enter Key handling for specials menus. ToDo: keep focus inside specials menu until item is selected with Enter key. * Further updates for keyDown handler in Modifications menus. * Added keyDown handlers to full mod menu (when mod menu is opened and a mod has been previously selected) * Update to add shift-tab and tab focus handling for number editor fields * Additional tab/shift-tab handlers. Fixed bug with exp. effects being recaculated for every onBlur event. * Added check to bypass focus reset if change in component was due to change in modification value. * Additional updates to tab/shift-tab handlers for modifications menu. * more updates * "Final" updates and bug fixes - added code for cases where there were no specials. * Final updates to set focus to appropriate element when slot/mod menus are closed.
This commit is contained in:
@@ -21,6 +21,8 @@ export default class InternalSlot extends Slot {
|
||||
* @param {Object} u Localized Units Map
|
||||
* @return {React.Component} Slot contents
|
||||
*/
|
||||
|
||||
|
||||
_getSlotDetails(m, enabled, translate, formats, u) {
|
||||
if (m) {
|
||||
let classRating = m.class + m.rating;
|
||||
@@ -85,7 +87,7 @@ export default class InternalSlot extends Slot {
|
||||
{ m.getHullReinforcement() ? <div className='l'>{translate('armour')}: {formats.int(m.getHullReinforcement() + ship.baseArmour * m.getModValue('hullboost') / 10000)}</div> : null }
|
||||
{ m.getProtection() ? <div className='l'>{translate('protection')}: {formats.rPct(m.getProtection())}</div> : null }
|
||||
{ m.getIntegrity() ? <div className='l'>{translate('integrity')}: {formats.int(m.getIntegrity())}</div> : null }
|
||||
{ m && validMods.length > 0 ? <div className='r' ><button onClick={this._toggleModifications.bind(this)} onContextMenu={stopCtxPropagation} onMouseOver={termtip.bind(null, 'modifications')} onMouseOut={tooltip.bind(null, null)}><ListModifications /></button></div> : null }
|
||||
{ m && 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>;
|
||||
} else {
|
||||
|
||||
Reference in New Issue
Block a user