[ACS-10287] a11y Fix: No label is announced for the dropdown, folder rules dialog (#4981)

* [ACS-10287] a11y Fix: No label is announced for the dropdown in folder rules dialog

* fix sonar issue

* [ACS-10287] add unit tests

projects/aca-content/folder-rules/assets/i18n/en.json

@@ -19,7 +19,13 @@
         "DESCRIPTION": "Description",
         "WHEN": "When",
         "PERFORM_ACTIONS": "Perform actions",
-        "OPTIONS": "Other options"
+        "OPTIONS": "Other options",
+        "FIELD": "Field",
+        "COMPARATOR": "Comparator",
+        "VALUE": "Value",
+        "LOGIC_OPERATOR": "Logic Operator",
+        "GROUP_CONDITIONS": "Group Conditions",
+        "CONDITIONS": "Conditions"
       },
       "PLACEHOLDER": {
         "NAME": "Enter rule name",

projects/aca-content/folder-rules/src/rule-details/actions/rule-action-list.ui-component.html

@@ -1,4 +1,4 @@
-<div class="aca-rule-action-list__item  " *ngFor="let control of formControls">
+<div class="aca-rule-action-list__item  " [attr.aria-labelledby]="'rule-actions-label'" *ngFor="let control of formControls">
   <aca-rule-action
     [actionDefinitions]="actionDefinitions"
     [parameterConstraints]="parameterConstraints"

projects/aca-content/folder-rules/src/rule-details/conditions/rule-composite-condition.ui-component.html

@@ -2,12 +2,18 @@
   <div *ngIf="hasNoConditions" class="aca-rule-composite-condition__form__no-conditions" data-automation-id="no-conditions">
     {{ 'ACA_FOLDER_RULES.RULE_DETAILS.' + (childCondition ? 'NO_CONDITIONS_IN_GROUP' : 'NO_CONDITIONS') | translate }}
   </div>
+  <div *ngIf="!hasNoConditions" class="aca-rule-composite-condition__form__no-conditions" data-automation-id="label-with-conditions">
+    <span id="conditions-group-label-{{ childCondition ? 'nested' : 'main' }}">
+      {{ (childCondition ? 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.GROUP_CONDITIONS' : 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.CONDITIONS') | translate }}
+    </span>
+  </div>
 
-  <div
+  <fieldset
+    [attr.aria-labelledby]="'conditions-group-label-' + (childCondition ? 'nested' : 'main')"
     class="aca-rule-composite-condition__form__row"
     *ngFor="let control of conditionFormControls; let i = index">
-
     <mat-form-field *ngIf="i === 0" subscriptSizing="dynamic">
+      <mat-label>{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.LOGIC_OPERATOR' | translate }}</mat-label>
       <mat-select
         [formControl]="invertedControl"
         [disabled]="readOnly">
@@ -50,8 +56,7 @@
         <span>{{ 'ACA_FOLDER_RULES.RULE_DETAILS.CONDITION_BUTTONS.REMOVE' | translate }}</span>
       </button>
     </mat-menu>
-
-  </div>
+  </fieldset>
 
   <div class="aca-rule-composite-condition__form__actions" *ngIf="!readOnly" data-automation-id="add-actions">
     <button mat-flat-button (click)="addSimpleCondition()" data-automation-id="add-condition-button">

projects/aca-content/folder-rules/src/rule-details/conditions/rule-composite-condition.ui-component.scss

@@ -4,6 +4,12 @@
   display: block;
   border-radius: 8px;
 
+  fieldset {
+    border: none;
+    margin: 0;
+    padding: 0;
+  }
+
   &.aca-childCompositeCondition {
     padding: 8px 16px;
     background-color: hsl(0deg, 0%, 100%);

projects/aca-content/folder-rules/src/rule-details/conditions/rule-composite-condition.ui-component.spec.ts

@@ -40,6 +40,7 @@ describe('RuleCompositeConditionUiComponent', () => {
 
   const getSimpleConditionComponents = (): DebugElement[] => unitTestingUtils.getAllByCSS(`.aca-rule-simple-condition`);
   const getCompositeConditionComponents = (): DebugElement[] => unitTestingUtils.getAllByCSS(`.aca-rule-composite-condition`);
+  const getLabelWithConditionsElementInnerText = (): string => unitTestingUtils.getInnerTextByDataAutomationId('label-with-conditions');
 
   beforeEach(() => {
     TestBed.configureTestingModule({
@@ -131,4 +132,38 @@ describe('RuleCompositeConditionUiComponent', () => {
 
     expect(getCompositeConditionComponents().length).toBe(1);
   });
+
+  describe('When hasNoConditions is false', () => {
+    beforeEach(() => {
+      fixture.componentInstance.writeValue(compositeConditionWithThreeConditionMock);
+    });
+
+    it('should display "CONDITIONS" label when childCondition is false', () => {
+      fixture.componentInstance.childCondition = false;
+      fixture.detectChanges();
+
+      expect(getLabelWithConditionsElementInnerText()).toBe('ACA_FOLDER_RULES.RULE_DETAILS.LABEL.CONDITIONS');
+    });
+
+    it('should display "GROUP_CONDITIONS" label when childCondition is true', () => {
+      fixture.componentInstance.childCondition = true;
+      fixture.detectChanges();
+
+      expect(getLabelWithConditionsElementInnerText()).toBe('ACA_FOLDER_RULES.RULE_DETAILS.LABEL.GROUP_CONDITIONS');
+    });
+
+    it('should set correct id attribute when childCondition is false', () => {
+      fixture.componentInstance.childCondition = false;
+      fixture.detectChanges();
+
+      expect(unitTestingUtils.getAllByCSS('[conditions-group-label-main]')).toBeTruthy();
+    });
+
+    it('should set correct id attribute when childCondition is true', () => {
+      fixture.componentInstance.childCondition = true;
+      fixture.detectChanges();
+
+      expect(unitTestingUtils.getAllByCSS('[conditions-group-label-nested]')).toBeTruthy();
+    });
+  });
 });

projects/aca-content/folder-rules/src/rule-details/conditions/rule-simple-condition.ui-component.html

@@ -1,5 +1,6 @@
 <form class="aca-rule-simple-condition__form" [formGroup]="form">
   <mat-form-field class="aca-rule-simple-condition__form__field-input" subscriptSizing="dynamic">
+    <mat-label>{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.FIELD' | translate }}</mat-label>
     <mat-select formControlName="field" data-automation-id="field-select"
       (selectionChange)="onChangeField()">
       <mat-option *ngIf="!isSelectedFieldKnown" [value]="selectedField.name" data-automation-id="unknown-field-option">
@@ -13,6 +14,7 @@
 
   <mat-form-field class="aca-rule-simple-condition__form__field-input aca-rule-simple-condition__form__comparator-input" subscriptSizing="dynamic"
                   [class]="{ 'aca-hidden': isComparatorHidden }" data-automation-id="comparator-form-field">
+    <mat-label>{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.COMPARATOR' | translate }}</mat-label>
     <mat-select formControlName="comparator" data-automation-id="comparator-select">
       <mat-option
         *ngFor="let comparator of selectedFieldComparators"
@@ -24,6 +26,7 @@
 
   <mat-form-field class="aca-rule-simple-condition__form__field-input aca-rule-simple-condition__form__parameter-input"
                   subscriptSizing="dynamic" [ngSwitch]="selectedField.type">
+    <mat-label>{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.VALUE' | translate }}</mat-label>
     <mat-select formControlName="parameter" data-automation-id="simple-condition-value-select" *ngSwitchCase="'mimeType'">
       <mat-option *ngFor="let mimeType of mimeTypes"
         [value]="mimeType.value">

projects/aca-content/folder-rules/src/rule-details/rule-details.ui-component.html

@@ -43,7 +43,7 @@
   </div>
 
   <div class="aca-rule-details__form__row aca-rule-details__form__actions">
-    <div class="aca-label">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.PERFORM_ACTIONS' | translate }}</div>
+    <div id="rule-actions-label" class="aca-label">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.PERFORM_ACTIONS' | translate }}</div>
     <aca-rule-action-list
       formControlName="actions"
       [actionDefinitions]="actionDefinitions"