diff --git a/common/constants.js b/common/constants.js index 69ffc91ca8e0e1ce6e4914b1e17d719a3edca3aa..c25f0fef31143d4a3fa6d7b2cd87a9c619c2da0b 100644 --- a/common/constants.js +++ b/common/constants.js @@ -12,6 +12,7 @@ SHOW_DATASET_PREVIEW: 'Show dataset preview', TOGGLE_EXPLORE_PANEL: `Toggle explore panel`, MODALITY_FILTER: `Toggle dataset modality filter`, + LIST_OF_MODALITIES: `List of modalities`, LIST_OF_DATASETS: `List of datasets`, DOWNLOAD_PREVIEW: `Download`, DOWNLOAD_PREVIEW_CSV: `Download CSV`, diff --git a/e2e/src/advanced/browsingForDatasets.prod.e2e-spec.js b/e2e/src/advanced/browsingForDatasets.prod.e2e-spec.js index 28900df3255f2cad8098a55f183032e9214a7f48..99467ad9928a866fa5bdd84f1acd22be245b9879 100644 --- a/e2e/src/advanced/browsingForDatasets.prod.e2e-spec.js +++ b/e2e/src/advanced/browsingForDatasets.prod.e2e-spec.js @@ -1,5 +1,5 @@ const { AtlasPage } = require('../util') -const { CONST } = require('../../../common/constants') +const { CONST, ARIA_LABELS } = require('../../../common/constants') const { retry } = require('../../../common/util') const atlasName = `Multilevel Human Atlas` @@ -107,4 +107,36 @@ describe('> dataset browser', () => { } }) } + + describe('> modality filter', () => { + beforeAll(async () => { + await iavPage.goto() + await iavPage.setAtlasSpecifications(atlasName, [ templates[0] ]) + + await iavPage.wait(5000) + await iavPage.waitUntilAllChunksLoaded() + await iavPage.searchRegionWithText(newShouldHaveReceptor[0][0]) + await iavPage.wait(2000) + await iavPage.selectSearchRegionAutocompleteWithText() + await retry(async () => { + await iavPage.dismissModal() + await iavPage.toggleExpansionPanelState(`${CONST.REGIONAL_FEATURES}`, true) + }, { + timeout: 2000, + retries: 10 + }) + await iavPage.dismissModal() + await iavPage.wait(2000) + await iavPage.waitUntilAllChunksLoaded() + }) + + it('> should be populated', async () => { + await iavPage.click(`[aria-label="${ARIA_LABELS.MODALITY_FILTER}"]`) + const text = await iavPage.getText(`[aria-label="${ARIA_LABELS.LIST_OF_MODALITIES}"]`) + const re = /\(\d+\)/.exec(text) + expect( + re + ).toBeTruthy() + }) + }) }) diff --git a/src/ui/databrowserModule/databrowser/databrowser.component.ts b/src/ui/databrowserModule/databrowser/databrowser.component.ts index ad18ebb36bdb592456a671de321ae68e74ea4f2a..59b813972f72d3b3fdd5fb36b248ab5eaba6049e 100644 --- a/src/ui/databrowserModule/databrowser/databrowser.component.ts +++ b/src/ui/databrowserModule/databrowser/databrowser.component.ts @@ -85,6 +85,11 @@ export class DataBrowser extends DatabrowserBase implements OnDestroy, OnInit { public ngOnInit() { + /** + * in the event that dataentries are updated before ngInit lifecycle hook + */ + this.countedDataM = this.dataService.getModalityFromDE(this.dataentries) + this.subscriptions.push( this.dataentriesUpdated.pipe( debounceTime(60) diff --git a/src/ui/databrowserModule/modalityPicker/modalityPicker.component.ts b/src/ui/databrowserModule/modalityPicker/modalityPicker.component.ts index 7de89407502787381a8c89e7920e045c2fb3b5d8..ff2ffc6bdaeab85b60ebf9288fa9743948a8cfdc 100644 --- a/src/ui/databrowserModule/modalityPicker/modalityPicker.component.ts +++ b/src/ui/databrowserModule/modalityPicker/modalityPicker.component.ts @@ -1,5 +1,7 @@ import { Component, EventEmitter, Input, OnChanges, Output, Pipe, PipeTransform } from "@angular/core"; import { CountedDataModality } from "../databrowser.service"; +import { ARIA_LABELS } from 'common/constants' + @Component({ selector: 'modality-picker', @@ -7,6 +9,9 @@ import { CountedDataModality } from "../databrowser.service"; styleUrls: [ './modalityPicker.style.css', ], + host:{ + 'aria-label': ARIA_LABELS.LIST_OF_MODALITIES + } }) export class ModalityPicker implements OnChanges { diff --git a/src/ui/databrowserModule/modalityPicker/modalityPicker.template.html b/src/ui/databrowserModule/modalityPicker/modalityPicker.template.html index e0bcaa540a7e55a7ba249356ecde742ab6685c5d..e9aa626b7348aca8cb86085723943b01174d57c8 100644 --- a/src/ui/databrowserModule/modalityPicker/modalityPicker.template.html +++ b/src/ui/databrowserModule/modalityPicker/modalityPicker.template.html @@ -1,7 +1,14 @@ -<mat-checkbox - [checked]="datamodality.visible" - (change)="toggleModality(datamodality)" - [ngClass]="{'muted': datamodality.occurance === 0}" - *ngFor="let datamodality of countedDataM | sortModalityAlphabetically"> - {{ datamodality.name }} <span class="text-muted">({{ datamodality.occurance }})</span> -</mat-checkbox> \ No newline at end of file +<fieldset> + <legend class="sr-only"> + Dataset modalities + </legend> + + <mat-checkbox + [ariaLabel]="datamodality.name" + [checked]="datamodality.visible" + (change)="toggleModality(datamodality)" + [ngClass]="{'muted': datamodality.occurance === 0}" + *ngFor="let datamodality of countedDataM | sortModalityAlphabetically"> + {{ datamodality.name }} <span class="text-muted">({{ datamodality.occurance }})</span> + </mat-checkbox> +</fieldset>