Develop Reference

Conditionally revealed content and screen readers

Pretty new to accessibility in web but been tasked with improving a page so your guidance would be much appreciated.
I have an HTML select element with a few options and each option will either reveal some additional questions or just some information. Just wondering if these conditionally revealed content has to be in some way tied to the selected option so that screen reader will announce to the user that new content has appeared on the page? I read about aria-live for somewhat similar implementations but not entirely sure if this is needed here? Select element and subsequent content looks like below although the toggling functionality is not yet implemented.
.hidden {
display: none;
}
<label for="employmentType">Your employment type</label>
<select id="employmentType">
<option value="0">Full time</option>
<option value="1">Part time</option>
<option value="2">Fixed term contract</option>
<option value="3">Student</option>
<option value="4">Unemployed</option>
</select>
<div class="value-zero-content hidden">
This is some information
</div>
<div class="value-one-content hidden">
<label for="empName">Employer name</label>
<input type="text" id="empName">
</div>
<div class="value-two-content hidden">
<label for="contractStart">Start date</label>
<input type="text" id="contractStart">
</div>
Thanks in advance.

Thymeleaf : How to set a conditional iteration based on a dynamic field?

View:
I have a form with two select fields : The second one only activates when a choice in the first one has been made and the content shown is relative to the first field.
Model :
Establishment (id,name)
Account (id,Establishment)
Logic : The first field loads a list of establishment from the model attribute "etablissements" that the Controller loads.
The second field should then enable itself after a selection has been made (easy), but then it should also show a list of accounts that are "registered" to this Establishment.
The question is how do i set this kind of conditional statement in thymeleaf, knowing that I have access to all establishments and account in the template as shown here :
<form id="demo-form2" data-parsley-validate
class="form-horizontal form-label-left" action="addOP"
th:object="${paiement}" method="post">
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12"
for="first-name"> Compte <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<select class="form-control" th:field="*{idCompte}">
<option th:each="account : ${etablissements}"
th:text="${etablissement.name}" th:value="${etablissement.name}">Choose
Etablissement</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12"
for="first-name"> Imputation <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<select class="form-control" disabled="disabled">
<option th:each="account : ${accounts}"
th:text="${account.owner}" th:value="${account.id}">Compte</option>
</select>
</div>
</div>
What's the best way to do this using thymeleaf or javascript ?
PS : Sorry for the formatting haven't found a way to automatically remove those spaces from code.

You should still render the list using thymeleaf and give it a hidden class which sets it to display: none. Then with javascript you can add an eventlistener to the dropdown which looks for that specific value and removes the hidden class to show the list.
Edit: to filter the list you can put a data attribute on the element and show or hide the item based on that data

Angular4 NgFor select box with a large array

I'm working on a project in which I would like to populate a selectbox with all the cities of a certain country. The array I get from my db is about 2800 records long. When Angular renders this selectbox it takes pretty long although the data is ready for rendering very fast.
Here is my html code:
<div class="form-group">
<label for="city">City</label>
<select type="text" id="city" class="form-control" ngModel name="city" required [ngModel]="user?.city.zipcode">
<option *ngFor="let city of cities" value="{{city.zipcode}}">{{city.cityName}}</option>
</select>
</div>
I tried to get it to speed up using virtual scrolling but I'm not finding very good examples in how to use this with selectboxes and this also doesn't fix the rendering lag caused by the 2-way binding. Does anyone have a solution for this which I can follow. I'm still a junior in Angular so any help is more than welcome.
Thanks for you're time and effort in advance!

Controlling displaying option in 2 list using jsp and bootstrap

I'm using coreui.io in one of my project coded with jsp and on a page, I have 2 dropdown list like this:
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label for="card"> List 1 </label>
<select class="form-control" name="arg1">
<option >option 1</option>
<option>option 2</option>
</select>
</div>
</div>
</div>
Then, I have:
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label for="bank"> List 2 </label>
<select class="form-control" name="arg2">
<option>1. related to selection of option1</option>
<option>2. related to selection of option1</option>
<option>3. related to selection of option2</option>
<option>4. related to selection of option2</option>
</select>
</div>
</div>
</div>
My question is that I want whenever user select option1 in List 1, automatically see only option 1 and 2 in List 2 and whenever select option 2 in List 1, see only option 3 and 4 in List 2. I'm using jsp and bootsrap4(coreui.io)
How Can I do this?
The another question is that when we have too many options, it's really boring to scroll these option to the end, Do we have better feature tho display rather than a dropdown list?
Regards

ngOptions in Angular not generating options

I need some help from angularjs ninjas...
I am currently using cake with angular. I have a rest controller which allows angular to communicate and get a list of options.. the service returns a serialized json as shown below
Below is how im trying to generate the options for the dropdown :
<div class="row" ng-controller="trackerCtrl">
<div class="col-md-4">
<label class="control-label" for="trackers">Choose Tracker</label>
<select id="tracker" name="tracker" ng-model="tracker" ngOptions="tracker.Tracking.description for tracker in trackers" class="form-control custom-input tracker">
<option>Select Tracker</option>
</select>
</div>
</div>
With the above, I get this in the DOM
<select id="tracker" name="tracker" ng-model="tracker" ngoptions="tracker.Tracking.description for tracker in trackers" class="form-control custom-input tracker ng-pristine ng-valid">
<option value="? undefined:undefined ?"></option>
<option value="Select Tracker">Select Tracker</option>
<!-- Load options -->
<!--<option value=""></option>-->
</select>
I also tried using ng-repeat with the same result, so I am guessing the JSON format is incorrect..
Any help is greatly appreciated since I am baffled with this as it seems pretty straight forward.
Kindly excuse my ignorance but i'm new to angular.

try this
<div class="row" ng-controller="trackerCtrl">
<div class="col-md-4">
<label class="control-label" for="trackers">Choose Tracker</label>
<select id="tracker" name="tracker" ng-model="tracker" ng-options="tracker.Tracking.description for tracker in trackers" class="form-control custom-input tracker">
<option>Select Tracker</option>
</select>
</div>
</div>

ngOptions vs ng-options?
<select
id="tracker"
name="tracker"
ng-model="tracker"
ng-options="tracker.Tracking.description for tracker in trackers"
class="form-control custom-input tracker"
>
I'm not sure if both notations are supported, never used the one without the dash. Try it.
If that doesn't work I guess the expression in ng-options is wrong. See the documentation.