Here is my code for that
can anyone please help me on this
<div class="location has-feedback ph-a11y-location" data-ph-at-id="location" data-ph-id="ph-default-1648705629687-ph-event-search-v1qkzjzs-MYIYtj">
<label for="hasfeature-location" id="hasFeature-search-location-label" data-ph-id="ph-default-1648705629687-ph-event-search-v1qkzjzs-y9rfkd">
<ppc-content key="HdNSNY-qkzjzs-ph-event-search-v1-default-searchLocationText" data-ph-at-id="label-text" data-ph-id="ph-default-1648705629687-ph-event-search-v1qkzjzs-DFwDbG">
Search location
</ppc-content>
</label>
<!-- autocomplete="location" -->
<input type="text" ref="locationbox" ph-a11y-autocomplete="is-show-results-on-focus.bind: !isNewEventLocationSearch" name="location" aria-controls="loc-listbox" value.bind="formData['location'].value" id="hasfeature-location" aria-owns="loc-listbox" aria-haspopup="listbox" class="form-control location ph-a11y-location-box au-target" placeholder="City,State,Country" key-placeholder="aQgj4W-qkzjzs-ph-event-search-v1-default-locationsearchboxplaceholderText" data-ph-at-id="input" aria-labelledby="hasFeature-search-location-label" data-ph-id="ph-default-1648705629687-ph-event-search-v1qkzjzs-7ChQ5X" au-target-id="49" aria-activedescendant="">
<span aria-hidden="true" show.bind="!formData['location'].value" data-ph-id="ph-default-1648705629687-ph-event-search-v1qkzjzs-0TiVEf" class="au-target icon icon-map-pin form-control-feedback location-icon" au-target-id="50"></span>
<button aria-label="Clear text" type="button" key-aria-label="RHJ2eO-qkzjzs-ph-event-search-v1-default-clearLocationText" class="form-control-feedback phs-keysearch-clear location-clear-icon au-target aurelia-hide" data-ph-at-id="clear-eventsearch-link" click.delegate="clearFieldValue('location', locationbox)" show.bind="formData['location'].value" data-ph-id="ph-default-1648705629687-ph-event-search-v1qkzjzs-LLyYrP" au-target-id="51">
<i class="icon icon-cancel" aria-hidden="true" data-ph-id="ph-default-1648705629687-ph-event-search-v1qkzjzs-ln6ufj"></i>
<span class="sr-only" data-ph-id="ph-default-1648705629687-ph-event-search-v1qkzjzs-hKDCAz">
<ppc-content key="SivoXp-qkzjzs-ph-event-search-v1-default-locationMenuOpenClearText" data-ph-at-id="clear-eventsearch-text" data-ph-id="ph-default-1648705629687-ph-event-search-v1qkzjzs-ELD0zf">
location clear text
</ppc-content>
</span>
</button>
<ul class="on-focus location phs-location-suggested-list au-target aurelia-hide" id="loc-listbox" aria-labelledby="loc-listbox" aria-label="locations" role="listbox" tabindex="-1" show.bind="fieldData.location.showListbox" data-ph-at-id="suggested-data-list" data-ph-id="ph-default-1648705629687-ph-event-search-v1qkzjzs-THexzy" au-target-id="52" data-ol-has-click-handler="" aria-expanded="false">
<!--anchor-->
<li ref="facetRef" data-ph-at-id="no-data" data-ph-id="ph-default-1648705629687-ph-event-search-v1qkzjzs-DzgLbR" class="au-target" au-target-id="56">
<div class="no-facet-results" data-ph-id="ph-default-1648705629687-ph-event-search-v1qkzjzs-bf6eoG">
<span data-ph-id="ph-default-1648705629687-ph-event-search-v1qkzjzs-RRGnuz">
<ppc-content key="wApLmD-qkzjzs-ph-event-search-v1-default-noLocationResultsFound" data-ph-at-id="no-data-text" data-ph-id="ph-default-1648705629687-ph-event-search-v1qkzjzs-g9TfpZ">
No results found
</ppc-content>
</span>
</div>
</li><!--anchor-->
</ul>
</div>
Not sure why Jaws announcing back slash and it is happening in palceholder text
I think this is a bug in JAWS where JAWS might be double-escaping your comma characters in the <input> placeholder text when there is an aria-labelledby or aria-label associated with the <input>.
So, instead of reading it as "City,State,Country" it instead escapes the commas twice and reads it as "City\,State\,Country".
I recommend that you remove the commas in your placeholder text to avoid the JAWS error. An alternative would be to put the placeholder text outside of the <input> (such as below the input field as help text) and associate it using the aria-describedby attribute. For example:
<label for="location" id="search-location-label">Search location</label>
<input type="text" name="location" id="location" aria-labelledby="search-location-label" aria-describedby="location-helptext">
<span id="location-helptext">City, State, Country</span>
Related
I have a filter search that shows matching strings of an array in a list when user types. When the user clicks on one item of the list, a method should fire. Everything works fine, but the problem is that it doesn't fire on first click but a on a second attempt on the same item of the list or any other it works. I can't figure out why is this happening. Here's my code.
<div
class="filter-form"
:class="{'visible': filterVisibility[index]}"
v-if="col.filter"
>
<div class="input-group">
<input
type="text"
class="form-control"
#keyup="filterColumn($event, index)"
#blur="toggleFilter(index)"
>
<button
class="btn btn-secondary"
type="button"
#click="toggleFilter(index)"
>Filtrar</button>
</div>
<ul class="filter-matches list-group">
<li
class="list-group-item"
v-for="match of filteredMatches"
:key="match"
#click="clickFilteredMatch(String(match), index)"
>{{match}}</li>
</ul>
</div>
I'm trying to create a list with checkboxes for collecting actions with materialize, but the input tag didn't get recognized by the pattern. Is this possible?
<div class="row">
<ul class="collection with-header" v-if="listaRoles.length > 0">
<li class="collection-header left-align"><h4> Roles do perfil {{ perfil.descricao }}</h4></li>
<li v-for="r in listaRoles" :key="r.id" class="collection-item">
<div class="left-align">
<span> {{ r.descricao }} </span>
<input type="checkbox" />
</div>
</li>
</ul>
</div>
You have to use the exact same structure as the materialize docs, otherwise your components won't work correctly. So in the case of checkboxes that is <input>, followed by <span>, and both of these wrapped in a <label>.
<label>
<input type="checkbox" />
<span>Red</span>
</label>
Any deviation from this will break the component.
EDIT:
Checkboxes inside li works perfectly fine, here a codepen to demonstrate:
https://codepen.io/doughballs/pen/KKpNrPy
The error is coming from somewhere else.
https://materializecss.com/checkboxes.html
I'm facing a very weird problem. My error message is not showing
below is my codepen
https://codepen.io/cancerian73/pen/eoaYga
<form data-abide novalidate>
<div class="search-container">
<input type="text" id="seach_again" placeholder="Try once again" aria-required="true" required>
<span class="form-error" data-form-error-for="search_again">Amount is required.</span> <span class="form-error"> Valid email required.</span>
<input type="submit" class="go-btn" value="GO">
</div>
</form>
Your id has a typo in it (seach_again instead of search_again). Though these error messages will work even with the typo because they are adjacent siblings to the input element. I wonder if you did not enable the abide javascript plugin. You need to enable that in addition to the scss.
How can we extract value by using xpth or css selector if the attribute is dynamically changed for example:
<p data-reactid=".2e46q6vkxnc.1.$0">
<b data-reactid=".2e46q6vkxnc.1.$0.0">Mark Obtain</b>
<i class="avu-full-width" data-reactid=".2e46q6vkxnc.1.$0.1">
<span data-reactid=".2e46q6vkxnc.1.$0.1.0"> </span>
<span data-reactid=".2e46q6vkxnc.1.$0.1.1">450 A+.</span>
</i>
</p>
<p data-reactid=".2e46q6vkxnc.1.$1">
<b data-reactid=".2e46q6vkxnc.1.$1.0">Student Name</b>
<i class="avu-full-width" data-reactid=".2e46q6vkxnc.1.$1.1">
<span data-reactid=".2e46q6vkxnc.1.$0.1.0"> </span>
<span data-reactid=".2e46q6vkxnc.1.$0.1.1">First Name</span>
</i>
</p>
In this case attribute of element is dynamically changing but "Mark Obtain" and "Student Name" will always be same, so is there any way or can we write if condition or some regex along with xpath expression to get "450 A+" and "First Name" values.
Please help
To get required values you can use below XPath expressions:
//p[b="Mark Obtain"]//span[2]/text()
to get "450 A+."
and
//p[b="Student Name"]//span[2]/text()
to get "First Name"
Ok, I have this somewhat complex piece of HTML that I have to integrate with. It is a button with a drop down (using aria) and I had to pass in a currency list and be able to select one of the dropdown elements (currency values) and update the button text with the selected value. I write a tiny bit of js and that works well. I use thymeleaf to pass in values to populate and that works well. I also need to read the values that were set from the post to the spring mvc controller but I always get a empty string for the value that I set via js.
here is the javascript
$(".currencyDropdown li a").click(function () {
var selText = $(this).text().trim();
var button = $("#currencyButton");
button.text(selText);
console.log("currency selected is:" + selText);
});
here is the html
<div class="col-sm-9 col-sm-offset-3 col-xs-12 form-row">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle field-small"
type="button"
id="currencyButton"
name="currencyButton"
th:field="${pals.selectedCurrency}"
data-toggle="dropdown"
th:inline="text">
[[${pals.selectedCurrency}]]
<i class="fa fa-caret-down"></i>
</button>
<ul id="currencyDropdown"
class="dropdown-menu currencyDropdown"
role="menu"
aria-labelledby="currencyButton">
<li role="presentation"
th:each="currency:${pals.currencyList}">
<a role="menuitem"
tabindex="-1"
href="#"
th:inline="text">
[[${currency}]]
</a>
</li>
</ul>
</div>
What I am trying to read back in the spring mvc controller is the pals.selectedCurrency value and it is always empty. Something I am missing? I was playing around and tried setting value and field. In reality I want to read the inline text that my js inserts.
I think you must add a th:fragment on you button and change the text of the button via ajax from backing bean from server, not from javascript. It's something like this :
<form th:action="#{/PersonEdit/save(contract=${param.contract})}" th:object="${personBean}"
method="POST" th:if="${param.contract != null}">
... other form components
<div class="form-group">
<label class="col-sm-4 control-label"
th:text="#{person.edit.policy.tfoms}"></label>
<div class="col-sm-8">
<select class="form-control" th:field="*{tfoms}"
onchange="loadInsuranceCompanies()">
<option th:each="t : ${tfomses}"
th:value="${t.uidtfoms}"
th:text="${t.shortName}"
th:selected="${personBean.tfoms != null
and personBean.tfoms.equals(t)}"></option>
</select>
</div>
</div>
<div th:class="${#fields.hasErrors('insuranceCompany')}
? 'form-group has-error' : 'form-group'">
<label class="col-sm-4 control-label"
th:text="#{person.edit.policy.ic}"></label>
<div class="col-sm-8" id="insuranceCompaniesContent">
<select class="form-control" id="insuranceCompany"
name="insuranceCompany"
th:fragment="insuranceCompany">
<option th:each="i : ${insuranceCompanies}"
th:value="${i.uidinsurancecompany}"
th:text="${i.shortName}"
th:selected="${personBean.insuranceCompany != null
and personBean.insuranceCompany.equals(i)}"></option>
</select>
<div th:if="${#fields.hasErrors('insuranceCompany')}"
th:each="err : ${#fields.errors('insuranceCompany')}">
<span class="text-danger" th:text="${err}"></span><br/>
</div>
</div>
</div>
In my case I refreshing one dropdown via another.Then refresh this fragment via ajax on item selection
function loadInsuranceCompanies() {
var url = [[#{/PersonEdit/insuranceCompanies}]];
if ($('#tfoms').val() !== '') {
url = url + '/' + $('#tfoms').val();
}
$("#insuranceCompaniesContent").load(url);
}
I think the trouble can be because you using not a standard select as a dropdown.
Ok, I figured out a relatively simple answer to it. I have to use the html that was provided because of look and feel considerations from the customer.
so what I did was add a hidden input and set that from the java script.
$(".currencyDropdown li a").click(function () {
var selText = $(this).text().trim();
$("#currencyButton").text(selText);
$("#currencySelected").val(selText);
console.log("currency selected is:" + selText);
});
<input type="hidden"
id="currencySelected"
th:field="${pals.selectedCurrency}"/>
<button class="btn btn-default dropdown-toggle field-small"
type="button"
id="currencyButton"
data-toggle="dropdown"
th:inline="text">
[[${pals.selectedCurrency}]]
<i class="fa fa-caret-down"></i>
</button>
<ul id="currencyDropdown"
class="dropdown-menu currencyDropdown"
role="menu"
aria-labelledby="currencyButton">
<li role="presentation"
th:each="currency:${pals.currencyList}">
<a role="menuitem"
tabindex="-1"
href="#"
th:inline="text">
[[${currency}]]
</a>
</li>
</ul>
I see the correct values that were selected for my dropdown on the spring mvc controller and now I can get on with the rest of the stuff.