[ACS-10282] screen reader personal files perform actions empty state not announced by screen reader (#4932)

* [ACS-10282] Fixed error reading for action field in folder rules when it is empty by screen reader

* [ACS-10282] Unit test

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

@@ -31,7 +31,8 @@
       "ERROR": {
         "REQUIRED": "This field is required",
         "RULE_COMPOSITE_CONDITION_INVALID": "One or more condition groups is empty",
-        "INSUFFICIENT_TRIGGERS_SELECTED": "At least one trigger is required"
+        "INSUFFICIENT_TRIGGERS_SELECTED": "At least one trigger is required",
+        "ACTION_REQUIRED": "Action field is required"
       },
       "TRIGGERS": {
         "INBOUND": "Items are created or enter this folder",

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

@@ -8,10 +8,6 @@
     padding-top: 24px;
   }
 
-  .mat-mdc-form-field-subscript-wrapper {
-    display: none;
-  }
-
   .aca-rule-action-list-add-action-button {
     margin: 4px 0 20px;
 
@@ -28,7 +24,7 @@
     border-radius: 8px;
     display: flex;
     margin: 10px;
-    padding: 10px;
+    padding: 10px 10px 0;
 
     & > .aca-rule-action {
       flex: 1;

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

@@ -11,6 +11,7 @@
         {{ actionDefinition.title }}
       </mat-option>
     </mat-select>
+    <mat-error>{{ 'ACA_FOLDER_RULES.RULE_DETAILS.ERROR.ACTION_REQUIRED' | translate}}</mat-error>
   </mat-form-field>
 
   <adf-card-view

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

@@ -1,3 +1,5 @@
+@use '../../styles/mat-selectors' as ms;
+
 .aca-rule-action {
   max-width: 100%;
 
@@ -32,6 +34,10 @@
 
     &.aca-rule-action-form-field {
       min-width: unset;
+
+      #{ms.$mat-form-field-subscript-wrapper} {
+        min-height: 22.5px;
+      }
     }
 
     &.aca-rule-action-card-view {

projects/aca-content/folder-rules/src/rule-details/actions/rule-action.ui-component.spec.ts

@@ -56,6 +56,7 @@ import { MatSelectHarness } from '@angular/material/select/testing';
 import { of, Subject } from 'rxjs';
 import { Node } from '@alfresco/js-api';
 import { SimpleChanges } from '@angular/core';
+import { MatError } from '@angular/material/form-field';
 
 describe('RuleActionUiComponent', () => {
   let fixture: ComponentFixture<RuleActionUiComponent>;
@@ -189,6 +190,14 @@ describe('RuleActionUiComponent', () => {
     expect(dialog.open['calls'].argsFor(0)[0].name).toBe('ContentNodeSelectorComponent');
   });
 
+  it('should display error when no option is selected', () => {
+    component.actionDefinitions = actionsTransformedListMock;
+
+    component.form.controls.actionDefinitionId.markAsTouched();
+    fixture.detectChanges();
+    expect(unitTestingUtils.getByDirective(MatError).nativeElement.textContent).toBe('ACA_FOLDER_RULES.RULE_DETAILS.ERROR.ACTION_REQUIRED');
+  });
+
   describe('Select options', () => {
     beforeEach(() => {
       component.actionDefinitions = actionsTransformedListMock;

projects/aca-content/folder-rules/src/styles/mat-selectors.scss

@@ -25,3 +25,4 @@ $mat-text-field: '.mdc-text-field';
 $mat-form-field-disabled: '.mat-form-field-disabled';
 $mat-select-disabled: '.mat-mdc-select-disabled';
 $mat-select-value: '.mat-mdc-select-value';
+$mat-form-field-subscript-wrapper: '.mat-mdc-form-field-subscript-wrapper';