Fixes AB#757: Reads multiselect listbox selected status

gingi · gingi · commit a6c5f523c459 · 2023-05-30T16:19:02.000-04:00
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.
diff --git a/desktop/i18n/resources.resjson b/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",
diff --git a/desktop/src/@batch-flask/ui/select/select-dropdown/select-dropdown.component.ts b/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}`;
+    }
 }
diff --git a/desktop/src/@batch-flask/ui/select/select-dropdown/select-dropdown.html b/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>
diff --git a/desktop/src/@batch-flask/ui/select/select-dropdown/select-dropdown.i18n.yml b/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

Original file line number	Diff line number	Diff line change
`@@ -121,7 +121,7 @@ export class SelectDropdownComponent {`
`121`	`121`	`fixedOptions = [{`
`122`	`122`	`id: unselectAllOptionId,`
`123`	`123`	`value: unselectAllOptionId,`
`124`		`- label: "Unselect all",`
	`124`	`+ label: this.i18n.t("select-dropdown.unselectAll"),`
`125`	`125`	`cssClass: "unselect-all-option"`
`126`	`126`	`}];`
`127`	`127`	`}`
`@@ -142,4 +142,14 @@ export class SelectDropdownComponent {`
`142`	`142`	`);`
`143`	`143`	`}`
`144`	`144`	`}`
	`145`	`+`
	`146`	`+ public optionAriaLabel(option: SelectOptionComponent \| any): string \| null {`
	`147`	`+ if (!(option instanceof SelectOptionComponent) \|\| option.disabled) {`
	`148`	`+ return null;`
	`149`	`+ }`
	`150`	`+ const selectLabel = this.selected.has(option.value)`
	`151`	`+ ? this.i18n.t("select-dropdown.selected")`
	`152`	`+ : this.i18n.t("select-dropdown.unselected");`
	`153`	+ return `${option.label}, ${selectLabel}`;
	`154`	`+ }`
`145`	`155`	`}`