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

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": {