[ACS-10283] a11y fix - Folder rules 'when' label is not associated with checkboxes (#4968)

* [ACS-10283] a11y fix - Folder rules 'when' label is not associated with checkboxes

* [ACS-10283] fix sonar issue

* [ACS-10283] fix also for other options

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

@@ -1,4 +1,4 @@
-<ng-container [formGroup]="form">
+<fieldset [formGroup]="form" [attr.aria-labelledby]="ariaLabelledBy">
   <div class="aca-rule-options__option" *ngIf="!readOnly || isAsynchronousChecked">
     <mat-checkbox
       formControlName="isAsynchronous"
@@ -26,7 +26,6 @@
             {{ option.label }}
           </mat-option>
       </mat-select>
-
     </mat-form-field>
   </div>
 
@@ -48,4 +47,4 @@
       {{ 'ACA_FOLDER_RULES.RULE_DETAILS.OPTIONS.DISABLE_RULE' | translate }}
     </mat-checkbox>
   </div>
-</ng-container>
+</fieldset>

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

@@ -1,7 +1,12 @@
 .aca-rule-options {
+  fieldset {
     display: flex;
     flex-direction: row;
     gap: 24px;
+    border: none;
+    padding: 0;
+    margin: 0;
+  }
 
   &__option {
     display: flex;

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

@@ -70,6 +70,8 @@ export class RuleOptionsUiComponent implements ControlValueAccessor, OnChanges,
 
   hideErrorScriptDropdown = true;
 
+  @Input() ariaLabelledBy = 'rule-options-label';
+
   @Input()
   errorScriptConstraint: ActionParameterConstraint;
 

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

@@ -30,7 +30,7 @@
   </ng-container>
 
   <div class="aca-rule-details__form__row aca-rule-details__form__triggers">
-    <div class="aca-label">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.WHEN' | translate }}</div>
+    <span id="rule-triggers-label" class="aca-label">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.WHEN' | translate }}</span>
     <div>
       <aca-rule-triggers formControlName="triggers" data-automation-id="rule-details-triggers-component" />
       <mat-error class="aca-rule-details-error" *ngIf="triggers.hasError('required')">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.ERROR.INSUFFICIENT_TRIGGERS_SELECTED' | translate }}</mat-error>
@@ -53,7 +53,7 @@
   </div>
 
   <div class="aca-rule-details__form__row aca-rule-details__form__others" *ngIf="showOptionsSection">
-    <div class="aca-label">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.OPTIONS' | translate }}</div>
+    <span id="rule-options-label" class="aca-label">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.OPTIONS' | translate }}</span>
     <aca-rule-options
       formControlName="options"
       data-automation-id="rule-details-options-component"

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

@@ -1,4 +1,5 @@
-<div *ngFor="let trigger of triggerOptions">
+<fieldset [attr.aria-labelledby]="ariaLabelledBy">
+  <div *ngFor="let trigger of triggerOptions">
     <ng-container *ngIf="readOnly; else checkbox">
       <div
         *ngIf="selectedTriggers[trigger]"
@@ -15,4 +16,5 @@
         {{ 'ACA_FOLDER_RULES.RULE_DETAILS.TRIGGERS.' + trigger | uppercase | translate }}
       </mat-checkbox>
     </ng-template>
-</div>
+  </div>
+</fieldset>

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

@@ -0,0 +1,7 @@
+.aca-rule-triggers {
+  fieldset {
+    border: none;
+    padding: 0;
+    margin: 0;
+  }
+}

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

@@ -23,7 +23,7 @@
  */
 
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { Component, forwardRef, ViewEncapsulation } from '@angular/core';
+import { Component, forwardRef, Input, ViewEncapsulation } from '@angular/core';
 import { RuleTrigger } from '../../model/rule.model';
 import { CommonModule } from '@angular/common';
 import { TranslatePipe } from '@ngx-translate/core';
@@ -33,6 +33,7 @@ import { MatCheckboxModule } from '@angular/material/checkbox';
   imports: [CommonModule, TranslatePipe, MatCheckboxModule],
   selector: 'aca-rule-triggers',
   templateUrl: './rule-triggers.ui-component.html',
+  styleUrls: ['./rule-triggers.ui-component.scss'],
   encapsulation: ViewEncapsulation.None,
   host: { class: 'aca-rule-triggers' },
   providers: [
@@ -44,6 +45,8 @@ import { MatCheckboxModule } from '@angular/material/checkbox';
   ]
 })
 export class RuleTriggersUiComponent implements ControlValueAccessor {
+  @Input() ariaLabelledBy = 'rule-triggers-label';
+
   readonly triggerOptions: RuleTrigger[] = ['inbound', 'update', 'outbound'];
 
   public selectedTriggers: { [key: string]: boolean } = {