Skip to content

Commit 199d31f

Browse files
MichalKinasdatguychen
MichalKinas
and
datguychen
authored
[ACS-10286] Add label and aria expanded to the rule set header (#4834)
* [ACS-10286] Add proper role and aria attributes to rule section header * [ACS-10286] Add unit tests and main rule set coverage * [ACS-10286] Rework component to use material expansion panel * [ACS-10286] CR changes * [ACS-10286] excluded XAT-907 --------- Co-authored-by: Adam Świderski <adam.tomasz.swiderski@gmail.com>
1 parent 4d88927 commit 199d31f

File tree

6 files changed

+111
-108
lines changed

6 files changed

+111
-108
lines changed

‎e2e/playwright/folder-rules/exclude.tests.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
{
2-
"XAT-897": "https://hyland.atlassian.net/browse/ACS-5503"
2+
"XAT-897": "https://hyland.atlassian.net/browse/ACS-5503",
3+
"XAT-907": "https://hyland.atlassian.net/browse/ACS-10486"
34
}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,8 @@
126126
"LOADING_RULES": "Loading rules",
127127
"TOGGLE_RULE_STATE": "Toggle {{ name }} rule",
128128
"INHERITED_RULES_WILL_BE_RUN_FIRST": "Inherited rules will be run first",
129-
"ALL_LINKED_RULES_ARE_DISABLED": "All rules linked from this rule set are disabled"
129+
"ALL_LINKED_RULES_ARE_DISABLED": "All rules linked from this rule set are disabled",
130+
"EDIT_LINK_LABEL": "Link rules from another folder"
130131
},
131132
"LINK_RULES_DIALOG": {
132133
"TITLE": "Select a folder to link rules from",

‎projects/aca-content/folder-rules/src/manage-rules/manage-rules.smart-component.spec.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -172,7 +172,7 @@ describe('ManageRulesSmartComponent', () => {
172172
expect(component).toBeTruthy();
173173
expect(folderRuleSetsService.loadRuleSets).toHaveBeenCalledOnceWith(component.nodeId);
174174

175-
const ruleGroupingSections = unitTestingUtils.getAllByCSS(`[data-automation-id="rule-list-item"]`);
175+
const ruleGroupingSections = unitTestingUtils.getAllByCSS('.aca-rule-list__item');
176176

177177
const deleteRuleBtn = unitTestingUtils.getByCSS('#delete-rule-btn');
178178

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

Lines changed: 78 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,87 +1,83 @@
1-
<div
2-
*ngIf="inheritedRuleSetGroupingItems.length > 0"
3-
class="aca-rule-list__item"
4-
data-automation-id="rule-list-item"
5-
[ngClass]="{ 'aca-expanded': inheritedRuleSetsExpanded }">
1+
<mat-accordion multi>
2+
@if (inheritedRuleSetGroupingItems.length > 0) {
3+
<mat-expansion-panel [expanded]="true" class="aca-rule-list__item">
4+
<mat-expansion-panel-header class="aca-rule-list__item__header">
5+
<mat-panel-title>
6+
<span class="aca-rule-list__item__header__title">
7+
{{ 'ACA_FOLDER_RULES.RULE_LIST.INHERITED_RULES' | translate }}
8+
<mat-icon
9+
class="aca-rule-list__item__header__title__icon"
10+
[matTooltip]="'ACA_FOLDER_RULES.RULE_LIST.INHERITED_RULES_WILL_BE_RUN_FIRST' | translate">
11+
info
12+
</mat-icon>
13+
</span>
14+
</mat-panel-title>
15+
</mat-expansion-panel-header>
16+
<aca-rule-list-grouping
17+
[items]="inheritedRuleSetGroupingItems"
18+
[selectedRule]="selectedRule"
19+
(selectRule)="onSelectRule($event)"
20+
(ruleEnabledChanged)="onRuleEnabledChanged($event)"
21+
(loadMoreRules)="onLoadMoreRules($event)"
22+
(loadMoreRuleSets)="onLoadMoreRuleSets()" />
23+
</mat-expansion-panel>
24+
}
25+
@if (mainRuleSetGroupingItems.length > 0 || isMainRuleSetLinked) {
26+
<mat-expansion-panel [expanded]="true" class="aca-rule-list__item">
27+
<mat-expansion-panel-header class="aca-rule-list__item__header">
28+
<mat-panel-title>
29+
<span class="aca-rule-list__item__header__title" data-automation-id="main-rule-set-title">
30+
@if (isMainRuleSetOwned) {
31+
{{ 'ACA_FOLDER_RULES.RULE_LIST.OWNED_RULES' | translate }}
32+
} @else {
33+
{{ 'ACA_FOLDER_RULES.RULE_LIST.LINKED_RULES' | translate }}
34+
}
35+
</span>
636

7-
<div
8-
tabindex="0"
9-
class="aca-rule-list__item__header"
10-
matRipple matRippleColor="hsla(0,0%,0%,0.05)"
11-
(click)="inheritedRuleSetsExpanded = !inheritedRuleSetsExpanded"
12-
(keyup.enter)="inheritedRuleSetsExpanded = !inheritedRuleSetsExpanded">
37+
@if (!isMainRuleSetOwned) {
38+
<mat-icon
39+
class="aca-rule-list__item__header__icon"
40+
tabindex="0"
41+
aria-hidden="false"
42+
[attr.aria-label]="'ACA_FOLDER_RULES.RULE_LIST.EDIT_LINK_LABEL' | translate"
43+
[attr.title]="'ACA_FOLDER_RULES.RULE_LIST.EDIT_LINK_LABEL' | translate"
44+
(keydown.enter)="onRuleSetEditLinkClicked($event)"
45+
(keydown.enter)="onRuleSetEditLinkClicked($event)"
46+
(click)="onRuleSetEditLinkClicked($event)">
47+
edit
48+
</mat-icon>
49+
<mat-icon
50+
class="aca-rule-list__item__header__icon"
51+
tabindex="0"
52+
aria-hidden="false"
53+
[attr.aria-label]="'ACA_FOLDER_RULES.CONFIRMATION_DIALOG.DELETE_RULE_SET_LINK.TITLE' | translate"
54+
[attr.title]="'ACA_FOLDER_RULES.CONFIRMATION_DIALOG.DELETE_RULE_SET_LINK.TITLE' | translate"
55+
(keydown.enter)="onRuleSetUnlinkClicked($event)"
56+
(click)="onRuleSetUnlinkClicked($event)">
57+
link_off
58+
</mat-icon>
59+
}
60+
</mat-panel-title>
1361

14-
<span class="aca-rule-list__item__header__title">
15-
{{ 'ACA_FOLDER_RULES.RULE_LIST.INHERITED_RULES' | translate }}
16-
<mat-icon class="aca-rule-list__item__header__title__icon" [matTooltip]="'ACA_FOLDER_RULES.RULE_LIST.INHERITED_RULES_WILL_BE_RUN_FIRST' | translate">
17-
info
18-
</mat-icon>
19-
</span>
20-
<mat-icon class="aca-rule-list__item__header__icon">
21-
{{ inheritedRuleSetsExpanded ? 'expand_more' : 'chevron_right' }}
22-
</mat-icon>
23-
</div>
24-
25-
<aca-rule-list-grouping
26-
*ngIf="inheritedRuleSetsExpanded"
27-
[items]="inheritedRuleSetGroupingItems"
28-
[selectedRule]="selectedRule"
29-
(selectRule)="onSelectRule($event)"
30-
(ruleEnabledChanged)="onRuleEnabledChanged($event)"
31-
(loadMoreRules)="onLoadMoreRules($event)"
32-
(loadMoreRuleSets)="onLoadMoreRuleSets()" />
33-
</div>
34-
35-
<div
36-
*ngIf="mainRuleSetGroupingItems.length > 0 || isMainRuleSetLinked"
37-
class="aca-rule-list__item"
38-
data-automation-id="rule-list-item"
39-
[ngClass]="{ 'aca-expanded': mainRuleSetExpanded }">
40-
41-
<div
42-
tabindex="0"
43-
class="aca-rule-list__item__header"
44-
matRipple matRippleColor="hsla(0,0%,0%,0.05)"
45-
(click)="mainRuleSetExpanded = !mainRuleSetExpanded"
46-
(keyup.enter)="mainRuleSetExpanded = !mainRuleSetExpanded">
47-
48-
<span class="aca-rule-list__item__header__title" data-automation-id="main-rule-set-title">
49-
<ng-container *ngIf="isMainRuleSetOwned; else linkedRuleSet">
50-
{{ 'ACA_FOLDER_RULES.RULE_LIST.OWNED_RULES' | translate }}
51-
</ng-container>
52-
<ng-template #linkedRuleSet>
53-
{{ 'ACA_FOLDER_RULES.RULE_LIST.LINKED_RULES' | translate }}
54-
</ng-template>
55-
</span>
56-
57-
<ng-container *ngIf="!isMainRuleSetOwned">
58-
<mat-icon class="aca-rule-list__item__header__icon" (click)="onRuleSetEditLinkClicked($event)">edit</mat-icon>
59-
<mat-icon class="aca-rule-list__item__header__icon" (click)="onRuleSetUnlinkClicked($event)">link_off</mat-icon>
60-
</ng-container>
61-
62-
<mat-icon class="aca-rule-list__item__header__icon">
63-
{{ mainRuleSetExpanded ? 'expand_more' : 'chevron_right' }}
64-
</mat-icon>
65-
</div>
66-
67-
<ng-container *ngIf="mainRuleSetExpanded">
68-
<aca-rule-list-grouping
69-
*ngIf="mainRuleSetGroupingItems.length > 0; else emptyLinkedRuleSet"
70-
[items]="mainRuleSetGroupingItems"
71-
[selectedRule]="selectedRule"
72-
[showEnabledToggles]="isMainRuleSetOwned"
73-
(selectRule)="onSelectRule($event)"
74-
(ruleEnabledChanged)="onRuleEnabledChanged($event)"
75-
(loadMoreRules)="onLoadMoreRules($event)" />
76-
77-
<ng-template #emptyLinkedRuleSet>
62+
</mat-expansion-panel-header>
63+
@if (mainRuleSetGroupingItems.length > 0) {
64+
<aca-rule-list-grouping
65+
[items]="mainRuleSetGroupingItems"
66+
[selectedRule]="selectedRule"
67+
[showEnabledToggles]="isMainRuleSetOwned"
68+
(selectRule)="onSelectRule($event)"
69+
(ruleEnabledChanged)="onRuleEnabledChanged($event)"
70+
(loadMoreRules)="onLoadMoreRules($event)" />
71+
} @else {
7872
<div class="aca-rule-list__item__all-linked-rules-are-disabled">
7973
{{ 'ACA_FOLDER_RULES.RULE_LIST.ALL_LINKED_RULES_ARE_DISABLED' | translate }}
80-
<button *ngIf="mainRuleSet?.owningFolder?.id" mat-stroked-button [routerLink]="['/nodes', mainRuleSet.owningFolder.id, 'rules']">
81-
{{ 'ACA_FOLDER_RULES.MANAGE_RULES.TOOLBAR.ACTIONS.SEE_IN_FOLDER' | translate }}
82-
</button>
74+
@if (mainRuleSet?.owningFolder?.id) {
75+
<button mat-stroked-button [routerLink]="['/nodes', mainRuleSet.owningFolder.id, 'rules']">
76+
{{ 'ACA_FOLDER_RULES.MANAGE_RULES.TOOLBAR.ACTIONS.SEE_IN_FOLDER' | translate }}
77+
</button>
78+
}
8379
</div>
84-
</ng-template>
85-
</ng-container>
86-
87-
</div>
80+
}
81+
</mat-expansion-panel>
82+
}
83+
</mat-accordion>

‎projects/aca-content/folder-rules/src/rule-list/rule-list/rule-list.ui-component.scss‎

Lines changed: 22 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,33 @@
1+
/* stylelint-disable selector-class-pattern */
2+
@use '@angular/material' as mat;
3+
14
.aca-rule-list {
2-
display: flex;
3-
flex-direction: column;
4-
overflow-y: auto;
5-
gap: 8px;
5+
@include mat.expansion-overrides(
6+
(
7+
container-background-color: var(--theme-background-color),
8+
header-text-color: var(--theme-text-color),
9+
container-shape: 12px
10+
)
11+
);
612

713
&__item {
8-
display: flex;
9-
flex-direction: column;
1014
border: 1px solid var(--theme-border-color);
1115
border-radius: 12px;
12-
overflow: hidden;
16+
/* stylelint-disable-next-line declaration-no-important */
17+
box-shadow: none !important;
18+
19+
.mat-expansion-panel-body {
20+
padding: 0;
21+
}
1322

1423
&__header {
15-
display: flex;
16-
flex-direction: row;
17-
gap: 4px;
18-
align-items: stretch;
19-
cursor: pointer;
20-
color: var(--theme-text-color);
21-
user-select: none;
2224
font-size: 0.9em;
23-
padding: 0.5em 1em;
25+
padding: 0 16px;
26+
27+
&.mat-expanded {
28+
border-bottom: 1px solid var(--theme-border-color);
29+
border-radius: 0;
30+
}
2431

2532
& > * {
2633
display: flex;
@@ -41,12 +48,6 @@
4148
}
4249
}
4350

44-
&.aca-expanded {
45-
.aca-rule-list__item__header {
46-
border-bottom: 1px solid var(--theme-border-color);
47-
}
48-
}
49-
5051
&__all-linked-rules-are-disabled {
5152
display: flex;
5253
flex-direction: column;

‎projects/aca-content/folder-rules/src/rule-list/rule-list/rule-list.ui-component.ts‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ import { CommonModule } from '@angular/common';
3131
import { TranslatePipe } from '@ngx-translate/core';
3232
import { MatRippleModule } from '@angular/material/core';
3333
import { MatIconModule } from '@angular/material/icon';
34+
import { MatAccordion, MatExpansionPanel, MatExpansionPanelHeader, MatExpansionPanelTitle } from '@angular/material/expansion';
3435
import { MatTooltipModule } from '@angular/material/tooltip';
3536
import { RuleListGroupingUiComponent } from '../rule-list-grouping/rule-list-grouping.ui-component';
3637
import { RouterModule } from '@angular/router';
@@ -47,7 +48,11 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
4748
MatTooltipModule,
4849
RuleListGroupingUiComponent,
4950
RouterModule,
50-
MatButtonModule
51+
MatButtonModule,
52+
MatAccordion,
53+
MatExpansionPanel,
54+
MatExpansionPanelHeader,
55+
MatExpansionPanelTitle
5156
],
5257
selector: 'aca-rule-list',
5358
templateUrl: './rule-list.ui-component.html',
@@ -83,7 +88,6 @@ export class RuleListUiComponent implements OnInit {
8388
ruleSetUnlinkClicked = new EventEmitter<RuleSet>();
8489

8590
mainRuleSet: RuleSet = null;
86-
inheritedRuleSetsExpanded = true;
8791
mainRuleSetExpanded = true;
8892
mainRuleSetGroupingItems: RuleGroupingItem[] = [];
8993
inheritedRuleSetGroupingItems: RuleGroupingItem[] = [];

0 commit comments

Comments
 (0)