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",
"INVALID_FORMAT": "End Date invalid"
}
},
"ARIA_LABEL": {
"NUMBER_INPUT": "Number input"
}
},
"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">
<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">
{{ 'SEARCH.DATE_RANGE_ADVANCED.OPTIONS.ANYTIME' | translate }}
</mat-radio-button>
</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">
{{ 'SEARCH.DATE_RANGE_ADVANCED.OPTIONS.IN_LAST' | translate }}
</mat-radio-button>
<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-form-field>
<mat-form-field class="adf-search-date-range-form-field">
@ -21,7 +24,7 @@
</mat-select>
</mat-form-field>
</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">
{{ 'SEARCH.DATE_RANGE_ADVANCED.OPTIONS.BETWEEN' | translate }}
</mat-radio-button>
@ -42,4 +45,4 @@
</mat-form-field>
</span>
</mat-radio-group>
</ng-container>
</div>

53
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,44 +1,21 @@
.adf-search-date-range-advanced {
.mat-radio-group {
display: flex;
flex-direction: column;
padding: 5px;
}
adf-search-date-range-advanced {
.adf-search-date-range-container {
margin-top: 20px;
padding: 10px;
.mat-radio-button {
margin: 5px;
}
&-row {
display: flex;
flex-direction: row;
padding-bottom: 15px;
align-items: center;
.adf-search-date-range-horizontal-container {
display: flex;
flex-direction: row;
padding-bottom: 15px;
.adf-search-date-range-input-field {
width: 75px;
}
.adf-search-date-range-input-field {
width: 75px;
}
.adf-search-date-range-form-field {
padding-left: 10px;
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;
}
.adf-search-date-range-form-field {
padding-left: 10px;
flex: 1;
}
}
}