From 21963b93639356143220d578cc1286db87f1763a Mon Sep 17 00:00:00 2001
From: Mykyta Maliarchuk <84377976+nikita-web-ua@users.noreply.github.com>
Date: Fri, 9 Jan 2026 10:38:55 +0100
Subject: [PATCH] [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
---
 .../options/rule-options.ui-component.html    |  5 ++-
 .../options/rule-options.ui-component.scss    | 11 ++++--
 .../options/rule-options.ui-component.ts      |  2 ++
 .../rule-details.ui-component.html            |  4 +--
 .../triggers/rule-triggers.ui-component.html  | 36 ++++++++++---------
 .../triggers/rule-triggers.ui-component.scss  |  7 ++++
 .../triggers/rule-triggers.ui-component.ts    |  5 ++-
 7 files changed, 44 insertions(+), 26 deletions(-)
 create mode 100644 projects/aca-content/folder-rules/src/rule-details/triggers/rule-triggers.ui-component.scss

diff --git a/projects/aca-content/folder-rules/src/rule-details/options/rule-options.ui-component.html b/projects/aca-content/folder-rules/src/rule-details/options/rule-options.ui-component.html
index ee8034237..d3089eb25 100644
--- a/projects/aca-content/folder-rules/src/rule-details/options/rule-options.ui-component.html
+++ b/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>
diff --git a/projects/aca-content/folder-rules/src/rule-details/options/rule-options.ui-component.scss b/projects/aca-content/folder-rules/src/rule-details/options/rule-options.ui-component.scss
index 09f273786..ef9278775 100644
--- a/projects/aca-content/folder-rules/src/rule-details/options/rule-options.ui-component.scss
+++ b/projects/aca-content/folder-rules/src/rule-details/options/rule-options.ui-component.scss
@@ -1,7 +1,12 @@
 .aca-rule-options {
-  display: flex;
-  flex-direction: row;
-  gap: 24px;
+  fieldset {
+    display: flex;
+    flex-direction: row;
+    gap: 24px;
+    border: none;
+    padding: 0;
+    margin: 0;
+  }
 
   &__option {
     display: flex;
diff --git a/projects/aca-content/folder-rules/src/rule-details/options/rule-options.ui-component.ts b/projects/aca-content/folder-rules/src/rule-details/options/rule-options.ui-component.ts
index d07ab95e0..c550c70c5 100644
--- a/projects/aca-content/folder-rules/src/rule-details/options/rule-options.ui-component.ts
+++ b/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;
 
diff --git a/projects/aca-content/folder-rules/src/rule-details/rule-details.ui-component.html b/projects/aca-content/folder-rules/src/rule-details/rule-details.ui-component.html
index 68452c695..ffcd9f149 100644
--- a/projects/aca-content/folder-rules/src/rule-details/rule-details.ui-component.html
+++ b/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"
diff --git a/projects/aca-content/folder-rules/src/rule-details/triggers/rule-triggers.ui-component.html b/projects/aca-content/folder-rules/src/rule-details/triggers/rule-triggers.ui-component.html
index 16501ff7f..1a3e008a0 100644
--- a/projects/aca-content/folder-rules/src/rule-details/triggers/rule-triggers.ui-component.html
+++ b/projects/aca-content/folder-rules/src/rule-details/triggers/rule-triggers.ui-component.html
@@ -1,18 +1,20 @@
-<div *ngFor="let trigger of triggerOptions">
-  <ng-container *ngIf="readOnly; else checkbox">
-    <div
-      *ngIf="selectedTriggers[trigger]"
-      [attr.data-automation-id]="'rule-trigger-value-' + trigger | lowercase">
-      {{ 'ACA_FOLDER_RULES.RULE_DETAILS.TRIGGERS.' + trigger | uppercase | translate }}
-    </div>
-  </ng-container>
+<fieldset [attr.aria-labelledby]="ariaLabelledBy">
+  <div *ngFor="let trigger of triggerOptions">
+    <ng-container *ngIf="readOnly; else checkbox">
+      <div
+        *ngIf="selectedTriggers[trigger]"
+        [attr.data-automation-id]="'rule-trigger-value-' + trigger | lowercase">
+        {{ 'ACA_FOLDER_RULES.RULE_DETAILS.TRIGGERS.' + trigger | uppercase | translate }}
+      </div>
+    </ng-container>
 
-  <ng-template #checkbox>
-    <mat-checkbox
-      [attr.data-automation-id]="'rule-trigger-checkbox-' + trigger | lowercase"
-      [checked]="selectedTriggers[trigger]"
-      (change)="onTriggerChange(trigger, $event.checked)">
-      {{ 'ACA_FOLDER_RULES.RULE_DETAILS.TRIGGERS.' + trigger | uppercase | translate }}
-    </mat-checkbox>
-  </ng-template>
-</div>
+    <ng-template #checkbox>
+      <mat-checkbox
+        [attr.data-automation-id]="'rule-trigger-checkbox-' + trigger | lowercase"
+        [checked]="selectedTriggers[trigger]"
+        (change)="onTriggerChange(trigger, $event.checked)">
+        {{ 'ACA_FOLDER_RULES.RULE_DETAILS.TRIGGERS.' + trigger | uppercase | translate }}
+      </mat-checkbox>
+    </ng-template>
+  </div>
+</fieldset>
diff --git a/projects/aca-content/folder-rules/src/rule-details/triggers/rule-triggers.ui-component.scss b/projects/aca-content/folder-rules/src/rule-details/triggers/rule-triggers.ui-component.scss
new file mode 100644
index 000000000..55d0f0fbb
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/projects/aca-content/folder-rules/src/rule-details/triggers/rule-triggers.ui-component.ts b/projects/aca-content/folder-rules/src/rule-details/triggers/rule-triggers.ui-component.ts
index 0ee504b6a..82a4d1ac1 100644
--- a/projects/aca-content/folder-rules/src/rule-details/triggers/rule-triggers.ui-component.ts
+++ b/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 } = {