fix: Different aria-labels for un-/selected values for radio-buttons (#…

…19015)
SAP · Jul 10, 2024 · dd2c600 · dd2c600
1 parent fdc59fc
commit dd2c600
Show file tree

Hide file tree

Showing 4 changed files with 188 additions and 49 deletions.
diff --git a/...nents/attribute/types/base/configurator-attribute-single-selection-base.component.spec.ts b/...nents/attribute/types/base/configurator-attribute-single-selection-base.component.spec.ts
@@ -456,7 +456,7 @@ describe('ConfiguratorAttributeSingleSelectionBaseComponent', () => {
  'configurator.a11y.additionalValue'
  );
  });
- it('should return aria label of value with total price', () => {
+ it('should return aria label of selected value with total price', () => {
  let attributeWithTotalPrice: Configurator.Attribute = {
  name: 'attribute with total price',
  label: 'attribute with total price',
@@ -494,7 +494,45 @@ describe('ConfiguratorAttributeSingleSelectionBaseComponent', () => {
  );
  });
 
- it('should return aria label for value with price', () => {
+ it('should return aria label of value with total price', () => {
+ let attributeWithTotalPrice: Configurator.Attribute = {
+ name: 'attribute with total price',
+ label: 'attribute with total price',
+ };
+ let price: Configurator.PriceDetails = {
+ currencyIso: '$',
+ formattedValue: '$100.00',
+ value: 100,
+ };
+ let priceTotal: Configurator.PriceDetails = {
+ currencyIso: '$',
+ formattedValue: '$100.00',
+ value: 100,
+ };
+ const valueWithValuePriceTotal = createValue(
+ '1',
+ 'value with total price',
+ false
+ );
+ valueWithValuePriceTotal.valuePriceTotal = priceTotal;
+ valueWithValuePriceTotal.valuePrice = price;
+
+ expect(
+ component.getAriaLabelWithoutAdditionalValue(
+ valueWithValuePriceTotal,
+ attributeWithTotalPrice
+ )
+ ).toEqual(
+ 'configurator.a11y.valueOfAttributeFullWithPrice attribute:' +
+ attributeWithTotalPrice.label +
+ ' price:' +
+ valueWithValuePriceTotal.valuePrice?.formattedValue +
+ ' value:' +
+ valueWithValuePriceTotal.valueDisplay
+ );
+ });
+
+ it('should return aria label for selected value with price', () => {
  let attributeWithValuePrice: Configurator.Attribute = {
  name: 'attribute with value price',
  label: 'attribute with value price',
@@ -526,7 +564,39 @@ describe('ConfiguratorAttributeSingleSelectionBaseComponent', () => {
  );
  });
 
- it('should return aria label for value without price', () => {
+ it('should return aria label for value with price', () => {
+ let attributeWithValuePrice: Configurator.Attribute = {
+ name: 'attribute with value price',
+ label: 'attribute with value price',
+ };
+ let price: Configurator.PriceDetails = {
+ currencyIso: '$',
+ formattedValue: '$100.00',
+ value: 100,
+ };
+ const valueWithValuePrice = createValue(
+ '1',
+ 'value with value price',
+ false
+ );
+ valueWithValuePrice.valuePrice = price;
+
+ expect(
+ component.getAriaLabelWithoutAdditionalValue(
+ valueWithValuePrice,
+ attributeWithValuePrice
+ )
+ ).toEqual(
+ 'configurator.a11y.valueOfAttributeFullWithPrice attribute:' +
+ attributeWithValuePrice.label +
+ ' price:' +
+ valueWithValuePrice.valuePrice?.formattedValue +
+ ' value:' +
+ valueWithValuePrice.valueDisplay
+ );
+ });
+
+ it('should return aria label for selected value without price', () => {
  let attributeWithOutPrice: Configurator.Attribute = {
  name: 'attribute without price',
  label: 'attribute without value price',
@@ -546,7 +616,27 @@ describe('ConfiguratorAttributeSingleSelectionBaseComponent', () => {
  );
  });
 
- it('should return aria label for value with price and attribute additional value', () => {
+ it('should return aria label for value without price', () => {
+ let attributeWithOutPrice: Configurator.Attribute = {
+ name: 'attribute without price',
+ label: 'attribute without value price',
+ };
+ const valueWithOutPrice = createValue('1', 'value without price', false);
+
+ expect(
+ component.getAriaLabelWithoutAdditionalValue(
+ valueWithOutPrice,
+ attributeWithOutPrice
+ )
+ ).toEqual(
+ 'configurator.a11y.valueOfAttributeFull attribute:' +
+ attributeWithOutPrice.label +
+ ' value:' +
+ valueWithOutPrice.valueDisplay
+ );
+ });
+
+ it('should return aria label for selected value with price and attribute additional value', () => {
  let attributeWithValuePrice: Configurator.Attribute = {
  name: 'attribute with value price',
  label: 'attribute with value price',
@@ -580,5 +670,39 @@ describe('ConfiguratorAttributeSingleSelectionBaseComponent', () => {
  'configurator.a11y.additionalValue'
  );
  });
+ it('should return aria label for value with price and attribute additional value', () => {
+ let attributeWithValuePrice: Configurator.Attribute = {
+ name: 'attribute with value price',
+ label: 'attribute with value price',
+ };
+ let price: Configurator.PriceDetails = {
+ currencyIso: '$',
+ formattedValue: '$100.00',
+ value: 100,
+ };
+ const valueWithValuePrice = createValue(
+ '1',
+ 'value with value price',
+ false
+ );
+ valueWithValuePrice.valuePrice = price;
+ component.attribute.uiType =
+ Configurator.UiType.DROPDOWN_ADDITIONAL_INPUT ||
+ Configurator.UiType.RADIOBUTTON_ADDITIONAL_INPUT;
+ component.attribute.validationType = Configurator.ValidationType.NONE;
+ fixture.detectChanges();
+ expect(
+ component.getAriaLabel(valueWithValuePrice, attributeWithValuePrice)
+ ).toEqual(
+ 'configurator.a11y.valueOfAttributeFullWithPrice attribute:' +
+ attributeWithValuePrice.label +
+ ' price:' +
+ valueWithValuePrice.valuePrice?.formattedValue +
+ ' value:' +
+ valueWithValuePrice.valueDisplay +
+ ' ' +
+ 'configurator.a11y.additionalValue'
+ );
+ });
  });
 });
diff --git a/...components/attribute/types/base/configurator-attribute-single-selection-base.component.ts b/...components/attribute/types/base/configurator-attribute-single-selection-base.component.ts
@@ -245,42 +245,36 @@ export abstract class ConfiguratorAttributeSingleSelectionBaseComponent extends
  value: Configurator.Value,
  attribute: Configurator.Attribute
  ): string {
- let ariaLabel = '';
- if (value.valuePrice && value.valuePrice?.value !== 0) {
- if (value.valuePriceTotal && value.valuePriceTotal?.value !== 0) {
- this.translation
- .translate(
- 'configurator.a11y.selectedValueOfAttributeFullWithPrice',
- {
- value: value.valueDisplay,
- attribute: attribute.label,
- price: value.valuePriceTotal.formattedValue,
- }
- )
- .pipe(take(1))
- .subscribe((text) => (ariaLabel = text));
- } else {
- this.translation
- .translate(
- 'configurator.a11y.selectedValueOfAttributeFullWithPrice',
- {
- value: value.valueDisplay,
- attribute: attribute.label,
- price: value.valuePrice.formattedValue,
- }
- )
- .pipe(take(1))
- .subscribe((text) => (ariaLabel = text));
- }
+ let params;
+ let translationKey = value.selected
+ ? 'configurator.a11y.selectedValueOfAttributeFullWithPrice'
+ : 'configurator.a11y.valueOfAttributeFullWithPrice';
+ if (value.valuePriceTotal && value.valuePriceTotal?.value !== 0) {
+ params = {
+ value: value.valueDisplay,
+ attribute: attribute.label,
+ price: value.valuePriceTotal.formattedValue,
+ };
+ } else if (value.valuePrice && value.valuePrice?.value !== 0) {
+ params = {
+ value: value.valueDisplay,
+ attribute: attribute.label,
+ price: value.valuePrice.formattedValue,
+ };
  } else {
- this.translation
- .translate('configurator.a11y.selectedValueOfAttributeFull', {
-  value: value.valueDisplay,
-  attribute: attribute.label,
- })
- .pipe(take(1))
-  .subscribe((text) => (ariaLabel = text));
+ translationKey = value.selected
+ ? 'configurator.a11y.selectedValueOfAttributeFull'
+ : 'configurator.a11y.valueOfAttributeFull';
+ params = {
+ value: value.valueDisplay,
+ attribute: attribute.label,
+ };
  }
+ let ariaLabel = '';
+ this.translation
+ .translate(translationKey, params)
+ .pipe(take(1))
+ .subscribe((text) => (ariaLabel = text));
  return ariaLabel;
  }
 }
diff --git a/...d/components/attribute/types/drop-down/configurator-attribute-drop-down.component.spec.ts b/...d/components/attribute/types/drop-down/configurator-attribute-drop-down.component.spec.ts
@@ -441,6 +441,9 @@ describe('ConfiguratorAttributeDropDownComponent', () => {
  });
 
  it("should contain option elements with 'aria-label' attribute for value without price that defines an accessible name to label the current element", () => {
+ value1.selected = false;
+ value2.selected = true;
+ fixture.detectChanges();
  CommonConfiguratorTestUtilsService.expectElementContainsA11y(
  expect,
  htmlElem,
@@ -458,7 +461,7 @@ describe('ConfiguratorAttributeDropDownComponent', () => {
 
  it("should contain option elements with 'aria-label' attribute for value with price that defines an accessible name to label the current element", () => {
  let value = component.attribute.values
- ? component.attribute.values[0]
+ ? component.attribute.values[1]
  : undefined;
  if (value) {
  value.valuePrice = {
@@ -476,21 +479,21 @@ describe('ConfiguratorAttributeDropDownComponent', () => {
  htmlElem,
  'option',
  undefined,
- 0,
+ 1,
  'aria-label',
  'configurator.a11y.selectedValueOfAttributeFullWithPrice attribute:' +
  component.attribute.label +
  ' price:' +
- value1.valuePrice?.formattedValue +
+ value2.valuePrice?.formattedValue +
  ' value:' +
- value1.valueDisplay,
- value1.valueDisplay
+ value2.valueDisplay,
+ value2.valueDisplay
  );
  });
 
  it("should contain option elements with 'aria-label' attribute for value with total price that defines an accessible name to label the current element", () => {
  let value = component.attribute.values
- ? component.attribute.values[0]
+ ? component.attribute.values[1]
  : undefined;
  if (value) {
  value.valuePriceTotal = {
@@ -508,15 +511,15 @@ describe('ConfiguratorAttributeDropDownComponent', () => {
  htmlElem,
  'option',
  undefined,
- 0,
+ 1,
  'aria-label',
  'configurator.a11y.selectedValueOfAttributeFullWithPrice attribute:' +
  component.attribute.label +
  ' price:' +
- value1.valuePrice?.formattedValue +
+ value2.valuePrice?.formattedValue +
  ' value:' +
- value1.valueDisplay,
- value1.valueDisplay
+ value2.valueDisplay,
+ value2.valueDisplay
  );
  });
  });

diff --git a/...onents/attribute/types/radio-button/configurator-attribute-radio-button.component.spec.ts b/...onents/attribute/types/radio-button/configurator-attribute-radio-button.component.spec.ts
@@ -275,7 +275,25 @@ describe('ConfigAttributeRadioButtonComponent', () => {
  });
 
  describe('Accessibility', () => {
- it("should contain input element with class name 'form-check-input' and 'aria-label' attribute that defines an accessible name to label the current element", () => {
+ it("should contain input element with class name 'form-check-input' and 'aria-label' attribute that defines an accessible name to label the current unselected element", () => {
+ CommonConfiguratorTestUtilsService.expectElementContainsA11y(
+ expect,
+ htmlElem,
+ 'input',
+ 'form-check-input',
+ 1,
+ 'aria-label',
+ 'configurator.a11y.valueOfAttributeFull attribute:' +
+ component.attribute.label +
+ ' value:' +
+ VALUE_NAME_2
+ );
+ });
+
+ it("should contain input element with class name 'form-check-input' and 'aria-label' attribute that defines an accessible name to label the current selected element", () => {
+ value1.selected = false;
+ value2.selected = true;
+ fixture.detectChanges();
  CommonConfiguratorTestUtilsService.expectElementContainsA11y(
  expect,
  htmlElem,