inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-12 17:04:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

ACS-3545 a 11 y aca metadata sidebar (#7923)

Browse Source 
* ACS-3545 Fixed accessibility issues for metadata sidebar
This commit is contained in:
AleksanderSklorz 2022-11-02 21:40:14 +01:00 committed by GitHub
parent 3dde18fbd2
commit 13fe6fb07a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 56 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
e2e/core/pages/comments.page.ts
View File

@ -22,10 +22,10 @@ export class CommentsPage {
tabsPage = new TabsPage(); tabsPage = new TabsPage();
numberOfComments = $('#comment-header'); numberOfComments = $('#comment-header');
commentUserIcon = $$('#comment-user-icon'); commentUserIcon = $$('.adf-comment-img-container');
commentUserName = $$('#comment-user'); commentUserName = $$('.adf-comment-user-name');
commentMessage = $$('#comment-message'); commentMessage = $$('.adf-comment-message');
commentTime = $$('#comment-time'); commentTime = $$('.adf-comment-message-time');
commentInput = $('#comment-input'); commentInput = $('#comment-input');
addCommentButton = $("[data-automation-id='comments-input-add']"); addCommentButton = $("[data-automation-id='comments-input-add']");

2
e2e/process-services/pages/process-details.page.ts
View File

@ -92,6 +92,6 @@ export class ProcessDetailsPage {
} }
checkCommentIsDisplayed(comment: string): Promise<void> { checkCommentIsDisplayed(comment: string): Promise<void> {
return TestElement.byText('div[id="comment-message"]', comment).waitVisible(); return TestElement.byText('div.adf-comment-message', comment).waitVisible();
} }
} }

4
e2e/process-services/pages/task-details.page.ts
View File

@ -268,12 +268,12 @@ export class TaskDetailsPage {
} }
async checkCommentIsDisplayed(comment: string): Promise<void> { async checkCommentIsDisplayed(comment: string): Promise<void> {
const row = element(by.cssContainingText('div[id="comment-message"]', comment)); const row = element(by.cssContainingText('div.adf-comment-message', comment));
await BrowserVisibility.waitUntilElementIsVisible(row); await BrowserVisibility.waitUntilElementIsVisible(row);
} }
async checkIsEmptyCommentListDisplayed(): Promise<void> { async checkIsEmptyCommentListDisplayed(): Promise<void> {
const emptyList = element(by.cssContainingText('div[id="comment-header"]', '(0)')); const emptyList = element(by.cssContainingText('h1[id="comment-header"]', '(0)'));
await BrowserVisibility.waitUntilElementIsVisible(emptyList); await BrowserVisibility.waitUntilElementIsVisible(emptyList);
} }

7
lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.html
View File

@ -5,8 +5,8 @@
[expanded]="canExpandProperties()" [expanded]="canExpandProperties()"
[attr.data-automation-id]="'adf-metadata-group-properties'"> [attr.data-automation-id]="'adf-metadata-group-properties'">
<mat-expansion-panel-header> <mat-expansion-panel-header>
<mat-panel-title role="heading"> <mat-panel-title>
{{ 'CORE.METADATA.BASIC.HEADER' | translate }} <h1 class="adf-metadata-properties-title">{{ 'CORE.METADATA.BASIC.HEADER' | translate }}</h1>
</mat-panel-title> </mat-panel-title>
</mat-expansion-panel-header> </mat-expansion-panel-header>
<adf-card-view <adf-card-view
@ -47,7 +47,8 @@
</div> </div>
</ng-container> </ng-container>
<ng-template #loading> <ng-template #loading>
<mat-progress-bar mode="indeterminate"></mat-progress-bar> <mat-progress-bar mode="indeterminate" [attr.aria-label]="'CORE.METADATA.BASIC.DATA_LOADING' | translate">
</mat-progress-bar>
</ng-template> </ng-template>
</ng-container> </ng-container>
</mat-accordion> </mat-accordion>

5
lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss
View File

@ -7,6 +7,11 @@
mat-expansion-panel-header { mat-expansion-panel-header {
height: 64px; height: 64px;
.adf-metadata-properties-title {
font-weight: normal;
font-size: 15px;
}
} }
.mat-expansion-panel:not([class*='mat-elevation-z']) { .mat-expansion-panel:not([class*='mat-elevation-z']) {

16
lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.html
View File

@ -1,9 +1,9 @@
<div class="adf-property-label" <label class="adf-property-label"
[attr.data-automation-id]="'card-dateitem-label-' + property.key" [attr.data-automation-id]="'card-dateitem-label-' + property.key"
*ngIf="showProperty() || isEditable()"> *ngIf="showProperty() || isEditable()"
[attr.for]="'card-view-dateitem-' + property.key">
{{ property.label | translate }} {{ property.label | translate }}
</div> </label>
<div class="adf-property-value adf-property-value-padding-top"> <div class="adf-property-value adf-property-value-padding-top">
<span *ngIf="!isEditable() && !property.multivalued" <span *ngIf="!isEditable() && !property.multivalued"
[attr.data-automation-id]="'card-' + property.type + '-value-' + property.key"> [attr.data-automation-id]="'card-' + property.type + '-value-' + property.key">
@ -43,7 +43,9 @@
[attr.tabIndex]="-1" [attr.tabIndex]="-1"
[matDatetimepicker]="datetimePicker" [matDatetimepicker]="datetimePicker"
[value]="valueDate" [value]="valueDate"
(dateChange)="onDateChanged($event)"> (dateChange)="onDateChanged($event)"
[attr.id]="'card-view-dateitem-' + property.key"
>
<mat-datetimepicker #datetimePicker <mat-datetimepicker #datetimePicker
[type]="$any(property).type" [type]="$any(property).type"
@ -77,7 +79,9 @@
class="adf-invisible-date-input" class="adf-invisible-date-input"
[attr.tabIndex]="-1" [attr.tabIndex]="-1"
[matDatetimepicker]="datetimePicker" [matDatetimepicker]="datetimePicker"
(dateChange)="addDateToList($event)"> (dateChange)="addDateToList($event)"
[attr.id]="'card-view-dateitem-' + property.key"
>
<mat-datetimepicker-toggle [attr.tabindex]="-1" <mat-datetimepicker-toggle [attr.tabindex]="-1"
matSuffix matSuffix
[attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate" [attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"

3
lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.html
View File

@ -11,7 +11,8 @@
<mat-select [(value)]="value" <mat-select [(value)]="value"
panelClass="adf-select-filter" panelClass="adf-select-filter"
(selectionChange)="onChange($event)" (selectionChange)="onChange($event)"
data-automation-class="select-box"> data-automation-class="select-box"
[aria-label]="property.label | translate">
<adf-select-filter-input *ngIf="showInputFilter" (change)="onFilterInputChange($event)"></adf-select-filter-input> <adf-select-filter-input *ngIf="showInputFilter" (change)="onFilterInputChange($event)"></adf-select-filter-input>

9
lib/core/src/lib/comments/comment-list.component.html
View File

@ -4,7 +4,7 @@
class="adf-comment-list-item" class="adf-comment-list-item"
[class.adf-is-selected]="comment.isSelected" [class.adf-is-selected]="comment.isSelected"
id="adf-comment-{{comment?.id}}"> id="adf-comment-{{comment?.id}}">
<div id="comment-user-icon" class="adf-comment-img-container"> <div [attr.id]="'comment-user-icon-' + comment.id" class="adf-comment-img-container">
<div <div
*ngIf="!isPictureDefined(comment.createdBy)" *ngIf="!isPictureDefined(comment.createdBy)"
class="adf-comment-user-icon"> class="adf-comment-user-icon">
@ -17,11 +17,12 @@
</div> </div>
</div> </div>
<div class="adf-comment-contents"> <div class="adf-comment-contents">
<div matLine id="comment-user" class="adf-comment-user-name"> <div matLine [attr.id]="'comment-user-' + comment.id" class="adf-comment-user-name">
{{comment.createdBy?.firstName}} {{comment.createdBy?.lastName}} {{comment.createdBy?.firstName}} {{comment.createdBy?.lastName}}
</div> </div>
<div matLine id="comment-message" class="adf-comment-message" [innerHTML]="comment.message"></div> <div matLine [attr.id]="'comment-message-' + comment.id" class="adf-comment-message" [innerHTML]="comment.message">
<div matLine id="comment-time" class="adf-comment-message-time"> </div>
<div matLine [attr.id]="'comment-time-' + comment.id" class="adf-comment-message-time">
{{ comment.created | adfTimeAgo: currentLocale }} {{ comment.created | adfTimeAgo: currentLocale }}
</div> </div>
</div> </div>

18
lib/core/src/lib/comments/comment-list.component.spec.ts
View File

@ -187,10 +187,10 @@ describe('CommentListComponent', () => {
fixture.detectChanges(); fixture.detectChanges();
await fixture.whenStable(); await fixture.whenStable();
const elements = fixture.nativeElement.querySelectorAll('#comment-message'); const elements = fixture.nativeElement.querySelectorAll('.adf-comment-message');
expect(elements.length).toBe(1); expect(elements.length).toBe(1);
expect(elements[0].innerText).toBe(processCommentOne.message); expect(elements[0].innerText).toBe(processCommentOne.message);
expect(fixture.nativeElement.querySelector('#comment-message:empty')).toBeNull(); expect(fixture.nativeElement.querySelector('.adf-comment-message:empty')).toBeNull();
}); });
it('should show comment user when input is given', async () => { it('should show comment user when input is given', async () => {
@ -199,10 +199,10 @@ describe('CommentListComponent', () => {
fixture.detectChanges(); fixture.detectChanges();
await fixture.whenStable(); await fixture.whenStable();
const elements = fixture.nativeElement.querySelectorAll('#comment-user'); const elements = fixture.nativeElement.querySelectorAll('.adf-comment-user-name');
expect(elements.length).toBe(1); expect(elements.length).toBe(1);
expect(elements[0].innerText).toBe(processCommentOne.createdBy.firstName + ' ' + processCommentOne.createdBy.lastName); expect(elements[0].innerText).toBe(processCommentOne.createdBy.firstName + ' ' + processCommentOne.createdBy.lastName);
expect(fixture.nativeElement.querySelector('#comment-user:empty')).toBeNull(); expect(fixture.nativeElement.querySelector('.adf-comment-user-name:empty')).toBeNull();
}); });
it('comment date time should start with few seconds ago when comment date is few seconds ago', async () => { it('comment date time should start with few seconds ago when comment date is few seconds ago', async () => {
@ -214,7 +214,7 @@ describe('CommentListComponent', () => {
fixture.detectChanges(); fixture.detectChanges();
await fixture.whenStable(); await fixture.whenStable();
element = fixture.nativeElement.querySelector('#comment-time'); element = fixture.nativeElement.querySelector('.adf-comment-message-time');
expect(element.innerText).toContain('a few seconds ago'); expect(element.innerText).toContain('a few seconds ago');
}); });
@ -226,7 +226,7 @@ describe('CommentListComponent', () => {
fixture.detectChanges(); fixture.detectChanges();
await fixture.whenStable(); await fixture.whenStable();
element = fixture.nativeElement.querySelector('#comment-time'); element = fixture.nativeElement.querySelector('.adf-comment-message-time');
expect(element.innerText).toContain('a day ago'); expect(element.innerText).toContain('a day ago');
}); });
@ -238,7 +238,7 @@ describe('CommentListComponent', () => {
fixture.detectChanges(); fixture.detectChanges();
await fixture.whenStable(); await fixture.whenStable();
element = fixture.nativeElement.querySelector('#comment-time'); element = fixture.nativeElement.querySelector('.adf-comment-message-time');
expect(element.innerText).not.toContain('Today'); expect(element.innerText).not.toContain('Today');
expect(element.innerText).not.toContain('Yesterday'); expect(element.innerText).not.toContain('Yesterday');
}); });
@ -249,10 +249,10 @@ describe('CommentListComponent', () => {
fixture.detectChanges(); fixture.detectChanges();
await fixture.whenStable(); await fixture.whenStable();
const elements = fixture.nativeElement.querySelectorAll('#comment-user-icon'); const elements = fixture.nativeElement.querySelectorAll('.adf-comment-img-container');
expect(elements.length).toBe(1); expect(elements.length).toBe(1);
expect(elements[0].innerText).toContain(commentList.getUserShortName(processCommentOne.createdBy)); expect(elements[0].innerText).toContain(commentList.getUserShortName(processCommentOne.createdBy));
expect(fixture.nativeElement.querySelector('#comment-user-icon:empty')).toBeNull(); expect(fixture.nativeElement.querySelector('.adf-comment-img-container:empty')).toBeNull();
}); });
it('should return content picture when is a content user with a picture', async () => { it('should return content picture when is a content user with a picture', async () => {

4
lib/core/src/lib/comments/comments.component.html
View File

@ -1,7 +1,7 @@
<div class="adf-comments-container"> <div class="adf-comments-container">
<div id="comment-header" class="adf-comments-header" role="heading"> <h1 id="comment-header" class="adf-comments-header">
{{'COMMENTS.HEADER' | translate: { count: comments?.length} }} {{'COMMENTS.HEADER' | translate: { count: comments?.length} }}
</div> </h1>
<div class="adf-comments-input-container" *ngIf="!isReadOnly()"> <div class="adf-comments-input-container" *ngIf="!isReadOnly()">
<mat-form-field class="adf-full-width"> <mat-form-field class="adf-full-width">
<textarea id="comment-input" <textarea id="comment-input"

1
lib/core/src/lib/comments/comments.component.scss
View File

@ -9,6 +9,7 @@
font-size: var(--theme-body-1-font-size); font-size: var(--theme-body-1-font-size);
font-weight: 600; font-weight: 600;
border-bottom: 1px solid var(--theme-fg-divider); border-bottom: 1px solid var(--theme-fg-divider);
margin: 0;
} }
.adf-comments-input-container { .adf-comments-input-container {

8
lib/core/src/lib/comments/comments.component.spec.ts
View File

@ -115,8 +115,8 @@ describe('CommentsComponent', () => {
fixture.detectChanges(); fixture.detectChanges();
await fixture.whenStable(); await fixture.whenStable();
expect(fixture.nativeElement.querySelectorAll('#comment-message').length).toBe(3); expect(fixture.nativeElement.querySelectorAll('.adf-comment-message').length).toBe(3);
expect(fixture.nativeElement.querySelector('#comment-message:empty')).toBeNull(); expect(fixture.nativeElement.querySelector('.adf-comment-message:empty')).toBeNull();
}); });
it('should display comments count when the task has comments', async () => { it('should display comments count when the task has comments', async () => {
@ -259,7 +259,7 @@ describe('CommentsComponent', () => {
await fixture.whenStable(); await fixture.whenStable();
expect(addProcessCommentSpy).toHaveBeenCalled(); expect(addProcessCommentSpy).toHaveBeenCalled();
const elements = fixture.nativeElement.querySelectorAll('#comment-message'); const elements = fixture.nativeElement.querySelectorAll('.adf-comment-message');
expect(elements.length).toBe(1); expect(elements.length).toBe(1);
expect(elements[0].innerText).toBe('Test Comment'); expect(elements[0].innerText).toBe('Test Comment');
}); });
@ -313,7 +313,7 @@ describe('CommentsComponent', () => {
await fixture.whenStable(); await fixture.whenStable();
expect(addContentCommentSpy).toHaveBeenCalled(); expect(addContentCommentSpy).toHaveBeenCalled();
const elements = fixture.nativeElement.querySelectorAll('#comment-message'); const elements = fixture.nativeElement.querySelectorAll('.adf-comment-message');
expect(elements.length).toBe(1); expect(elements.length).toBe(1);
expect(elements[0].innerText).toBe('Test Comment'); expect(elements[0].innerText).toBe('Test Comment');
}); });

3
lib/core/src/lib/i18n/en.json
View File

@ -219,7 +219,8 @@
"CREATED_DATE": "Created Date", "CREATED_DATE": "Created Date",
"MODIFIER": "Modifier", "MODIFIER": "Modifier",
"MODIFIED_DATE": "Modified Date", "MODIFIED_DATE": "Modified Date",
"CONTENT_TYPE": "Content Type" "CONTENT_TYPE": "Content Type",
"DATA_LOADING": "Data is loading"
}, },
"CONTENT_TYPE": { "CONTENT_TYPE": {
"DIALOG": { "DIALOG": {

4
lib/process-services/src/lib/process-comments/process-comments.component.spec.ts
View File

@ -79,8 +79,8 @@ describe('ProcessCommentsComponent', () => {
fixture.detectChanges(); fixture.detectChanges();
await fixture.whenStable(); await fixture.whenStable();
expect(fixture.nativeElement.querySelectorAll('#comment-message').length).toBe(3); expect(fixture.nativeElement.querySelectorAll('.adf-comment-message').length).toBe(3);
expect(fixture.nativeElement.querySelector('#comment-message:empty')).toBeNull(); expect(fixture.nativeElement.querySelector('.adf-comment-message:empty')).toBeNull();
}); });
it('should display comments count when the process has comments', async () => { it('should display comments count when the process has comments', async () => {

4
lib/testing/src/lib/protractor/core/pages/card-view/card-view-date-item.page.ts
View File

@ -26,13 +26,13 @@ export class CardDateItemPage {
dateTimePickerPage: DateTimePickerPage; dateTimePickerPage: DateTimePickerPage;
datePickerPage = new DatePickerPage(); datePickerPage = new DatePickerPage();
labelLocator = 'div[data-automation-id*="card-dateitem-label"]'; labelLocator = 'label[data-automation-id*="card-dateitem-label"]';
valueLocator = 'span[data-automation-id*="card-date"]'; valueLocator = 'span[data-automation-id*="card-date"]';
dateTimePicker = $$('.mat-datetimepicker-toggle').first(); dateTimePicker = $$('.mat-datetimepicker-toggle').first();
saveButton = 'button[data-automation-id*="card-dateitem-update"]'; saveButton = 'button[data-automation-id*="card-dateitem-update"]';
constructor(label: string = 'minDate') { constructor(label: string = 'minDate') {
this.rootElement = element(by.xpath(`//div[contains(@data-automation-id, "label-${label}")]/ancestor::adf-card-view-dateitem`)); this.rootElement = element(by.xpath(`//label[contains(@data-automation-id, "label-${label}")]/ancestor::adf-card-view-dateitem`));
this.dateTimePickerPage = new DateTimePickerPage(this.rootElement); this.dateTimePickerPage = new DateTimePickerPage(this.rootElement);
} }

1
lib/testing/src/lib/protractor/process-services/pages/start-process.page.ts
View File

@ -70,6 +70,7 @@ export class StartProcessPage {
try { try {
await this.clickProcessDropdownArrow(); await this.clickProcessDropdownArrow();
await this.selectProcessOption(name); await this.selectProcessOption(name);
await browser.sleep(500);
} catch (error) { } catch (error) {
if (retry < 3) { if (retry < 3) {
retry++; retry++;