inteligr8/alfresco-content-app
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-content-app.git synced 2026-09-09 18:02:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* [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
This commit is contained in:
Mykyta Maliarchuk
2026-01-09 10:38:55 +01:00
committed by GitHub
parent 90f6fedd11
commit 21963b9363
7 changed files with 44 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
projects/aca-content/folder-rules/src/rule-details/options/rule-options.ui-component.html
+2 -3
View File
@@ -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
+8 -3
View File
@@ -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;
projects/aca-content/folder-rules/src/rule-details/options/rule-options.ui-component.ts
+2
View File
@@ -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
+2 -2
View File
@@ -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
+19 -17
View File
@@ -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>
projects/aca-content/folder-rules/src/rule-details/triggers/rule-triggers.ui-component.scss
+7
View File
@@ -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
+4 -1
View File
@@ -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 } = {