Fixes AB#757: Reads multiselect listbox selected status

Because of quirkiness with Narrator, we place an aria-label at the option element with an explicit "selected/unselected" phrase, and set the nested content to be hidden to avoid reading twice.

desktop/i18n/resources.resjson

@@ -374,7 +374,10 @@
   "resourcefile-picker.cloudFileDialog.title": "Pick file(s) from storage account",
   "select-dropdown.noMatch": "No match",
   "select-dropdown.noOptions": "No options available",
+  "select-dropdown.selected": "Selected",
   "select-dropdown.showItems": "Showing {num} items",
+  "select-dropdown.unselectAll": "Unselect all",
+  "select-dropdown.unselected": "Unselected",
   "server-error.debug-button-label": "Toggle troubleshooting info",
   "settings.advancedSettings": "Advanced settings",
   "settings.gallerySettings": "Gallery settings",

desktop/src/@batch-flask/ui/select/select-dropdown/select-dropdown.component.ts

@@ -121,7 +121,7 @@ export class SelectDropdownComponent {
             fixedOptions = [{
                 id: unselectAllOptionId,
                 value: unselectAllOptionId,
-                label: "Unselect all",
+                label: this.i18n.t("select-dropdown.unselectAll"),
                 cssClass: "unselect-all-option"
             }];
         }
@@ -142,4 +142,14 @@ export class SelectDropdownComponent {
             );
         }
     }
+
+    public optionAriaLabel(option: SelectOptionComponent | any): string | null {
+        if (!(option instanceof SelectOptionComponent) || option.disabled) {
+            return null;
+        }
+        const selectLabel = this.selected.has(option.value)
+            ? this.i18n.t("select-dropdown.selected")
+            : this.i18n.t("select-dropdown.unselected");
+        return `${option.label}, ${selectLabel}`;
+    }
 }

desktop/src/@batch-flask/ui/select/select-dropdown/select-dropdown.html

@@ -6,12 +6,13 @@
     [class.disabled]="option.disabled"
     [attr.aria-disabled]="option.disabled"
     [attr.aria-selected]="selected.has(option.value)"
+    [attr.aria-label]="optionAriaLabel(option)"
     (mousedown)="handleClickOption($event, option)">
 
-    <div class="checkbox" *ngIf="multiple" aria-hidden="true">
+    <div class="checkbox" *ngIf="multiple">
         <i class="fa fa-check" *ngIf="selected.has(option.value)" aria-hidden="true"></i>
     </div>
-    <div class="option-content">
+    <div class="option-content" aria-hidden="true">
         <ng-container *ngIf="select.optionTemplate">
             <ng-template [ngTemplateOutlet]="select.optionTemplate" [ngTemplateOutletContext]="{$implicit: option.item}"></ng-template>
         </ng-container>

desktop/src/@batch-flask/ui/select/select-dropdown/select-dropdown.i18n.yml

@@ -2,3 +2,6 @@ select-dropdown:
   noMatch: No match
   noOptions: No options available
   showItems: Showing {num} items
+  unselectAll: Unselect all
+  selected: Selected
+  unselected: Unselected