From b245760942d650daa92dbe8fdb5d9e02e4ddde18 Mon Sep 17 00:00:00 2001
From: Aden Hassan <aden.hassan@arbetsformedlingen.se>
Date: Fri, 15 Oct 2021 15:29:40 +0200
Subject: [PATCH] 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
---
 .../multiselect/multiselect.component.html    | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/apps/mina-sidor-fa/src/app/shared/components/multiselect/multiselect.component.html b/apps/mina-sidor-fa/src/app/shared/components/multiselect/multiselect.component.html
index b2add69..65f0310 100644
--- a/apps/mina-sidor-fa/src/app/shared/components/multiselect/multiselect.component.html
+++ b/apps/mina-sidor-fa/src/app/shared/components/multiselect/multiselect.component.html
@@ -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>