Prepare group menu for a11y

docs/migration/4_0.md

@@ -45,3 +45,31 @@ What was removed:
 - core of the mechanism (reducer)
 - configuration (`storageSync` from `StateConfig`)
 - default config and default keys (`defaultStateConfig`, `DEFAULT_LOCAL_STORAGE_KEY` and `DEFAULT_SESSION_STORAGE_KEY`)
+
+`ConfiguratorAttributeCheckboxListComponent` now also requires `ConfiguratorAttributeQuantityService`.
+`ConfiguratorAttributeDropDownComponent` now also requires `ConfiguratorAttributeQuantityService`.
+`ConfiguratorAttributeRadiButtonComponent` now also requires `ConfiguratorAttributeQuantityService`.
+`ConfiguratorCartEntryInfoComponent` now also requires `CommonConfiguratorUtilsService`.
+`ConfiguratorStorefrontUtilsService` now also requires `WindowRef` and `KeyboardFocusService`.
+`ConfiguratorFormComponent` now also requires `ConfiguratorStorefrontUtilsService`. 
+
+### ConfiguratorAttributeDropDownComponent
+
+Method `onSelect` has been removed, it is no longer used. Use `onSelect` from super class which takes the value as argument
+
+### ConfiguratorAttributeNumericInputFieldComponent
+
+Method `createEventFromInput` has been removed, it is no longer used
+
+### ConfiguratorAttributeRadioButtonComponent
+
+Method `onDeselect` has been removed, it is no longer used
+
+### ConfiguratorProductTitleComponent
+
+Methods `getProductImageURL`, `getProductImageAlt` and `clickOnEnter` have been removed, there are no longer used
+
+### ConfiguratorGroupMenuComponent
+
+Methods `clickOnEnter` and `navigateUpOnEnter` have been removed, there are no longer used
+

docs/migration/css-changes-in-version-4.md

@@ -5,3 +5,87 @@ title: Changes to Styles in 4.0
 ## Changes in Checkout Components
 
 * `cx-product-variants` selector has been moved to corresponding feature-lib `@spartacus/product`.
+
+## Change in Configurator Attribute Type Components
+
+* `cx-quantity` selector has been added to align its padding to the corresponding attribute type.
+
+## Changes in Configurator Product Title Component
+
+* `width` set to 80% on `%cx-configurator-product-title` to use only 80% of the configuration product title width.
+
+* `button` instead of the anchor link on `%cx-configurator-product-title`.
+
+* `padding` set to 16px/ 32px on `%cx-configurator-product-title` for `cx-details` selector to align spacing depending on the screen size.
+
+* `cx-configurator-image` mixin has been defined on `%cx-configurator-product-title` for `cx-details-image` selector to define the unique styling.
+
+* `cx-configurator-truncate-content` mixin has been added on `%cx-configurator-product-title` for `cx-detail-title`, `cx-code` and `cx-description` selectors to enable the truncation for the small widgets.
+
+## Changes in Configurator Group Menu Component
+
+* `cx-group-menu` class replace `ul` element on `%cx-configurator-group-menu`.
+
+* `cx-configurator-truncate-content` mixin has been added on `%cx-configurator-group-menu` for `span` selector to enable the configuration group title truncation for the small widgets.
+
+## Changes in Configurator Form Component
+
+* `width` set to 100% on `%cx-configurator-form` to use the whole width of the configuration form.
+
+* `padding` set to 16px on `%cx-configurator-form` for `cx-group-attribute` to align the spacing between the configuration group attributes.
+
+## Changes in Configurator Attribute Header Component
+
+* `margin` set to 17px on `%cx-configurator-attribute-header` to align the spacing to the attribute header to the attribute type.
+
+* `padding` set to 0px and `margin` to 17px on `%cx-configurator-attribute-type` to align the spacing between the configuration attribute types.
+
+## Change in Configurator Attribute Drop-Down Component
+
+* `padding` set to 1rem on `%cx-configurator-attribute-drop-down` for `cx-configurator-attribute-quantity` selector to define the spacing between the drop-down attribute type, and the quantity counter.
+
+## Change in Configurator Attribute Checkbox List Component
+
+* `padding` set to 1rem on `%cx-configurator-attribute-checkbox-list` to define the spacing between the checkbox-list attribute type, and the quantity counter.
+
+## Change in Configurator Attribute Radio Button Component
+
+* `padding` set to 1rem on `%cx-configurator-attribute-radio-button` to define the spacing between the radio-button attribute type, and the quantity counter.
+
+## Change in Configurator Previous Next Button Component
+
+* `padding` set to 16px on `%cx-configurator-previous-next-buttons` to align the spacing between the configuration form and the bottom of the configuration.
+
+## Change in Configurator Price Summary Component
+
+* `padding` set to 16px on `%cx-configurator-price-summary` for cx-total-summary selector to align the spacing.
+
+## Change in Configurator Footer Container Mixin
+
+* `padding` set to 16px on `%cx-configurator-footer-container` mixin to align the spacing between the price summary and add-to-cart button.
+
+## Change in Configurator Required Error Message Mixin
+
+* `padding` set to 5px on `%cx-configurator-required-error-msg` mixin to add the spacing at the end of the cx-icon selector.
+
+## Changes in Configurator Overview Form Component
+
+* `padding` set to 0px on `%cx-configurator-overview-form` to prevent adding any spacing to the configuration overview form.
+
+* `padding` set to 20px and `margin` to 0px on `%cx-configurator-overview-form` for `cx-group` selector to align spacing between the configuration overview groups.
+
+* `padding` set to 32px/16px on `%cx-configurator-overview-form` for `h2` selector to align spacing around the configuration overview group titles.
+
+* `cx-configurator-truncate-content` mixin has been added on `%cx-configurator-overview-form` for `span` selector to enable the overview group title truncation for the small widgets.
+
+* `padding` set to 32px on `%cx-configurator-overview-form` for `cx-attribute-value-pair` selector to align spacing between the configuration overview attribute value pairs.
+
+* `display` set to `none / inline` and `visibility` to `hidden` on `%cx-configurator-overview-form` for `cx-attribute-value-pair` selector to define the visibility for the configuration overview attribute value label.
+
+* `padding` set to 20px on `%cx-configurator-overview-form` for `cx-no-attribute-value-pair` selector to align spacing between the configuration overview no attribute value pairs.
+
+## Changes in Configurator Overview Attribute Component
+
+* `width` set to 40% on `%cx-configurator-overview-attribute` for `cx-attribute-value` selector to use only 40% of the width for the small widgets.
+
+* `width` set to 60% on `%cx-configurator-overview-attribute` for `cx-attribute-label` selector to use only 60% of the width for the small widgets.

feature-libs/product-configurator/common/components/configurator-cart-entry-info/configurator-cart-entry-info.component.ts

@@ -1,4 +1,4 @@
-import { Component, Optional } from '@angular/core';
+import { Component } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { OrderEntry } from '@spartacus/core';
 import { CartItemContext } from '@spartacus/storefront';
@@ -10,28 +10,9 @@ import { CommonConfiguratorUtilsService } from '../../shared/utils/common-config
   templateUrl: './configurator-cart-entry-info.component.html',
 })
 export class ConfiguratorCartEntryInfoComponent {
-  // TODO(#11681): make commonConfigUtilsService a required dependency and remove deprecated constructor
-  /**
-   * Default constructor
-   *
-   * @param {CartItemContext} cartItemContext
-   * @param {CommonConfiguratorUtilsService} commonConfigUtilsService
-   */
-  constructor(
-    cartItemContext: CartItemContext,
-    // eslint-disable-next-line @typescript-eslint/unified-signatures
-    commonConfigUtilsService: CommonConfiguratorUtilsService
-  );
-  /**
-   * @deprecated since 3.3
-   */
-  constructor(cartItemContext: CartItemContext);
-
   constructor(
-    // TODO(#10946): make CartItemContext a required dependency and drop fallbacks to `?? EMPTY`.
-    @Optional() protected cartItemContext?: CartItemContext,
-    @Optional()
-    protected commonConfigUtilsService?: CommonConfiguratorUtilsService
+    protected cartItemContext: CartItemContext,
+    protected commonConfigUtilsService: CommonConfiguratorUtilsService
   ) {}
 
   readonly orderEntry$: Observable<OrderEntry> =

feature-libs/product-configurator/rulebased/components/attribute/types/checkbox-list/configurator-attribute-checkbox-list.component.ts

@@ -24,27 +24,9 @@ export class ConfiguratorAttributeCheckBoxListComponent
 
   @Input() group: string;
 
-  // TODO(#11681): make quantityService a required dependency and remove deprecated constructor
-  /**
-   * default constructor
-   * @param {ConfiguratorStorefrontUtilsService} configUtilsService
-   * @param {ConfiguratorAttributeQuantityService} quantityService
-   */
-  constructor(
-    // eslint-disable-next-line @typescript-eslint/unified-signatures
-    configUtilsService: ConfiguratorStorefrontUtilsService,
-    // eslint-disable-next-line @typescript-eslint/unified-signatures
-    quantityService: ConfiguratorAttributeQuantityService
-  );
-
-  /**
-   * @deprecated since 3.3
-   */
-  constructor(configUtilsService: ConfiguratorStorefrontUtilsService);
-
   constructor(
     protected configUtilsService: ConfiguratorStorefrontUtilsService,
-    protected quantityService?: ConfiguratorAttributeQuantityService
+    protected quantityService: ConfiguratorAttributeQuantityService
   ) {
     super(quantityService);
   }

feature-libs/product-configurator/rulebased/components/attribute/types/drop-down/configurator-attribute-drop-down.component.ts

@@ -19,33 +19,14 @@ export class ConfiguratorAttributeDropDownComponent
   attributeDropDownForm = new FormControl('');
   @Input() group: string;
 
-  // TODO(#11681): make quantityService a required dependency
-  /**
-   * default constructor
-   * @param {ConfiguratorAttributeQuantityService} quantityService
-   */
-  // eslint-disable-next-line @typescript-eslint/unified-signatures
-  constructor(quantityService: ConfiguratorAttributeQuantityService);
-
-  /**
-   * @deprecated since 3.3
-   */
-  constructor();
-
-  constructor(
-    protected quantityService?: ConfiguratorAttributeQuantityService
-  ) {
+  constructor(protected quantityService: ConfiguratorAttributeQuantityService) {
     super();
   }
 
   ngOnInit() {
     this.attributeDropDownForm.setValue(this.attribute?.selectedSingleValue);
   }
 
-  /**
-   * @deprecated since 3.3
-   * Better use onSelect(this.attributeDropDownForm.value)
-   */
   onSelect(): void {
     super.onSelect(this.attributeDropDownForm?.value);
   }

feature-libs/product-configurator/rulebased/components/attribute/types/input-field/configurator-attribute-input-field.component.ts

@@ -40,20 +40,7 @@ export class ConfiguratorAttributeInputFieldComponent
    */
   protected readonly FALLBACK_DEBOUNCE_TIME = 500;
 
-  // TODO(#11681): make config a required dependency
-  /**
-   * @param {ConfiguratorUISettingsConfig} config Optional configuration for debounce time,
-   * if omitted {@link FALLBACK_DEBOUNCE_TIME} is used instead.
-   */
-  // eslint-disable-next-line @typescript-eslint/unified-signatures
-  constructor(config: ConfiguratorUISettingsConfig);
-
-  /**
-   * @deprecated  since 3.3
-   */
-  constructor();
-
-  constructor(protected config?: ConfiguratorUISettingsConfig) {
+  constructor(protected config: ConfiguratorUISettingsConfig) {
     super();
   }
 

feature-libs/product-configurator/rulebased/components/attribute/types/numeric-input-field/configurator-attribute-numeric-input-field.component.ts

@@ -11,7 +11,6 @@ import { FormControl } from '@angular/forms';
 import { timer } from 'rxjs';
 import { debounce } from 'rxjs/operators';
 import { ConfiguratorUISettingsConfig } from '../../../config/configurator-ui-settings.config';
-import { ConfigFormUpdateEvent } from '../../../form/configurator-form.event';
 import { ConfiguratorAttributeInputFieldComponent } from '../input-field/configurator-attribute-input-field.component';
 import { ConfiguratorAttributeNumericInputFieldService } from './configurator-attribute-numeric-input-field.component.service';
 
@@ -28,29 +27,9 @@ export class ConfiguratorAttributeNumericInputFieldComponent
 
   @Input() language: string;
 
-  // TODO(#11681): make config a required dependency
-  /**
-   * @param {ConfiguratorAttributeNumericInputFieldService} configAttributeNumericInputFieldService Service for numeric formatting and validation.
-   * @param {ConfiguratorUISettingsConfig} config Optional configuration for debounce time,
-   * if omitted {@link FALLBACK_DEBOUNCE_TIME} is used instead.
-   */
-  constructor(
-    // eslint-disable-next-line @typescript-eslint/unified-signatures
-    configAttributeNumericInputFieldService: ConfiguratorAttributeNumericInputFieldService,
-    // eslint-disable-next-line @typescript-eslint/unified-signatures
-    config?: ConfiguratorUISettingsConfig
-  );
-
-  /**
-   * @deprecated  since 3.3
-   */
-  constructor(
-    configAttributeNumericInputFieldService: ConfiguratorAttributeNumericInputFieldService
-  );
-
   constructor(
     protected configAttributeNumericInputFieldService: ConfiguratorAttributeNumericInputFieldService,
-    protected config?: ConfiguratorUISettingsConfig
+    protected config: ConfiguratorUISettingsConfig
   ) {
     super(config);
   }
@@ -105,20 +84,6 @@ export class ConfiguratorAttributeNumericInputFieldComponent
     super.ngOnDestroy();
   }
 
-  /**
-   * @deprecated since 3.3
-   * This method should be removed because there is no use for this method.
-   */
-  protected createEventFromInput(): ConfigFormUpdateEvent {
-    return {
-      ownerKey: this.ownerKey,
-      changedAttribute: {
-        ...this.attribute,
-        userInput: this.attributeInputForm.value,
-      },
-    };
-  }
-
   protected getInstalledLocale(locale: string): string {
     try {
       getLocaleId(locale);

feature-libs/product-configurator/rulebased/components/attribute/types/radio-button/configurator-attribute-radio-button.component.ts

@@ -13,34 +13,11 @@ export class ConfiguratorAttributeRadioButtonComponent
   implements OnInit {
   attributeRadioButtonForm = new FormControl('');
 
-  // TODO(#11681): make quantityService a required dependency
-  /**
-   * default constructor
-   * @param {ConfiguratorAttributeQuantityService} quantityService
-   */
-  // eslint-disable-next-line @typescript-eslint/unified-signatures
-  constructor(quantityService: ConfiguratorAttributeQuantityService);
-
-  /**
-   * @deprecated since 3.3
-   */
-  constructor();
-
-  constructor(
-    protected quantityService?: ConfiguratorAttributeQuantityService
-  ) {
+  constructor(protected quantityService: ConfiguratorAttributeQuantityService) {
     super();
   }
 
   ngOnInit(): void {
     this.attributeRadioButtonForm.setValue(this.attribute.selectedSingleValue);
   }
-
-  /**
-   * @deprecated since 3.3
-   * This method should be removed because there is no deselect possible for radio buttons
-   */
-  onDeselect(): void {
-    this.onSelect('');
-  }
 }