feat(avrop filter): added screen reader adjusted fields to dynamically reflect selected options when filtering

Squashed commit of the following:

commit 036a5add08399bb46e1cae66bb9b9cf04d109fe9
Merge: 768a7ff3 5d2f63b9
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Fri Oct 15 15:27:17 2021 +0200

    Merge branch 'develop' into feature/TV-768-anpassa-filtreringen-for-sr

commit 768a7ff315ece5343958a5ac61746985dd62619e
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Fri Oct 15 15:25:53 2021 +0200

    minor corrections to display right field-name and make it lowercase

commit 6e3a35bd545a6074babd5a96b9ee2e67a007e7f7
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Fri Oct 15 14:55:58 2021 +0200

    moved sr-filter functionality to multi-select component

commit f1a3e43a4ab2d8a181e423255b8b5d451ed25561
Author: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date:   Fri Oct 15 13:37:01 2021 +0200

    added information to dynamically reflect filter-choices
This commit is contained in:
Aden Hassan
2021-10-15 15:29:40 +02:00
parent 5d2f63b9c0
commit b245760942

View File

@@ -8,13 +8,8 @@
class="multiselect__toggle-btn"
>
<span class="multiselect__toggle-btn__text">{{multiselectTitle}}</span>
<digi-icon-arrow-down
aria-hidden="true"
class="multiselect__toggle-btn__arrow-down"
></digi-icon-arrow-down>
<span class="msfa__a11y-sr-only">
Filtrera på {{multiselectTitle}}.
</span>
<digi-icon-arrow-down aria-hidden="true" class="multiselect__toggle-btn__arrow-down"></digi-icon-arrow-down>
<span class="msfa__a11y-sr-only"> Filtrera på {{multiselectTitle}}. </span>
</button>
<msfa-dropdown #dropdown [attr.id]="panelId">
@@ -28,3 +23,13 @@
></msfa-multiselect-panel>
</msfa-dropdown>
<div class="msfa__a11y-sr-only" aria-live="polite">
<span *ngIf="selectedOptions"
>Antal valda {{multiselectTitle.toLocaleLowerCase()}} är {{selectedOptions.length}}</span
>
</div>
<div class="msfa__a11y-sr-only" aria-live="polite">
<ul *ngFor="let option of selectedOptions">
<li>{{option.label}}</li>
</ul>
</div>