inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-31 17:38:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

calendar card item a11y fixes (#5563)

Browse Source
This commit is contained in:
Denys Vuika
2020-03-24 11:02:33 +00:00
committed by GitHub
parent 144da83d0e
commit 772188c13d
2 changed files with 13 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,9 @@
<div class="adf-sr-only" [attr.data-automation-id]="'card-' + property.type + '-value-' + property.key">{{'CORE.METADATA.ACCESSIBILITY.DATEPICKER' | translate}}</div> <div
<div [attr.data-automation-id]="'card-dateitem-label-' + property.key" class="adf-property-label" *ngIf="showProperty() || isEditable()">{{ property.label | translate }}</div> *ngIf="showProperty() || isEditable()"
[attr.data-automation-id]="'card-dateitem-label-' + property.key"
class="adf-property-label"
>{{ property.label | translate }}</div>
<div class="adf-property-value"> <div class="adf-property-value">
<span *ngIf="!isEditable()" [attr.data-automation-id]="'card-' + property.type + '-value-' + property.key"> <span *ngIf="!isEditable()" [attr.data-automation-id]="'card-' + property.type + '-value-' + property.key">
<span [attr.data-automation-id]="'card-dateitem-' + property.key"> <span [attr.data-automation-id]="'card-dateitem-' + property.key">
@@ -12,7 +16,10 @@
class="adf-datepicker-toggle" class="adf-datepicker-toggle"
[attr.data-automation-id]="'datepicker-label-toggle-' + property.key" [attr.data-automation-id]="'datepicker-label-toggle-' + property.key"
(click)="showDatePicker()"> (click)="showDatePicker()">
<span [attr.data-automation-id]="'card-' + property.type + '-value-' + property.key" *ngIf="showProperty(); else elseEmptyValueBlock">{{ property.displayValue }}</span> <span
*ngIf="showProperty(); else elseEmptyValueBlock"
[attr.data-automation-id]="'card-' + property.type + '-value-' + property.key"
>{{ property.displayValue }}</span>
</span> </span>
<mat-icon *ngIf="showClearAction()" <mat-icon *ngIf="showClearAction()"
@@ -24,6 +31,7 @@
</mat-icon> </mat-icon>
<mat-datetimepicker-toggle <mat-datetimepicker-toggle
[attr.tabindex]="-1"
[attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate" [attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
[attr.data-automation-id]="'datepickertoggle-' + property.key" [attr.data-automation-id]="'datepickertoggle-' + property.key"
[for]="datetimePicker"> [for]="datetimePicker">
@@ -31,10 +39,10 @@
</div> </div>
<input class="adf-invisible-date-input" <input class="adf-invisible-date-input"
[attr.tabIndex]="-1"
[matDatetimepicker]="datetimePicker" [matDatetimepicker]="datetimePicker"
[value]="valueDate" [value]="valueDate"
(dateChange)="onDateChanged($event)" (dateChange)="onDateChanged($event)">
[attr.aria-describedby]="'card-' + property.type + '-value-' + property.key">
<mat-datetimepicker #datetimePicker <mat-datetimepicker #datetimePicker
[type]="property.type" [type]="property.type"

11
lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.scss
View File

@@ -1,5 +1,4 @@
@mixin adf-card-view-dateitem-theme($theme) { @mixin adf-card-view-dateitem-theme($theme) {
.adf { .adf {
&-invisible-date-input { &-invisible-date-input {
height: 2px; height: 2px;
@@ -56,14 +55,4 @@
} }
} }
} }
.adf-sr-only {
display: block;
height: 1px;
width: 1px;
clip: rect(1 1 1 1);
clip: rect(1px 1px 1px 1px);
overflow: hidden;
}
} }