#1438 Accessibility: Tabbing - Keyboard navigation of canvas objects (Part 2)

canvas_modules/common-canvas/locales/common-canvas/locales/en.json

@@ -11,6 +11,7 @@
   "canvas.addComment": "New comment",
   "canvas.addWysiwygComment": "New WYSIWYG comment",
   "canvas.selectAll": "Select all",
+  "canvas.deselectAll": "Deselect all",
   "canvas.undo": "Undo",
   "canvas.redo": "Redo",
   "canvas.undoCommand": "Undo: {undo_command}",

canvas_modules/common-canvas/locales/common-canvas/locales/eo.json

@@ -11,6 +11,7 @@
 	"canvas.addComment": "[Esperanto~New comment~eo]",
 	"canvas.addWysiwygComment": "[Esperanto~New WYSIWYG comment~~~~~eo]",
 	"canvas.selectAll": "[Esperanto~Select all~~~~~~eo]",
+	"canvas.deselectAll": "[Esperanto~Deselect all~~~~eo]",
 	"canvas.undo": "[Esperanto~Undo~eo]",
 	"canvas.redo": "[Esperanto~Redo~eo]",
 	"canvas.undoCommand": "[Esperanto~Undo: {undo_command}~~eo]",

canvas_modules/common-canvas/src/color-picker/color-picker.jsx

@@ -16,19 +16,11 @@
 
 import React from "react";
 import PropTypes from "prop-types";
+import KeyboardUtils from "../common-canvas/keyboard-utils.js";
 import Logger from "../logging/canvas-logger.js";
 import colorSetArray from "./color-set.js";
-
 import { WYSIWYG } from "../common-canvas/constants/canvas-constants.js";
 
-const TAB_KEY = 9;
-const RETURN_KEY = 13;
-const SPACE_KEY = 32;
-const LEFT_ARROW_KEY = 37;
-const UP_ARROW_KEY = 38;
-const RIGHT_ARROW_KEY = 39;
-const DOWN_ARROW_KEY = 40;
-
 // These dimensions should match the values in color-picker.scss
 const COLOR_DIMENSION = 20;
 const COLOR_PADDING = 5;
@@ -66,47 +58,49 @@ class ColorPicker extends React.Component {
 	}
 
 	onKeyDown(evt) {
-		if (evt.keyCode === RIGHT_ARROW_KEY) {
+		if (KeyboardUtils.nextColor(evt)) {
 			evt.stopPropagation();
 			this.colorIndex++;
 			if (this.colorIndex > this.totalColors - 1) {
 				this.colorIndex = 0;
 			}
+			this.setFocus(this.colorIndex);
 
-		} else if (evt.keyCode === LEFT_ARROW_KEY) {
+		} else if (KeyboardUtils.previousColor(evt)) {
 			evt.stopPropagation();
 			this.colorIndex--;
 			if (this.colorIndex < 0) {
-				this.colorIndex = this.totalColors - 1;
+				this.props.closeSubPanel();
+				return;
 			}
+			this.setFocus(this.colorIndex);
 
-		} else if (evt.keyCode === UP_ARROW_KEY) {
+		} else if (KeyboardUtils.aboveColor(evt)) {
 			evt.stopPropagation();
 			this.colorIndex -= this.colorsPerRow;
 			if (this.colorIndex < 0) {
 				this.colorIndex += this.colorsPerRow;
 			}
+			this.setFocus(this.colorIndex);
 
-		} else if (evt.keyCode === DOWN_ARROW_KEY) {
+		} else if (KeyboardUtils.belowColor(evt)) {
 			evt.stopPropagation();
 			this.colorIndex += this.colorsPerRow;
-			if (this.colorIndex > 11) {
+			if (this.colorIndex > this.totalColors - 1) {
 				this.colorIndex -= this.colorsPerRow;
 			}
+			this.setFocus(this.colorIndex);
 
-		} else if (evt.keyCode === SPACE_KEY ||
-					evt.keyCode === RETURN_KEY) {
+		} else if (KeyboardUtils.selectColor(evt)) {
 			evt.stopPropagation();
 			evt.preventDefault();
 			this.selectColor(evt);
 
-		} else if (evt.keyCode === TAB_KEY) {
+		} else if (KeyboardUtils.tabKey(evt)) {
 			evt.stopPropagation();
 			evt.preventDefault();
 			return;
 		}
-
-		this.setFocus(this.colorIndex);
 	}
 
 	setFocus(index) {

canvas_modules/common-canvas/src/command-actions/colorSelectedObjectsAction.js

@@ -46,6 +46,10 @@ export default class ColorSelectedObjectsAction extends Action {
 		return this.actionLabel;
 	}
 
+	getFocusObject() {
+		return this.data.selectedObjects[0];
+	}
+
 	createActionLabel() {
 		return this.labelUtil.getActionLabel(this, "action.colorComments", {
 			comments_count: this.data.selectedObjectIds.length

canvas_modules/common-canvas/src/command-actions/createAutoNodeAction.js

@@ -23,6 +23,7 @@
 /***************************************************************************/
 
 import Action from "../command-stack/action.js";
+import { CANVAS_FOCUS } from "../common-canvas/constants/canvas-constants.js";
 
 export default class CreateAutoNodeAction extends Action {
 	constructor(data, canvasController) {
@@ -31,12 +32,14 @@ export default class CreateAutoNodeAction extends Action {
 		this.labelUtil = canvasController.labelUtil;
 		this.objectModel = canvasController.objectModel;
 		this.apiPipeline = this.objectModel.getAPIPipeline(data.pipelineId);
+		// If addLink is missing we default it to be true.
+		this.data.addLink = typeof this.data.addLink === "undefined" ? true : this.data.addLink;
 
 		const autoLinkOnlyFromSelNodes = canvasController.getCanvasConfig().enableAutoLinkOnlyFromSelNodes;
 		this.srcNode = this.apiPipeline.getAutoSourceNode(autoLinkOnlyFromSelNodes);
 		this.newNode = this.apiPipeline.createAutoNode(data, this.srcNode);
 		this.newLink = null;
-		if (this.apiPipeline.isLinkNeededWithAutoNode(this.newNode, this.srcNode)) {
+		if (this.data.addLink && this.apiPipeline.isLinkNeededWithAutoNode(this.newNode, this.srcNode)) {
 			this.newLink = this.apiPipeline.createLink(this.newNode, this.srcNode);
 		}
 	}
@@ -60,10 +63,12 @@ export default class CreateAutoNodeAction extends Action {
 		}
 
 		this.objectModel.setSelections([this.newNode.id], this.data.pipelineId);
+		this.focusObject = this.newNode;
 	}
 
 	undo() {
 		this.apiPipeline.deleteNodes([this.newNode]);
+		this.focusObject = CANVAS_FOCUS;
 	}
 
 	redo() {
@@ -73,4 +78,8 @@ export default class CreateAutoNodeAction extends Action {
 	getLabel() {
 		return this.labelUtil.getActionLabel(this, "action.createNode", { node_label: this.newNode.label });
 	}
+
+	getFocusObject() {
+		return this.focusObject;
+	}
 }

canvas_modules/common-canvas/src/command-actions/createCommentAction.js

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 import Action from "../command-stack/action.js";
+import { CANVAS_FOCUS } from "../common-canvas/constants/canvas-constants.js";
 
 export default class CreateCommentAction extends Action {
 	constructor(data, canvasController) {
@@ -34,17 +35,23 @@ export default class CreateCommentAction extends Action {
 	// Standard methods
 	do() {
 		this.apiPipeline.addComment(this.comment);
+		this.focusObject = this.comment;
 	}
 
 	undo() {
 		this.apiPipeline.deleteComment(this.comment.id);
+		this.focusObject = CANVAS_FOCUS;
 	}
 
 	redo() {
-		this.apiPipeline.addComment(this.comment);
+		this.do();
 	}
 
 	getLabel() {
 		return this.labelUtil.getActionLabel(this, "action.createComment");
 	}
+
+	getFocusObject() {
+		return this.focusObject;
+	}
 }

canvas_modules/common-canvas/src/command-actions/createSuperNodeAction.js

@@ -576,6 +576,7 @@ export default class CreateSuperNodeAction extends Action {
 			const pipelines = [this.subPipeline].concat(this.descPipelines);
 			this.objectModel.setParentUrl(pipelines, this.data.externalUrl);
 		}
+		this.focusObject = this.supernode;
 	}
 
 	undo() {
@@ -603,6 +604,8 @@ export default class CreateSuperNodeAction extends Action {
 		this.apiPipeline.addLinks(this.subflowInputLinks);
 		this.apiPipeline.addLinks(this.subflowOutputLinks);
 		this.apiPipeline.addLinks(this.linksToDelete);
+
+		this.focusObject = this.data.selectedObjects[0];
 	}
 
 	redo() {
@@ -612,4 +615,9 @@ export default class CreateSuperNodeAction extends Action {
 	getLabel() {
 		return this.labelUtil.getActionLabel(this, "action.createSuperNode", { node_label: this.supernode.label });
 	}
+
+	getFocusObject() {
+		return this.focusObject;
+	}
+
 }

canvas_modules/common-canvas/src/command-actions/deconstructSuperNodeAction.js

@@ -16,7 +16,7 @@
 
 import Action from "../command-stack/action.js";
 import CanvasUtils from "../common-canvas/common-canvas-utils";
-import { NODE_LINK }
+import { CANVAS_FOCUS, NODE_LINK }
 	from "../common-canvas/constants/canvas-constants.js";
 
 export default class DeconstructSuperNodeAction extends Action {
@@ -276,10 +276,12 @@ export default class DeconstructSuperNodeAction extends Action {
 	// Standard methods
 	do() {
 		this.apiPipeline.deconstructSupernode(this.info);
+		this.focusObject = this.info?.nodesToAdd?.length > 0 ? this.info.nodesToAdd[0] : CANVAS_FOCUS;
 	}
 
 	undo() {
 		this.apiPipeline.reconstructSupernode(this.info);
+		this.focusObject = this.supernode;
 	}
 
 	redo() {
@@ -289,4 +291,8 @@ export default class DeconstructSuperNodeAction extends Action {
 	getLabel() {
 		return this.labelUtil.getActionLabel(this, "action.deconstructSuperNode", { node_label: this.supernode.label });
 	}
+
+	getFocusObject() {
+		return this.focusObject;
+	}
 }

canvas_modules/common-canvas/src/command-actions/deleteLinkAction.js

@@ -14,32 +14,38 @@
  * limitations under the License.
  */
 import Action from "../command-stack/action.js";
+import { CANVAS_FOCUS } from "../common-canvas/constants/canvas-constants.js";
 
 export default class DeleteLinkAction extends Action {
 	constructor(data, canvasController) {
 		super(data);
 		this.data = data;
-		this.linkInfo = [];
 		this.labelUtil = canvasController.labelUtil;
 		this.objectModel = canvasController.objectModel;
 		this.apiPipeline = this.objectModel.getAPIPipeline(data.pipelineId);
+		this.link = this.apiPipeline.getLink(this.data.id);
 	}
 
 	// Standard methods
 	do() {
-		this.linkInfo = this.apiPipeline.getLink(this.data.id);
-		this.apiPipeline.deleteLink(this.data);
+		this.apiPipeline.deleteLink(this.link);
+		this.focusObject = CANVAS_FOCUS;
 	}
 
 	undo() {
-		this.apiPipeline.addLinks([this.linkInfo]);
+		this.apiPipeline.addLinks([this.link]);
+		this.focusObject = this.link;
 	}
 
 	redo() {
-		this.apiPipeline.deleteLink(this.data);
+		this.do();
 	}
 
 	getLabel() {
 		return this.labelUtil.getActionLabel(this, "action.deleteLink");
 	}
+
+	getFocusObject() {
+		return this.focusObject;
+	}
 }

canvas_modules/common-canvas/src/command-actions/deleteObjectsAction.js

@@ -24,6 +24,7 @@
 
 import CanvasUtils from "../common-canvas/common-canvas-utils.js";
 import Action from "../command-stack/action.js";
+import { CANVAS_FOCUS } from "../common-canvas/constants/canvas-constants.js";
 
 export default class DeleteObjectsAction extends Action {
 	constructor(data, canvasController) {
@@ -158,6 +159,7 @@ export default class DeleteObjectsAction extends Action {
 			nodesToDelete: this.nodesToDelete,
 			commentsToDelete: this.commentsToDelete
 		});
+		this.focusObject = CANVAS_FOCUS;
 	}
 
 	undo() {
@@ -170,6 +172,8 @@ export default class DeleteObjectsAction extends Action {
 			nodesToAdd: this.nodesToDelete,
 			commentsToAdd: this.commentsToDelete
 		});
+
+		this.focusObject = this.data.selectedObjects[0];
 	}
 
 	redo() {
@@ -180,6 +184,10 @@ export default class DeleteObjectsAction extends Action {
 		return this.actionLabel;
 	}
 
+	getFocusObject() {
+		return this.focusObject;
+	}
+
 	createActionLabel() {
 		const stringsList = [
 			{ label: "Nodes", val: this.nodesToDelete.length + this.supernodesToDelete.length },

canvas_modules/common-canvas/src/command-actions/disconnectObjectsAction.js

@@ -50,4 +50,8 @@ export default class DisconnectObjectsAction extends Action {
 	getLabel() {
 		return this.labelUtil.getActionLabel(this, "action.disconnectObjects");
 	}
+
+	getFocusObject() {
+		return this.data.selectedObjects[0];
+	}
 }

canvas_modules/common-canvas/src/command-actions/editCommentAction.js

@@ -28,18 +28,24 @@ export default class EditCommentAction extends Action {
 	// Standard methods
 	do() {
 		this.apiPipeline.editComment(this.data);
+		this.focusObject = this.data;
 	}
 
 	undo() {
 		this.apiPipeline.editComment(this.previousComment);
+		this.focusObject = this.previousComment;
 	}
 
 	redo() {
-		this.apiPipeline.editComment(this.data);
+		this.do();
 	}
 
 	getLabel() {
 		return this.labelUtil.getActionLabel(this, "action.editComment");
 	}
 
+	getFocusObject() {
+		return this.focusObject;
+	}
+
 }

canvas_modules/common-canvas/src/command-actions/editDecorationLabelAction.js

@@ -43,6 +43,7 @@ export default class EditDecorationLabelAction extends Action {
 		} else if (this.data.objType === DEC_NODE) {
 			this.apiPipeline.setNodeDecorations(this.data.objId, this.newDecorations);
 		}
+		this.focusObject = this.data.selectedObjects[0];
 	}
 
 	undo() {
@@ -51,6 +52,7 @@ export default class EditDecorationLabelAction extends Action {
 		} else if (this.data.objType === DEC_NODE) {
 			this.apiPipeline.setNodeDecorations(this.data.objId, this.previousDecorations);
 		}
+		this.focusObject = this.data.selectedObjects[0];
 	}
 
 	redo() {
@@ -63,4 +65,8 @@ export default class EditDecorationLabelAction extends Action {
 		}
 		return this.labelUtil.getActionLabel(this, "action.editNodeDecorationLabel");
 	}
+
+	getFocusObject() {
+		return this.focusObject;
+	}
 }