diff --git a/accessible/field-segment.component.js b/accessible/field-segment.component.js
new file mode 100644
index 000000000..86c649b0c
--- /dev/null
+++ b/accessible/field-segment.component.js
@@ -0,0 +1,160 @@
+/**
+ * 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 renders a "field segment" (a group
+ * of non-editable Blockly.Field followed by 0 or 1 editable Blockly.Field)
+ * in a block. Also handles any interactions with the field.
+ * @author madeeha@google.com (Madeeha Ghori)
+ */
+
+blocklyApp.FieldSegmentComponent = ng.core
+ .Component({
+ selector: 'blockly-field-segment',
+ template: `
+
+
+
+
+
+
+ {{getPrefixText()}}
+
+
+
+
+ {{getPrefixText()}}
+
+
+
+
+
+
+
+
+
+
+
+
+ `,
+ inputs: ['prefixFields', 'mainField', 'mainFieldId', 'level'],
+ pipes: [blocklyApp.TranslatePipe]
+ })
+ .Class({
+ constructor: [blocklyApp.UtilsService, function(_utilsService) {
+ this.optionText = {
+ keys: []
+ };
+ this.utilsService = _utilsService;
+ }],
+ ngOnInit: function() {
+ var elementsNeedingIds = this.generateElementNames(this.mainField);
+ // Warning: this assumes that the elements returned by
+ // this.generateElementNames() are unique.
+ this.idMap = this.utilsService.generateIds(elementsNeedingIds);
+ },
+ getPrefixText: function() {
+ var prefixTexts = this.prefixFields.map(function(prefixField) {
+ return prefixField.getText();
+ });
+ return prefixTexts.join(' ');
+ },
+ getFieldDescription: function() {
+ var description = this.mainField.getText();
+ if (this.prefixFields.length > 0) {
+ description = this.getPrefixText() + ': ' + description;
+ }
+ return description;
+ },
+ setNumberValue: function(newValue) {
+ // Do not permit a residual value of NaN after a backspace event.
+ this.mainField.setValue(newValue || 0);
+ },
+ generateAriaLabelledByAttr: function(mainLabel, secondLabel) {
+ return mainLabel + ' ' + secondLabel;
+ },
+ generateElementNames: function() {
+ var elementNames = [];
+ if (this.isDropdown()) {
+ var keys = this.getOptions();
+ for (var i = 0; i < keys.length; i++){
+ elementNames.push(keys[i], keys[i] + 'Button');
+ }
+ }
+ return elementNames;
+ },
+ isNumberInput: function() {
+ return this.mainField instanceof Blockly.FieldNumber;
+ },
+ isTextInput: function() {
+ return this.mainField instanceof Blockly.FieldTextInput &&
+ !(this.mainField instanceof Blockly.FieldNumber);
+ },
+ isDropdown: function() {
+ return this.mainField instanceof Blockly.FieldDropdown;
+ },
+ isCheckbox: function() {
+ return this.mainField instanceof Blockly.FieldCheckbox;
+ },
+ isTextField: function() {
+ return !(this.mainField instanceof Blockly.FieldTextInput) &&
+ !(this.mainField instanceof Blockly.FieldDropdown) &&
+ !(this.mainField instanceof Blockly.FieldCheckbox);
+ },
+ hasVisibleText: function() {
+ var text = this.mainField.getText().trim();
+ return !!text;
+ },
+ getOptions: function() {
+ if (this.optionText.keys.length) {
+ return this.optionText.keys;
+ }
+ var options = this.mainField.getOptions_();
+ for (var i = 0; i < options.length; i++) {
+ var tuple = options[i];
+ this.optionText[tuple[1]] = tuple[0];
+ this.optionText.keys.push(tuple[1]);
+ }
+ return this.optionText.keys;
+ },
+ handleDropdownChange: function(field, text) {
+ if (text == 'NO_ACTION') {
+ return;
+ }
+ if (this.mainField instanceof Blockly.FieldVariable) {
+ Blockly.FieldVariable.dropdownChange.call(this.mainField, text);
+ } else {
+ this.mainField.setValue(text);
+ }
+ }
+ });
diff --git a/accessible/field.component.js b/accessible/field.component.js
deleted file mode 100644
index 5a5302960..000000000
--- a/accessible/field.component.js
+++ /dev/null
@@ -1,143 +0,0 @@
-/**
- * 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.FieldComponent = ng.core
- .Component({
- selector: 'blockly-field',
- template: `
-
-
-
-
-