While navigating the "unsubscribe" button screen reader announcing both elements as view results and unsubscribe
<div role="cell" >
<div >
<span >
<a aria-label="Data Science & Machine Learning View Results" >
View Results
</a>
</span>
<span>
<button role="button"
aria-label="Data Science & Machine Learning Unsubscribe">
Unsubscribe
</button>
</span>
</div>
</div>
Related
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>
i have a side bar, where in it remains active if im on the screens first tab, if i switch to second tab, the url changes and the sidebar label wont be active.
How can this be solved. Please help.
HTML:
Side bar Code:
<a routerLink="/my-health/my-health-history" [ngClass] = "{'active' : true}" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}" class="list-group-item list-group-item-action justify-content-between"
id="nav-link-1" aria-haspopup="true" aria-expanded="false" aria-controls="nav-submenu-1">
<span><i class="icon-heart g-pos-rel g-top-1 g-mr-8"></i>{{ 'DashboardModule.MYHEALTH' | translate }}
</span>
</a>
TAbs code redirected to pages on click of side bar link:
<div class="myhealth mt7">
<ul class="nav nav-tabs menu">
<li>
<a class="active-link" routerLink="/my-health/my-health-history" routerLinkActive="active-link"
[routerLinkActiveOptions]="{exact: true}">myHealthHistory
</a>
</li>
<li>
<a routerLink="/my-health/my-lifestyle" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}">myLifeStyle
</a>
</li>
<li>
<a routerLink="/my-health/my-family-health-history" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}">myFamilyHistory
</a>
</li>
</ul>
</div>
If i am in myHealth History tab, then side bar will be active, if i shift to other 2 tabs then side bar wont be active
Using [ngClass] = "{'active' : true}" in tag.
The condition are:
Differ your current URL based on tab change.
ex1: http://test.com/tab1 and http://test.com/tab2
ex2:http://test.com/#tab1 and http://test.com/#tab2
Read url and find string like "tab1 or tab2"
add "Active" class based on this condition
You can check for the current active link in the sidebar component.
Sidebar html
<a routerLinkActive="active-link" [ngClass]="{'active-link': isActive()}" class="list-group-item list-group-item-action justify-content-between"
id="nav-link-1" aria-haspopup="true" aria-expanded="false" aria-controls="nav-submenu-1">
<span><i class="icon-heart g-pos-rel g-top-1 g-mr-8"></i>{{ 'DashboardModule.MYHEALTH' | translate }}
</span>
</a>
Sidebar ts
constructor(private router:Router) {
}
isActive(){
return ["/my-health/my-health-history","/my-health/my-lifestyle","/my-health/my-family-health-history"].includes(this.router.url);
}
Note : the code is written directly to Stackoverflow editor so there could be typo or syntatical error. Please correct yourself.
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.
I want to show only first 2 things which are present in an array instead of all and then b y clicking on button next 2 names comes up till the last, Can you help me in correcting the code of knoctout js .
<div class="slide">
<button type="button" onclick="alert('Hello world!')" style="margin-top: -50px;margin-bottom: 1px;margin-left: 1020px;padding-right:5px;">Read more</button>
<ul data-bind="foreach:EventBE.WhoElseAttends">
<li >
<span data-bind="text:FirstName"></span>
<span data-bind="text:LastName"></span>,
<span data-bind="text:Company"></span>
</li>
</ul>
<span data-bind="if:EventBE.WhoElseAttends.length <0">No Attendees</span>
</div>
In Javascript
EventBE.displayCount = ko.observable(2);
EventBE.readMore = function() { EventBE.displayCount(EventBE.displayCount() + 2); };
In HTML
<button type="button" data-bind"click: EventBE.readMore,
visible: EventBE.displayCount() < EventBE.WhoElseAttends.length">Read More</button>
<ul data-bind="foreach:EventBE.WhoElseAttends.slice(0, EventBE.displayCount())">
This is just an example, you may also need to use a subscriber to reset displayCount when WhoElseAttends changes.
If your WhoElseAttends is observableArray, you need to fix EventBE.WhoElseAttends.length to EventBE.WhoElseAttends().length
I'm trying to create a custom portelt which displays news or event items based on a keyword. I don't want to use the collects portlet facility. I've created a Python Script which fetches the necessary results like this:
from Products.CMFCore.utils import getToolByName
portal_catalog = getToolByName(context, 'portal_catalog')
return portal_catalog.searchResults(
Subject = 'Startseite',
end={'query': DateTime(),
'range': 'min'},
sort_on='start',
sort_limit=3,
review_state='external')[:5]
So this should fetch all objects with the review_state 'external' and the keyword (or subject) 'Startseite'. Now I've created a page template which is used to render a classic portelt:
<html xmlns:tal="http://xml.zope.org/namespaces/tal"
xmlns:metal="http://xml.zope.org/namespaces/metal"
i18n:domain="plone">
<body>
<div metal:define-macro="portlet"
tal:define="view context/##events_view;
results context/startpage_informations;
events_link view/all_events_link;
prev_events_link view/prev_events_link"
tal:condition="results">
<dl class="portlet" id="portlet-events">
<dt class="portletHeader">
<span class="portletTopLeft"></span>
<a href=""
tal:attributes="href events_link"
class="tile">
Wichtige Neuigkeiten:
</a>
<span class="portletTopRight"></span>
</dt>
<tal:events tal:repeat="obj results">
<dd class="portletItem"
tal:define="oddrow repeat/obj/odd"
tal:attributes="class python:test(oddrow, 'portletItem even', 'portletItem odd')">
<a href="#"
class="tile"
tal:attributes="href obj/getURL;
title obj/Description">
<img src="#" alt="" tal:replace="structure here/news_icon.gif" />
<span tal:replace="obj/pretty_title_or_id">
Some Event
</span>
<span class="portletItemDetails"
tal:define="starts python:toLocalizedTime(obj.start, long_format=1);
ends python:toLocalizedTime(obj.end, long_format=1);
startTime python:toLocalizedTime(obj.start,time_only=1);
endTime python:toLocalizedTime(obj.end,time_only=1);
startDay python:toLocalizedTime(obj.start, long_format=0);
endDay python:toLocalizedTime(obj.end, long_format=0);">
<span>
<tal:condition condition="obj/location">
<tal:location content="obj/location">Location</tal:location>,<br />
</tal:condition>
<tal:sameday tal:condition="python:startDay==endDay">
<span tal:condition="startDay" tal:replace="startDay">:[If this is an event, show its start time and date]</span><br />
Uhrzeit: <span tal:condition="startTime" tal:replace="startTime">[If this is an event, show its start time and date]</span> -
<span tal:condition="endTime" tal:replace="endTime">[If this is an event, show its start time and date]</span>
</tal:sameday>
<tal:multiday tal:condition="python:startDay!=endDay">
Vom <span tal:condition="starts" tal:replace="starts">[If this is a multi-day event, show its start date]</span><br />bis
<tal:hasendday tal:condition="ends">
<span tal:replace="ends">[If this is a multi-day event, show its end date]</span>
</tal:hasendday>
</tal:multiday>
</span>
</span>
</a>
</dd>
</tal:events>
</dl>
</div>
</body>
</html>