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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user