Merge pull request #2849 from Azure/shpaster/a11y

Accessibility Bug Fixes

Author: gingi

desktop/i18n/resources.resjson

@@ -309,6 +309,8 @@
   "pool-details.deprecationWarning.imagePassedEndOfLife": "This pool's image is past its end-of-life date of {imageEndOfLifeDate}. Please recreate this pool using a different image afterwards.",
   "pool-details.estimatedCost": "Estimated cost of this pool at this current state",
   "pool-details.graphs": "Graphs",
+  "pool-details.learnMore": "Learn more",
+  "pool-details.learnMoreTitle": "Documentation on image end-of-life",
   "pool-details.openInNewWindow": "Open in a new window",
   "pool-graphs.application-insights": "Application Insights",
   "pool-graphs.available-nodes": "Available nodes",

desktop/src/@batch-flask/ui/duration-picker/duration-picker.html

@@ -16,16 +16,17 @@
         </bl-select>
     </div>
 </div>
-<div class="error" *ngIf="invalidTimeNumber">
-    Input should be a valid positive number
-</div>
-<div class="error" *ngIf="required && !this.time">
-    Input is required
-</div>
-<div class="error" *ngIf="invalidCustomDuration">
-    This is not a valid ISO 8601 duration <i>(e.g. PT1M, P1D)</i>
-</div>
-<div class="error" *ngIf="invalidDurationValue">
-    Input must be less than 10675199 days
+<div class="error-container" role="alert">
+    <div class="error" *ngIf="invalidTimeNumber">
+        Input should be a valid positive number
+    </div>
+    <div class="error" *ngIf="required && !this.time">
+        Input is required
+    </div>
+    <div class="error" *ngIf="invalidCustomDuration">
+        This is not a valid ISO 8601 duration <i>(e.g. PT1M, P1D)</i>
+    </div>
+    <div class="error" *ngIf="invalidDurationValue">
+        Input must be less than 10675199 days
+    </div>
 </div>
-

desktop/src/@batch-flask/ui/duration-picker/duration-picker.scss

@@ -13,7 +13,7 @@ bl-duration-picker {
         }
     }
 
-    > .error {
+    > .error-container > .error {
         color: $danger-color;
     }
 }

desktop/src/app/components/job-schedule/action/add/job-schedule-job-specification.html

@@ -68,12 +68,12 @@ <h4>Job advanced settings</h4>
             </div>
         </div>
         <div class="form-element">
-            <bl-select>
+            <bl-form-field>
                 <bl-select formControlName="onAllTasksComplete" color="primary" placeholder="When all tasks complete">
                     <bl-option [value]="AllTasksCompleteAction.noaction" label="NoAction"></bl-option>
                     <bl-option [value]="AllTasksCompleteAction.terminatejob" label="TerminateJob"></bl-option>
                 </bl-select>
-            </bl-select>
+            </bl-form-field>
         </div>
         <div class="form-element">
             <bl-form-field>

desktop/src/app/components/layout/pinned-entity-dropdown/pinned-dropdown.html

@@ -10,13 +10,14 @@
             (mouseup)="handleMiddleMouseUp($event, favorite)"
             (contextmenu)="onContextMenu(favorite)">
 
-            <bl-clickable class="dropdown-item favorite-item" (do)="gotoFavorite(favorite)">
-                <span attr.aria-label="{{favorite.name || favorite.id}}">
+            <bl-clickable class="dropdown-item favorite-item" (do)="gotoFavorite(favorite)"
+                attr.aria-label="{{favorite.name || favorite.id}}">
+                <div>
                     <i class="entity-type fa" [ngClass]="entityIcon(favorite)"
                     [title]="entityType(favorite)"></i>
                     {{favorite.name || favorite.id}}
                     <i *ngIf="favorite.url === currentUrl" class="extra fa fa-check"></i>
-                </span>
+                </div>
             </bl-clickable>
             <bl-clickable class="dropdown-item delete" (do)="removeFavorite(favorite)" title="Remove from favorites" name="remove">
                 <i class="fa fa-times"  aria-hidden="true"></i>

desktop/src/app/components/layout/pinned-entity-dropdown/pinned-dropdown.scss

@@ -35,7 +35,7 @@ bl-pinned-dropdown {
             color: $primary-color-dark;
         }
 
-        > span {
+        > div {
             flex: 1 1 auto;
             text-align: left;
             min-width: 20px;

desktop/src/app/components/pool/details/pool-details.html

@@ -41,7 +41,12 @@
                             <b *i18nParam="'imageEndOfLifeDate'">{{selectedImageEndOfLifeDate}}</b>
                         </bl-i18n>
                     </span>
-                    <a class="pool-details-summary-warning-alternative-link" *ngIf="hasDeprecationLink" (click)="openDeprecationLink()" href="javascript:void(0)">Learn more </a>
+                    <a class="pool-details-summary-warning-alternative-link"
+                        [title]="'pool-details.learnMoreTitle' | i18n"
+                        *ngIf="hasDeprecationLink" (click)="openDeprecationLink()"
+                        href="javascript:void(0)">
+                        {{ 'pool-details.learnMore' | i18n }}
+                    </a>
                 </div>
             </bl-banner>
         </ng-container>

desktop/src/app/components/pool/details/pool-details.i18n.yml

@@ -2,6 +2,8 @@ pool-details:
   graphs: Graphs
   openInNewWindow: Open in a new window
   estimatedCost: Estimated cost of this pool at this current state
+  learnMore: Learn more
+  learnMoreTitle: Documentation on image end-of-life
   deprecationWarning:
     imageNearingEndOfLife: This pool's image is nearing its end-of-life date of {imageEndOfLifeDate}. After this date, it will not appear as an option when creating new pools. API calls to create or scale pools using the image may continue to function for up to 60 days afterwards.
     imageFarAwayFromEndOfLife: This pool's image has an end-of-life date of {imageEndOfLifeDate}. After this date, it will not appear as an option when creating new pools. API calls to create or scale pools using the image may continue to function for up to 60 days afterwards.