I'm using Vimium on Firefox and Chrome and it helps me a lot https://github.com/philc/vimium
I noticed that some divs can be clicked and I found that class='demo-button' is one of them
<div class='demo-button'>demo-button</div>
<div class='demobutton'>demobutton</div>
<div class='demobuttonnn'>demobuttonn</div>
<div class='demobutto'>demobutto</div>
Here is a screenshot of Vimium links https://jsfiddle.net/qnvujfs6/
As you can see, only the last div demobutto can not be clicked using Vimium. I tried to search Vimium source for demo-button or demobutton but no results.
Does anyone have an idea why there is a difference between this demo button div-s ?
I want to be able to click on some generated elements using bootstrap plugins, for example Bootstrap Toggle. Here is code for two toggles, but only second one can be clicked because it contains demo-button class
https://codepen.io/duleorlovic/pen/VqWaEg
The first three are clickable because the class attribute contains the word "button" (See source).
For usability purposes it preferred to simply use the elements that are meant to do that job. For instance anchors (<a>) and buttons (<button>).
But if that is not possible (which seems to be the case here) you can also add the role attribute to the element. Elements with the attribute role with one of the following values will also be considered clickable:
button
tab
link
checkbox
menuitem
menuitemcheckbox
menuitemradio
(Source)
So if your div elements represent check boxes, your code would look like this:
<div class="demo-button" role="checkbox">demo-button</div>
<div class="demobutton" role="checkbox">demobutton</div>
<div class="demobuttonnn" role="checkbox">demobuttonn</div>
<div class="demobutto" role="checkbox">demobutto</div>
In this case you are not depending on specific class names, which are by the extension considered "as unreliable".
Related
I am looking for a way to go from my navigational links using voice-over accessibility to jump to the internal part of the page that link I connected to.
For example:
I have a list of links on my left-hand side. One is for Forms. When I click on "Forms" my list of forms will populate to the right of that panel, and then if you click on a specific form, that Form will appear to the right of that panel. The page contains 3 panels with Navigation on the left, list in the middle, Form on the right.
Right now if I click on the Form link, I have to tab through my entire nav panel to get to the newly opened Forms list.
Are there some ARIA elements I am missing that will help tab directly into my Forms List from the Forms link?
There are two simple ways to do this.
Note that neither of the following ways need any aria to work, the aria in the following examples is purely for best practices when adding sections and headings to a page.
Option 1 - anchors
The first is using anchors pointing to ids on the page.
in your side bar
forms
main page section
<section aria-labelledby="forms">
<h2 id="forms">Forms</h2>
<!---your forms --->
</section>
Notice how I gave the page content a heading (pick an appropriate heading level) and then labelled the section with aria-labelledby. None of this is required to make this method work but it is a good practice.
The only thing you need to do is to make sure your href matches the ID of the heading.
However given that you are populating the forms on the right side of the page (I am assuming with an AJAX call) you may want to manually manage focus with JavaScript....
Option 2 - Use JavaScript and .focus()
If you are using JavaScript it is a similar principle, give the section heading an ID, but this time once the forms list has loaded set focus on the list heading.
html
<!--your link in the menu -->
forms
<!--section on the page, I omitted the aria here for clarity / simplicity but it is still needed-->
<section>
<h2 id="forms" tabindex="-1">Forms</h2>
</section>
JavaScript
// start: however you have this implemented at the moment
const formsLink = document.querySelector("#getForms");
formsLink.addEventListener('click', function(e){
e.preventDefault();
get('yourURL').then((data) => {
// populate the list
list.update(data);
// end: however you have this implemented at the moment
// once the list is populated set focus on the heading (last thing to do after everything else is done)
document.querySelector('#forms').focus();
});
});
Notice how in this example the <h2> has a tabindex="-1".
We need this to allow programmatic focus. We use -1 so we can focus the heading via JavaScript but it does not get added to the page focus order (so you can't access it with Tab).
I'm having issues accessing the search bar with a dropdown menu. It looks like the element that I need to get is named "data-value" so that I can enter a sample id in the search bar but cannot access it.
I've been able to access a search bar in a different website before by using the .getElementbyID or .getElementbyClassName and using the .Value="123" to enter a sample id but cannot make it work with this website. Unfortunately, this is a company website and cannot be accessed publicly.
This is the code that I see when I click on inspect element on the search bar.
<div class="select-input items"> 'event symobol here
<div class="item" data-value="123456_S11">123456_S11</div>
<input type="text" autocomplete="off" tabindex="" style="width: 4px;opacity: 0; position: absolute; left: -10000px;"> 'event symbol here
::after
</div>```
I also tried this that I saw from a different post but it doesn't work.
```For Each pElement In pHTML.getElementsByClassName("item").getElementsByTagName("div").getElementsByAttribute("data-level")```
You can use a css attribute selector but you will need to ensure you are targeting the right element
ie.document.querySelector(".item[data-value]").getAttribute("data-value")
This assumes the first match for an element with class item and attribute data-value is the correct one. Otherwise, you need a different strategy such as gathering a nodeList of all matches and indexing in e.g.
ie.document.querySelectorAll(".item[data-value]").item(1).getAttribute("data-value")
Or adding in parent class
ie.document.querySelector(".select-input [data-value]").getAttribute("data-value")
I want to track clicks on the following button/link with Google Tag Manager. I created a trigger in Google Tag Manager that triggers when the element_id = 100. This works fine, except that when I click exactly on the text, it doesn't do anything, the link looks like a button, with the text in the middle of it. I can't change anything to the html or css, otherwise I can think of multiple things, so I need to find a solution without changing the html. Also, the 'myclass' class and the 'label' class get used in other elements.
<a class="myclass" id="100" href="http://www.url.com">
<span class="label">Text</span>
</a>
Anyone an idea?
Thanks a lot,
The following workaround worked:
Create trigger when element text contains "Text". This will trigger events on the button and the label on the button, of all buttons with "Text" as label.
Create tag for that trigger that checks with simple javascript if either the id of the current element = 100, which will happen when you click the button but not the label, or that the id of the parent = 100, which happens when you click the label. You can get the element that triggered the tag using the built-in variable "Click Element". Which you need to access the parent element.
Technically, you shouldn't have a CSS ID that starts with (or is) a number, so not sure if your code example is accurate or not. Whatever the case, you're probably better off using "matches CSS selector" so that you don't need to use any custom JS.
If indeed your HTML uses id="100", then the above will work. If it's anything else that doesn't start with a number, then you can use
#whatever > span
I have this button:-
<div class="dsk-col-1-4 card new">
<div class="div_center_div">
<span class="icon icon_plus-black-symbol"></span>
<h2>Create</h2>
</div>
</div>
But I tried with find element by classname:-
driver.findElementByClassName("dsk-col-1-4 card new").click();
But it does not work.
Any help?
Move to your element and click. Example:
new Actions(driver).MoveToElement(yourElement).Click().Perform();
The "by class name" locator usually expects a single class name to be passed:
driver.findElementByClassName("card").click();
If you want to use multiple classes, go with a "by CSS selector"
driver.findElementByCssSelector(".card.new").click();
Note that the dsk-col-1-4 class is not a very good choice for an element locator - this looks very much like a layout-oriented class name which not only have a higher probability to b changed, but also does not bring any information about the element and it's purpose. card and new on the other hand are a better fit.
Ok so I couldn't understand exactly Which element you want to click on,
So based on my assumption , try below Xpaths :
1) if it is <div class="dsk-col-1-4 card new"> that you want to click
//div[contains(#class,'dsk-col-1-4 card new')]
2) If it is that you want to click,
//span[contains(#class,'icon icon_plus-black-symbol')]
3) If it is <h2>Create</h2> that you want to click,
//h2[text()='Create']
Hope this Helps!!
Within your locator you're passing multiple class names, and although they are both assigned to the element the findElementByClassName function realy only works when it is a single class name. The way I'd do it would be to use findelement(By.Xpath()), in this instance you'd need to use
webDriver.findElement(By.xpath("//div[contains(#class,'dsk-col-1-4 card new')]")).click();
Is it repetitive/overkill, better or worse to use a two way assignment with aria-properties? for example using an aria-control and an aria-labelledby?
<div role="tablist">
Tab 1
</div>
<div id="panel-1" role="tabpanel" aria-labelledby="tab-1"></div>
It is ok to do this and it is also ok to not do this. The reason it is ok to not do this are:
Firstly: role tabpanel is a region role and does not require a label, so having no label is ok.
Secondly: You should create something focusable inside your tab panel (e.g. the first heading) so that a user can tab directly from the selected tab into the tab panel. When they do this, the focus goes straight to the focusable element. This means that the tab panel label would never get read.
The argument in favor of doing this is that a screen reader user, using DOM navigation, would encounter the tab panel and know which tab is selected without having to navigate to the tab itself.