inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +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
16 changed files with 56 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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');
});