On a screen we want to display this sentence: Limit to X messages per Y, where X and Y are dropdown list of options.
On a screen reader we want 2 distinct fields with corresponding label:
- Email send limit X
- Email send time window Y
Note: Label are hidden with the .element-invisible
class, using the clip
method.
https://html.house/u7rgdrzx.html
<div class="container-inline">
<span aria-hidden="true">Limit to</span>
<label class="element-invisible" for="edit-contact-threshold-limit">Email send limit </label>
<select id="edit-contact-threshold-limit" name="contact_threshold_limit">
<option value="1">1</option>
<option value="2">2</option>
<option value="...">...</option>
<option value="500">500</option>
</select>
<span aria-hidden="true">messages per</span>
<label class="element-invisible" for="edit-contact-threshold-window">Email send time window </label>
<select id="edit-contact-threshold-window" name="contact_threshold_window">
<option value="60">1 min</option>
<option value="180">3 min</option>
<option value="...">...</option>
<option value="86400">1 day</option>
</select>
</div>
Please post any relevant feedback on backdrop/backdrop-issues#3192