From 47888b806f5536ccad72c84cd4be63340f93db07 Mon Sep 17 00:00:00 2001
From: Sean Lip <sll@google.com>
Date: Thu, 28 Jul 2016 18:29:44 -0700
Subject: [PATCH] Ensure aria-labels for workspace work correctly with
 Voiceover on Mac.

---
 accessible/field.component.js          | 19 +++++++------------
 accessible/utils.service.js            |  2 +-
 accessible/workspace-tree.component.js | 10 ++++++----
 3 files changed, 14 insertions(+), 17 deletions(-)

diff --git a/accessible/field.component.js b/accessible/field.component.js
index 7b1719113..12ced0722 100644
--- a/accessible/field.component.js
+++ b/accessible/field.component.js
@@ -28,17 +28,17 @@ blocklyApp.FieldComponent = ng.core
   .Component({
     selector: 'blockly-field',
     template: `
-    <input *ngIf="isTextInput()" [id]="idMap['input']"
+    <input *ngIf="isTextInput()" [id]="mainFieldId"
            [ngModel]="field.getValue()" (ngModelChange)="field.setValue($event)"
            [disabled]="disabled" type="text" aria-label="Press Enter to edit text">
 
-    <input *ngIf="isNumberInput()" [id]="idMap['input']"
+    <input *ngIf="isNumberInput()" [id]="mainFieldId"
            [ngModel]="field.getValue()" (ngModelChange)="field.setValue($event)"
            [disabled]="disabled" type="number" aria-label="Press Enter to edit number">
 
     <div *ngIf="isDropdown()"
          [attr.aria-labelledBy]="generateAriaLabelledByAttr('blockly-argument-menu', idMap['label'])">
-      <label [id]="idMap['label']">{{'CURRENT_ARGUMENT_VALUE'|translate}} {{field.getText()}}</label>
+      <label [id]="mainFieldId">{{'CURRENT_ARGUMENT_VALUE'|translate}} {{field.getText()}}</label>
       <ol role="group">
         <li [id]="idMap[optionValue]" role="treeitem" *ngFor="#optionValue of getOptions()"
             [attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap[optionValue + 'Button'], 'blockly-button')">
@@ -54,11 +54,11 @@ blocklyApp.FieldComponent = ng.core
       // Checkboxes are not currently supported.
     </div>
 
-    <label [id]="idMap['label']" *ngIf="isTextField() && hasVisibleText()">
+    <label [id]="mainFieldId" *ngIf="isTextField() && hasVisibleText()">
       {{field.getText()}}
     </label>
     `,
-    inputs: ['field', 'index', 'parentId', 'disabled'],
+    inputs: ['field', 'index', 'parentId', 'disabled', 'mainFieldId'],
     pipes: [blocklyApp.TranslatePipe]
   })
   .Class({
@@ -78,17 +78,12 @@ blocklyApp.FieldComponent = ng.core
       return mainLabel + ' ' + secondLabel;
     },
     generateElementNames: function() {
-      var elementNames = ['listItem'];
-      if (this.isTextInput() || this.isNumberInput()) {
-        elementNames.push('input');
-      } else if (this.isDropdown()) {
-        elementNames.push('label');
+      var elementNames = [];
+      if (this.isDropdown()) {
         var keys = this.getOptions();
         for (var i = 0; i < keys.length; i++){
           elementNames.push(keys[i], keys[i] + 'Button');
         }
-      } else if (this.isTextField() && this.hasVisibleText()) {
-        elementNames.push('label');
       }
       return elementNames;
     },
diff --git a/accessible/utils.service.js b/accessible/utils.service.js
index d2f258731..88352163b 100644
--- a/accessible/utils.service.js
+++ b/accessible/utils.service.js
@@ -41,7 +41,7 @@ blocklyApp.UtilsService = ng.core
       return idMap;
     },
     generateAriaLabelledByAttr: function(mainLabel, secondLabel, isDisabled) {
-      var attrValue = mainLabel + ' ' + secondLabel;
+      var attrValue = mainLabel + (secondLabel ? ' ' + secondLabel : '');
       if (isDisabled) {
         attrValue += ' blockly-disabled';
       }
diff --git a/accessible/workspace-tree.component.js b/accessible/workspace-tree.component.js
index 28750b1c9..c68d3fbf4 100644
--- a/accessible/workspace-tree.component.js
+++ b/accessible/workspace-tree.component.js
@@ -52,8 +52,9 @@ blocklyApp.WorkspaceTreeComponent = ng.core
         </li>
 
         <template ngFor #inputBlock [ngForOf]="block.inputList" #i="index">
-          <li role="treeitem" [id]="idMap['listItem' + i]" [attr.aria-level]="level + 1" *ngIf="inputBlock.fieldRow.length">
-            <blockly-field *ngFor="#field of inputBlock.fieldRow" [field]="field">
+          <li role="treeitem" [id]="idMap['listItem' + i]" [attr.aria-level]="level + 1" *ngIf="inputBlock.fieldRow.length"
+              [attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap['fieldLabel' + i])">
+            <blockly-field *ngFor="#field of inputBlock.fieldRow" [field]="field" [mainFieldId]="idMap['fieldLabel' + i]">
             </blockly-field>
           </li>
 
@@ -72,7 +73,7 @@ blocklyApp.WorkspaceTreeComponent = ng.core
             <ol role="group">
               <li *ngFor="#fieldButtonInfo of fieldButtonsInfo"
                   [id]="idMap[fieldButtonInfo.baseIdKey + i]" role="treeitem"
-                  [attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap[fieldButtonInfo.baseIdKey + 'Button'], 'blockly-button', fieldButtonInfo.isDisabled(inputBlock.connection))"
+                  [attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap[fieldButtonInfo.baseIdKey + 'Button' + i], 'blockly-button', fieldButtonInfo.isDisabled(inputBlock.connection))"
                   [attr.aria-level]="level + 2">
                 <button [id]="idMap[fieldButtonInfo.baseIdKey + 'Button' + i]"
                         (click)="fieldButtonInfo.action(inputBlock.connection)"
@@ -329,7 +330,8 @@ blocklyApp.WorkspaceTreeComponent = ng.core
       for (var i = 0; i < this.block.inputList.length; i++) {
         var inputBlock = this.block.inputList[i];
         that.idKeys.push(
-            'inputList' + i, 'inputMenuLabel' + i, 'listItem' + i);
+            'inputList' + i, 'inputMenuLabel' + i, 'listItem' + i,
+            'fieldLabel' + i);
       }
     },
     ngDoCheck: function() {