fixup! feat(accessibility): add ARIA, lang and title attributes (#…

…1694)

projects/organization-management/src/app/components/cost-center-buyer-edit-dialog/cost-center-buyer-edit-dialog.component.ts

@@ -74,6 +74,7 @@ export class CostCenterBuyerEditDialogComponent implements OnInit {
             type: 'ish-select-field',
             className: 'col-6 col-md-4',
             props: {
+              ariaLabel: 'account.costcenter.budget.period.select.label',
               fieldClass: 'col-12 label-empty',
               options: FormsService.getCostCenterBudgetPeriodOptions(),
             },

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

@@ -147,7 +147,7 @@ export class CostCenterFormComponent implements OnInit {
                 props: {
                   fieldClass: 'col-12 label-empty',
                   options: FormsService.getCostCenterBudgetPeriodOptions(),
-                  ariaLabel: 'account.costcenter.budget.label',
+                  ariaLabel: 'account.costcenter.budget.period.select.label',
                 },
               },
             ],

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

@@ -119,6 +119,7 @@ export class UserBudgetFormComponent implements OnInit {
                 key: 'budgetPeriod',
                 props: {
                   fieldClass: 'col-12 label-empty',
+                  ariaLabel: 'account.user.budget.period.select.label',
                   options: this.periods.map(period => ({
                     value: period,
                     // keep-localization-pattern: ^account\.user\.new\.budget\.period\.value.*

projects/organization-management/src/app/pages/cost-center-buyers/cost-center-buyers-page.component.ts

@@ -137,7 +137,7 @@ export class CostCenterBuyersPageComponent implements OnInit {
               props: {
                 fieldClass: 'col-12',
                 options: FormsService.getCostCenterBudgetPeriodOptions(),
-                ariaLabel: 'account.costcenter.details.buyers.list.order_spend_limit.label',
+                ariaLabel: 'account.costcenter.budget.period.select.label',
               },
             },
           ],

src/app/extensions/order-templates/shared/select-order-template-form/select-order-template-form.component.ts

@@ -43,6 +43,7 @@ export class SelectOrderTemplateFormComponent implements OnInit {
         defaultValue: this.translate.instant('account.order_template.new_order_template.text'),
         props: {
           required: true,
+          ariaLabel: 'account.order_template.form.name.label',
         },
         validators: {
           validation: [SpecialValidators.noHtmlTags],
@@ -92,6 +93,7 @@ export class SelectOrderTemplateFormComponent implements OnInit {
               defaultValue: this.translate.instant('account.order_template.new_order_template.text'),
               props: {
                 required: true,
+                ariaLabel: 'account.order_template.form.name.label',
               },
               validators: {
                 validation: [SpecialValidators.noHtmlTags],

src/app/extensions/quickorder/shared/direct-order/direct-order.component.spec.ts

@@ -56,6 +56,7 @@ describe('Direct Order Component', () => {
         <formly-field
         ><ish-input-test-field
           >TextInputFieldComponent: sku ish-text-input-field { "fieldClass": "col-12", "placeholder":
+          "shopping_cart.direct_order.item_placeholder", "ariaLabel":
           "shopping_cart.direct_order.item_placeholder", "attributes": { "autocomplete": "on" }, "label":
           "", "disabled": false}</ish-input-test-field
         ></formly-field

src/app/extensions/quickorder/shared/direct-order/direct-order.component.ts

@@ -76,6 +76,7 @@ export class DirectOrderComponent implements OnInit, AfterViewInit {
         props: {
           fieldClass: 'col-12',
           placeholder: 'shopping_cart.direct_order.item_placeholder',
+          ariaLabel: 'shopping_cart.direct_order.item_placeholder',
           attributes: { autocomplete: 'on' },
         },
         validation: {

src/app/extensions/quickorder/shared/quickorder-add-products-form/quickorder-add-products-form.component.ts

@@ -76,6 +76,7 @@ export class QuickorderAddProductsFormComponent implements OnInit {
               props: {
                 fieldClass: 'col-12',
                 placeholder: 'shopping_cart.direct_order.item_placeholder',
+                ariaLabel: 'shopping_cart.direct_order.item_placeholder',
               },
               expressions: {
                 'props.required': conf => !!conf.model.quantity,

src/app/extensions/wishlists/shared/select-wishlist-form/select-wishlist-form.component.ts

@@ -39,6 +39,7 @@ export class SelectWishlistFormComponent implements OnInit {
         defaultValue: this.translate.instant('account.wishlists.choose_wishlist.new_wishlist_name.initial_value'),
         props: {
           required: true,
+          ariaLabel: 'account.wishlists.wishlist_form.name.label',
         },
         validators: {
           validation: [SpecialValidators.noHtmlTags],
@@ -88,6 +89,7 @@ export class SelectWishlistFormComponent implements OnInit {
               defaultValue: this.translate.instant('account.wishlists.choose_wishlist.new_wishlist_name.initial_value'),
               props: {
                 required: true,
+                ariaLabel: 'account.wishlists.wishlist_form.name.label',
               },
               validators: {
                 validation: [SpecialValidators.noHtmlTags],

src/app/pages/account-order-history/account-order-filters/account-order-filters.component.ts

@@ -154,6 +154,7 @@ export class AccountOrderFiltersComponent implements OnInit, AfterViewInit {
           type: 'ish-text-input-field',
           props: {
             placeholder: 'account.order_history.filter.label.order_no',
+            ariaLabel: 'account.order_history.filter.label.order_no',
             fieldClass: 'col-12',
           },
         },

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

@@ -76,7 +76,11 @@
 
 <!-- mobile account navigation select box -->
 <ng-template #mobileNavigation>
-  <select (change)="navigateTo($event.target)" class="form-control">
+  <select
+    (change)="navigateTo($event.target)"
+    class="form-control"
+    [attr.aria-label]="'account.menu.select.label' | translate"
+  >
     <ng-container *ngFor="let item of navItems">
       <ng-container *ishIsAuthorizedTo="item.permission || 'always'">
         <ng-container *ishHasNotRole="item.notRole">

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

@@ -33,6 +33,7 @@
             class="form-control"
             id="concardis_creditcard_month"
             formControlName="expirationMonth"
+            [attr.aria-label]="'checkout.credit_card.expiration_month.select.label' | translate"
             data-testing-id="expirationMonth"
           >
             <option value="">{{ 'account.date.month' | translate }}</option>
@@ -48,6 +49,7 @@
             class="form-control"
             id="concardis_creditcard_year"
             formControlName="expirationYear"
+            [attr.aria-label]="'checkout.credit_card.expiration_year.select.label' | translate"
             data-testing-id="expirationYear"
           >
             <option value="">{{ 'account.date.year' | translate }}</option>

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

@@ -35,6 +35,7 @@
             class="form-control"
             id="cybersource_creditcard_month"
             formControlName="expirationMonth"
+            [attr.aria-label]="'checkout.credit_card.expiration_month.select.label' | translate"
             data-testing-id="expirationMonth"
           >
             <option value="">{{ 'account.date.month' | translate }}</option>
@@ -50,6 +51,7 @@
             class="form-control"
             id="cybersource_creditcard_year"
             formControlName="expirationYear"
+            [attr.aria-label]="'checkout.credit_card.expiration_year.select.label' | translate"
             data-testing-id="expirationYear"
           >
             <option value="">{{ 'account.date.year' | translate }}</option>

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

@@ -82,6 +82,7 @@ export class BasketInvoiceAddressWidgetComponent implements OnInit {
           fieldClass: 'col-12',
           options: FormsService.getAddressOptions(this.addresses$),
           placeholder: this.emptyOptionLabel,
+          ariaLabel: this.emptyOptionLabel,
         },
         hooks: {
           onInit: field => {

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

@@ -97,6 +97,7 @@ export class BasketShippingAddressWidgetComponent implements OnInit {
           fieldClass: 'col-12',
           options: FormsService.getAddressOptions(this.addresses$),
           placeholder: this.emptyOptionLabel,
+          ariaLabel: this.emptyOptionLabel,
         },
         hooks: {
           onInit: field => {

src/app/shared/components/product/product-list-toolbar/product-list-toolbar.component.html

@@ -54,10 +54,8 @@
   <div *ngIf="sortOptions?.length" class="col-8 col-sm-12 col-md-3 sort-by">
     <select
       class="form-control sort-by-filter"
-      id="SortingAttribute"
-      name="SortingAttribute"
-      (change)="changeSortBy($event.target)"
       [attr.aria-label]="'product.items.sorting.label' | translate"
+      (change)="changeSortBy($event.target)"
     >
       <option value="default" [selected]="sortBy === 'default'">
         {{ 'product.items.sorting.default.label' | translate }}

src/app/shared/components/product/product-quantity/product-quantity.component.html

@@ -1,7 +1,13 @@
 <div *ngIf="visible$ | async" [ngClass]="{ 'has-error': hasQuantityError$ | async }" class="quantity-input">
   <ng-container [ngSwitch]="type">
     <ng-template ngSwitchCase="select">
-      <select (change)="change($event.target)" class="form-control" [id]="elementId" data-testing-id="quantity">
+      <select
+        (change)="change($event.target)"
+        class="form-control"
+        [id]="elementId"
+        [attr.aria-label]="'product.quantity.aria_label' | translate"
+        data-testing-id="quantity"
+      >
         <option *ngFor="let opt of selectValues$ | async" [value]="opt" [selected]="opt === (quantity$ | async)">
           {{ opt }}
         </option>
@@ -18,6 +24,9 @@
         [min]="min$ | async"
         [max]="max$ | async"
         [step]="step$ | async"
+        [attr.aria-label]="'product.quantity.aria_label' | translate"
+        [attr.aria-invalid]="(hasQuantityError$ | async) ? 'true' : undefined"
+        [attr.aria-describedby]="ariaDescribedByIds"
         (change)="change($event.target)"
         (keyup)="change($event.target)"
       />

src/app/shared/components/product/product-quantity/product-quantity.component.spec.ts

@@ -97,7 +97,12 @@ describe('Product Quantity Component', () => {
       ]
     `);
     expect(element.querySelector('select')).toMatchInlineSnapshot(`
-      <select data-testing-id="quantity" class="form-control" id="ASDF">
+      <select
+        data-testing-id="quantity"
+        class="form-control"
+        id="ASDF"
+        aria-label="product.quantity.aria_label"
+      >
         <option value="2">2</option>
         <option value="4">4</option>
         <option value="6">6</option>

src/app/shared/components/product/product-warranty/product-warranty.component.html

@@ -3,7 +3,7 @@
     <ng-container [ngSwitch]="viewType">
       <!-- default display option is radio-buttons -->
       <ng-template ngSwitchDefault>
-        <div class="product-warranty-title">{{ 'product.warranty.heading.text' | translate }}</div>
+        <div class="product-warranty-title">{{ 'product.warranty.heading.text' | translate }}:</div>
         <div class="product-warranty-list" data-testing-id="product-warranties">
           <div class="mb-2" *ngFor="let warranty of warranties">
             <input
@@ -30,6 +30,7 @@
       <ng-template ngSwitchCase="select">
         <select
           class="form-control d-inline-block w-auto"
+          [attr.aria-label]="'product.warranty.heading.text' | translate"
           (change)="updateWarranty($event.target)"
           data-testing-id="product-warranties"
         >

src/app/shared/formly/types/checkbox-field/checkbox-field.component.html

@@ -4,9 +4,9 @@
   [formlyAttributes]="field"
   class="form-check-input"
   [ngClass]="props.inputClass"
-  [attr.data-testing-id]="field.key"
   [attr.aria-label]="props.ariaLabel | translate"
   [attr.aria-required]="props.required ? 'true' : undefined"
   [attr.aria-invalid]="showError ? 'true' : undefined"
   [attr.aria-describedby]="ariaDescribedByIds"
+  [attr.data-testing-id]="field.key"
 />

src/app/shared/formly/types/radio-field/radio-field.component.html

@@ -6,9 +6,9 @@
   [attr.name]="radioName"
   class="form-check-input"
   [ngClass]="props.inputClass"
-  [attr.data-testing-id]="'radio-' + props.label"
   [attr.aria-label]="props.ariaLabel | translate"
   [attr.aria-required]="props.required ? 'true' : undefined"
   [attr.aria-invalid]="showError ? 'true' : undefined"
   [attr.aria-describedby]="ariaDescribedByIds"
+  [attr.data-testing-id]="'radio-' + props.label"
 />

src/app/shared/formly/types/select-field/select-field.component.html

@@ -4,11 +4,11 @@
   [formlyAttributes]="field"
   class="form-control"
   [ngClass]="props.inputClass"
-  [attr.data-testing-id]="field.key"
   [attr.aria-label]="props.ariaLabel | translate"
   [attr.aria-required]="props.required ? 'true' : undefined"
   [attr.aria-invalid]="showError ? 'true' : undefined"
   [attr.aria-describedby]="ariaDescribedByIds"
+  [attr.data-testing-id]="field.key"
 >
   <ng-container *ngIf="props.options && props.options | formlySelectOptions : field | async as opts">
     <ng-container *ngFor="let opt of opts">

src/app/shared/formly/types/text-input-field/text-input-field.component.html

@@ -4,12 +4,12 @@
   [formlyAttributes]="field"
   class="form-control"
   [ngClass]="props.inputClass"
-  [attr.data-testing-id]="field.key"
-  [attr.aria-label]="props.ariaLabel | translate"
   [mask]="props.mask"
   [decimalMarker]="decimalMarker"
   [thousandSeparator]="thousandSeparator"
+  [attr.aria-label]="props.ariaLabel | translate"
   [attr.aria-required]="props.required ? 'true' : undefined"
   [attr.aria-invalid]="showError ? 'true' : undefined"
   [attr.aria-describedby]="ariaDescribedByIds"
+  [attr.data-testing-id]="field.key"
 />

src/app/shared/formly/types/textarea-field/textarea-field.component.html

@@ -5,9 +5,9 @@
   [formlyAttributes]="field"
   class="form-control"
   [ngClass]="props.inputClass"
-  [attr.data-testing-id]="field.key"
   [attr.aria-label]="props.ariaLabel | translate"
   [attr.aria-required]="props.required ? 'true' : undefined"
   [attr.aria-invalid]="showError ? 'true' : undefined"
   [attr.aria-describedby]="ariaDescribedByIds"
+  [attr.data-testing-id]="field.key"
 ></textarea>

src/assets/i18n/de_DE.json

@@ -88,6 +88,7 @@
   "account.costcenter.activate.button.title": "Aktivieren",
   "account.costcenter.budget.error.required": "Geben Sie einen Geldbetrag ein (Budget).",
   "account.costcenter.budget.label": "Budget",
+  "account.costcenter.budget.period.select.label": "Wählen Sie eine Budgetperiode aus",
   "account.costcenter.budget.period.value.fixed": "vordefiniert",
   "account.costcenter.budget.period.value.half-yearly": "halbjährlich",
   "account.costcenter.budget.period.value.monthly": "monatlich",
@@ -195,6 +196,7 @@
   "account.login.wishlists.message": "Melden Sie sich mit Ihrem Benutzernamen an, um die Wunschliste zu benutzen.",
   "account.login_status.myaccount.link": "Mein Konto",
   "account.logout.link": "Abmelden",
+  "account.menu.select.label": "Wählen Sie einen Kontomenüpunkt aus",
   "account.my_account.heading": "Mein Konto",
   "account.my_account.link": "Mein Konto",
   "account.my_account.overview.link": "Kontoübersicht",
@@ -487,6 +489,7 @@
   "account.user.active.title": "Benutzerstatus",
   "account.user.breadcrumbs.new_user.text": "Neuer Benutzer",
   "account.user.budget.label": "Budget",
+  "account.user.budget.period.select.label": "Wählen Sie eine Budgetperiode aus",
   "account.user.delete_user.confirmation": "Der Benutzer wurde gelöscht.",
   "account.user.delete_user_dialog.are_you_sure_paragraph": "Wollen Sie diesen Benutzer wirklich entfernen?",
   "account.user.delete_user_dialog.cancel_button.text": "Abbrechen",
@@ -718,6 +721,8 @@
   "checkout.credit_card.cvc.popover.content": "Der drei- oder vierstellige Sicherheitscode befindet sich auf der Rückseite Ihrer Kreditkarte.",
   "checkout.credit_card.cvc.popover.title": "Wo finde ich die Kartenprüfnummer?",
   "checkout.credit_card.expiration_date.label": "Ablaufdatum",
+  "checkout.credit_card.expiration_month.select.label": "Wählen Sie den Ablaufmonat aus",
+  "checkout.credit_card.expiration_year.select.label": "Wählen Sie das Ablaufjahr aus",
   "checkout.credit_card.expiryMonth.error.invalid": "Das Ablaufdatum ist ungültig. Bitte überprüfen Sie Ihre Kartendaten.",
   "checkout.credit_card.expiry_date.invalid.error": "Geben Sie ein gültiges Ablaufdatum ein",
   "checkout.credit_card.merchantId.error.notFound": "Händler-ID nicht gefunden.",
@@ -1091,7 +1096,7 @@
   "product.warranty.code.text": "Garantie-Code:",
   "product.warranty.detail.text": "Details",
   "product.warranty.expire_date.text": "Läuft aus am:",
-  "product.warranty.heading.text": "Garantieoptionen:",
+  "product.warranty.heading.text": "Garantieoptionen",
   "product.warranty.no_protection_plan": "Ohne erweiterte Garantie",
   "product.warranty.short_description.label": "Neben der gesetzlichen Gewährleistung bieten wir gegen Aufpreis eine zusätzliche Garantie für diesen Artikel an:",
   "product.warranty.type.text": "Typ:",

src/assets/i18n/en_US.json

@@ -88,6 +88,7 @@
   "account.costcenter.activate.button.title": "Activate",
   "account.costcenter.budget.error.required": "Please enter an amount of money (Budget).",
   "account.costcenter.budget.label": "Budget",
+  "account.costcenter.budget.period.select.label": "Select a budget period",
   "account.costcenter.budget.period.value.fixed": "fixed",
   "account.costcenter.budget.period.value.half-yearly": "half-yearly",
   "account.costcenter.budget.period.value.monthly": "monthly",
@@ -195,6 +196,7 @@
   "account.login.wishlists.message": "Please log in to your account to use wish lists.",
   "account.login_status.myaccount.link": "My account",
   "account.logout.link": "Logout",
+  "account.menu.select.label": "Select an account menu item",
   "account.my_account.heading": "My account",
   "account.my_account.link": "My account",
   "account.my_account.overview.link": "Account overview",
@@ -487,6 +489,7 @@
   "account.user.active.title": "User status",
   "account.user.breadcrumbs.new_user.text": "New user",
   "account.user.budget.label": "Budget",
+  "account.user.budget.period.select.label": "Select a budget period",
   "account.user.delete_user.confirmation": "The user has been deleted.",
   "account.user.delete_user_dialog.are_you_sure_paragraph": "Do you really want to delete this user?",
   "account.user.delete_user_dialog.cancel_button.text": "Cancel",
@@ -718,6 +721,8 @@
   "checkout.credit_card.cvc.popover.content": "The three or four-digit security code is located on the back of your credit card.",
   "checkout.credit_card.cvc.popover.title": "Where can I find the CVC?",
   "checkout.credit_card.expiration_date.label": "Expiration date",
+  "checkout.credit_card.expiration_month.select.label": "Select the expiration month",
+  "checkout.credit_card.expiration_year.select.label": "Select the expiration year",
   "checkout.credit_card.expiryMonth.error.invalid": "The expiration date is invalid. Please verify your card data.",
   "checkout.credit_card.expiry_date.invalid.error": "Please enter a valid expiry date.",
   "checkout.credit_card.merchantId.error.notFound": "Merchant ID not found.",
@@ -1091,7 +1096,7 @@
   "product.warranty.code.text": "Warranty code:",
   "product.warranty.detail.text": "Details",
   "product.warranty.expire_date.text": "Expires:",
-  "product.warranty.heading.text": "Warranty options:",
+  "product.warranty.heading.text": "Warranty options",
   "product.warranty.no_protection_plan": "No extended warranty",
   "product.warranty.short_description.label": "In addition to the statutory warranty, we offer an extra warranty for this item for an additional charge:",
   "product.warranty.type.text": "Type:",