From 160b12993f86cf6ee27c2833819b3f68f275e890 Mon Sep 17 00:00:00 2001 From: Mykyta Maliarchuk <84377976+nikita-web-ua@users.noreply.github.com> Date: Fri, 24 Oct 2025 12:03:16 +0200 Subject: [PATCH] [ACS-10271][ACS-10236] a11y - Search filters have no visible labels (#11302) * [ACS-10271][ACS-10236] a11y - Search filters have no visible labels * [ACS-10271] sonar fix * [ACS-10271] cr fix --- lib/content-services/src/lib/i18n/en.json | 13 +- ...rch-chip-autocomplete-input.component.html | 1 + .../search-date-range.component.html | 8 +- .../search-date-range.component.scss | 8 - .../search-filter-chips.component.scss | 4 - .../search-properties.component.html | 101 ++++++------ .../search-properties.component.scss | 145 ++++-------------- .../search-properties.component.ts | 16 +- 8 files changed, 121 insertions(+), 175 deletions(-) diff --git a/lib/content-services/src/lib/i18n/en.json b/lib/content-services/src/lib/i18n/en.json index 6dd642b957..bfd41e488f 100644 --- a/lib/content-services/src/lib/i18n/en.json +++ b/lib/content-services/src/lib/i18n/en.json @@ -428,7 +428,8 @@ "IN_LAST_LABELS": { "DAYS": "Days", "WEEKS": "Weeks", - "MONTHS": "Months" + "MONTHS": "Months", + "QUANTITY": "Quantity" }, "IN_LAST_DISPLAY_LABELS": { "DAYS": "In the last {{value}} days", @@ -437,7 +438,8 @@ }, "BETWEEN_PLACEHOLDERS": { "START_DATE": "Start Date", - "END_DATE": "End Date" + "END_DATE": "End Date", + "DATE_RANGE": "Date Range" }, "ERROR": { "IN_LAST": "Value required", @@ -468,7 +470,12 @@ "GB": "GB" }, "FILE_TYPE": "File Type", - "FILE_TYPE_PLACEHOLDER": "Add file type" + "FILE_TYPE_PLACEHOLDER": "Add file type", + "ACCESSIBILITY": { + "CONDITION": "Condition", + "SIZE_VALUE": "File size value", + "UNIT": "Unit" + } } }, "PERMISSION": { diff --git a/lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.html b/lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.html index b6b86e5c1c..6785d7d21e 100644 --- a/lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.html +++ b/lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.html @@ -1,4 +1,5 @@ + {{ placeholder | translate }} {{ 'SEARCH.DATE_RANGE_ADVANCED.OPTIONS.IN_LAST' | translate }} - + + {{ 'SEARCH.DATE_RANGE_ADVANCED.IN_LAST_LABELS.QUANTITY' | translate }} {{ 'SEARCH.DATE_RANGE_ADVANCED.ERROR.IN_LAST' | translate }} + {{ 'SEARCH.SEARCH_PROPERTIES.ACCESSIBILITY.UNIT' | translate }} {{ 'SEARCH.DATE_RANGE_ADVANCED.IN_LAST_LABELS.DAYS' | translate }} {{ 'SEARCH.DATE_RANGE_ADVANCED.IN_LAST_LABELS.WEEKS' | translate }} @@ -28,7 +31,8 @@ {{ 'SEARCH.DATE_RANGE_ADVANCED.OPTIONS.BETWEEN' | translate }} - + + {{ 'SEARCH.DATE_RANGE_ADVANCED.BETWEEN_PLACEHOLDERS.DATE_RANGE' | translate }} diff --git a/lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range/search-date-range.component.scss b/lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range/search-date-range.component.scss index 6aa30f4f48..374869e025 100644 --- a/lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range/search-date-range.component.scss +++ b/lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range/search-date-range.component.scss @@ -32,14 +32,6 @@ adf-search-date-range { padding-left: 10px; flex: 1; margin-bottom: 12px; - - #{ms.$mat-form-field-flex} { - align-items: center; - - #{ms.$mat-form-field-infix} { - padding: 0.375em 0 4px; - } - } } } } diff --git a/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.scss b/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.scss index 3e86957c53..1c030ac9f4 100644 --- a/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.scss +++ b/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.scss @@ -44,10 +44,6 @@ min-width: 320px; border-radius: 12px; - &:has(.adf-search-properties-file-size-operator) { - min-width: 365px; - } - @include mat.elevation(2); } } diff --git a/lib/content-services/src/lib/search/components/search-properties/search-properties.component.html b/lib/content-services/src/lib/search/components/search-properties/search-properties.component.html index 8a42b7c190..175a66082a 100644 --- a/lib/content-services/src/lib/search/components/search-properties/search-properties.component.html +++ b/lib/content-services/src/lib/search/components/search-properties/search-properties.component.html @@ -1,48 +1,61 @@
-
-
+ +
+ + {{ 'SEARCH.SEARCH_PROPERTIES.ACCESSIBILITY.CONDITION' | translate }} + + + {{ fileSizeOperator | translate }} + + + + + {{ 'SEARCH.SEARCH_PROPERTIES.ACCESSIBILITY.SIZE_VALUE' | translate }} + + + + {{ 'SEARCH.SEARCH_PROPERTIES.ACCESSIBILITY.UNIT' | translate }} + + + {{ fileSizeUnit.abbreviation | translate }} + + + +
+

{{ 'SEARCH.SEARCH_PROPERTIES.FILE_TYPE' | translate }}

+ placeholder="SEARCH.SEARCH_PROPERTIES.FILE_TYPE"/> diff --git a/lib/content-services/src/lib/search/components/search-properties/search-properties.component.scss b/lib/content-services/src/lib/search/components/search-properties/search-properties.component.scss index 103094b47f..06155b837e 100644 --- a/lib/content-services/src/lib/search/components/search-properties/search-properties.component.scss +++ b/lib/content-services/src/lib/search/components/search-properties/search-properties.component.scss @@ -3,133 +3,54 @@ adf-search-properties { .adf-search-properties-form { - .adf-search-properties-file-size-container { - .adf-search-properties-file-size-label { - margin-top: 4px; - display: block; - } + fieldset { + padding: 0; + margin: 0; + border: none; + } - #{ms.$mat-text-field-no-label} { - #{ms.$mat-form-field-infix} { - padding-top: 9px; - padding-bottom: 9px; - display: inline-block; - } - } + .adf-search-properties-file-size-label { + margin-top: 4px; + margin-bottom: 10px; + display: block; + } + + .adf-search-properties-file-type-label { + margin-top: 10px; + margin-bottom: 6px; + } + + .adf-search-properties-file-size-container { + width: 370px; + display: flex; #{ms.$mat-form-field-infix} { height: 37.5px; min-height: 37.5px; - display: inline-block; + padding-top: 9px; } - #{ms.$mat-select-trigger} { - height: 17.5px; - } - - #{ms.$mat-select-arrow-wrapper} { - width: 16px; - } - - #{ms.$mat-line-ripple} { - &::before { - display: none; - } - } - - #{ms.$mat-select-arrow} { - margin-left: 5px; - } - - #{ms.$mat-form-field} { - margin-bottom: 18px; - } - } - - adf-search-chip-autocomplete-input { - display: block; - #{ms.$mat-text-field-outlined} { - &-start, - &-end { - border-top: 1px solid var(--adf-theme-mat-grey-color-a400); - border-bottom: 1px solid var(--adf-theme-mat-grey-color-a400); - } - - &-start { - border-left: 1px solid var(--adf-theme-mat-grey-color-a400); - } - - &-end { - border-right: 1px solid var(--adf-theme-mat-grey-color-a400); - } + padding: 0 9px; } - #{ms.$mat-focused} { - #{ms.$mat-text-field-outlined} { - outline: 2px auto -webkit-focus-ring-color; + .adf-search-properties-form-field { + width: 100%; + display: block; + flex: 1; + + &:nth-child(1) { + min-width: 115px; } - } - #{ms.$mat-form-field-appearance-outline} { - #{ms.$mat-text-field-outlined-thick} { - #{ms.$mat-text-field-outlined} { - &-start, - &-end { - border-width: 1px; - } - } + &:nth-child(2) { + margin: 0 8px; } - } - #{ms.$mat-notched-outline-leading} { - border-color: var(--adf-theme-foreground-text-color-027); - } - - #{ms.$mat-notched-outline-trailing} { - border-color: var(--adf-theme-foreground-text-color-027); + &:nth-child(3) { + max-width: 90px; + } } } } - - input, - .mat-form-field-infix.mat-form-field-infix { - height: 25px; - border: 1px solid var(--adf-theme-mat-grey-color-a400); - border-radius: 5px; - margin-top: 5px; - padding: 5px; - font-size: 14px; - color: var(--adf-theme-foreground-text-color); - margin-left: 8px; - margin-right: 8px; - } - - .adf-search-properties-file-size-operator, - .adf-search-properties-file-size-unit { - #{ms.$mat-form-field-infix} { - border: 1px solid var(--adf-theme-mat-grey-color-a400); - border-radius: 5px; - padding: 9px; - } - - &#{ms.$mat-focused} { - #{ms.$mat-form-field-infix} { - outline: 2px auto -webkit-focus-ring-color; - } - } - } - - .adf-search-properties-file-size-unit { - width: 78px; - } - - .adf-search-properties-file-type-label { - margin-top: 10px; - margin-bottom: 6px; - } -} - -.adf-search-filter-chip-menu-panel-properties { - max-width: unset; } diff --git a/lib/content-services/src/lib/search/components/search-properties/search-properties.component.ts b/lib/content-services/src/lib/search/components/search-properties/search-properties.component.ts index 1e3d892e59..9ceeb0ceaf 100644 --- a/lib/content-services/src/lib/search/components/search-properties/search-properties.component.ts +++ b/lib/content-services/src/lib/search/components/search-properties/search-properties.component.ts @@ -30,13 +30,22 @@ import { AutocompleteOption } from '../../models/autocomplete-option.interface'; import { CommonModule } from '@angular/common'; import { MatFormFieldModule } from '@angular/material/form-field'; import { MatSelectModule } from '@angular/material/select'; +import { MatInputModule } from '@angular/material/input'; import { SearchChipAutocompleteInputComponent } from '../search-chip-autocomplete-input'; import { map } from 'rxjs/operators'; import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; @Component({ selector: 'adf-search-properties', - imports: [CommonModule, ReactiveFormsModule, TranslatePipe, MatFormFieldModule, MatSelectModule, SearchChipAutocompleteInputComponent], + imports: [ + CommonModule, + ReactiveFormsModule, + TranslatePipe, + MatFormFieldModule, + MatSelectModule, + MatInputModule, + SearchChipAutocompleteInputComponent + ], templateUrl: './search-properties.component.html', styleUrls: ['./search-properties.component.scss'], encapsulation: ViewEncapsulation.None @@ -97,7 +106,10 @@ export class SearchPropertiesComponent implements OnInit, AfterViewChecked, Sear private readonly destroyRef = inject(DestroyRef); - constructor(private formBuilder: FormBuilder, private translateService: TranslateService) {} + constructor( + private readonly formBuilder: FormBuilder, + private readonly translateService: TranslateService + ) {} ngOnInit() { if (this.settings) {