feat: accessibility improvements - lighthouse report (#1405)

* add/enhance roles, aria controls and aria labels

projects/organization-management/src/app/components/cost-center-budget/cost-center-budget.component.html

@@ -6,6 +6,8 @@
         [ngClass]="{ 'bg-danger': spentBudgetPercentage * 100 > 90 }"
         [ngStyle]="{ width: progressBarWidth | percent }"
         role="progressbar"
+        [attr.aria-label]="'Spent budget of cost center ' + costCenter.name"
+        [attr.aria-valuetext]="spentBudgetPercentage | percent"
       >
         <span class="progress-display">{{ spentBudgetPercentage | percent }}</span>
         <ng-template #BudgetPopover>

projects/organization-management/src/app/components/cost-center-budget/cost-center-budget.component.spec.ts

@@ -41,6 +41,7 @@ describe('Cost Center Budget Component', () => {
         currency: 'USD',
         type: 'Money',
       },
+      name: 'Oil Corp Headquarter',
     } as CostCenter;
 
     basketChange = {
@@ -62,7 +63,13 @@ describe('Cost Center Budget Component', () => {
       <div>
         <div placement="top" data-testing-id="cost-center-budget-popover" ng-reflect-placement="top">
           <div class="progress">
-            <div role="progressbar" class="progress-bar" style="width: 40%">
+            <div
+              role="progressbar"
+              class="progress-bar"
+              aria-label="Spent budget of cost center Oil Corp Headquarter"
+              aria-valuetext="40%"
+              style="width: 40%"
+            >
               <span class="progress-display">40%</span>
             </div>
           </div>

projects/organization-management/src/app/components/user-budget/user-budget.component.html

@@ -25,6 +25,8 @@
           [ngClass]="{ 'bg-danger': usedBudgetPercentage * 100 > 90 }"
           [ngStyle]="{ width: usedBudgetPercentage | percent }"
           role="progressbar"
+          aria-label="Spent budget"
+          [attr.aria-valuetext]="usedBudgetPercentage | percent"
         >
           <span class="progress-display">{{ usedBudgetPercentage | percent }}</span>
           <ng-template #BudgetPopover>

projects/organization-management/src/app/components/user-budget/user-budget.component.spec.ts

@@ -77,7 +77,13 @@ describe('User Budget Component', () => {
         </dl>
         <div placement="top" data-testing-id="user-budget-popover" ng-reflect-placement="top">
           <div class="progress">
-            <div role="progressbar" class="progress-bar" style="width: 50%">
+            <div
+              role="progressbar"
+              aria-label="Spent budget"
+              class="progress-bar"
+              aria-valuetext="50%"
+              style="width: 50%"
+            >
               <span class="progress-display">50%</span>
             </div>
           </div>

projects/requisition-management/src/app/pages/approver/approver-page.component.html

@@ -3,17 +3,17 @@ <h1>{{ 'account.requisitions.approvals' | translate }}</h1>
 <p>{{ 'account.requisitions.approvals.text' | translate }}</p>
 
 <ul ngbNav class="nav-tabs" [(activeId)]="status">
-  <li ngbNavItem="PENDING">
+  <li ngbNavItem="PENDING" role="presentation">
     <a ngbNavLink [routerLink]="['../approver', { status: 'PENDING' }]" data-testing-id="tab-link-pending">{{
       'account.requisitions.approvals.navtab.waiting' | translate
     }}</a>
   </li>
-  <li ngbNavItem="APPROVED">
+  <li ngbNavItem="APPROVED" role="presentation">
     <a ngbNavLink [routerLink]="['../approver', { status: 'APPROVED' }]" data-testing-id="tab-link-approved">{{
       'account.requisitions.approvals.navtab.approved' | translate
     }}</a>
   </li>
-  <li ngbNavItem="REJECTED">
+  <li ngbNavItem="REJECTED" role="presentation">
     <a ngbNavLink [routerLink]="['../approver', { status: 'REJECTED' }]" data-testing-id="tab-link-rejected">{{
       'account.requisitions.approvals.navtab.rejected' | translate
     }}</a>

projects/requisition-management/src/app/pages/buyer/buyer-page.component.html

@@ -3,17 +3,17 @@ <h1>{{ 'account.requisitions.requisitions' | translate }}</h1>
 <p>{{ 'account.requisitions.requisitions.text' | translate }}</p>
 
 <ul ngbNav class="nav-tabs" [(activeId)]="status">
-  <li ngbNavItem="PENDING">
+  <li ngbNavItem="PENDING" role="presentation">
     <a ngbNavLink [routerLink]="['../buyer', { status: 'PENDING' }]" data-testing-id="tab-link-pending">{{
       'account.requisitions.requisitions.navtab.pending' | translate
     }}</a>
   </li>
-  <li ngbNavItem="APPROVED">
+  <li ngbNavItem="APPROVED" role="presentation">
     <a ngbNavLink [routerLink]="['../buyer', { status: 'APPROVED' }]" data-testing-id="tab-link-approved">{{
       'account.requisitions.requisitions.navtab.approved' | translate
     }}</a>
   </li>
-  <li ngbNavItem="REJECTED">
+  <li ngbNavItem="REJECTED" role="presentation">
     <a ngbNavLink [routerLink]="['../buyer', { status: 'REJECTED' }]" data-testing-id="tab-link-rejected">{{
       'account.requisitions.requisitions.navtab.rejected' | translate
     }}</a>

src/app/extensions/order-templates/pages/account-order-template-detail/account-order-template-detail-line-item/account-order-template-detail-line-item.component.html

@@ -1,6 +1,11 @@
 <div class="d-flex" data-testing-id="order-template-product">
   <div class="col-1 col-md-2 list-item d-flex">
-    <input type="checkbox" data-testing-id="productCheckbox" [formControl]="checkBox" />
+    <input
+      type="checkbox"
+      data-testing-id="productCheckbox"
+      [formControl]="checkBox"
+      aria-label="Select item to add to cart"
+    />
     <div class="d-none d-md-inline">
       <ish-product-image imageType="S" [link]="true"></ish-product-image>
     </div>

src/app/extensions/punchout/pages/account-punchout/account-punchout-header/account-punchout-header.component.html

@@ -10,7 +10,7 @@ <h1>{{ 'account.punchout.heading' | translate }}</h1>
 
 <div *ngIf="punchoutTypes?.length > 1">
   <ul ngbNav class="nav-tabs section" [(activeId)]="selectedType">
-    <li *ngFor="let type of punchoutTypes" [ngbNavItem]="type">
+    <li *ngFor="let type of punchoutTypes" [ngbNavItem]="type" role="presentation">
       <a ngbNavLink [routerLink]="['../punchout', { format: type }]">{{
         'account.punchout.type.text' | translate : { '0': type }
       }}</a>

src/app/extensions/quickorder/shared/quickorder-csv-form/quickorder-csv-form.component.html

@@ -12,6 +12,7 @@ <h3>{{ 'quickorder.page.csv.title' | translate }}</h3>
           class="form-control"
           accept=".csv"
           (change)="uploadListener($event.target)"
+          aria-label="Upload CSV File"
         />
         <div [ngSwitch]="status">
           <small *ngSwitchCase="'IncorrectInput'" class="has-error"

src/app/extensions/store-locator/shared/store-locator-footer/store-locator-footer.component.html

@@ -3,7 +3,7 @@
     <div class="row">
       <div class="col-md-4 storefinder clearfix">
         <fa-icon [icon]="['fas', 'map-marker-alt']"></fa-icon>
-        <h4>{{ 'store_locator.link.title' | translate }}</h4>
+        <h3>{{ 'store_locator.link.title' | translate }}</h3>
         <a routerLink="/store-finder">{{ 'store_locator.link.subtitle' | translate }}</a>
       </div>
     </div>

src/app/pages/account/account-navigation/account-navigation.component.html

@@ -1,7 +1,7 @@
 <!-- account navigation with hierarchy -->
 <ng-container *ngIf="!(deviceType === 'mobile' || deviceType === 'tablet'); else mobileNavigation">
   <ul class="account-navigation list-unstyled">
-    <ish-account-user-info></ish-account-user-info>
+    <ish-account-user-info role="listitem"></ish-account-user-info>
     <ng-container *ngFor="let item of navItems">
       <ng-container *ishIsAuthorizedTo="item.permission || 'always'">
         <ng-container *ishHasNotRole="item.notRole">

src/app/pages/account/account-user-info/account-user-info.component.html

@@ -1,4 +1,4 @@
-<li *ngIf="isBusinessUser$ | async" class="account-welcome">
+<li *ngIf="isBusinessUser$ | async" class="account-welcome" role="presentation">
   <ng-container *ngIf="user$ | async as user">
     <ng-container *ngIf="user.lastName && user.firstName; else email">
       <h4>{{ user.lastName }}, {{ user.firstName }}</h4>

src/app/pages/account/account-user-info/account-user-info.component.spec.ts

@@ -58,7 +58,7 @@ describe('Account User Info Component', () => {
     fixture.detectChanges();
 
     expect(element).toMatchInlineSnapshot(`
-      <li class="account-welcome">
+      <li role="presentation" class="account-welcome">
         <h4>Mustermann, Max</h4>
         <div>Foods Inc.</div>
         <div>Approver, Buyer</div>
@@ -74,7 +74,7 @@ describe('Account User Info Component', () => {
     fixture.detectChanges();
 
     expect(element).toMatchInlineSnapshot(`
-      <li class="account-welcome">
+      <li role="presentation" class="account-welcome">
         <h4 class="ellipsis">max.mustermann@test.intershop.de</h4>
         <div>Foods Inc.</div>
       </li>

src/app/pages/checkout-payment/checkout-payment/checkout-payment.component.html

@@ -21,7 +21,7 @@ <h3>{{ 'checkout.payment.method.select.heading' | translate }}</h3>
         <ul *ngIf="hasPaymentMethods" id="payment-accordion" class="payment-methods list-unstyled">
           <ng-container *ngFor="let paymentMethod of filteredPaymentMethods; index as i">
             <li class="panel">
-              <div [ngClass]="{ 'form-check': !paymentMethod.parameters }" role="tab">
+              <div [ngClass]="{ 'form-check': !paymentMethod.parameters }">
                 <strong>
                   {{ paymentMethod.displayName }}
                   <ng-container *ngIf="!paymentMethod.displayName">{{ paymentMethod.id }}</ng-container>
@@ -72,8 +72,8 @@ <h3>{{ 'checkout.payment.method.select.heading' | translate }}</h3>
                 *ngIf="paymentMethod.parameters?.length"
                 [attr.data-testing-id]="'payment-parameter-form-' + paymentMethod.id"
               >
-                <li *ngFor="let paymentInstrument of paymentMethod.paymentInstruments" class="panel section">
-                  <div class="form-check col-10 col-md-6 col-lg-8 col-xl-6" role="tab">
+                <div *ngFor="let paymentInstrument of paymentMethod.paymentInstruments" class="panel section">
+                  <div class="form-check col-10 col-md-6 col-lg-8 col-xl-6">
                     <input
                       type="radio"
                       formControlName="name"
@@ -105,16 +105,16 @@ <h3>{{ 'checkout.payment.method.select.heading' | translate }}</h3>
                     >
                     </ish-payment-concardis-creditcard-cvc-detail>
                   </div>
-                </li>
-                <li class="panel">
+                </div>
+                <div class="panel">
                   <a
                     *ngIf="!formIsOpen(i)"
                     [routerLink]="[]"
                     (click)="openPaymentParameterForm(i)"
                     data-testing-id="add-payment-link"
                     >{{ 'checkout.payment.addPayment.link' | translate }}
                   </a>
-                </li>
+                </div>
 
                 <div [ngbCollapse]="!formIsOpen(i)">
                   <p class="indicates-required">

src/app/pages/checkout-shipping/checkout-shipping/checkout-shipping.component.ts

@@ -47,7 +47,7 @@ export class CheckoutShippingComponent implements OnInit, OnDestroy {
           wrappers: ['shipping-radio-wrapper'],
           props: {
             description: method.description,
-            id: `shipping_method${method.id}`,
+            id: `shipping_method_${method.id}`,
             value: method.id,
           },
         }))

src/app/pages/checkout-shipping/formly/shipping-radio-wrapper/shipping-radio-wrapper.component.html

@@ -1,6 +1,6 @@
 <div class="form-check" [class.has-error]="showError">
   <ng-template #fieldComponent></ng-template>
-  <label class="form-check-label" [for]="props.id" [ngClass]="props.labelClass">
+  <label class="form-check-label" [for]="id" [ngClass]="props.labelClass">
     <ish-shipping-info [shippingMethodId]="props.value"></ish-shipping-info>
     <a *ngIf="props.description" class="details-tooltip" [ngbPopover]="ShippingMethodDescription" placement="top">
       {{ 'checkout.detail.text' | translate }}

src/app/pages/product/product-detail-info/product-detail-info.component.html

@@ -1,28 +1,28 @@
 <div *ngIf="product$ | async as product" class="section">
   <ul ngbNav #nav="ngbNav" class="nav-tabs w-100" [(activeId)]="active">
-    <li [ngbNavItem]="'DESCRIPTION'" data-testing-id="product-description-tab">
+    <li [ngbNavItem]="'DESCRIPTION'" data-testing-id="product-description-tab" role="presentation">
       <a ngbNavLink>{{ 'product.description.heading' | translate }}</a>
       <ng-template ngbNavContent>
         <div [ishServerHtml]="product.longDescription"></div>
       </ng-template>
     </li>
 
-    <li *ngIf="product.attributes?.length" [ngbNavItem]="'DETAILS'">
+    <li *ngIf="product.attributes?.length" [ngbNavItem]="'DETAILS'" role="presentation">
       <a ngbNavLink>{{ 'product.details.heading' | translate }}</a>
       <ng-template ngbNavContent>
         <ish-product-attributes [product]="product"></ish-product-attributes>
       </ng-template>
     </li>
 
-    <li *ngIf="product.attachments?.length" [ngbNavItem]="'ATTACHMENTS'">
+    <li *ngIf="product.attachments?.length" [ngbNavItem]="'ATTACHMENTS'" role="presentation">
       <a ngbNavLink>{{ 'product.attachments.heading' | translate }}</a>
       <ng-template ngbNavContent>
         <ish-product-attachments></ish-product-attachments>
       </ng-template>
     </li>
 
     <ng-container *ngIf="(isVariationMaster$ | async) === false">
-      <li *ishFeature="'rating'" [ngbNavItem]="'REVIEWS'">
+      <li *ishFeature="'rating'" [ngbNavItem]="'REVIEWS'" role="presentation">
         <a ngbNavLink>{{ 'product.reviews.heading' | translate }} ({{ product.numberOfReviews }})</a>
         <ng-template ngbNavContent>
           <ish-lazy-product-reviews></ish-lazy-product-reviews>

src/app/shared/cms/components/cms-video/cms-video.component.html

@@ -7,7 +7,13 @@
   <ng-container *ngIf="iframeVideoUrl; else nativeVideo">
     <div class="video-wrapper">
       <!-- spell-checker: words allowfullscreen -->
-      <iframe loading="lazy" [src]="iframeVideoUrl" frameborder="0" allowfullscreen></iframe>
+      <iframe
+        [title]="pagelet?.displayName"
+        loading="lazy"
+        [src]="iframeVideoUrl"
+        frameborder="0"
+        allowfullscreen
+      ></iframe>
     </div>
   </ng-container>
 
@@ -22,6 +28,7 @@
       [controls]="autoplay"
       [muted]="mute"
       [poster]="pagelet.stringParam('Image')"
+      [title]="pagelet?.displayName"
     ></video>
 
     <div *ngIf="!autoplay && !playing" class="video-text">

src/app/shared/components/basket/basket-address-summary/basket-address-summary.component.html

@@ -1,7 +1,12 @@
 <div class="address-summary">
   <!-- Invoice Address -->
   <div class="clearfix">
-    <a class="float-right btn-tool" routerLink="/checkout/address">
+    <a
+      class="float-right btn-tool"
+      routerLink="/checkout/address"
+      title="{{ 'checkout.address.update.label' | translate }}"
+      aria-label="Edit invoice address"
+    >
       <fa-icon [icon]="['fas', 'pencil-alt']"></fa-icon>
     </a>
     <h5 class="float-left">{{ 'checkout.address.billing.label' | translate }}</h5>
@@ -15,7 +20,8 @@ <h5 class="float-left">{{ 'checkout.address.billing.label' | translate }}</h5>
     <a
       class="float-right btn-tool"
       routerLink="/checkout/address"
-      title="{{ 'checkout.address.update.label' | translate }} />"
+      title="{{ 'checkout.address.update.label' | translate }}"
+      aria-label="Edit shipping address"
     >
       <fa-icon [icon]="['fas', 'pencil-alt']"></fa-icon>
     </a>

src/app/shared/components/checkout/basket-invoice-address-widget/basket-invoice-address-widget.component.html

@@ -35,14 +35,14 @@ <h2>{{ 'checkout.address.billing.label' | translate }}</h2>
     class="btn btn-link"
     (click)="showAddressForm()"
     [attr.aria-expanded]="(collapseChange | async) === false"
-    aria-controls="collapseBasic"
+    aria-controls="invoice-address-panel"
   >
     {{ 'checkout.create_address.link' | translate }}
   </button>
 </div>
 
 <!-- invoice address form -->
-<div id="collapseBasic" [ngbCollapse]="collapseChange | async" data-testing-id="invoice-address-form">
+<div id="invoice-address-panel" [ngbCollapse]="collapseChange | async" data-testing-id="invoice-address-form">
   <ish-formly-customer-address-form
     [address]="editAddress"
     [resetForm]="collapseChange | async"

src/app/shared/components/checkout/basket-shipping-address-widget/basket-shipping-address-widget.component.html

@@ -70,14 +70,14 @@ <h2>{{ 'checkout.address.shipping.label' | translate }}</h2>
     class="btn btn-link"
     (click)="showAddressForm()"
     [attr.aria-expanded]="(collapseChange | async) === false"
-    aria-controls="collapseBasic"
+    aria-controls="shipping-address-panel"
   >
     {{ 'checkout.create_address.link' | translate }}
   </button>
 </div>
 
 <!-- shipping address form -->
-<div id="collapseBasic" [ngbCollapse]="collapseChange | async" data-testing-id="shipping-address-form">
+<div id="shipping-address-panel" [ngbCollapse]="collapseChange | async" data-testing-id="shipping-address-form">
   <ish-formly-customer-address-form
     [address]="editAddress"
     [resetForm]="collapseChange | async"

src/app/shared/components/filter/filter-collapsible/filter-collapsible.component.html

@@ -4,7 +4,7 @@
     (keydown.enter)="toggle()"
     tabindex="0"
     [attr.aria-expanded]="!isCollapsed"
-    aria-controls="collapseFilter"
+    [attr.aria-controls]="'filter-list_' + title"
   >
     {{ title }}
     <fa-icon [icon]="['fas', isCollapsed ? 'angle-right' : 'angle-down']" class="float-right"></fa-icon>

src/app/shared/components/filter/filter-collapsible/filter-collapsible.component.spec.ts

@@ -19,6 +19,8 @@ describe('Filter Collapsible Component', () => {
     fixture = TestBed.createComponent(FilterCollapsibleComponent);
     component = fixture.componentInstance;
     element = fixture.nativeElement;
+
+    component.title = 'Price';
   });
 
   it('should be created', () => {
@@ -31,8 +33,8 @@ describe('Filter Collapsible Component', () => {
     fixture.detectChanges();
     expect(element).toMatchInlineSnapshot(`
       <div class="filter-group">
-        <h3 tabindex="0" aria-controls="collapseFilter" aria-expanded="true">
-          <fa-icon class="float-right" ng-reflect-icon="fas,angle-down"></fa-icon>
+        <h3 tabindex="0" aria-expanded="true" aria-controls="filter-list_Price">
+          Price <fa-icon class="float-right" ng-reflect-icon="fas,angle-down"></fa-icon>
         </h3>
       </div>
     `);
@@ -43,8 +45,8 @@ describe('Filter Collapsible Component', () => {
 
     expect(element).toMatchInlineSnapshot(`
       <div class="filter-group collapsed">
-        <h3 tabindex="0" aria-controls="collapseFilter" aria-expanded="false">
-          <fa-icon class="float-right" ng-reflect-icon="fas,angle-right"></fa-icon>
+        <h3 tabindex="0" aria-expanded="false" aria-controls="filter-list_Price">
+          Price <fa-icon class="float-right" ng-reflect-icon="fas,angle-right"></fa-icon>
         </h3>
       </div>
     `);

src/app/shared/components/filter/filter-swatch-images/__snapshots__/filter-swatch-images.component.spec.ts.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Filter Swatch Images Component should be created 1`] = `
-<ul class="filter-list clearfix">
+<ul class="filter-list clearfix" id="filter-list_Color">
   <li class="filter-item filter-color">
     <a
       class="filter-swatch"

src/app/shared/components/filter/filter-swatch-images/filter-swatch-images.component.html

@@ -1,4 +1,4 @@
-<ul class="filter-list clearfix">
+<ul class="filter-list clearfix" [id]="'filter-list_' + filterElement.name">
   <ng-container *ngFor="let facet of filterElement.facets">
     <li class="filter-item filter-color" [ngClass]="{ 'filter-selected': facet.selected }">
       <a