Im having a weird issue in a slider I have. The basic markup is this:
<ol class="slider-list" aria-live="polite">
<li class="slider-page" aria-hidden="false" aria-roledescription="slide" aria-label=" | 1 of 5">
<ul class="col-container cols-4 rows-1">
<li class="col item">
<div class="entity-container">
<div class="entity-mask">
<a class="entity-link" aria-label="My Aria Label" tabindex="0">
<div class="entity-box">
<div class="aspect">
<img class="thumb" src="https://someurl.com/picture.jpg">
</div>
</div>
</a>
<div class="entity-details">
<a class="entity-link" tabindex="-1">
<h3 class="title no_focus">
<span>My Title</span>
</h3>
</a>
<div class="movie-release-date">My Release Date</div>
</div>
</div>
</div>
</li>
...
</ul>
</li>
<li class="slider-page" aria-hidden="true" aria-roledescription="slide" aria-label=" | 2 of 5">
...
</li>
...
</ol>
Now let me get some things out of the way - functionally and visually everything is working. As you tab through the different column items the aria-label is read, in this case My Aria Label is being read.
The problem is, after that aria-label is read, then all the nested text is read too, including My Title and My Release Date. Even weirder is its ALSO going up the tree and reading the siblings aria-labels all at once without any additional tabbing - its just all read but there is a pause between the proper aria-label being read and the rest of the content being read.
This is only happening in Safari and Chrome (recent versions).
Any idea what is going on here?
Per brennanyoung's comment and my own findings before seeing their comment, aria-live was the problem. As the slide changed all the content was being read. By disabling this/setting this to off at certain times depending on the product requirements, the problem was resolved.
Related
I'm trying to find an element on html tags using robot framework. I want to click on first element what ever the element is.
For example
Input text in the text field and then pass key enter
The item will show up and i want to click on first item but i cant
My Robot Code
Open Browser http://www.tarad.com chrome
Wait Until Element Is Visible id=keyword
Input Text id=keyword dog
Press Key id=keyword \\13
Wait Until Element Is Visible id=wrapper_body_all
Element Should Be Visible id=wrapper_body_all
Click Element xpath=//div[id='warpper_all']/div[id='wapper_body_all']//ul/il//img[constains(#src,'//img.trd.cm/120/120/sumpow/img-lib/spd_20140314140410_b.jpg')]
My HTML Tag
<div id="wrapper_body_all">
<div class="main-wrap">
<!--start : #rightProduct-->
<div class="section-col-right">
<!--start : rec_product -->
<div class="rec_product">
<!-- end : rec_product -->
<div class="rec_product">
<div class="section-products-box">
<div class="hitproduct-body">
<ul class="hitproduct-list list">
<!--start : product-list-->
<li>
<div class="item-border list">
<div class="item-image">
<a href="//www.tarad.com/product/5913180" title="ลำโพงน่ารัก dog">
<img src="//img.trd.cm/120/120/sumpow/img-lib/spd_20140314140410_b.jpg"
alt="ลำโพงน่ารัก dog" data-pagespeed-url-hash="3676782613"
onload="pagespeed.CriticalImages.checkImageForCriticality(this);">
</a>
</div>
<div class="item-details">
<div class="product-name">
ลำโพงน่ารัก dog
</div>
</div>
</div>
</li>
<!--end : product-list-->
<!--start : product-list-->
<li>
<div class="item-border list">
<div class="item-image">
<a href="//www.tarad.com/product/6755464" title="Brewdog Magic Stone Dog - 330 ml - 5">
<img src="//www.tarad.com/images/web_main/default150x150.gif"
alt="Brewdog Magic Stone Dog - 330 ml - 5" data-pagespeed-url-hash="2123596038"
onload="pagespeed.CriticalImages.checkImageForCriticality(this);">
</a>
</div>
<div class="item-details">
<div class="product-name">
<a href="//www.tarad.com/product/6755464" title="Brewdog Magic Stone Dog - 330 ml - 5">
Brewdog Magic Stone Dog - 330 ml - 5</a>
</div>
</div>
</div>
</li>
<!--end : product-list-->
....
....
....
</ul>
</div>
</div>
</div>
</div>
</div>
Error
Be warned, this is quite a brittle Xpath, but it will do the job you're trying to achieve:
Open Browser http://www.tarad.com chrome
Wait Until Element Is Visible id=keyword
Input Text id=keyword dog
Press Key id=keyword \\13
Wait Until Element Is Visible id=wrapper_body_all
Element Should Be Visible id=wrapper_body_all
Wait Until Page Contains Element xpath=(//div[#id='wrapper_body_all']/div/div[3]/div/div/div/div[2]/ul/li/div/div/a/img)[1]
Click Image xpath=(//div[#id='wrapper_body_all']/div/div[3]/div/div/div/div[2]/ul/li/div/div/a/img)[1]
This Robot Code works for me, it goes to the site, then inputs "dog" to the search, and then clicks on the very first image result.
If you want to find the 2nd, 3rd, etc - change the last number. for example:
xpath=(//div[#id='wrapper_body_all']/div/div[3]/div/div/div/div[2]/ul/li/div/div/a/img)[5]
Will find the 5th result. just change where it says [5]. Also, in your Robot make sure it says the entire xpath I just posted. That includes the xpath=
Any questions please ask.
Sometimes you can use another element earlier or later that does find it, and then use
/preceding::div[1]
or
/ascending::div[1]
respectively
I'm trying to retreive "prace.avizo.cz" and "onlineprodej.cz" from the following html. I've tried several different variations to isolate that one url but none have been successful.
I'm trying to get it via an importXML function in a googledoc. Some of the paths I've tried are:
=importXML(B2,"//article[#class='genericlist component leadingReferers']//ul/li[1]")
=importXML(B2,"//ul[#class='sites items']//li[1]")
=importXML(B2,"//li[#class='item']//div//a")
These either don't work or return extra irrelevant data. I'm only looking for the data within this specific article class (genericlist component leadingReferers).
Any help is appreciated.
<article class="genericlist component leadingReferers">
<h2 class="title">
Top Publishers
<i class="tooltip sprite icon_tip_idle" title="<h1>Leading paid referring sites</h1>Leading publishers referring advertising traffic to Cz.indeed.com"></i>
</h2>
<ul class="sites items">
<li class="item ">
<div class="text" title="prace.avizo.cz" data-sitename="prace.avizo.cz">
<a class="link" href="/website/prace.avizo.cz" data-tipsygravity="w" data-shorturl="Prace.avizo.cz">
<img class="icon lazy-icon lazy" data-original="http://images2.similargroup.com/image?url=prace.avizo.cz&t=2&s=1&h=11351681863127555753" src="/images/lazy.png"/>
<noscript>
<img class="icon" src="http://images2.similargroup.com/image?url=prace.avizo.cz&t=2&s=1&h=11351681863127555753"/>
</noscript>
Prace.avizo.cz
</a>
</div>
<div class="progress-bar">
<div class="progress-value percentage per1" style="width: 62.91%"></div>
</div>
</li>
<li class="item ">
<div class="text" title="onlineprodej.cz" data-sitename="onlineprodej.cz">
<a class="link" href="/website/onlineprodej.cz" data-tipsygravity="w" data-shorturl="Onlineprodej.cz">
<img class="icon lazy-icon lazy" data-original="http://images2.similargroup.com/image?url=onlineprodej.cz&t=2&s=1&h=14252445317786093368" src="/images/lazy.png"/>
<noscript>
<img class="icon" src="http://images2.similargroup.com/image?url=onlineprodej.cz&t=2&s=1&h=14252445317786093368"/>
</noscript>
Onlineprodej.cz
</a>
</div>
<div class="progress-bar">
<div class="progress-value percentage per1" style="width: 50.88%"></div>
</div>
</li>
....
This expression will give you the last text node inside the <a> of the first item in the article:
//article[#class='genericlist component leadingReferers']//li[1]//a/text()[last()]
which is the one that contains the text Prace.avizo.cz (surrounded by spaces, tabs and newlines). If you wish to trim those extra spaces, you can pass that expression as the argument to the XPath function normalize-space():
normalize-space( //article[#class='genericlist component leadingReferers']//li[1]//a/text()[last()] )
You can select the second article in a similar manner (same expression, using li[2]):
//article[#class='genericlist component leadingReferers']//li[2]//a/text()[last()]
If you want to retrieve a collection containing all text nodes (which you can manupulate outside of XPath) you can use:
//article[#class='genericlist component leadingReferers']//li//a/text()[last()]
which will return a list containing all text nodes (two, in your example). In this case, you will have to use your host language to extract them (probably in a for-each loop).
I'm working on an application that displays a list of chats and need to get the chats into the virtual buffer. The chat content can be as simple as a line of text or as complicated as text plus a link plus an image. Without role=document, it's not in the buffer but with role=document JAWS reads "clickable" when it reads the content (after pressing down arrow). The content is not clickable and I can't figure out how to stop that from being read.
Here's an example of the layout:
<div role="application" class="mainViewContainer">
<ul class="mainViewContent">
<li tabindex="0" class="chatViewContainer">
<div tabindex="-1" class="chatHeaderContainer">
<span class="offscreen" id="chat1">Chat content</span>
<div role="document" tabindex="0" class="chatContent" aria-labelledby="chat1">
Here's a message, huzzah!
</div>
</div>
</li>
<li tabindex="0" class="chatViewContainer">
<div tabindex="-1" class="chatHeaderContainer">
<span class="offscreen" id="chat2">Chat content</span>
<div role="document" tabindex="0" class="chatContent" aria-labelledby="chat2">
<div class="chatText>Document documentName.jpg created </div>
<div class="documentView">
<img title="documentName.jpg" src="imgsrc">
<div class="documentItemDetails">
documentName.jpg
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
Any ideas on how to make the chatContent div not have "clickable" read by JAWS?
I'm seeing this with JAWS Version 15.0.6025 (I believe it's the most recent version) and FF 26 on Windows 7.
I had this same issue. Apparently, this is an expected behavior, as explained in this URL.
Clickable Text : When you navigate to a grid cell that has its display style set to clickable text, JAWS reads the corresponding column header text and then the data content of the current cell.
I hope this helps.
In the middle of my page I have this <div> which includes a list. When I view the page source I see all the code there, but the only thing actually rendered for the user to see in the browser is the "Brand" h4 heading. (note that this is actually generated dynamically, and this is example output)
Also I have checked in several different browsers on several different machines so I don't think thats the issue
Is there something obvious I'm missing here why my list is not displaying?
<div class="filter-group filter-group-brand">
<h4>Brand</h4>
<ul class="nav-brand ">
<li class="collection-container aimpoint active ">
<div class="collection-name">
<a title="Narrow selection to products matching tag aimpoint"
href="/collections/firearm-accessories/aimpoint">
<i class="check-icon"></i> Aimpoint
</a>
</div>
</li>
<li class="collection-container aimshot active ">
<div class="collection-name">
<a title="Narrow selection to products matching tag aimshot"
href="/collections/firearm-accessories/aimshot">
<i class="check-icon"></i> Aimshot
</a>
</div>
</li>
<li class="collection-container barska-optics active ">
<div class="collection-name">
<a title="Narrow selection to products matching tag barska-optics"
href="/collections/firearm-accessories/barska-optics">
<i class="check-icon"></i> Barska Optics
</a>
</div>
</li>
</ul>
</div>
Without any CSS this works well and <li> elements will appear. Always think about giving your CSS code when you have a display error/problem
You must have an error in your CSS file. Check for display:none or hidden properties, etc on the following classes : collection-name, new-brand, collection-container.
Also you have empty <i> tags, just in case it's an error.
I'm not sure if this is really the best method, but I've only been working with joomla for two days so am very inexperienced.
Basically I have an html container in my template that holds a carousel extension and a set of images. The container has a blue background in contract to the white of the rest of the website.
I basically want to toggle that container with the extension on different pages. Here's my code:
<div id="top">
<div id="photos">
<jdoc:include type="modules" name="carousel" />
</div>
<div id="social_media">
<a id="success" href="#">Read about our success stories</a>
<a id="partner" href="#">Be a partner</a>
<a id="facebook" href="#">Join us on Facebook</a>
</div>
</div>
What I want to do is make this entire chunk of code into a Custom HTML module that only display on certain pages.
I've attempted to do this but the extension for the carousel doesn't show up, nor the jdoc:include part. I'm guessing this is because Joomlas text editor doesn't interpret jdoc:includes the same way the joomla engine does.
Is there any way around this?
In order to load a module within an article (or a Custom HTML module) you want to use the loadposition command. Here is what it would look like in your case:
<div id="top">
<div id="photos">
{loadposition carousel}
</div>
<div id="social_media">
<a id="success" href="#">Read about our success stories</a>
<a id="partner" href="#">Be a partner</a>
<a id="facebook" href="#">Join us on Facebook</a>
</div>
</div>