From 4683df431cd88494b423a5c4a58397f01eeb6827 Mon Sep 17 00:00:00 2001 From: Yura Bondarenko Date: Mon, 31 May 2021 14:37:29 +0200 Subject: [PATCH 01/14] 79730: Exclude search facet link from tablist --- .../search-facet-option/search-facet-option.component.html | 1 + .../search-facet-selected-option.component.html | 1 + 2 files changed, 2 insertions(+) diff --git a/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.html b/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.html index cf4876e34f..055a2d2500 100644 --- a/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.html +++ b/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.html @@ -1,4 +1,5 @@ diff --git a/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-selected-option/search-facet-selected-option.component.html b/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-selected-option/search-facet-selected-option.component.html index 4bcfc02966..411dc766d0 100644 --- a/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-selected-option/search-facet-selected-option.component.html +++ b/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-selected-option/search-facet-selected-option.component.html @@ -1,4 +1,5 @@ From ffb320373debd251ef146e2450a9fa7a2cd3f9d8 Mon Sep 17 00:00:00 2001 From: Yura Bondarenko Date: Mon, 31 May 2021 14:41:36 +0200 Subject: [PATCH 02/14] 79730: Add labels around facet checkbox inputs --- .../search-facet-option.component.html | 8 +++++--- .../search-facet-selected-option.component.html | 2 ++ 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.html b/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.html index 055a2d2500..e2e57e7370 100644 --- a/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.html +++ b/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.html @@ -2,10 +2,12 @@ [tabIndex]="-1" [routerLink]="[searchLink]" [queryParams]="addQueryParams" queryParamsHandling="merge"> - - + + {{filterValue.count}} diff --git a/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-selected-option/search-facet-selected-option.component.html b/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-selected-option/search-facet-selected-option.component.html index 411dc766d0..d6cb7a3d79 100644 --- a/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-selected-option/search-facet-selected-option.component.html +++ b/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-selected-option/search-facet-selected-option.component.html @@ -2,8 +2,10 @@ [tabIndex]="-1" [routerLink]="[searchLink]" [queryParams]="removeQueryParams" queryParamsHandling="merge"> + From 5b490203b2453477a52d90132a71ea61576dd7ac Mon Sep 17 00:00:00 2001 From: Yura Bondarenko Date: Tue, 1 Jun 2021 09:29:01 +0200 Subject: [PATCH 03/14] 79730: Add labels around FilterInputSuggestionsComponent inputs --- .../org-unit-input-suggestions.component.html | 2 +- .../filter-input-suggestions.component.html | 25 ++++++++---- .../input-suggestions.component.ts | 9 ++++- .../search-authority-filter.component.html | 3 +- .../search-hierarchy-filter.component.html | 3 +- .../search-text-filter.component.html | 3 +- src/assets/i18n/en.json5 | 40 +++++++++++++++++++ 7 files changed, 71 insertions(+), 14 deletions(-) diff --git a/src/app/entity-groups/research-entities/submission/item-list-elements/org-unit/org-unit-suggestions/org-unit-input-suggestions.component.html b/src/app/entity-groups/research-entities/submission/item-list-elements/org-unit/org-unit-suggestions/org-unit-input-suggestions.component.html index e177b2b561..87a422e7db 100644 --- a/src/app/entity-groups/research-entities/submission/item-list-elements/org-unit/org-unit-suggestions/org-unit-input-suggestions.component.html +++ b/src/app/entity-groups/research-entities/submission/item-list-elements/org-unit/org-unit-suggestions/org-unit-input-suggestions.component.html @@ -21,4 +21,4 @@ - \ No newline at end of file + diff --git a/src/app/shared/input-suggestions/filter-suggestions/filter-input-suggestions.component.html b/src/app/shared/input-suggestions/filter-suggestions/filter-input-suggestions.component.html index 7a9481f2f1..f1b0ba9023 100644 --- a/src/app/shared/input-suggestions/filter-suggestions/filter-input-suggestions.component.html +++ b/src/app/shared/input-suggestions/filter-suggestions/filter-input-suggestions.component.html @@ -3,13 +3,22 @@ (keydown.arrowdown)="shiftFocusDown($event)" (keydown.arrowup)="shiftFocusUp($event)" (keydown.esc)="close()" (dsClickOutside)="close();"> - - + + + + +
@@ -19,4 +28,4 @@
- \ No newline at end of file + diff --git a/src/app/shared/input-suggestions/input-suggestions.component.ts b/src/app/shared/input-suggestions/input-suggestions.component.ts index c48dcfb831..7e05dbcc8c 100644 --- a/src/app/shared/input-suggestions/input-suggestions.component.ts +++ b/src/app/shared/input-suggestions/input-suggestions.component.ts @@ -53,6 +53,11 @@ export class InputSuggestionsComponent implements ControlValueAccessor, OnChange */ @Input() valid = true; + /** + * Label for the input field. Used for screen readers. + */ + @Input() label? = ''; + /** * Output for when the form is submitted */ @@ -106,10 +111,10 @@ export class InputSuggestionsComponent implements ControlValueAccessor, OnChange @Input() disabled = false; propagateChange = (_: any) => { /* Empty implementation */ - } + }; propagateTouch = (_: any) => { /* Empty implementation */ - } + }; /** * When any of the inputs change, check if we should still show the suggestions diff --git a/src/app/shared/search/search-filters/search-filter/search-authority-filter/search-authority-filter.component.html b/src/app/shared/search/search-filters/search-filter/search-authority-filter/search-authority-filter.component.html index 5e6bcfaf8b..4a7f769f21 100644 --- a/src/app/shared/search/search-filters/search-filter/search-authority-filter/search-authority-filter.component.html +++ b/src/app/shared/search/search-filters/search-filter/search-authority-filter/search-authority-filter.component.html @@ -16,7 +16,8 @@ Date: Tue, 1 Jun 2021 09:45:17 +0200 Subject: [PATCH 04/14] 79730: Add labels around date range inputs --- .../search-range-filter.component.html | 31 +++++++++++++------ src/assets/i18n/en.json5 | 8 +++-- 2 files changed, 28 insertions(+), 11 deletions(-) diff --git a/src/app/shared/search/search-filters/search-filter/search-range-filter/search-range-filter.component.html b/src/app/shared/search/search-filters/search-filter/search-range-filter/search-range-filter.component.html index 8c4fe2b174..e4e8152e97 100644 --- a/src/app/shared/search/search-filters/search-filter/search-range-filter/search-range-filter.component.html +++ b/src/app/shared/search/search-filters/search-filter/search-range-filter/search-range-filter.component.html @@ -3,18 +3,31 @@
- +
- +
- +
diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5 index e9f22fd52c..90aac07a54 100644 --- a/src/assets/i18n/en.json5 +++ b/src/assets/i18n/en.json5 @@ -2914,9 +2914,13 @@ "search.filters.filter.dateIssued.head": "Date", - "search.filters.filter.dateIssued.max.placeholder": "Minimum Date", + "search.filters.filter.dateIssued.max.placeholder": "Maximum Date", - "search.filters.filter.dateIssued.min.placeholder": "Maximum Date", + "search.filters.filter.dateIssued.max.label": "End", + + "search.filters.filter.dateIssued.min.placeholder": "Minimum Date", + + "search.filters.filter.dateIssued.min.label": "Start", "search.filters.filter.dateSubmitted.head": "Date submitted", From abe26ce9f828daf5a63e18cb79b2270dfe430cbe Mon Sep 17 00:00:00 2001 From: Yura Bondarenko Date: Tue, 1 Jun 2021 12:42:40 +0200 Subject: [PATCH 05/14] 79730: Keyboard navigation for expandable filter facets --- .../search-filter.component.html | 12 +++--- .../search-filter.component.scss | 38 ++++++++++++++++--- .../search-filter/search-filter.component.ts | 24 ++++++++++++ 3 files changed, 63 insertions(+), 11 deletions(-) diff --git a/src/app/shared/search/search-filters/search-filter/search-filter.component.html b/src/app/shared/search/search-filters/search-filter/search-filter.component.html index eb2105f4e7..b71111de6a 100644 --- a/src/app/shared/search/search-filters/search-filter/search-filter.component.html +++ b/src/app/shared/search/search-filters/search-filter/search-filter.component.html @@ -1,17 +1,19 @@ -
-
+
+
+
+ class="search-filter-wrapper" [ngClass]="{ 'closed' : closed, 'notab': notab }"> diff --git a/src/app/shared/search/search-filters/search-filter/search-filter.component.scss b/src/app/shared/search/search-filters/search-filter/search-filter.component.scss index 518e7c9d5f..7e2631b55f 100644 --- a/src/app/shared/search/search-filters/search-filter/search-filter.component.scss +++ b/src/app/shared/search/search-filters/search-filter/search-filter.component.scss @@ -1,10 +1,36 @@ :host .facet-filter { - border: 1px solid var(--bs-light); - cursor: pointer; - .search-filter-wrapper.closed { - overflow: hidden; + border: 1px solid var(--bs-light); + cursor: pointer; + line-height: 0; + + .search-filter-wrapper { + line-height: var(--bs-line-height-base); + &.closed { + overflow: hidden; } - .filter-toggle { - line-height: var(--bs-line-height-base); + &.notab { + visibility: hidden; } + } + + .filter-toggle { + line-height: var(--bs-line-height-base); + text-align: right; + position: relative; + top: -0.125rem; // Fix weird outline shape in Chrome + } + + > button { + appearance: none; + border: 0; + padding: 0; + background: transparent; + width: 100%; + outline: none !important; + } + + &.focus { + outline: none; + box-shadow: var(--bs-input-btn-focus-box-shadow); + } } diff --git a/src/app/shared/search/search-filters/search-filter/search-filter.component.ts b/src/app/shared/search/search-filters/search-filter/search-filter.component.ts index 31ace10a7d..23cd92a601 100644 --- a/src/app/shared/search/search-filters/search-filter/search-filter.component.ts +++ b/src/app/shared/search/search-filters/search-filter/search-filter.component.ts @@ -37,6 +37,16 @@ export class SearchFilterComponent implements OnInit { */ closed: boolean; + /** + * True when the filter controls should be hidden & removed from the tablist + */ + notab: boolean; + + /** + * True when the filter toggle button is focused + */ + focusBox: boolean = false; + /** * Emits true when the filter is currently collapsed in the store */ @@ -112,6 +122,9 @@ export class SearchFilterComponent implements OnInit { if (event.fromState === 'collapsed') { this.closed = false; } + if (event.toState === 'collapsed') { + this.notab = true; + } } /** @@ -122,6 +135,17 @@ export class SearchFilterComponent implements OnInit { if (event.toState === 'collapsed') { this.closed = true; } + if (event.fromState === 'collapsed') { + this.notab = false; + } + } + + get regionId(): string { + return `search-filter-region-${this.constructor['ɵcmp'].id}`; + } + + get toggleId(): string { + return `search-filter-toggle-${this.constructor['ɵcmp'].id}`; } /** From cb3f5ad259a5088b2bf70659a00559d67ec8ff58 Mon Sep 17 00:00:00 2001 From: Yura Bondarenko Date: Tue, 1 Jun 2021 13:04:49 +0200 Subject: [PATCH 06/14] 79730: Add null href to more/collapse toggle links --- .../search-authority-filter.component.html | 10 ++++++---- .../search-boolean-filter.component.html | 10 ++++++---- .../search-hierarchy-filter.component.html | 10 ++++++---- .../search-text-filter.component.html | 10 ++++++---- 4 files changed, 24 insertions(+), 16 deletions(-) diff --git a/src/app/shared/search/search-filters/search-filter/search-authority-filter/search-authority-filter.component.html b/src/app/shared/search/search-filters/search-filter/search-authority-filter/search-authority-filter.component.html index 4a7f769f21..44aed494e3 100644 --- a/src/app/shared/search/search-filters/search-filter/search-authority-filter/search-authority-filter.component.html +++ b/src/app/shared/search/search-filters/search-filter/search-authority-filter/search-authority-filter.component.html @@ -8,11 +8,13 @@
{{"search.filters.filter.show-more" - | translate}} + (click)="showMore()" href="javascript:void(0);"> + {{"search.filters.filter.show-more" | translate}} + {{"search.filters.filter.show-less" - | translate}} + (click)="showFirstPageOnly()" href="javascript:void(0);"> + {{"search.filters.filter.show-less" | translate}} +
{{"search.filters.filter.show-more" - | translate}} + (click)="showMore()" href="javascript:void(0);"> + {{"search.filters.filter.show-more" | translate}} + {{"search.filters.filter.show-less" - | translate}} + (click)="showFirstPageOnly()" href="javascript:void(0);"> + {{"search.filters.filter.show-less" | translate}} +
diff --git a/src/app/shared/search/search-filters/search-filter/search-hierarchy-filter/search-hierarchy-filter.component.html b/src/app/shared/search/search-filters/search-filter/search-hierarchy-filter/search-hierarchy-filter.component.html index 2154ae2e24..49ca6fe3fd 100644 --- a/src/app/shared/search/search-filters/search-filter/search-hierarchy-filter/search-hierarchy-filter.component.html +++ b/src/app/shared/search/search-filters/search-filter/search-hierarchy-filter/search-hierarchy-filter.component.html @@ -8,11 +8,13 @@
{{"search.filters.filter.show-more" - | translate}} + (click)="showMore()" href="javascript:void(0);"> + {{"search.filters.filter.show-more" | translate}} + {{"search.filters.filter.show-less" - | translate}} + (click)="showFirstPageOnly()" href="javascript:void(0);"> + {{"search.filters.filter.show-less" | translate}} +
{{"search.filters.filter.show-more" - | translate}} + (click)="showMore()" href="javascript:void(0);"> + {{"search.filters.filter.show-more" | translate}} + {{"search.filters.filter.show-less" - | translate}} + (click)="showFirstPageOnly()" href="javascript:void(0);"> + {{"search.filters.filter.show-less" | translate}} +
Date: Tue, 1 Jun 2021 14:01:48 +0200 Subject: [PATCH 07/14] 79730: Improve slider handles keyboard control --- .../search-range-filter/search-range-filter.component.html | 5 +++-- .../search-range-filter/search-range-filter.component.scss | 1 + 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/app/shared/search/search-filters/search-filter/search-range-filter/search-range-filter.component.html b/src/app/shared/search/search-filters/search-filter/search-range-filter/search-range-filter.component.html index e4e8152e97..3a6a6565c0 100644 --- a/src/app/shared/search/search-filters/search-filter/search-range-filter/search-range-filter.component.html +++ b/src/app/shared/search/search-filters/search-filter/search-range-filter/search-range-filter.component.html @@ -32,8 +32,9 @@ - + [dsDebounce]="500" (onDebounce)="onSubmit()" + [(ngModel)]="range" ngDefaultControl> +
diff --git a/src/app/shared/search/search-filters/search-filter/search-range-filter/search-range-filter.component.scss b/src/app/shared/search/search-filters/search-filter/search-range-filter/search-range-filter.component.scss index 2c98280e7f..f26806abfb 100644 --- a/src/app/shared/search/search-filters/search-filter/search-range-filter/search-range-filter.component.scss +++ b/src/app/shared/search/search-filters/search-filter/search-range-filter/search-range-filter.component.scss @@ -21,6 +21,7 @@ } &:focus { outline: none; + box-shadow: var(--bs-input-btn-focus-box-shadow); } } From c60fa2c441257ebe46f3d3ab5a85334b3b33dc9e Mon Sep 17 00:00:00 2001 From: Yura Bondarenko Date: Tue, 1 Jun 2021 15:20:33 +0200 Subject: [PATCH 08/14] 79730: Don't submit date slider changes until keyup --- .../search-range-filter.component.html | 3 ++- .../search-range-filter.component.ts | 18 ++++++++++++++++++ 2 files changed, 20 insertions(+), 1 deletion(-) diff --git a/src/app/shared/search/search-filters/search-filter/search-range-filter/search-range-filter.component.html b/src/app/shared/search/search-filters/search-filter/search-range-filter/search-range-filter.component.html index 3a6a6565c0..0ebd5f74a2 100644 --- a/src/app/shared/search/search-filters/search-filter/search-range-filter/search-range-filter.component.html +++ b/src/app/shared/search/search-filters/search-filter/search-range-filter/search-range-filter.component.html @@ -32,7 +32,8 @@ diff --git a/src/app/shared/search/search-filters/search-filter/search-range-filter/search-range-filter.component.ts b/src/app/shared/search/search-filters/search-filter/search-range-filter/search-range-filter.component.ts index 62b1cb98a6..b23a2d8224 100644 --- a/src/app/shared/search/search-filters/search-filter/search-range-filter/search-range-filter.component.ts +++ b/src/app/shared/search/search-filters/search-filter/search-range-filter/search-range-filter.component.ts @@ -68,6 +68,12 @@ export class SearchRangeFilterComponent extends SearchFacetFilterComponent imple */ sub: Subscription; + /** + * Whether the sider is being controlled by the keyboard. + * Supresses any changes until the key is released. + */ + keyboardControl: boolean; + constructor(protected searchService: SearchService, protected filterService: SearchFilterService, protected router: Router, @@ -104,6 +110,10 @@ export class SearchRangeFilterComponent extends SearchFacetFilterComponent imple * Submits new custom range values to the range filter from the widget */ onSubmit() { + if (this.keyboardControl) { + return; // don't submit if a key is being held down + } + const newMin = this.range[0] !== this.min ? [this.range[0]] : null; const newMax = this.range[1] !== this.max ? [this.range[1]] : null; this.router.navigate(this.getSearchLinkParts(), { @@ -117,6 +127,14 @@ export class SearchRangeFilterComponent extends SearchFacetFilterComponent imple this.filter = ''; } + startKeyboardControl(): void { + this.keyboardControl = true; + } + + stopKeyboardControl(): void { + this.keyboardControl = false; + } + /** * TODO when upgrading nouislider, verify that this check is still needed. * Prevents AoT bug From 08878941aba73fd5e849b0e4f7c6dede293d7701 Mon Sep 17 00:00:00 2001 From: Yura Bondarenko Date: Tue, 1 Jun 2021 15:31:30 +0200 Subject: [PATCH 09/14] 79730: Fix tslint issues --- .../shared/input-suggestions/input-suggestions.component.ts | 4 ++-- .../search-filters/search-filter/search-filter.component.ts | 4 +++- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/app/shared/input-suggestions/input-suggestions.component.ts b/src/app/shared/input-suggestions/input-suggestions.component.ts index 7e05dbcc8c..7b5c9f34f2 100644 --- a/src/app/shared/input-suggestions/input-suggestions.component.ts +++ b/src/app/shared/input-suggestions/input-suggestions.component.ts @@ -111,10 +111,10 @@ export class InputSuggestionsComponent implements ControlValueAccessor, OnChange @Input() disabled = false; propagateChange = (_: any) => { /* Empty implementation */ - }; + } propagateTouch = (_: any) => { /* Empty implementation */ - }; + } /** * When any of the inputs change, check if we should still show the suggestions diff --git a/src/app/shared/search/search-filters/search-filter/search-filter.component.ts b/src/app/shared/search/search-filters/search-filter/search-filter.component.ts index 23cd92a601..57c4f991db 100644 --- a/src/app/shared/search/search-filters/search-filter/search-filter.component.ts +++ b/src/app/shared/search/search-filters/search-filter/search-filter.component.ts @@ -45,7 +45,7 @@ export class SearchFilterComponent implements OnInit { /** * True when the filter toggle button is focused */ - focusBox: boolean = false; + focusBox = false; /** * Emits true when the filter is currently collapsed in the store @@ -141,10 +141,12 @@ export class SearchFilterComponent implements OnInit { } get regionId(): string { + // tslint:disable-next-line:no-string-literal return `search-filter-region-${this.constructor['ɵcmp'].id}`; } get toggleId(): string { + // tslint:disable-next-line:no-string-literal return `search-filter-toggle-${this.constructor['ɵcmp'].id}`; } From d37d043531ab41ab4ed3b99835472788ed12a636 Mon Sep 17 00:00:00 2001 From: Yura Bondarenko Date: Thu, 3 Jun 2021 15:10:20 +0200 Subject: [PATCH 10/14] 79730: Show input labels when available --- .../filter-input-suggestions.component.html | 17 ++++++++----- .../search-range-filter.component.html | 24 ++++++++++--------- 2 files changed, 24 insertions(+), 17 deletions(-) diff --git a/src/app/shared/input-suggestions/filter-suggestions/filter-input-suggestions.component.html b/src/app/shared/input-suggestions/filter-suggestions/filter-input-suggestions.component.html index f1b0ba9023..d239c8db8d 100644 --- a/src/app/shared/input-suggestions/filter-suggestions/filter-input-suggestions.component.html +++ b/src/app/shared/input-suggestions/filter-suggestions/filter-input-suggestions.component.html @@ -3,20 +3,25 @@ (keydown.arrowdown)="shiftFocusDown($event)" (keydown.arrowup)="shiftFocusUp($event)" (keydown.esc)="close()" (dsClickOutside)="close();"> - +
+ +
+ [ngModelOptions]="{standalone: true}" autocomplete="off" + />
diff --git a/src/app/shared/search/search-filters/search-filter/search-range-filter/search-range-filter.component.html b/src/app/shared/search/search-filters/search-filter/search-range-filter/search-range-filter.component.html index 0ebd5f74a2..0d3858d375 100644 --- a/src/app/shared/search/search-filters/search-filter/search-range-filter/search-range-filter.component.html +++ b/src/app/shared/search/search-filters/search-filter/search-range-filter/search-range-filter.component.html @@ -2,26 +2,28 @@
-
-