diff --git a/accessible/README b/accessible/README
new file mode 100644
index 000000000..88f2d4dc9
--- /dev/null
+++ b/accessible/README
@@ -0,0 +1,19 @@
+Accessible Blockly
+=======
+
+Google's Blockly is a web-based, visual programming editor: accessible to blind users.
+
+What Does Accessible Blockly Do?
+-----------
+* renders a version of the blockly toolbox and workspace that is easily navigable using solely the keyboard
+* renders a version of the blockly toolbox and workspace that is compatible with JAWS/NVDA screen readers on Firefox for Windows.
+ * Accessible Blockly will hopefully be modified to work well with most other screen readers, however JAWS and NVDA are the most robust screen readers and are compatible with many more aria tags than other screen readers. Therefore it was easiest to first be compatible with them.
+* Accessible Blockly will be modified to suit accessibility needs other than visual impairments as well. Deaf users will be expected to continue using Blockly over Accessible Blockly.
+
+Use Accessible Blockly in Your Web App
+-----------
+1. see the basic demo under blockly/demos/accessible. This covers the absolute minimum required to import Accessible Blockly into your own web app.
+2. You will need to import the files in the same order as in the demo: utils.service.js will need to be the first Angular file imported.
+3. You will need a boot.js file. If you aren't creating any extra Angular components, your boot.js file will look identical to that in the demo. If you are creating a different Angular component that should be loaded first, change line 26 accordingly.
+4. You will need to implement a runCode() function in the global scope. This function will be called when the user presses the Run Code button in the Accessible Blockly app.
+5. Note that we do not support having multiple Accessible Blockly apps in a single webpage.
\ No newline at end of file
diff --git a/accessible/appview.component.js b/accessible/appview.component.js
new file mode 100644
index 000000000..1dee0d09a
--- /dev/null
+++ b/accessible/appview.component.js
@@ -0,0 +1,75 @@
+/**
+ * AccessibleBlockly
+ *
+ * Copyright 2016 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the 'License');
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Angular2 Component that details how the AccessibleBlockly
+ * app is rendered on the page.
+ * @author madeeha@google.com (Madeeha Ghori)
+ */
+blocklyApp.workspace = new Blockly.Workspace();
+// If the debug flag is true, print console.logs to help with debugging.
+blocklyApp.debug = false;
+
+blocklyApp.AppView = ng.core
+ .Component({
+ selector: 'blockly-app',
+ template: `
+
+
+
+ {{stringMap['TOOLBOX_LOAD']}}
+
+
+ {{stringMap['WORKSPACE_LOAD']}}
+
+
+
+
+
+
+
+
+
+
+
+
+ `,
+ directives: [blocklyApp.ToolboxView, blocklyApp.WorkspaceView],
+ // ClipboardService declared here so that all components are using the same
+ // instance of the clipboard.
+ // https://www.sitepoint.com/angular-2-components-providers-classes-factories-values/
+ providers: [blocklyApp.ClipboardService]
+ })
+ .Class({
+ constructor: function() {
+ this.stringMap = {
+ ['TOOLBOX_LOAD']: Blockly.Msg.TOOLBOX_LOAD_MSG,
+ ['WORKSPACE_LOAD']: Blockly.Msg.WORKSPACE_LOAD_MSG,
+ ['BLOCK_SUMMARY']: Blockly.Msg.BLOCK_SUMMARY,
+ ['BLOCK_ACTION_LIST']: Blockly.Msg.BLOCK_ACTION_LIST,
+ ['OPTION_LIST']: Blockly.Msg.OPTION_LIST,
+ ['ARGUMENT_OPTIONS_LIST']: Blockly.Msg.ARGUMENT_OPTIONS_LIST,
+ ['UNAVAILABLE']: Blockly.Msg.UNAVAILABLE,
+ ['BUTTON']: Blockly.Msg.BUTTON,
+ ['TEXT']: Blockly.Msg.TEXT,
+ ['ARGUMENT_BLOCK_ACTION_LIST']: Blockly.Msg.ARGUMENT_BLOCK_ACTION_LIST,
+ ['ARGUMENT_INPUT']: Blockly.Msg.ARGUMENT_INPUT,
+ };
+ }
+ });
diff --git a/accessible/clipboard.service.js b/accessible/clipboard.service.js
new file mode 100644
index 000000000..f509cfb7e
--- /dev/null
+++ b/accessible/clipboard.service.js
@@ -0,0 +1,118 @@
+/**
+ * AccessibleBlockly
+ *
+ * Copyright 2016 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the 'License');
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Angular2 Service that handles the clipboard and marked spots.
+ * @author madeeha@google.com (Madeeha Ghori)
+ */
+blocklyApp.ClipboardService = ng.core
+ .Class({
+ constructor: function() {
+ this.clipboardBlockXml_ = null;
+ this.clipboardBlockSuperiorConnection_ = null;
+ this.clipboardBlockNextConnection_ = null;
+ this.markedConnection_ = null;
+ },
+ cut: function(block) {
+ var blockSummary = block.toString();
+ this.copy(block, false);
+ block.dispose(true);
+ blocklyApp.debug && console.log('cut');
+ alert(Blockly.Msg.CUT_BLOCK_MSG + blockSummary);
+ },
+ copy: function(block, announce) {
+ this.clipboardBlockXml_ = Blockly.Xml.blockToDom(block);
+ this.clipboardBlockSuperiorConnection_ = block.outputConnection ||
+ block.previousConnection;
+ this.clipboardBlockNextConnection_ = block.nextConnection;
+ blocklyApp.debug && console.log('copy');
+ if (announce) {
+ alert(Blockly.Msg.COPIED_BLOCK_MSG + block.toString());
+ }
+ },
+ pasteFromClipboard: function(connection) {
+ var reconstitutedBlock = Blockly.Xml.domToBlock(blocklyApp.workspace,
+ this.clipboardBlockXml_);
+ switch (connection.type) {
+ case Blockly.NEXT_STATEMENT:
+ connection.connect(reconstitutedBlock.previousConnection);
+ break;
+ case Blockly.PREVIOUS_STATEMENT:
+ connection.connect(reconstitutedBlock.nextConnection);
+ break;
+ default:
+ connection.connect(reconstitutedBlock.outputConnection);
+ }
+ blocklyApp.debug && console.log('paste');
+ alert(Blockly.Msg.PASTED_BLOCK_FROM_CLIPBOARD_MSG + block.toString());
+ },
+ pasteToMarkedConnection: function(block, announce) {
+ var xml = Blockly.Xml.blockToDom(block);
+ var reconstitutedBlock =
+ Blockly.Xml.domToBlock(blocklyApp.workspace, xml);
+ this.markedConnection_.connect(
+ reconstitutedBlock.outputConnection ||
+ reconstitutedBlock.previousConnection);
+ blocklyApp.debug && console.log('paste to marked connection');
+ if (announce) {
+ alert(Blockly.Msg.PASTED_BLOCK_TO_MARKED_SPOT_MSG + block.toString());
+ }
+ },
+ markConnection: function(connection) {
+ this.markedConnection_ = connection;
+ blocklyApp.debug && console.log('mark connection');
+ alert(Blockly.Msg.MARKED_SPOT_MSG);
+ },
+ isCompatibleWithConnection_: function(blockConnection, connection) {
+ // Checking that the connection and blockConnection exist.
+ if (!connection || !blockConnection) {
+ return false;
+ }
+
+ // Checking that the types match and it's the right kind of connection.
+ var isCompatible = Blockly.OPPOSITE_TYPE[blockConnection.type] ==
+ connection.type && connection.checkType_(blockConnection);
+
+ if (blocklyApp.debug) {
+ if (isCompatible) {
+ console.log('blocks should be connected');
+ } else {
+ console.log('blocks should not be connected');
+ }
+ }
+ return isCompatible;
+ },
+ isBlockCompatibleWithMarkedConnection: function(block) {
+ var blockConnection = block.outputConnection || block.previousConnection;
+ return this.markedConnection_ &&
+ this.markedConnection_.sourceBlock_.workspace &&
+ this.isCompatibleWithConnection_(
+ blockConnection, this.markedConnection_);
+ },
+ getClipboardCompatibilityHTMLText: function(connection) {
+ if (this.isCompatibleWithConnection_(connection,
+ this.clipboardBlockSuperiorConnection_) ||
+ this.isCompatibleWithConnection_(connection,
+ this.clipboardBlockNextConnection_)){
+ return '';
+ } else {
+ return 'blockly-disabled';
+ }
+ }
+ });
diff --git a/accessible/fieldview.component.js b/accessible/fieldview.component.js
new file mode 100644
index 000000000..3d834bb0c
--- /dev/null
+++ b/accessible/fieldview.component.js
@@ -0,0 +1,148 @@
+/**
+ * AccessibleBlockly
+ *
+ * Copyright 2016 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the 'License');
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Angular2 Component that details how a Blockly.Field is
+ * rendered in the toolbox in AccessibleBlockly. Also handles any interactions
+ * with the field.
+ * @author madeeha@google.com (Madeeha Ghori)
+ */
+blocklyApp.FieldView = ng.core
+ .Component({
+ selector: 'field-view',
+ template: `
+