Accessibility bugs (#3272)

* [Screen Reader - Azure Web - Pricing tier] Incorrect role is defined for 'See additinal options/See only recommended options' on pricing tier blade. (https://msazure.visualstudio.com/Antares/_workitems/edit/3118152) [Screen Reader - App Service Plan][MAS 1.3.1]: ARIA attributes must conform to valid values. (https://msazure.visualstudio.com/Antares/_workitems/edit/3118181) [Screen Reader -Isolated -Advanced networking and Scale ] Narrator is not reading the name properly of learn more link correctly under Isolated blade. (https://msazure.visualstudio.com/Antares/_workitems/edit/3118145) * Some more changes to make the labelledBy + label work for aria * Fixed css
Azure · Oct 9, 2018 · 31fbc28 · 31fbc28
1 parent 064251c
commit 31fbc28
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 9 deletions.
diff --git a/client/src/app/site/spec-picker/spec-feature-list/spec-feature-list.component.html b/client/src/app/site/spec-picker/spec-feature-list/spec-feature-list.component.html
@@ -5,13 +5,16 @@ <h2>{{title}}</h2>
 
     <div [load-image]="feature.iconUrl" class="icon-medium"></div>
     <div class="feature-body">
-      <h4>{{feature.title}}</h4>
-      <div class="feature-description" [id]="feature.title | removeSpaces">{{feature.description}}
-        <a *ngIf="feature.learnMoreUrl"
-          [href]="feature.learnMoreUrl"
-          target="_blank"
-          [attr.aria-label]="feature.title"
-          [attr.aria-describedby]="feature.title | removeSpaces">{{'topBar_learnMore' | translate}}</a>
+      <h4 [id]="feature.title | removeSpaces">{{feature.title}}</h4>
+      <div class="feature-description">{{feature.description}}
+        <div class="feature-learnMore"
+          *ngIf="feature.learnMoreUrl"
+          [attr.aria-labelledBy]="feature.title | removeSpaces"
+          [attr.aria-label]="'topBar_learnMore' | translate">
+          <a [href]="feature.learnMoreUrl"
+            target="_blank"
+            [attr.aria-describedby]="feature.title | removeSpaces">{{'topBar_learnMore' | translate}}</a>
+        </div>
       </div>
     </div>
   </div>

diff --git a/client/src/app/site/spec-picker/spec-picker.component.html b/client/src/app/site/spec-picker/spec-picker.component.html
@@ -52,10 +52,10 @@ <h2 class="tiers-header" *ngIf="specManager.selectedSpecGroup.recommendedSpecs.l
         <div class="spec-expander" *ngIf="showExpander">
           <span (click)="specManager.selectedSpecGroup.isExpanded = !specManager.selectedSpecGroup.isExpanded"
                 (keydown)="onExpandKeyPress($event)"
-                role="link"
+                role="button"
                 tabindex="0"
                 [attr.aria-expanded]="specManager.selectedSpecGroup.isExpanded"
-                [attr.aria-controls]="specManager.selectedSpecGroup.id + specManager.selectedSpecGroup.selectedSpec">
+                [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>

diff --git a/client/src/app/site/spec-picker/spec-picker.component.scss b/client/src/app/site/spec-picker/spec-picker.component.scss
@@ -221,6 +221,10 @@ $center-column-max-width: calc(#{$spec-card-max-width}*4 - 40px);
             text-overflow: ellipsis;
             max-height: 36px;       /* fallback */
         }
+
+        .feature-learnMore{
+            display: inline-block;
+        }
     }
 
     footer{