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();
numberOfComments = $('#comment-header');
commentUserIcon = $$('#comment-user-icon');
commentUserName = $$('#comment-user');
commentMessage = $$('#comment-message');
commentTime = $$('#comment-time');
commentUserIcon = $$('.adf-comment-img-container');
commentUserName = $$('.adf-comment-user-name');
commentMessage = $$('.adf-comment-message');
commentTime = $$('.adf-comment-message-time');
commentInput = $('#comment-input');
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> {
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> {
const row = element(by.cssContainingText('div[id="comment-message"]', comment));
const row = element(by.cssContainingText('div.adf-comment-message', comment));
await BrowserVisibility.waitUntilElementIsVisible(row);
}
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);
}

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

@ -5,8 +5,8 @@
[expanded]="canExpandProperties()"
[attr.data-automation-id]="'adf-metadata-group-properties'">
<mat-expansion-panel-header>
<mat-panel-title role="heading">
{{ 'CORE.METADATA.BASIC.HEADER' | translate }}
<mat-panel-title>
<h1 class="adf-metadata-properties-title">{{ 'CORE.METADATA.BASIC.HEADER' | translate }}</h1>
</mat-panel-title>
</mat-expansion-panel-header>
<adf-card-view
@ -47,7 +47,8 @@
</div>
</ng-container>
<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-container>
</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 {
height: 64px;
.adf-metadata-properties-title {
font-weight: normal;
font-size: 15px;
}
}
.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"
*ngIf="showProperty() || isEditable()">
*ngIf="showProperty() || isEditable()"
[attr.for]="'card-view-dateitem-' + property.key">
{{ property.label | translate }}
</div>
</label>
<div class="adf-property-value adf-property-value-padding-top">
<span *ngIf="!isEditable() && !property.multivalued"
[attr.data-automation-id]="'card-' + property.type + '-value-' + property.key">
@ -43,7 +43,9 @@
[attr.tabIndex]="-1"
[matDatetimepicker]="datetimePicker"
[value]="valueDate"
(dateChange)="onDateChanged($event)">
(dateChange)="onDateChanged($event)"
[attr.id]="'card-view-dateitem-' + property.key"
>
<mat-datetimepicker #datetimePicker
[type]="$any(property).type"
@ -77,7 +79,9 @@
class="adf-invisible-date-input"
[attr.tabIndex]="-1"
[matDatetimepicker]="datetimePicker"
(dateChange)="addDateToList($event)">
(dateChange)="addDateToList($event)"
[attr.id]="'card-view-dateitem-' + property.key"
>
<mat-datetimepicker-toggle [attr.tabindex]="-1"
matSuffix
[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"
panelClass="adf-select-filter"
(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>

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

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

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

@ -187,10 +187,10 @@ describe('CommentListComponent', () => {
fixture.detectChanges();
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[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 () => {
@ -199,10 +199,10 @@ describe('CommentListComponent', () => {
fixture.detectChanges();
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[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 () => {
@ -214,7 +214,7 @@ describe('CommentListComponent', () => {
fixture.detectChanges();
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');
});
@ -226,7 +226,7 @@ describe('CommentListComponent', () => {
fixture.detectChanges();
await fixture.whenStable();
element = fixture.nativeElement.querySelector('#comment-time');
element = fixture.nativeElement.querySelector('.adf-comment-message-time');
expect(element.innerText).toContain('a day ago');
});
@ -238,7 +238,7 @@ describe('CommentListComponent', () => {
fixture.detectChanges();
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('Yesterday');
});
@ -249,10 +249,10 @@ describe('CommentListComponent', () => {
fixture.detectChanges();
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[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 () => {

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

@ -1,7 +1,7 @@
<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} }}
</div>
</h1>
<div class="adf-comments-input-container" *ngIf="!isReadOnly()">
<mat-form-field class="adf-full-width">
<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-weight: 600;
border-bottom: 1px solid var(--theme-fg-divider);
margin: 0;
}
.adf-comments-input-container {

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

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

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

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

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

@ -79,8 +79,8 @@ describe('ProcessCommentsComponent', () => {
fixture.detectChanges();
await fixture.whenStable();
expect(fixture.nativeElement.querySelectorAll('#comment-message').length).toBe(3);
expect(fixture.nativeElement.querySelector('#comment-message:empty')).toBeNull();
expect(fixture.nativeElement.querySelectorAll('.adf-comment-message').length).toBe(3);
expect(fixture.nativeElement.querySelector('.adf-comment-message:empty')).toBeNull();
});
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;
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"]';
dateTimePicker = $$('.mat-datetimepicker-toggle').first();
saveButton = 'button[data-automation-id*="card-dateitem-update"]';
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);
}

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

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