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

[ADF-5543] Enable lint accessibility and resolve found issues (#9421)

Browse Source
This commit is contained in:
tomson
2024-04-17 09:36:40 +02:00
committed by GitHub
parent eaad09b06d
commit 74ef7eed1a
61 changed files with 1162 additions and 1054 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,27 +1,36 @@
<label class="adf-property-label"
[attr.data-automation-id]="'card-dateitem-label-' + property.key"
*ngIf="showProperty || isEditable"
[attr.for]="'card-view-dateitem-' + property.key"
[ngClass]="{'adf-property-readonly-value': isReadonlyProperty, 'adf-property-value-editable': editable}">
<label
class="adf-property-label"
[attr.data-automation-id]="'card-dateitem-label-' + property.key"
*ngIf="showProperty || isEditable"
[attr.for]="'card-view-dateitem-' + property.key"
[ngClass]="{ 'adf-property-readonly-value': isReadonlyProperty, 'adf-property-value-editable': editable }"
>
{{ property.label | translate }}
</label>
<div class="adf-property-value" [ngClass]="{'adf-property-value-editable': editable, 'adf-property-readonly-value': isReadonlyProperty}">
<span *ngIf="!isEditable && !property.multivalued"
[attr.data-automation-id]="'card-' + property.type + '-value-' + property.key">
<span *ngIf="showProperty"
[attr.data-automation-id]="'card-dateitem-' + property.key"
(dblclick)="copyToClipboard(property.displayValue)"
matTooltipShowDelay="1000"
[matTooltip]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate">{{ property.displayValue}}</span>
<div class="adf-property-value" [ngClass]="{ 'adf-property-value-editable': editable, 'adf-property-readonly-value': isReadonlyProperty }">
<span *ngIf="!isEditable && !property.multivalued" [attr.data-automation-id]="'card-' + property.type + '-value-' + property.key">
<span
*ngIf="showProperty"
[attr.data-automation-id]="'card-dateitem-' + property.key"
(dblclick)="copyToClipboard(property.displayValue)"
matTooltipShowDelay="1000"
[matTooltip]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate"
>{{ property.displayValue }}</span
>
</span>
<div *ngIf="isEditable && !property.multivalued" class="adf-dateitem-editable">
<div class="adf-dateitem-editable-controls">
<span class="adf-datepicker-toggle"
[attr.data-automation-id]="'datepicker-label-toggle-' + property.key"
(click)="showDatePicker()">
<span *ngIf="showProperty; else elseEmptyValueBlock"
[attr.data-automation-id]="'card-' + property.type + '-value-' + property.key">
{{ property.displayValue }}</span>
<span
class="adf-datepicker-toggle"
[attr.data-automation-id]="'datepicker-label-toggle-' + property.key"
(click)="showDatePicker()"
tabindex="0"
role="button"
(keyup.enter)="showDatePicker()"
>
<span *ngIf="showProperty; else elseEmptyValueBlock" [attr.data-automation-id]="'card-' + property.type + '-value-' + property.key">
{{ property.displayValue }}</span
>
</span>
<mat-icon
@@ -29,7 +38,8 @@
class="adf-date-reset-icon"
(click)="onDateClear()"
[attr.title]="'CORE.METADATA.ACTIONS.CLEAR' | translate"
[attr.data-automation-id]="'datepicker-date-clear-' + property.key">
[attr.data-automation-id]="'datepicker-date-clear-' + property.key"
>
clear
</mat-icon>
@@ -37,7 +47,8 @@
[attr.tabindex]="-1"
[attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
[attr.data-automation-id]="'datepickertoggle-' + property.key"
[for]="datetimePicker">
[for]="datetimePicker"
>
</mat-datetimepicker-toggle>
</div>
@@ -47,52 +58,64 @@
[matDatetimepicker]="datetimePicker"
[value]="valueDate"
(dateChange)="onDateChanged($event)"
[attr.id]="'card-view-dateitem-' + property.key">
[attr.id]="'card-view-dateitem-' + property.key"
/>
<mat-datetimepicker
#datetimePicker
[type]="$any(property).type"
[timeInterval]="5"
[attr.data-automation-id]="'datepicker-' + property.key"
[startAt]="valueDate">
[startAt]="valueDate"
>
</mat-datetimepicker>
</div>
<ng-template #elseEmptyValueBlock>
{{ property.default | translate }}
</ng-template>
<div *ngIf="property.multivalued"
class="adf-property-field adf-dateitem-chip-list-container adf-dateitem-editable">
<div *ngIf="property.multivalued" class="adf-property-field adf-dateitem-chip-list-container adf-dateitem-editable">
<mat-chip-list #chipList class="adf-textitem-chip-list">
<mat-chip
*ngFor="let propertyValue of property.displayValue; let idx = index"
[removable]="isEditable"
(removed)="removeValueFromList(idx)">
(removed)="removeValueFromList(idx)"
>
{{ propertyValue }}
<mat-icon *ngIf="isEditable" matChipRemove>cancel</mat-icon>
</mat-chip>
</mat-chip-list>
<div *ngIf="isEditable" class="adf-property-field adf-dateitem-editable-controls" (click)="showDatePicker()">
<div
*ngIf="isEditable"
class="adf-property-field adf-dateitem-editable-controls"
(click)="showDatePicker()"
tabindex="0"
role="button"
(keyup.enter)="showDatePicker()"
>
<input
class="adf-invisible-date-input"
[attr.tabIndex]="-1"
[matDatetimepicker]="datetimePicker"
(dateChange)="addDateToList($event)"
[attr.id]="'card-view-dateitem-' + property.key">
[attr.id]="'card-view-dateitem-' + property.key"
/>
<mat-datetimepicker-toggle
[attr.tabindex]="-1"
matSuffix
[attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
[attr.data-automation-id]="'datepickertoggle-' + property.key"
[for]="datetimePicker">
[for]="datetimePicker"
>
</mat-datetimepicker-toggle>
<mat-datetimepicker
#datetimePicker
[type]="$any(property).type"
[timeInterval]="5"
[attr.data-automation-id]="'datepicker-' + property.key"
[startAt]="valueDate">
[startAt]="valueDate"
>
</mat-datetimepicker>
</div>
</div>

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

@@ -11,6 +11,9 @@
<ng-template #clickableTemplate>
<span class="adf-mapitem-clickable-value"
(click)="clicked()"
tabindex="0"
role="button"
(keyup.enter)="clicked()"
[attr.data-automation-id]="'card-mapitem-value-' + property.key">
<span *ngIf="showProperty; else emptyValueTemplate">{{ property.displayValue }}</span>
</span>

105
lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.html
View File

@@ -1,21 +1,27 @@
<div [ngSwitch]="templateType">
<div *ngSwitchDefault>
<mat-form-field class="adf-property-field adf-card-textitem-field"
<mat-form-field
class="adf-property-field adf-card-textitem-field"
[ngClass]="{
'adf-property-read-only': !isEditable
}"
[floatLabel]="'always'"
appearance="standard">
<mat-label *ngIf="showProperty || isEditable" [attr.data-automation-id]="'card-textitem-label-' + property.key" class="adf-property-label"
appearance="standard"
>
<mat-label
*ngIf="showProperty || isEditable"
[attr.data-automation-id]="'card-textitem-label-' + property.key"
class="adf-property-label"
[ngClass]="{
'adf-property-value-editable': editable,
'adf-property-readonly-value': isReadonlyProperty
}">
}"
>
{{ property.label | translate }}
</mat-label>
<input matInput
<input
matInput
*ngIf="!property.multiline"
class="adf-property-value"
[ngClass]="{
@@ -23,7 +29,7 @@
'adf-property-readonly-value': isReadonlyProperty,
'adf-property-value-has-error': isEditable && hasErrors
}"
title="{{property.label | translate }}"
title="{{ property.label | translate }}"
[placeholder]="property.default"
[attr.aria-label]="property.label | translate"
[formControl]="textInput"
@@ -32,10 +38,12 @@
[matTooltip]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate"
[matTooltipDisabled]="isEditable"
[attr.data-automation-id]="'card-textitem-value-' + property.key"
(keydown)="undoText($event)">
<textarea matInput
(keydown)="undoText($event)"
/>
<textarea
matInput
*ngIf="property.multiline"
title="{{property.label | translate }}"
title="{{ property.label | translate }}"
[cdkTextareaAutosize]="true"
[cdkAutosizeMaxRows]="1"
[cdkAutosizeMaxRows]="5"
@@ -47,60 +55,78 @@
[placeholder]="property.default"
[attr.aria-label]="property.label | translate"
[formControl]="textInput"
[attr.data-automation-id]="'card-textitem-value-' + property.key">
[attr.data-automation-id]="'card-textitem-value-' + property.key"
>
</textarea>
</mat-form-field>
</div>
<div *ngSwitchCase="'chipsTemplate'"
<div
*ngSwitchCase="'chipsTemplate'"
class="adf-property-field adf-textitem-chip-list-container"
[ngClass]="{'adf-property-read-only': !isEditable}">
<mat-label *ngIf="showLabelForChips" [attr.data-automation-id]="'card-textitem-label-' + property.key" class="adf-property-label"
[ngClass]="{'adf-property-value-editable': editable}">
[ngClass]="{ 'adf-property-read-only': !isEditable }"
>
<mat-label
*ngIf="showLabelForChips"
[attr.data-automation-id]="'card-textitem-label-' + property.key"
class="adf-property-label"
[ngClass]="{ 'adf-property-value-editable': editable }"
>
{{ property.label | translate }}
</mat-label>
<mat-chip-list #chipList class="adf-textitem-chip-list">
<mat-chip *ngFor="let propertyValue of editedValue; let idx = index"
[removable]="isEditable"
(removed)="removeValueFromList(idx)">
<mat-chip *ngFor="let propertyValue of editedValue; let idx = index" [removable]="isEditable" (removed)="removeValueFromList(idx)">
{{ propertyValue }}
<mat-icon *ngIf="isEditable" matChipRemove>cancel</mat-icon>
</mat-chip>
</mat-chip-list>
<mat-form-field *ngIf="isEditable" appearance="standard"
<mat-form-field
*ngIf="isEditable"
appearance="standard"
class="adf-property-field adf-textitem-chip-list-input"
[ngClass]="{ 'adf-property-read-only': !isEditable }"
[floatLabel]="'never'">
<input matInput
[floatLabel]="'never'"
>
<input
matInput
class="adf-property-value"
[ngClass]="{
'adf-property-value-editable': editable,
'adf-property-readonly-value': isReadonlyProperty
}"
title="{{property.label | translate }}"
[placeholder]="editedValue ? '' : property.default | translate"
title="{{ property.label | translate }}"
[placeholder]="editedValue ? '' : (property.default | translate)"
[attr.aria-label]="property.label | translate"
[matChipInputFor]="chipList"
[matChipInputAddOnBlur]="true"
(matChipInputTokenEnd)="addValueToList($event)"
[attr.data-automation-id]="'card-textitem-editchipinput-' + property.key">
[attr.data-automation-id]="'card-textitem-editchipinput-' + property.key"
/>
</mat-form-field>
</div>
<div *ngSwitchCase="'clickableTemplate'"
<div
*ngSwitchCase="'clickableTemplate'"
role="button"
class="adf-textitem-clickable"
[ngClass]="{ 'adf-property-read-only': !isEditable }"
[attr.data-automation-id]="'card-textitem-toggle-' + property.key"
(click)="clicked()">
<mat-form-field class="adf-property-field adf-card-textitem-field" appearance="standard"
[floatLabel]="'never'">
<mat-label *ngIf="showProperty || isEditable" [attr.data-automation-id]="'card-textitem-label-' + property.key" class="adf-property-label">
tabindex="0"
(keyup.enter)="clicked()"
(click)="clicked()"
>
<mat-form-field class="adf-property-field adf-card-textitem-field" appearance="standard" [floatLabel]="'never'">
<mat-label
*ngIf="showProperty || isEditable"
[attr.data-automation-id]="'card-textitem-label-' + property.key"
class="adf-property-label"
>
{{ property.label | translate }}
</mat-label>
<input matInput
[type]=property.inputType
<input
matInput
[type]="property.inputType"
class="adf-property-value"
title="{{ property.label | translate }}"
[ngClass]="{
@@ -115,29 +141,28 @@
(blur)="update()"
(keydown.enter)="update()"
[readonly]="!isEditable"
[attr.data-automation-id]="'card-textitem-value-' + property.key">
<button mat-icon-button
[attr.data-automation-id]="'card-textitem-value-' + property.key"
/>
<button
mat-icon-button
matSuffix
*ngIf="showClickableIcon"
class="adf-textitem-action"
[attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
[attr.data-automation-id]="'card-textitem-clickable-icon-' + property.key">
[attr.data-automation-id]="'card-textitem-clickable-icon-' + property.key"
>
<mat-icon class="adf-textitem-icon">{{ property?.icon }}</mat-icon>
</button>
</mat-form-field>
</div>
<div *ngSwitchCase="'emptyTemplate'">
<span class="adf-textitem-default-value">{{ property.default | translate }}</span>
</div>
<mat-error
*ngIf="isEditable && hasErrors"
class="adf-textitem-error"
[attr.data-automation-id]="'card-textitem-error-' + property.key">
<mat-error *ngIf="isEditable && hasErrors" class="adf-textitem-error" [attr.data-automation-id]="'card-textitem-error-' + property.key">
<ul>
<li *ngFor="let error of errors">{{ error.message | translate: error }}</li>
<li *ngFor="let error of errors">{{ error.message | translate : error }}</li>
</ul>
</mat-error>
</div>

3
lib/core/src/lib/datatable/components/columns-selector/columns-selector.component.html
View File

@@ -1,6 +1,9 @@
<div
class="adf-columns-selector"
data-automation-id="adf-columns-selector"
tabindex="0"
role="button"
(keyup.enter)="$event.stopPropagation()"
(click)="$event.stopPropagation();"
>
<div class="adf-columns-selector-header">

7
lib/core/src/lib/datatable/components/datatable/datatable.component.html
View File

@@ -104,7 +104,10 @@
*ngIf="isResizingEnabled && col.resizable && !lastColumn"
[ngClass]="hoveredHeaderColumnIndex === columnIndex && !isResizing || resizingColumnIndex === columnIndex ? 'adf-datatable__resize-handle-visible' : 'adf-datatable__resize-handle-hidden'"
adf-resize-handle
tabindex="0"
role="button"
(click)="$event.stopPropagation()"
(keyup.enter)="$event.stopPropagation()"
class="adf-datatable__resize-handle"
[resizableContainer]="resizableElement">
<div class="adf-datatable__resize-handle--divider"></div>
@@ -179,8 +182,9 @@
</mat-menu>
</div>
<label *ngIf="multiselect" class="adf-datatable-cell adf-datatable-checkbox">
<label *ngIf="multiselect" for="select-file" class="adf-datatable-cell adf-datatable-checkbox">
<mat-checkbox
id="select-file"
[checked]="row.isSelected"
[attr.aria-checked]="row.isSelected"
role="checkbox"
@@ -199,6 +203,7 @@
[attr.aria-selected]="row.isSelected"
[attr.aria-label]="col.title ? (col.title | translate) : null"
(click)="onRowClick(row, $event)"
tabindex="0"
(keydown.enter)="onEnterKeyPressed(row, $any($event))"
[adf-context-menu]="getContextMenuActions(row, col)"
[adf-context-menu-enabled]="contextMenu"

73
lib/core/src/lib/form/components/form-renderer.component.html
View File

@@ -1,46 +1,59 @@
<div
id="adf-form-renderer"
class="{{formDefinition.className}}"
[ngClass]="{'adf-readonly-form': formDefinition.readOnly}"
>
<div id="adf-form-renderer" class="{{ formDefinition.className }}" [ngClass]="{ 'adf-readonly-form': formDefinition.readOnly }">
<div *ngIf="formDefinition.hasTabs()">
<div *ngIf="hasTabs()" class="alfresco-tabs-widget">
<mat-tab-group>
<mat-tab *ngFor="let tab of visibleTabs()" [label]="tab.title | translate">
<ng-template *ngTemplateOutlet="render; context: {fieldToRender : tab.fields}"></ng-template>
<ng-template *ngTemplateOutlet="render; context: { fieldToRender: tab.fields }"></ng-template>
</mat-tab>
</mat-tab-group>
</div>
</div>
<div *ngIf="!formDefinition.hasTabs() && formDefinition.hasFields()">
<ng-template *ngTemplateOutlet="render; context: {fieldToRender : formDefinition.fields}"></ng-template>
<ng-template *ngTemplateOutlet="render; context: { fieldToRender: formDefinition.fields }"></ng-template>
</div>
</div>
<ng-template #render let-fieldToRender="fieldToRender">
<div *ngFor="let currentRootElement of fieldToRender">
<div *ngIf="currentRootElement.type === 'container' || currentRootElement.type === 'group'" class="adf-container-widget" [id]="'field-'+currentRootElement?.id+'-container'" [hidden]="!currentRootElement?.isVisible">
<div
*ngIf="currentRootElement.type === 'container' || currentRootElement.type === 'group'"
class="adf-container-widget"
[id]="'field-' + currentRootElement?.id + '-container'"
[hidden]="!currentRootElement?.isVisible"
>
<div [hidden]="!currentRootElement?.isGroup()" class="adf-container-widget__header">
<h4 class="adf-container-widget__header-text" id="container-header"
[class.adf-collapsible]="currentRootElement?.isCollapsible()">
<button *ngIf="currentRootElement?.isCollapsible()"
mat-icon-button
class="mdl-button--icon"
(click)="onExpanderClicked(currentRootElement)">
<h4 class="adf-container-widget__header-text" id="container-header" [class.adf-collapsible]="currentRootElement?.isCollapsible()">
<button
*ngIf="currentRootElement?.isCollapsible()"
mat-icon-button
class="mdl-button--icon"
(click)="onExpanderClicked(currentRootElement)"
>
<mat-icon>{{ currentRootElement?.isExpanded ? 'expand_more' : 'expand_less' }}</mat-icon>
</button>
<span (click)="onExpanderClicked(currentRootElement)"
[id]="'container-header-label-'+currentRootElement?.id">{{currentRootElement.name | translate }}</span>
<span
(click)="onExpanderClicked(currentRootElement)"
role="button"
tabindex="0"
(keyup.enter)="onExpanderClicked(currentRootElement)"
[id]="'container-header-label-' + currentRootElement?.id"
>{{ currentRootElement.name | translate }}</span
>
</h4>
</div>
<div *ngIf="currentRootElement?.form?.enableFixedSpace else fixingTemplate">
<div class="adf-grid-list"
[ngStyle]="{ 'grid-template-columns': 'repeat('+getNumberOfColumns(currentRootElement) +', 1fr)'}"
*ngIf="currentRootElement?.isExpanded">
<div class="adf-grid-list-item" *ngFor="let field of getContainerFields(currentRootElement)"
[ngStyle]="{'grid-area': 'auto / auto / span '+(field?.rowspan || 1)+' / span '+(field?.colspan || 1)}">
<div *ngIf="currentRootElement?.form?.enableFixedSpace; else fixingTemplate">
<div
class="adf-grid-list"
[ngStyle]="{ 'grid-template-columns': 'repeat(' + getNumberOfColumns(currentRootElement) + ', 1fr)' }"
*ngIf="currentRootElement?.isExpanded"
>
<div
class="adf-grid-list-item"
*ngFor="let field of getContainerFields(currentRootElement)"
[ngStyle]="{ 'grid-area': 'auto / auto / span ' + (field?.rowspan || 1) + ' / span ' + (field?.colspan || 1) }"
>
<adf-form-field *ngIf="field" [field]="field"></adf-form-field>
</div>
</div>
@@ -48,8 +61,11 @@
<ng-template #fixingTemplate>
<section class="adf-grid-list-column-view" *ngIf="currentRootElement?.isExpanded">
<div class="adf-grid-list-single-column" *ngFor="let column of currentRootElement?.columns"
[style.width.%]="getColumnWith(currentRootElement)">
<div
class="adf-grid-list-single-column"
*ngFor="let column of currentRootElement?.columns"
[style.width.%]="getColumnWith(currentRootElement)"
>
<div class="adf-grid-list-column-view-item" *ngFor="let field of column?.fields">
<adf-form-field *ngIf="field" [field]="field"></adf-form-field>
</div>
@@ -62,10 +78,9 @@
<adf-form-field *ngIf="field" [field]="field"></adf-form-field>
</div>
</ng-template>
</div>
<div *ngIf="currentRootElement.type === 'dynamic-table'" class="adf-container-widget" >
<adf-form-field [field]="currentRootElement"></adf-form-field>
<div *ngIf="currentRootElement.type === 'dynamic-table'" class="adf-container-widget">
<adf-form-field [field]="currentRootElement"></adf-form-field>
</div>
</div>
</ng-template>
@@ -78,9 +93,9 @@ will be removed during future revisions
<mat-slide-toggle [(ngModel)]="debugMode">Debug mode</mat-slide-toggle>
<div *ngIf="debugMode">
<h4>Values</h4>
<pre>{{formDefinition.values | json}}</pre>
<pre>{{ formDefinition.values | json }}</pre>
<h4>Form</h4>
<pre>{{formDefinition.json | json}}</pre>
<pre>{{ formDefinition.json | json }}</pre>
</div>
</div>

35
lib/core/src/lib/identity-user-info/identity-user-info.component.html
View File

@@ -1,31 +1,38 @@
<div *ngIf="isLoggedIn"
<div
*ngIf="isLoggedIn"
id="userinfo_container"
[class.adf-userinfo-name-right]="showOnRight"
(keyup)="onKeyPress($event)"
class="adf-userinfo-container">
tabindex="0"
role="button"
class="adf-userinfo-container"
>
<span *ngIf="showName" id="adf-userinfo-identity-name-display" class="adf-userinfo-name">
{{identityUser | fullName}}
{{ identityUser | fullName }}
</span>
<button mat-button [matMenuTriggerFor]="menu" class="adf-userinfo-menu_button adf-identity-userinfo-button"
data-automation-id="adf-user-profile">
<button mat-button [matMenuTriggerFor]="menu" class="adf-userinfo-menu_button adf-identity-userinfo-button" data-automation-id="adf-user-profile">
<div class="adf-userinfo-button-profile" id="user-profile">
<div id="identity-user-image">
<div [innerHTML]="identityUser | usernameInitials:'adf-userinfo-pic'"></div>
<div [innerHTML]="identityUser | usernameInitials : 'adf-userinfo-pic'"></div>
</div>
</div>
</button>
<mat-menu #menu="matMenu" id="user-profile-lists" [xPosition]="menuPositionX" [yPosition]="menuPositionY"
[overlapTrigger]="false" class="adf-userinfo-menu adf-identity-userinfo-menu">
<mat-menu
#menu="matMenu"
id="user-profile-lists"
[xPosition]="menuPositionX"
[yPosition]="menuPositionY"
[overlapTrigger]="false"
class="adf-userinfo-menu adf-identity-userinfo-menu"
>
<mat-card class="adf-userinfo-card adf-identity-userinfo-card">
<mat-card-header class="adf-userinfo-card-header"
[style.background-image]="'url(' + bpmBackgroundImage + ')'">
<div class="mat-title" id="identity-username">{{identityUser | fullName}}</div>
<mat-card-header class="adf-userinfo-card-header" [style.background-image]="'url(' + bpmBackgroundImage + ')'">
<div class="mat-title" id="identity-username">{{ identityUser | fullName }}</div>
</mat-card-header>
<mat-card-content>
<div class="adf-userinfo-supporting-text">
<h2 id="identity-full-name"
class="adf-userinfo__detail-title">{{identityUser | fullName}}</h2>
<span id="identity-email"> {{identityUser.email}} </span>
<h2 id="identity-full-name" class="adf-userinfo__detail-title">{{ identityUser | fullName }}</h2>
<span id="identity-email"> {{ identityUser.email }} </span>
<a href="#/profile"> {{ 'USER_PROFILE.LABELS.MY_PROFILE' | translate }}</a>
</div>
</mat-card-content>

83
lib/core/src/lib/layout/components/sidenav-layout/sidenav-layout.component.spec.ts
View File

@@ -32,8 +32,7 @@ import { of } from 'rxjs';
@Component({
selector: 'adf-layout-container',
template: `
<ng-content select="[app-layout-navigation]"></ng-content>
template: ` <ng-content select="[app-layout-navigation]"></ng-content>
<ng-content select="[app-layout-content]"></ng-content>`
})
export class DummyLayoutContainerComponent {
@@ -49,32 +48,29 @@ export class DummyLayoutContainerComponent {
@Component({
selector: 'adf-test-component-for-sidenav',
template: `
<adf-sidenav-layout [sidenavMin]="70" [sidenavMax]="320" [stepOver]="600" [hideSidenav]="false">
template: ` <adf-sidenav-layout [sidenavMin]="70" [sidenavMax]="320" [stepOver]="600" [hideSidenav]="false">
<adf-sidenav-layout-header>
<ng-template let-toggleMenu="toggleMenu">
<div role="button" id="header-test" (click)="toggleMenu()" role="button" tabindex="0" (keyup.enter)="toggleMenu()"></div>
</ng-template>
</adf-sidenav-layout-header>
<adf-sidenav-layout-header>
<ng-template let-toggleMenu="toggleMenu">
<div id="header-test" (click)="toggleMenu()"></div>
</ng-template>
</adf-sidenav-layout-header>
<adf-sidenav-layout-navigation>
<ng-template let-isMenuMinimized="isMenuMinimized">
<div id="nav-test">{{ isMenuMinimized !== undefined ? 'variable-is-injected' : 'variable-is-not-injected' }}</div>
</ng-template>
</adf-sidenav-layout-navigation>
<adf-sidenav-layout-navigation>
<ng-template let-isMenuMinimized="isMenuMinimized">
<div id="nav-test">{{ isMenuMinimized !== undefined ? 'variable-is-injected' : 'variable-is-not-injected' }}</div>
</ng-template>
</adf-sidenav-layout-navigation>
<adf-sidenav-layout-content>
<ng-template>
<div id="content-test"></div>
</ng-template>
</adf-sidenav-layout-content>
</adf-sidenav-layout>`
<adf-sidenav-layout-content>
<ng-template>
<div id="content-test"></div>
</ng-template>
</adf-sidenav-layout-content>
</adf-sidenav-layout>`
})
export class SidenavLayoutTesterComponent {}
describe('SidenavLayoutComponent', () => {
let fixture: ComponentFixture<any>;
let mediaMatcher: MediaMatcher;
let mediaQueryList: any;
@@ -82,12 +78,7 @@ describe('SidenavLayoutComponent', () => {
beforeEach(() => {
TestBed.configureTestingModule({
imports: [
CommonModule,
PlatformModule,
LayoutModule,
MaterialModule
],
imports: [CommonModule, PlatformModule, LayoutModule, MaterialModule],
declarations: [
DummyLayoutContainerComponent,
SidenavLayoutComponent,
@@ -95,13 +86,8 @@ describe('SidenavLayoutComponent', () => {
SidenavLayoutHeaderDirective,
SidenavLayoutNavigationDirective
],
providers: [
MediaMatcher,
{ provide: UserPreferencesService, useValue: { select: () => of() } }
],
schemas: [
CUSTOM_ELEMENTS_SCHEMA
]
providers: [MediaMatcher, { provide: UserPreferencesService, useValue: { select: () => of() } }],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
});
mediaQueryList = {
mediaFn: null,
@@ -130,7 +116,6 @@ describe('SidenavLayoutComponent', () => {
});
describe('General behaviour', () => {
beforeEach(() => fixture.detectChanges());
it('should pass through input parameters', () => {
@@ -163,7 +148,6 @@ describe('SidenavLayoutComponent', () => {
});
describe('toggleMenu', () => {
beforeEach(() => fixture.detectChanges());
it('should toggle the isMenuMinimized if the mediaQueryList.matches is false (we are on desktop)', () => {
@@ -193,7 +177,6 @@ describe('SidenavLayoutComponent', () => {
});
describe('menuOpenState', () => {
it('should be true by default', (done) => {
fixture.detectChanges();
@@ -228,23 +211,17 @@ describe('SidenavLayoutComponent', () => {
});
describe('Template transclusion', () => {
let fixture: ComponentFixture<any>;
let mediaMatcher: MediaMatcher;
const mediaQueryList: any = {
matches: false,
addListener: () => {},
removeListener: () => {}
matches: false,
addListener: () => {},
removeListener: () => {}
};
beforeEach(() => {
TestBed.configureTestingModule({
imports: [
CommonModule,
PlatformModule,
LayoutModule,
MaterialModule
],
imports: [CommonModule, PlatformModule, LayoutModule, MaterialModule],
declarations: [
DummyLayoutContainerComponent,
SidenavLayoutTesterComponent,
@@ -253,10 +230,7 @@ describe('Template transclusion', () => {
SidenavLayoutHeaderDirective,
SidenavLayoutNavigationDirective
],
providers: [
MediaMatcher,
{ provide: UserPreferencesService, useValue: { select: () => of() } }
]
providers: [MediaMatcher, { provide: UserPreferencesService, useValue: { select: () => of() } }]
});
mediaMatcher = TestBed.inject(MediaMatcher);
spyOn(mediaMatcher, 'matchMedia').and.callFake(() => {
@@ -270,7 +244,6 @@ describe('Template transclusion', () => {
});
describe('adf-sidenav-layout-navigation', () => {
const injectedElementSelector = By.css('[data-automation-id="adf-layout-container"] #nav-test');
it('should contain the transcluded side navigation template', () => {
@@ -287,7 +260,6 @@ describe('Template transclusion', () => {
});
describe('adf-sidenav-layout-header', () => {
const outerHeaderSelector = By.css('.adf-sidenav-layout-full-space > #header-test');
const innerHeaderSelector = By.css('.adf-layout__content > #header-test');
@@ -311,7 +283,7 @@ describe('Template transclusion', () => {
expect(innerHeaderElement === null).toBe(false, 'Inner header should be shown');
});
it('should call through the layout container\'s toggleMenu method', () => {
it(`should call through the layout container's toggleMenu method`, () => {
mediaQueryList.matches = false;
fixture.detectChanges();
const layoutContainerComponent = fixture.debugElement.query(By.directive(DummyLayoutContainerComponent)).componentInstance;
@@ -325,7 +297,6 @@ describe('Template transclusion', () => {
});
describe('adf-sidenav-layout-content', () => {
const injectedElementSelector = By.css('[data-automation-id="adf-layout-container"] #content-test');
it('should contain the transcluded content template', () => {

104
lib/core/src/lib/notifications/components/notification-history.component.html
View File

@@ -1,31 +1,38 @@
<div (keyup)="onKeyPress($event)" class="adf-notification-history-container">
<button mat-button
[matMenuTriggerFor]="menu"
[attr.aria-label]="'NOTIFICATIONS.OPEN_HISTORY' | translate"
title="{{ 'NOTIFICATIONS.OPEN_HISTORY' | translate }}"
class="adf-notification-history-menu_button"
id="adf-notification-history-open-button"
(menuOpened)="onMenuOpened()">
<mat-icon matBadge="&#8288;"
[matBadgeHidden]="!notifications.length"
matBadgeColor="accent"
matBadgeSize="small">notifications</mat-icon>
<div (keyup)="onKeyPress($event)" tabindex="-1" role="button" class="adf-notification-history-container">
<button
mat-button
[matMenuTriggerFor]="menu"
[attr.aria-label]="'NOTIFICATIONS.OPEN_HISTORY' | translate"
title="{{ 'NOTIFICATIONS.OPEN_HISTORY' | translate }}"
class="adf-notification-history-menu_button"
id="adf-notification-history-open-button"
(menuOpened)="onMenuOpened()"
>
<mat-icon matBadge="&#8288;" [matBadgeHidden]="!notifications.length" matBadgeColor="accent" matBadgeSize="small">notifications</mat-icon>
</button>
<mat-menu #menu="matMenu"
[xPosition]="menuPositionX"
[yPosition]="menuPositionY"
id="adf-notification-history-menu"
class="adf-notification-history-menu">
<div class="adf-notification-history-list"
(click)="$event.stopPropagation()">
<mat-menu
#menu="matMenu"
[xPosition]="menuPositionX"
[yPosition]="menuPositionY"
id="adf-notification-history-menu"
class="adf-notification-history-menu"
>
<div
class="adf-notification-history-list"
role="button"
tabindex="0"
(keyup.enter)="$event.stopPropagation()"
(click)="$event.stopPropagation()"
>
<div mat-subheader role="menuitem">
<span>{{ 'NOTIFICATIONS.TITLE' | translate }}</span>
<button *ngIf="notifications.length"
id="adf-notification-history-mark-as-read"
mat-icon-button
title="{{ 'NOTIFICATIONS.MARK_AS_READ' | translate }}"
(click)="markAsRead()">
<button
*ngIf="notifications.length"
id="adf-notification-history-mark-as-read"
mat-icon-button
title="{{ 'NOTIFICATIONS.MARK_AS_READ' | translate }}"
(click)="markAsRead()"
>
<mat-icon>done_all</mat-icon>
</button>
</div>
@@ -34,27 +41,35 @@
<mat-list role="menuitem">
<ng-container *ngIf="notifications.length; else empty_list_template">
<mat-list-item *ngFor="let notification of paginatedNotifications"
class="adf-notification-history-menu-item"
(click)="onNotificationClick(notification)">
<div *ngIf="notification.initiator; else no_avatar"
matListAvatar
[outerHTML]="notification.initiator | usernameInitials:'adf-notification-initiator-pic'">
</div>
<mat-list-item
*ngFor="let notification of paginatedNotifications"
class="adf-notification-history-menu-item"
(click)="onNotificationClick(notification)"
>
<div
*ngIf="notification.initiator; else no_avatar"
matListAvatar
[outerHTML]="notification.initiator | usernameInitials : 'adf-notification-initiator-pic'"
></div>
<ng-template #no_avatar>
<mat-icon mat-list-icon
class="adf-notification-history-menu-initiator">{{notification.icon}}</mat-icon>
<mat-icon mat-list-icon class="adf-notification-history-menu-initiator">{{ notification.icon }}</mat-icon>
</ng-template>
<p class="adf-notification-history-menu-text adf-notification-history-menu-message"
*ngFor="let message of notification.messages"
mat-line [matTooltip]="message" matTooltipShowDelay="1000">{{ message }}</p>
<p class="adf-notification-history-menu-text adf-notification-history-menu-date"
mat-line> {{notification.datetime | adfTimeAgo}} </p>
<p
class="adf-notification-history-menu-text adf-notification-history-menu-message"
*ngFor="let message of notification.messages"
mat-line
[matTooltip]="message"
matTooltipShowDelay="1000"
>
{{ message }}
</p>
<p class="adf-notification-history-menu-text adf-notification-history-menu-date" mat-line>
{{ notification.datetime | adfTimeAgo }}
</p>
</mat-list-item>
</ng-container>
<ng-template #empty_list_template>
<mat-list-item id="adf-notification-history-component-no-message"
class="adf-notification-history-menu-no-message">
<mat-list-item id="adf-notification-history-component-no-message" class="adf-notification-history-menu-no-message">
<p mat-line>{{ 'NOTIFICATIONS.NO_MESSAGE' | translate }}</p>
</mat-list-item>
</ng-template>
@@ -62,11 +77,8 @@
<mat-divider></mat-divider>
<div class="adf-notification-history-load-more"
role="menuitem"
*ngIf="hasMoreNotifications()">
<button mat-button
(click)="loadMore()">
<div class="adf-notification-history-load-more" role="menuitem" *ngIf="hasMoreNotifications()">
<button mat-button (click)="loadMore()">
{{ 'NOTIFICATIONS.LOAD_MORE' | translate }}
</button>
</div>

2
lib/core/src/lib/viewer/components/img-viewer.component.html
View File

@@ -2,7 +2,7 @@
(keydown)="onKeyDown($event)"
class="adf-image-container"
tabindex="0"
role="img"
role="button"
[attr.aria-label]="fileName"
data-automation-id="adf-image-container">
<img #image id="viewer-image"