Merge a9e3b24 into b499e77

Azure · Oct 9, 2018 · bf92f7a · bf92f7a
2 parents b499e77 + a9e3b24
commit bf92f7a
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 27 deletions.
diff --git a/client/src/app/site/spec-picker/spec-list/spec-list.component.html b/client/src/app/site/spec-picker/spec-list/spec-list.component.html
@@ -8,7 +8,10 @@
     [class.selected]="spec === specGroup.selectedSpec"
     [class.disabled]="spec.state === 'disabled'"
     [hidden]="spec.state === 'hidden'"
-    [id]="specGroup.id + spec.skuCode">
+    [id]="specGroup.id + spec.skuCode"
+    tabindex="0"
+    role="button"
+    [attr.aria-disabled]="spec.state === 'disabled'">
 
     <h2>{{spec.skuCode}}</h2>
     <div class="top-features" [attr.aria-label]="'pricing_availableFeatures' | translate">

diff --git a/client/src/app/site/spec-picker/spec-picker.component.html b/client/src/app/site/spec-picker/spec-picker.component.html
@@ -13,11 +13,12 @@
       [id]="'spec-group-tab-' + specGroup.id"
       [attr.aria-controls]="'spec-group-tab-' + specGroup.id"
       [attr.aria-selected]="specGroup === specManager.selectedSpecGroup"
-      [attr.aria-label]="specGroup.title">
+      [attr.aria-label]="specGroup.title"
+      aria-describedBy="subGroupDescriptionId">
 
       <div [load-image]="specGroup.iconUrl" class="icon-medium"></div>
       <h3>{{specGroup.title}}</h3>
-      <h4>{{specGroup.description}}</h4>
+      <h4 id="subGroupDescriptionId">{{specGroup.description}}</h4>
     </div>
   </nav>
 
@@ -43,30 +44,32 @@ <h4>{{specGroup.description}}</h4>
     </section>
 
     <section class="centered">
-      <h2 class="tiers-header" *ngIf="specManager.selectedSpecGroup.recommendedSpecs.length > 0">{{'pricing_recommendedTiers' | translate}}</h2>
-      <spec-list *ngIf="specManager.selectedSpecGroup.recommendedSpecs.length > 0"
-        [specGroup]="specManager.selectedSpecGroup"
-        [isRecommendedList]="true"
-        (onSelectedSpec)="selectSpec($event)"></spec-list>
-
-        <div class="spec-expander" *ngIf="showExpander">
-          <span (click)="specManager.selectedSpecGroup.isExpanded = !specManager.selectedSpecGroup.isExpanded"
-                (keydown)="onExpandKeyPress($event)"
-                role="button"
-                tabindex="0"
-                [attr.aria-expanded]="specManager.selectedSpecGroup.isExpanded"
-                [attr.aria-controls]="specManager.selectedSpecGroup.id + specManager.selectedSpecGroup.selectedSpec.skuCode">
-
-            <span [load-image]="!specManager.selectedSpecGroup.isExpanded ? 'image/caret-down.svg' : 'image/caret-up.svg'" class="expand-icon"></span>
-            <a>{{ (!specManager.selectedSpecGroup.isExpanded ? 'seeAllOptions' : 'seeRecommendedOptions') | translate}}</a>
-          </span>
-        </div>
-
-      <h2 class="tiers-header" *ngIf="showAllSpecs">{{'pricing_additionalTiers' | translate}}</h2>
-      <spec-list *ngIf="showAllSpecs"
-        [specGroup]="specManager.selectedSpecGroup"
-        [isRecommendedList]="false"
-        (onSelectedSpec)="selectSpec($event)"></spec-list>
+      <ng-container *ngIf="specManager.selectedSpecGroup.recommendedSpecs.length > 0">
+        <h2 class="tiers-header" tabindex="0" >{{'pricing_recommendedTiers' | translate}}</h2>
+        <spec-list [specGroup]="specManager.selectedSpecGroup"
+          [isRecommendedList]="true"
+          (onSelectedSpec)="selectSpec($event)"></spec-list>
+      </ng-container>
+
+      <div class="spec-expander" *ngIf="showExpander">
+        <span (click)="specManager.selectedSpecGroup.isExpanded = !specManager.selectedSpecGroup.isExpanded"
+              (keydown)="onExpandKeyPress($event)"
+              role="button"
+              tabindex="0"
+              [attr.aria-expanded]="specManager.selectedSpecGroup.isExpanded"
+              [attr.aria-controls]="specManager.selectedSpecGroup.id + specManager.selectedSpecGroup.selectedSpec.skuCode">
+
+          <span [load-image]="!specManager.selectedSpecGroup.isExpanded ? 'image/caret-down.svg' : 'image/caret-up.svg'" class="expand-icon"></span>
+          <a>{{ (!specManager.selectedSpecGroup.isExpanded ? 'seeAllOptions' : 'seeRecommendedOptions') | translate}}</a>
+        </span>
+      </div>
+
+      <ng-container *ngIf="showAllSpecs">
+        <h2 class="tiers-header" tabindex="0">{{'pricing_additionalTiers' | translate}}</h2>
+        <spec-list [specGroup]="specManager.selectedSpecGroup"
+          [isRecommendedList]="false"
+          (onSelectedSpec)="selectSpec($event)"></spec-list>
+      </ng-container>
     </section>
 
     <section *ngIf="specManager.selectedSpecGroup.selectedSpec" class="feature-lists-container centered">