inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-26 17:24:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ACS-5348] Fixed accessibility issues for the Date facet (#8982)

Browse Source 
* [ACS-5348] fixed accessibility issues

* [ACS-5348] removed .mat customizations
This commit is contained in:
Mykyta Maliarchuk 2023-10-10 14:46:09 +02:00 committed by GitHub
parent ce549249e5
commit f6d48cb85c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 27 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
lib/content-services/src/lib/i18n/en.json
View File

@ -450,6 +450,9 @@
"REQUIRED": "End Date required", "REQUIRED": "End Date required",
"INVALID_FORMAT": "End Date invalid" "INVALID_FORMAT": "End Date invalid"
} }
},
"ARIA_LABEL": {
"NUMBER_INPUT": "Number input"
} }
}, },
"SEARCH_PROPERTIES": { "SEARCH_PROPERTIES": {

15
lib/content-services/src/lib/search/components/search-date-range-advanced-tabbed/search-date-range-advanced/search-date-range-advanced.component.html
View File

@ -1,16 +1,19 @@
<ng-container [formGroup]="form"> <div class="adf-search-date-range-container" [formGroup]="form">
<mat-radio-group formControlName="dateRangeType"> <mat-radio-group formControlName="dateRangeType">
<span class="adf-search-date-range-horizontal-container"> <span class="adf-search-date-range-container-row">
<mat-radio-button [value]="DateRangeType.ANY" data-automation-id="date-range-advanced-anytime"> <mat-radio-button [value]="DateRangeType.ANY" data-automation-id="date-range-advanced-anytime">
{{ 'SEARCH.DATE_RANGE_ADVANCED.OPTIONS.ANYTIME' | translate }} {{ 'SEARCH.DATE_RANGE_ADVANCED.OPTIONS.ANYTIME' | translate }}
</mat-radio-button> </mat-radio-button>
</span> </span>
<span class="adf-search-date-range-horizontal-container"> <span class="adf-search-date-range-container-row">
<mat-radio-button [value]="DateRangeType.IN_LAST" data-automation-id="date-range-advanced-in-last"> <mat-radio-button [value]="DateRangeType.IN_LAST" data-automation-id="date-range-advanced-in-last">
{{ 'SEARCH.DATE_RANGE_ADVANCED.OPTIONS.IN_LAST' | translate }} {{ 'SEARCH.DATE_RANGE_ADVANCED.OPTIONS.IN_LAST' | translate }}
</mat-radio-button> </mat-radio-button>
<mat-form-field class="adf-search-date-range-form-field adf-search-date-range-input-field"> <mat-form-field class="adf-search-date-range-form-field adf-search-date-range-input-field">
<input matInput type="number" min="1" formControlName="inLastValue" data-automation-id="date-range-advanced-in-last-input" (input)="narrowDownAllowedCharacters($event)" (keydown)="preventIncorrectNumberCharacters($event)"> <input matInput [attr.aria-label]="'SEARCH.DATE_RANGE_ADVANCED.ARIA_LABEL.NUMBER_INPUT' | translate"
type="number" min="1" formControlName="inLastValue"
data-automation-id="date-range-advanced-in-last-input" (input)="narrowDownAllowedCharacters($event)"
(keydown)="preventIncorrectNumberCharacters($event)">
<mat-error *ngIf="form.controls.inLastValue.errors?.required">{{ 'SEARCH.DATE_RANGE_ADVANCED.ERROR.IN_LAST' | translate }}</mat-error> <mat-error *ngIf="form.controls.inLastValue.errors?.required">{{ 'SEARCH.DATE_RANGE_ADVANCED.ERROR.IN_LAST' | translate }}</mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field class="adf-search-date-range-form-field"> <mat-form-field class="adf-search-date-range-form-field">
@ -21,7 +24,7 @@
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
</span> </span>
<span class="adf-search-date-range-horizontal-container"> <span class="adf-search-date-range-container-row">
<mat-radio-button [value]="DateRangeType.BETWEEN" data-automation-id="date-range-advanced-between"> <mat-radio-button [value]="DateRangeType.BETWEEN" data-automation-id="date-range-advanced-between">
{{ 'SEARCH.DATE_RANGE_ADVANCED.OPTIONS.BETWEEN' | translate }} {{ 'SEARCH.DATE_RANGE_ADVANCED.OPTIONS.BETWEEN' | translate }}
</mat-radio-button> </mat-radio-button>
@ -42,4 +45,4 @@
</mat-form-field> </mat-form-field>
</span> </span>
</mat-radio-group> </mat-radio-group>
</ng-container> </div>

35
lib/content-services/src/lib/search/components/search-date-range-advanced-tabbed/search-date-range-advanced/search-date-range-advanced.component.scss
View File

@ -1,18 +1,13 @@
.adf-search-date-range-advanced { adf-search-date-range-advanced {
.mat-radio-group { .adf-search-date-range-container {
display: flex; margin-top: 20px;
flex-direction: column; padding: 10px;
padding: 5px;
}
.mat-radio-button { &-row {
margin: 5px;
}
.adf-search-date-range-horizontal-container {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
padding-bottom: 15px; padding-bottom: 15px;
align-items: center;
.adf-search-date-range-input-field { .adf-search-date-range-input-field {
width: 75px; width: 75px;
@ -21,24 +16,6 @@
.adf-search-date-range-form-field { .adf-search-date-range-form-field {
padding-left: 10px; padding-left: 10px;
flex: 1; flex: 1;
.mat-form-field-wrapper {
padding-bottom: 0;
margin-bottom: 1.25em;
border: 1px solid var(--adf-theme-mat-grey-color-a400);
border-radius: 5px;
.mat-form-field-infix {
border: 0;
}
.mat-form-field-underline {
display: none;
}
.mat-form-field-subscript-wrapper {
margin-top: 2em;
}
} }
} }
} }