diff --git a/cypress/e2e/my-dspace.cy.ts b/cypress/e2e/my-dspace.cy.ts
index 79786c298a..af4aab41f3 100644
--- a/cypress/e2e/my-dspace.cy.ts
+++ b/cypress/e2e/my-dspace.cy.ts
@@ -22,15 +22,11 @@ describe('My DSpace page', () => {
testA11y(
{
include: ['ds-my-dspace-page'],
- exclude: [
- ['nouislider'] // Date filter slider is missing ARIA labels. Will be fixed by #1175
- ],
},
{
rules: {
- // Search filters fail these two "moderate" impact rules
+ // Search filters fail this "moderate" impact rules
'heading-order': { enabled: false },
- 'landmark-unique': { enabled: false }
}
} as Options
);
diff --git a/cypress/e2e/search-page.cy.ts b/cypress/e2e/search-page.cy.ts
index 24519cc236..0d4f70ef03 100644
--- a/cypress/e2e/search-page.cy.ts
+++ b/cypress/e2e/search-page.cy.ts
@@ -30,15 +30,11 @@ describe('Search Page', () => {
testA11y(
{
include: ['ds-search-page'],
- exclude: [
- ['nouislider'] // Date filter slider is missing ARIA labels. Will be fixed by #1175
- ],
},
{
rules: {
- // Search filters fail these two "moderate" impact rules
+ // Search filters fail this "moderate" impact rule
'heading-order': { enabled: false },
- 'landmark-unique': { enabled: false }
}
} as Options
);
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 7834c4c557..251e5ac420 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
@@ -9,8 +9,8 @@
@@ -21,8 +21,8 @@
@@ -33,7 +33,7 @@
-
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 938f67412e..ed20e63c52 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
@@ -2,6 +2,7 @@ import { BehaviorSubject, combineLatest as observableCombineLatest, Subscription
import { map, startWith } from 'rxjs/operators';
import { isPlatformBrowser } from '@angular/common';
import { Component, Inject, OnDestroy, OnInit, PLATFORM_ID } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
import { RemoteDataBuildService } from '../../../../../core/cache/builders/remote-data-build.service';
import { FilterType } from '../../../models/filter-type.model';
import { renderFacetFor } from '../search-filter-type-decorator';
@@ -53,11 +54,27 @@ export class SearchRangeFilterComponent extends SearchFacetFilterComponent imple
*/
min = 1950;
+ /**
+ * i18n Label to use for minimum field
+ */
+ minLabel: string;
+
/**
* Fallback maximum for the range
*/
max = new Date().getUTCFullYear();
+ /**
+ * i18n Label to use for maximum field
+ */
+ maxLabel: string;
+
+ /**
+ * Base configuration for nouislider
+ * https://refreshless.com/nouislider/slider-options/
+ */
+ config = {};
+
/**
* The current range of the filter
*/
@@ -78,6 +95,7 @@ export class SearchRangeFilterComponent extends SearchFacetFilterComponent imple
protected filterService: SearchFilterService,
protected router: Router,
protected rdbs: RemoteDataBuildService,
+ private translateService: TranslateService,
@Inject(SEARCH_CONFIG_SERVICE) public searchConfigService: SearchConfigurationService,
@Inject(IN_PLACE_SEARCH) public inPlaceSearch: boolean,
@Inject(FILTER_CONFIG) public filterConfig: SearchFilterConfig,
@@ -96,6 +114,8 @@ export class SearchRangeFilterComponent extends SearchFacetFilterComponent imple
super.ngOnInit();
this.min = yearFromString(this.filterConfig.minValue) || this.min;
this.max = yearFromString(this.filterConfig.maxValue) || this.max;
+ this.minLabel = this.translateService.instant('search.filters.filter.' + this.filterConfig.name + '.min.placeholder');
+ this.maxLabel = this.translateService.instant('search.filters.filter.' + this.filterConfig.name + '.max.placeholder');
const iniMin = this.route.getQueryParameterValue(this.filterConfig.paramName + RANGE_FILTER_MIN_SUFFIX).pipe(startWith(undefined));
const iniMax = this.route.getQueryParameterValue(this.filterConfig.paramName + RANGE_FILTER_MAX_SUFFIX).pipe(startWith(undefined));
this.sub = observableCombineLatest(iniMin, iniMax).pipe(
@@ -105,6 +125,15 @@ export class SearchRangeFilterComponent extends SearchFacetFilterComponent imple
return [minimum, maximum];
})
).subscribe((minmax) => this.range = minmax);
+
+ // Default/base config for nouislider
+ this.config = {
+ // Ensure draggable handles have labels
+ handleAttributes: [
+ { 'aria-label': this.minLabel },
+ { 'aria-label': this.maxLabel },
+ ],
+ };
}
/**