We're doing a WAVE scan of our application to detect accessibility issues. One that I'm looking at now is the "Device dependent event handler". These are shown on the asp:Menu controls. What seems to be the relevant messages says: "an onmouseover event but not an onfocus event". When I look at the page source I do see the generated html like:
<td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(event)" id="ctl00_MainMenun4">
This suggests to me that it needs an onfocus event handler that does the same as the onmouseover handler. Am I correct in this assumption. Is there a way to get asp.net to generate this or can/should I look at a way to manually inject this? If the latter, any suggestions?
Thanks for any help!
Adding an onfocus event handler is not sufficient to make the table cell accessible. Table cells are not focusable elements. (Focusable elements are usually a elements with an href attribute, link elements with an href attribute, button, input when type is not "hidden", select and textarea.)
In order to make other elements focusable, you should set the tabindex attribute to "0". This will put the td element in your example in the tabbing order and make it reachable with a keyboard. If it can receive keyboard focus, it will also be able to fire the focus event that your listener will be waiting for.
I found the answer. See this MS article. For the asp:Menu controls I needed to set the Menu's RenderingMode to MenuRenderingMode.List and change the pages element in the web.config controlRenderingCompatibilityVersion="4.0".
<td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(event)" id="ctl00_MainMenun4">
This suggests to me that it needs an onfocus event handler that does the same as the onmouseover handler. Am I correct in this assumption. Is there a way to get asp.net to generate this
It depends on what is inside your td
For instance, you can perfectly have:
<td onmouseover="func_somewhat()">Click</td>
Putting onfocus and tabindex on the td element will lead to accessibility problem due to the fact that the element itself contains a tabable element.
And this code might be plainly accessible, as long as selecting the inner link with the keyboard permit to achieve what you are expecting.
If the element inside the td does not have any focusable element, then you may add the onfocus event handler on the td itself but you have to satisfy more conditions :
the td should be focusable (tabindex)
the td should be indicated as being a role=button or role=link depending on the lead action
the table should have a presentation role if it's used for presentation (which is apparently the case here)
Related
I want to fire a GTM trigger based on the div the button is in.
The Tag Details show the Click Element condition is not met:
But the Variables on the exact same Click show the Click Element does contain 'div.website-notice':
I cannot figure it out. Please help :)
Updated GTM Debug output is misleading. Click Element value is HTMLElement not a string so you have to use matches CSS selector condition instead of contains in your trigger.
You can use "match css selector" as contain.
The click element seems not working the same way as other built-in variables.
There is a contact form and when submitted it is not directed to a different page, it acts on the same page and gives a flash message that the forum has been sent.
<span class="form-submitted">Thanks For Submttied</span>
The form-submitted class is unique class and only appears when the form is sent.
I need to track, when this element appears on page.
How I can track the measurement?
If I understand correctly, the element is displayed once the form is submitted. For that, GTM has a "Visibility trigger", that can trigger tags when the display property of the element is changed, or when it is dynamically inserted into the page.
Go to "Triggers", create a new trigger, select "Element Visibility" as trigger type, change "Element Selector" from "id" to "CSS Selector" and enter the class of your element.
If your element is inserted dynamically rather than made visible via CSS styles, you need to check the "Observe DOM changes" checkbox. Checking for DOM changes is an expensive operation, so you will get a warning that this might affect performance (although in my experience this is more of a theoretical concern).
Caveat is that the element needs to be visible to the user, i.e. inside the viewport. If it appears outside the viewport (e.g. in a small browser window) the trigger will not fire.
I am using WebDriver and Asserts as modules in my acceptance testing.
Using WebDriver, I am trying to click on a label that acts as the javascript anchor for a form checkbox (the actual checkbox being hidden and a ::before font element being used to represent the checkbox as checked or not).
There is a link in this label which is located at the center of the element; the position I assume is targeted by the click() method. Due to this, I can't just click() on the element, as it will click the link instead of triggering the checkbox.
I envisioned that the solution for this problem would be to moveMouseOver(), using coordinates arguments in order to displace it to the side, then to trigger a click... but click() does not allow for a click event at the current cursor location, instead requiring a selector to be applied, thus defeating my purpose.
Is there any way to accomplish what I am attempting in the current WebDriver module in Codeception? Alternately, is there a way to accomplish this targeting of an uneven element for clicking without the process I've outlined?
Thank you for whatever help you are able to give.
I use a workaround: just making element visible via JavaScript:
$I->executeJS("$('css_selector').css({'display':'block'});");
I have a treeview control where I am dynamically selecting a node depending on user interaction. when a node is selected I want to be able to have the scrollbar go to the location of that selected node in the tree. The scrollbar is simply made by overflow:auto in the div tag where the treeview is located. Can someone give me some detailed code to accomplish this? Thanks in advance.
If the scrollbar is a browser default triggered by overflow:auto, you'll probably need to use javascript. See if the answer below works for you:
Programmatically scroll to an Anchor Tag
In other words, you will need to figure out the ID of the selected node (or insert an element with an ID into the text of the node), then insert a snippet of javascript into the page (using, for example, a Literal control) that will scroll to that element when the page is loaded.
It's hard to give specific examples without seeing your code, but let's say your selected node is called ActiveNode and you've inserted a literal control called litScript. Then you could do something like this:
ActiveNode.Text = ActiveNode.Text & "<a id='TVSelectedNode'></a>"
litScript.Text = "<script type='text/javascript'>document.getElementById('TVSelectedNode').scrollIntoView(true);</script>"
I quickly tested this in Firefox, and it seems to work
<button>Go</button>
The Validator didn't choke on it, but is it a reliable way to make a button a link?
Well, anchors are not necessarily links. This is why the validator doesn't choke. External anchors contain an HREF, sure, but internal anchors simply have a name attribute that can be referenced by placing #name in the URL.
Now, whether or not you should be placing a button in a link is another issue. The DOM uses event bubbling, so technically the button should respond to the click before the link does. But I do not know if this translates the same across all browsers.