Adding aria-label to label or paragraph - wai-aria

I am working on fixing a bug for a frontend built using Fluent UI. I have a ChoiceGroup in which I have rendered two div tags each having text. I want the screen reader to read both the texts when the first div is chosen. The only way I can narrate both text is by having them inside the same div but then I cannot style them the way I want to style them.
Similar question but related to Bootstrap: Adding aria-label to text elements

So you have something like this?
<div>
text1
</div>
<div>
text2
</div>
What do you mean by "chosen" in "when the first div is chosen"? Is it an interactive element?
In my previous answer that you alluded to, all the elements to be read were contained in a parent container. It was a <button> in that case.
Normally, if you want all the text to be read, then the focus needs to move to the parent element so that all the child elements will be read, so you'd need a parent <div> and the focus would have to move to it.
<div>
<div>
text1
</div>
<div>
text2
</div>
</div>
Alternatively, for interactive elements, you can have aria-labelledby (or aria-describedby, depending on the nature of the second <div>) to have an element's text announced with another element. Something like this:
<div id="new1" aria-labelledby="new1 new2">
text1
</div>
<div id="new2">
text2
</div>
However, using aria-labelledby directly on a <div> without a subsequent role is not really supported.
And when I said the "nature" of your second <div>, if the second div acts like an extension of the first text, then aria-labelledby (with two IDs) seems appropriate. But if the second text is more of a "further description" of the first element, then aria-described might be more appropriate.
<div aria-describedby="new2">
text1
</div>
<div id="new2">
text2
</div>
Without further details of your code, a more specific answer can't be given.

Related

How to find the element who's xpath change dynamically?

We have element which doesn't have id or name to find while automation testing.
Below is the html code for it.
<div _ngcontent-c1="" class="col-md-4">
<div _ngcontent-c1="" class="form-group"> Account Name: </div>
</div>
<div _ngcontent-c1="" class="form-group">
<span _ngcontent-c1="" class="ng-tns-c1-0">1234567890</span>
</div>
We found element by using xpath. we can click the element in one case. Here the xpath was,
/html/body/app-root/app-root/div/div[4]/div[2]/form/div/div[5]/div[2]/div/span
But in the second case we are unable to find the element ,because new element will in the page. Now the above xpath will change to ,
/html/body/app-root/app-root/div/div[4]/div[2]/form/div/div[1]/div[5]/div[2]/div/span
Now the question how to find the above element?.
Venkatesh from the comment section I understood you want to find the Account Name value from the page
You can write xpath with visible text.
//*[contains(text()," Account Name: ")]/ancestor::div/following-sibling::div[contains(#class,"form-group")]/span
You can find the Preceding div with visible text Account Name: and later find the following sibling which will hold the Account Name: value in it.
Similarly you can find each element by changing the visible text alone.

Hidden class creates commas in spring webflow

I am displaying a list of items using spring webflow.
Each item has an edit button; clicking the button opens up a modal dialog.
If there are 12 items in the list,
I see 12 commas generated in the form path.
How can I avoid generation of commas?
<c:forEach var="note" items="${model.modelname}">
//create a click button for each item
//each click opens up a modal
<div id="modal" class="hidden">
<div class="modal-body-content">
<form:textarea path="textPath" />
</div>
</div>
</c:forEach>
There are several issues at work.
As noted by #dbreaux,
all of your textarea elements are in the same form and have the same id;
this is causing the commas when you post the form.
The element id is supposed to be unique to each element. Your element id is "modal" is not unique. Make it unique. This is not causing the commas.
The name of each textarea is textPath. Since you have multiple elements with one name, you get a comma separated list of values for that element name when you post the form. Each textarea must have a unique name. It appears that you have a unique name for each modal (the loop variable is the modalName). Use that in the name of the textarea.
If you can't give each textarea a unique name, give each textarea its own form. Generate a new form for each modal div.
Here is an example of the solution I proposed in #2 above (Note: I don't have a system running that uses spring tags ATM, this example is untested):
<c:forEach var="note" items="${model.modelname}">
<div id="modal" class="hidden">
<div class="modal-body-content">
<form:textarea path="${note}textPath" />
</div>
</div>
</c:forEach>
It appears that in a single form, you have multiple textarea fields with the exact same field name ("textPath") (and exact same DOM ID, which isn't good either).
If so, I'm not surprised that Spring combines all the values submitted under that single name, with commas separating them. What Java type is your model bean's textPath field? I think if it were an array or maybe List, you might get the values separated out. But that's just a guess.

Xpath extraction between two nodes

I have several web pages that have the following structure
<div id="w_33086" class = "eight columns">
<h2 id="about">About<span itemprop="name">Name of Place</span></h2>
<p style="margin-top: 0px;">
.
.
.
<p class="contactAdvisor"><a href="http://www.example.com/contact">
The text and markup between the two paragraphs is quite variable as it is created through individual users. In some cases it includes markup and in some cases it does not. When it does include markup, the mark up can be quite variable.
I'm trying to select all of the text and markup between these two <p> but have not been successful.
The best result I've achieved comes from //div[id='w_33086']/node()
However, that is dropping the <p> tags when those are present. It also picks up the <h2> tag and the <p class="contactAdvisor"> that I would rather exclude.
I'm using Google Sheets (and or Screaming Frog) to apply the xpath
If the two <p> elements are siblings of each other, then you could try
//div[id='w_33086']/p[#style="margin-top: 0px;"]/
following-sibling::node()[following-sibling::p[#class="contactAdvisor"]]
This is assuming that there is only one <p> under <div id="w_33086"> that has the style or class attribute value (respectively) that we're using to identify them.
Please note that XPath does not select any "markup". It selects nodes such as text nodes, elements (which have descendants attached), and attributes. Those nodes can be serialized as markup, but that's not XPath's business.

xpath accessing information in nodes

i need to scrap information form a website contain the property details.
<div class="inner">
<div class="col">
<h2>House in Digana </h2>
<div class="meta">
<div class="date"></div>
<span class="category">Houses</span>,
<span class="location">Kandy</span>
</div>
</div>
<div class="attr polar">
<span class="data">Rs. 3,600,000</span>
</div>
what is the xpath notation for "Kandy" and "Rs. 3,600,000" ?
It is not wise to address text nodes directly using text() because of nuances in an XML document.
Rather, addressing an element node directly returns the concatenation of all descendant text nodes as the element value, which is what people usually want (and think they are getting when they address text nodes).
The canonical example I use in the classroom is this example of OCR'ed content as XML:
<cost>39<!--that 9 may be an 8-->.22</cost>
The value of the element using the XPath address cost is "39.22", but in XSLT 1.0 the value of the XPath address cost/text() is "39" which is not complete. In XSLT 2.0 (which is how the question is tagged), you get two text nodes "39" and ".22", which if you concatenate them it looks correct. But, if you pass them to a function requiring a singleton argument, you will get a run-time error. When you address an element, the text returned is concatenated into a single string, which is suitable for a singleton argument.
I tell students that in all of my professional work there are only very (very!) few times that I ever have to use text() in my stylesheets.
So //span[#class='location' or #class='data'] would find the two fields if those were the only such elements in the entire document. You may need to use ".//span" from a location inside of the document tree.

How do I connect two divs so that they stay fixed together?

I want the header and the main image on a page to stay connected to each other so that when the picture resizes it doesn't become too far off from the header.
But whenever I try to look up the answer, the word "fix" throws off the whole search.
Basically I have two images with divs as containers but I don't know the key words to make them stay/move together.
Try simply wrapping them inside an extra div:
<div id="Wrapper">
<div id="Header">Header Text Here </div>
<div id="Image"><!--- Image Tag here ---> </div>
</div>

Resources