Merge 9c40433 into cd3c6a9

Azure · Sep 27, 2018 · eaa64e6 · eaa64e6
2 parents cd3c6a9 + 9c40433
commit eaa64e6
Show file tree

Hide file tree

Showing 28 changed files with 442 additions and 158 deletions.
diff --git a/client/src/app/controls/card-info-control/card-info-control.component.html b/client/src/app/controls/card-info-control/card-info-control.component.html
@@ -1,5 +1,5 @@
 <div class="cardContainer">
-  <span load-image="{{image}}" class="icon-large icon-center" [style.backgroundColor]="backgroundImageColor"></span>
+  <span load-image="{{image}}" class="icon-large icon-center" [style.backgroundColor]="backgroundImageColor" role="img" [attr.aria-label]="imgAltText"></span>
   <h2>{{header}}</h2>
   <div class="description-text">
     <h5>{{description}}</h5>

diff --git a/client/src/app/controls/card-info-control/card-info-control.component.ts b/client/src/app/controls/card-info-control/card-info-control.component.ts
@@ -11,6 +11,7 @@ export class CardInfoControlComponent{
   @Input() public description = '';
   @Input() public learnMoreLink = '';
   @Input() public backgroundImageColor = undefined;
+  @Input() public imgAltText = '';
   constructor() { }
 
 

diff --git a/client/src/app/controls/textbox/textbox.component.html b/client/src/app/controls/textbox/textbox.component.html
@@ -1,6 +1,8 @@
 <div class="textbox-wrapper">
 
 <input *ngIf="!control"
+    [attr.aria-describedby]="ariaErrorId"
+    [attr.aria-label]="ariaLabel"
     [type]="type"
     (change)="onChange($event.target.value)"
     (keyup)="onKeyUp($event.target.value)"
@@ -12,6 +14,7 @@
 
     <input #textboxInput
         [type]="type"
+        [attr.aria-label]="ariaLabel"
         (change)="onChange($event.target.value)"
         (keyup)="onKeyUp($event.target.value)"
         [readonly]="readonly"

diff --git a/client/src/app/controls/textbox/textbox.component.ts b/client/src/app/controls/textbox/textbox.component.ts
@@ -10,6 +10,8 @@ import { Subject } from 'rxjs/Subject';
 export class TextboxComponent implements OnInit {
 
   @Input() control: FormControl;
+  @Input() ariaLabel = '';
+  @Input() ariaErrorId = '';
   @Input() placeholder = '';
   @Input() highlightDirty: boolean;
   @Input() readonly: boolean;

diff --git a/client/src/app/copy-pre/copy-pre.component.html b/client/src/app/copy-pre/copy-pre.component.html
@@ -2,16 +2,16 @@
   <label *ngIf="label" style="padding-right: 20px">{{label}}</label>
   <label *ngIf="!label"></label>
   <div>
-    <pre (click)="highlightText($event)">{{contentView ? content : hiddenContentPlaceholder}}</pre>
+    <pre (click)="highlightText($event)" tabindex="0">{{contentView ? content : hiddenContentPlaceholder}}</pre>
   </div>
-  <div [hidden]="!passwordField || contentView" [title]="'show' | translate" (click)="showPassword()">
+  <div [hidden]="!passwordField || contentView" [title]="'show' | translate" (click)="showPassword()" (keyup)="onKeyPress($event.target.value, 'show')" role="button" tabindex="0">
       <i class="link fa fa-eye clickable"><span class="fix-font">&nbsp;{{ 'show' | translate }}</span></i>
   </div>
-  <div [hidden]="!passwordField || !contentView" [title]="'hide' | translate" (click)="hidePassword()">
+  <div [hidden]="!passwordField || !contentView" [title]="'hide' | translate" (click)="hidePassword()" (keyup)="onKeyPress($event.target.value, 'hide')" role="button" tabindex="0">
       <i class="link fa fa-eye-slash clickable"><span class="fix-font">&nbsp;{{ 'hide' | translate }}</span></i> 
   </div>
-  <div title="{{ 'copypre_copyClipboard' | translate }}" (click)="copyToClipboard()">
-      <pop-over message="{{ 'copypre_copied' | translate }}" hideAfter="300">
+  <div title="{{ 'copypre_copyClipboard' | translate }}" (click)="copyToClipboard()" role="button" (keyup)="onKeyPress($event.target.value, 'copy')" tabindex="0">
+      <pop-over message="{{ 'copypre_copied' | translate }}" hideAfter="300" tabIndex="-1">
         <i class="link fa fa-copy clickable"><span class="fix-font">&nbsp;{{ 'copypre_copy' | translate }}</span></i>
       </pop-over>
     </div>

diff --git a/client/src/app/copy-pre/copy-pre.component.ts b/client/src/app/copy-pre/copy-pre.component.ts
@@ -1,5 +1,6 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { UtilitiesService } from '../shared/services/utilities.service';
+import { KeyCodes } from '../shared/models/constants';
 
 @Component({
     selector: 'copy-pre',
@@ -38,4 +39,20 @@ export class CopyPreComponent implements OnInit {
     hidePassword() {
         this.contentView = false;
     }
+
+    onKeyPress(event: KeyboardEvent, func: 'hide' | 'show' | 'copy' ) {
+        if (event.keyCode === KeyCodes.enter || event.keyCode === KeyCodes.space) {
+            switch (func) {
+                case 'hide':
+                    this.hidePassword();
+                    break;
+                case 'show':
+                    this.showPassword();
+                    break;
+                case 'copy':
+                    this.copyToClipboard();
+                    break;
+            }
+        }
+    }
 }
diff --git a/client/src/app/radio-selector/radio-selector.component.html b/client/src/app/radio-selector/radio-selector.component.html
@@ -2,6 +2,7 @@
     #radioGroup
     *ngIf="options"
     role="radiogroup"
+    [attr.aria-label]="ariaLabel"
     [class.dirty]="highlightDirty && control?.dirty"
     [attr.aria-disabled]="control ? control.disabled : disabled"
     [tabIndex]="(control && control.disabled) || disabled ? -1 : 0"

diff --git a/client/src/app/radio-selector/radio-selector.component.ts b/client/src/app/radio-selector/radio-selector.component.ts
@@ -23,6 +23,7 @@ export class RadioSelectorComponent<T> implements OnInit, OnChanges, AfterViewIn
     @Input() defaultValue: T;
     @Input() focusOnLoad: boolean;
     @Input() id: string;
+    @Input() ariaLabel = '';
     @Output() value: Subject<T>;
 
     public activeDescendantId: string;

diff --git a/client/src/app/shared/models/portal-resources.ts b/client/src/app/shared/models/portal-resources.ts
@@ -1356,4 +1356,8 @@
     public static kubernetesSample2DescriptionLinux = 'kubernetesSample2DescriptionLinux';
     public static noLogsAvailable = 'noLogsAvailable';
     public static errorRetrievingLogs = 'errorRetrievingLogs';
+    public static newOrExistingDeploymentSlot = 'newOrExistingDeploymentSlot';
+    public static newOrExistingVstsAccount = 'newOrExistingVstsAccount';
+    public static newOrExistingWebApp = 'newOrExistingWebApp';
+    public static deploymentDetails = 'deploymentDetails';
 }
diff --git a/...ent-center/deployment-center-setup/step-build-provider/step-build-provider.component.html b/...ent-center/deployment-center-setup/step-build-provider/step-build-provider.component.html
@@ -1,8 +1,8 @@
-<div class="selectionContainer" flex-list>
-  <div *ngFor="let card of providerCards" [class.selected]="wizard?.wizardValues?.buildProvider === card.id" [class.cardDisabled]="!card.enabled"
-    [class.cardContainer]="card.enabled" (click)="chooseBuildProvider(card)" id="{{card.id}}" [hidden]="card.hidden">
+<div class="selectionContainer" role="radiogroup" flex-list>
+  <div *ngFor="let card of providerCards" role="radio" [attr.aria-checked]="wizard?.wizardValues?.buildProvider === card.id" [class.selected]="wizard?.wizardValues?.buildProvider === card.id" [class.cardDisabled]="!card.enabled"
+    [class.cardContainer]="card.enabled" (click)="chooseBuildProvider(card)" id="{{card.id}}" [hidden]="card.hidden" (keydown)="onKeyPress($event, card)">
     <div class="cardHeader">
-      <img [src]="card.icon" [style.background-color]="card.color" /> {{card.name}}
+      <img [src]="card.icon" [style.background-color]="card.color" alt="{{card.name}}"/> {{card.name}}
     </div>
     <div class="cardDescription">
       {{card.description}}

diff --git a/...yment-center/deployment-center-setup/step-build-provider/step-build-provider.component.ts b/...yment-center/deployment-center-setup/step-build-provider/step-build-provider.component.ts
@@ -3,7 +3,7 @@ import { DeploymentCenterStateManager } from 'app/site/deployment-center/deploym
 import { TranslateService } from '@ngx-translate/core';
 import { PortalResources } from '../../../../shared/models/portal-resources';
 import { ProviderCard } from '../../Models/provider-card';
-import { ScenarioIds } from '../../../../shared/models/constants';
+import { ScenarioIds, KeyCodes } from '../../../../shared/models/constants';
 import { from } from 'rxjs/observable/from';
 import { ScenarioService } from '../../../../shared/services/scenario/scenario.service';
 import { forkJoin } from 'rxjs/observable/forkJoin';
@@ -28,7 +28,7 @@ export class StepBuildProviderComponent implements OnDestroy {
         },
         {
             id: 'vsts',
-            name: `${this._translateService.instant(PortalResources.vstsBuildServerTitle)}(${this._translateService.instant(PortalResources.preview)})`,
+            name: `${this._translateService.instant(PortalResources.vstsBuildServerTitle)}`,
             icon: 'image/deployment-center/vsts.svg',
             color: '#2B79DA',
             description: this._translateService.instant(PortalResources.vstsBuildServerDesc),
@@ -99,4 +99,10 @@ export class StepBuildProviderComponent implements OnDestroy {
             this.wizard.wizardValues = currentFormValues;
         }
     }
+
+    onKeyPress(event: KeyboardEvent, card: ProviderCard) {
+        if (event.keyCode === KeyCodes.enter || event.keyCode === KeyCodes.space) {
+            this.chooseBuildProvider(card);
+        }
+    }
 }
diff --git a/...oyment-center-setup/step-configure/configure-bitbucket/configure-bitbucket.component.html b/...oyment-center-setup/step-configure/configure-bitbucket/configure-bitbucket.component.html
@@ -3,22 +3,45 @@
   <h3 class="first-config-heading">{{'code' | translate}}</h3>
   <div class="settings-wrapper">
     <div class="setting-wrapper">
-      <div class="setting-label">{{'repository' | translate}}</div>
+      <label class="setting-label" id="dc-bitbucket-repo-label" >{{'repository' | translate}}</label>
       <div class="setting-control-container">
-        <ng-select id='configure-bitbucket-repo-select' class="custom-select" [items]="RepoList" bindLabel="displayLabel" bindValue="value" [placeholder]="'selectRepo' | translate"
-          [clearable]="false" formControlName="repoUrl" [(ngModel)]="selectedRepo" [loading]="reposLoading" (change)="RepoChanged($event)">
+        <ng-select 
+          id='configure-bitbucket-repo-select' 
+          class="custom-select" 
+          aria-describedby="dc-bitbucket-repo-error"
+          aria-labelledby="dc-bitbucket-repo-label"  
+          [items]="RepoList" 
+          bindLabel="displayLabel" 
+          bindValue="value" 
+          [placeholder]="'selectRepo' | translate"
+          [clearable]="false" 
+          formControlName="repoUrl" 
+          [(ngModel)]="selectedRepo" 
+          [loading]="reposLoading" 
+          (change)="RepoChanged($event)">
         </ng-select>
-        <div invalidmessage="repoUrl"></div>
+        <div invalidmessage="repoUrl" id="dc-bitbucket-repo-error" role="alert"></div>
       </div>
     </div>
 
     <div class="setting-wrapper">
-      <div class="setting-label">{{'branch' | translate}}</div>
+      <label class="setting-label" id="dc-github-branch-label" >{{'branch' | translate}}</label>
       <div class="setting-control-container">
-        <ng-select id='configure-bitbucket-branch-select' class="custom-select" [items]="BranchList" bindLabel="displayLabel" bindValue="value" [placeholder]="'selectBranch' | translate"
-          [clearable]="false" [(ngModel)]="selectedBranch" [loading]="branchesLoading" formControlName="branch">
+        <ng-select 
+          id='configure-bitbucket-branch-select' 
+          class="custom-select" 
+          [items]="BranchList" 
+          aria-describedby="dc-bitbucket-branch-error"
+          aria-labelledby="dc-bitbucket-branch-label"  
+          bindLabel="displayLabel" 
+          bindValue="value" 
+          [placeholder]="'selectBranch' | translate"
+          [clearable]="false" 
+          [(ngModel)]="selectedBranch" 
+          [loading]="branchesLoading" 
+          formControlName="branch">
         </ng-select>
-        <div invalidmessage="branch"></div>
+        <div invalidmessage="branch" id="dc-bitbucket-branch-error" role="alert"></div>
       </div>
     </div>
   </div>

diff --git a/...deployment-center-setup/step-configure/configure-dropbox/configure-dropbox.component.html b/...deployment-center-setup/step-configure/configure-dropbox/configure-dropbox.component.html
@@ -4,12 +4,23 @@ <h3 class="first-config-heading">{{'code' | translate}}</h3>
 
   <div class="settings-wrapper">
     <div class="setting-wrapper">
-      <div class="setting-label">{{'folder' | translate}}</div>
+      <label class="setting-label" id="dc-dropbox-folder-label">{{'folder' | translate}}</label>
       <div class="setting-control-container">
-        <ng-select id="configure-dropbox-folder-select" class="custom-select" [items]="folderList" bindLabel="displayLabel" bindValue="value" placeholder="'selectFolder' | translate"
-          [clearable]="false" [(ngModel)]="selectedFolder"  [loading]="foldersLoading"  formControlName="repoUrl">
+        <ng-select 
+          id="configure-dropbox-folder-select" 
+          class="custom-select" 
+          [items]="folderList"
+          aria-describedby="dc-dropbox-folder-error"
+          aria-labelledby="dc-dropbox-folder-label" 
+          bindLabel="displayLabel" 
+          bindValue="value" 
+          placeholder="'selectFolder' | translate"
+          [clearable]="false" 
+          [(ngModel)]="selectedFolder"  
+          [loading]="foldersLoading"  
+          formControlName="repoUrl">
         </ng-select>
-        <div invalidmessage="repoUrl"></div>
+        <div invalidmessage="repoUrl" id="dc-dropbox-folder-error" role="alert"></div>
       </div>
     </div>
 

diff --git a/...ployment-center-setup/step-configure/configure-external/configure-external.component.html b/...ployment-center-setup/step-configure/configure-external/configure-external.component.html
@@ -4,46 +4,46 @@ <h3 class="first-config-heading">{{'code' | translate}}</h3>
 
   <div class="settings-wrapper">
     <div class="setting-wrapper">
-      <div class="setting-label">{{'repository' | translate}}</div>
+      <label class="setting-label" id="dc-external-repo-label">{{'repository' | translate}}</label>
       <div class="setting-control-container">
-        <textbox [control]="this.wizard?.sourceSettings?.controls?.repoUrl" [placeholder]="'enter repo'"></textbox>
+        <textbox [ariaLabel]="'repository' | translate" [control]="this.wizard?.sourceSettings?.controls?.repoUrl" [placeholder]="'enter repo'"></textbox>
       </div>
     </div>
 
     <div class="setting-wrapper">
-      <div class="setting-label">{{'branch' | translate}}</div>
+      <label class="setting-label" id="dc-external-branch-label">{{'branch' | translate}}</label>
       <div class="setting-control-container">
-        <textbox [control]="this.wizard?.sourceSettings?.controls?.branch" [placeholder]="'enter branch'"></textbox>
+        <textbox [ariaLabel]="'branch' | translate" [control]="this.wizard?.sourceSettings?.controls?.branch" [placeholder]="'enter branch'"></textbox>
       </div>
     </div>
 
     <div class="setting-wrapper" *ngIf="wizard?.wizardValues?.buildProvider ===
       'kudu'">
-      <div class="setting-label">{{'repoType' | translate}}</div>
+      <label class="setting-label" id="dc-external-repoType-label">{{'repoType' | translate}}</label>
       <div class="setting-control-container">
-        <radio-selector [defaultValue]="repoMode" [options]="RepoTypeOptions" (value)="repoTypeChanged($event)"></radio-selector>
+        <radio-selector [ariaLabel]="'repoType' | translate" [defaultValue]="repoMode" aria-labelledby="dc-external-repoType-label" [options]="RepoTypeOptions" (value)="repoTypeChanged($event)"></radio-selector>
       </div>
     </div>
     <ng-container *ngIf="wizard?.wizardValues?.buildProvider === 'vsts'">
       <div class="setting-wrapper">
-        <div class="setting-label">{{'privateRepo' | translate}}</div>
+        <label class="setting-label" id="dc-external-privateRepo-label">{{'privateRepo' | translate}}</label>
         <div class="setting-control-container">
-          <radio-selector [defaultValue]="privateRepo" [options]="AccessTypeOptions" (value)="accessTypeChanged($event)"></radio-selector>
+          <radio-selector [ariaLabel]="'privateRepo' | translate" [defaultValue]="privateRepo" [options]="AccessTypeOptions" (value)="accessTypeChanged($event)"></radio-selector>
         </div>
       </div>
 
       <ng-container *ngIf="wizard?.wizardValues?.sourceSettings?.privateRepo">
 
         <div class="setting-wrapper">
-          <div class="setting-label">{{'username' | translate }}</div>
+          <label class="setting-label" id="dc-external-privateRepoUserName-label">{{'username' | translate }}</label>
           <div class="setting-control-container">
-            <textbox [control]="this.wizard?.sourceSettings?.controls?.username" [placeholder]="'enterUsername' | translate"></textbox>
+            <textbox [ariaLabel]="'username' | translate" [control]="this.wizard?.sourceSettings?.controls?.username" [placeholder]="'enterUsername' | translate"></textbox>
           </div>
         </div>
         <div class="setting-wrapper">
-          <div class="setting-label">{{'password' | translate }}</div>
+          <label class="setting-label" id="dc-external-privateRepoPassword-label">{{'password' | translate }}</label>
           <div class="setting-control-container">
-            <textbox [control]="this.wizard?.sourceSettings?.controls?.password" [placeholder]="'enterPassword' | translate" type="password"></textbox>
+            <textbox [ariaLabel]="'password' | translate" [control]="this.wizard?.sourceSettings?.controls?.password" [placeholder]="'enterPassword' | translate" type="password"></textbox>
           </div>
         </div>
       </ng-container>

diff --git a/...r/deployment-center-setup/step-configure/configure-github/configure-github.component.html b/...r/deployment-center-setup/step-configure/configure-github/configure-github.component.html
@@ -3,31 +3,64 @@ <h3 class="first-config-heading">{{'code' | translate}}</h3>
 
   <div class="settings-wrapper">
     <div class="setting-wrapper">
-      <div class="setting-label">{{'organization' | translate}}</div>
+      <label class="setting-label" id="dc-github-org-label">{{'organization' | translate}}</label>
       <div class="setting-control-container">
-        <ng-select id='configure-github-org-select' class="custom-select" [items]="OrgList" bindLabel="displayLabel" bindValue="value" placeholder="Select org" [clearable]="false"
-          [(ngModel)]="selectedOrg" [ngModelOptions]="{standalone: true}" (change)="OrgChanged($event)">
+        <ng-select 
+          id='configure-github-org-select' 
+          class="custom-select" 
+          aria-labelledby="dc-github-org-label" 
+          [items]="OrgList" 
+          bindLabel="displayLabel" 
+          bindValue="value" 
+          placeholder="Select org" 
+          [clearable]="false"
+          [(ngModel)]="selectedOrg" 
+          [ngModelOptions]="{standalone: true}" 
+          (change)="OrgChanged($event)">
         </ng-select>
       </div>
     </div>
 
     <div class="setting-wrapper">
-      <div class="setting-label">{{'repository' | translate}}</div>
+      <label class="setting-label" id="dc-github-repo-label">{{'repository' | translate}}</label>
       <div class="setting-control-container">
-        <ng-select id='configure-github-repo-select' class="custom-select" [items]="RepoList" bindLabel="displayLabel" bindValue="value" placeholder="Select Repo"
-          [clearable]="false" [loading]="reposLoading" formControlName="repoUrl" [(ngModel)]="selectedRepo" (change)="RepoChanged($event)">
+        <ng-select 
+          id='configure-github-repo-select' 
+          class="custom-select" 
+          aria-describedby="dc-github-repo-error"
+          aria-labelledby="dc-github-repo-label" 
+          [items]="RepoList" 
+          bindLabel="displayLabel" 
+          bindValue="value" 
+          placeholder="Select Repo"
+          [clearable]="false" 
+          [loading]="reposLoading" 
+          formControlName="repoUrl" 
+          [(ngModel)]="selectedRepo" 
+          (change)="RepoChanged($event)">
         </ng-select>
-        <div invalidmessage="repoUrl"></div>
+        <div invalidmessage="repoUrl" id="dc-github-repo-error" role="alert"></div>
       </div>
     </div>
 
     <div class="setting-wrapper">
-      <div class="setting-label">{{'branch' | translate}}</div>
+      <label class="setting-label" id="dc-github-branch-label" >{{'branch' | translate}}</label>
       <div class="setting-control-container">
-        <ng-select id='configure-github-branch-select' class="custom-select" [items]="BranchList" bindLabel="displayLabel" bindValue="value" placeholder="Select Branch"
-          [clearable]="false" [(ngModel)]="selectedBranch" [loading]="branchesLoading" formControlName="branch">
+        <ng-select 
+          id='configure-github-branch-select' 
+          class="custom-select" 
+          [items]="BranchList" 
+          aria-describedby="dc-github-branch-error"
+          aria-labelledby="dc-github-branch-label" 
+          bindLabel="displayLabel" 
+          bindValue="value" 
+          placeholder="Select Branch"
+          [clearable]="false" 
+          [(ngModel)]="selectedBranch" 
+          [loading]="branchesLoading" 
+          formControlName="branch">
         </ng-select>
-        <div invalidmessage="branch"></div>
+        <div invalidmessage="branch" id="dc-github-branch-error" role="alert"></div>
       </div>
     </div>