Use case : While gift cards are applied, NVDA should read out the error message for all error scenarios like, 'The card is already redeemed' or 'Error occurred while validating card' etc.
Issue : After applying code='alert' , the error message reads out, however NVDA partially calls out the error message one additional time. Please refer the speech-viewer snippet below for the exact behavior :
Alert Error while validating card
Shopping cart | Page title
clickable main landmark validating card
Code snippet : Added element.parent().after(error).attr("role","alert"); in the JS file.
Can anyone help me understand why and from where is the NVDA calling once again that too partially in Chrome, Firefox as well as Edge browsers.
Whereas, the same error message is being called out correctly while using the Chrome screen-reader extension in Google Chrome.DOM structure
It's difficult to assess without a little more of the resulting markup, but one possibility is that NVDA is reading your message once as a live region and once as part of the focused element's associated label or description. It's quite common to see spotty live region behavior across browsers.
Setting role="alert" SHOULD BE equivalent to setting aria-live="assertive" and aria-atomic="true". This means that the error text should, IN THEORY, be read first (assertive) and completely (atomic). Any other announcements, such as a label, aria-label, or description of what's in focus should then proceed, and that could include the error message.
First see how it announces without the live region by removing role="alert" and any aria-live properties there.
If the focused element does not announce the error on its own, put back the role="alert" and try setting aria-atomic="true" on your alert so that all browsers read the complete text and not just the change in the text.
Related
A few months back I wrote an extension to scan a webpage and extracts a few details from it. The webpage is an application form and users of the extension can select complete or incomplete after examining the details given by the applicant. Once the user clicks on the copy button on the extension it will automatically copy the details extracted by the extension to the clipboard with a pre-arranged templated format.
If the user selected complete, a tick mark will be added to the generated text by the following function. Here is the github link to the exact function.
if (completedOrIncomplete == "COMPLETE") {
completedOrIncomplete = completedOrIncomplete + " ✅"
} else {
//do nothing
}
}
}
The final clipboard text was something like this:
COMPLETE ✅
This was working properly until yesterday. Now it's not working.
And it displays a message like this, COMPLETE ✅
I thought this might be due to the "Fastly" CDN outage yesterday(09/06/2021) since it was reported that Twitter Emoji's were not loading due to the outage. Now the issue has been fixed by the "Fastly" but Emoji's are not still loading for some users.
What should I do to fix this issue?
Should a new release of the extention would fix the issue?
If it's in fact this Fastly CDN issue caused this, How could a CDN is related to Emoji loading?
Thank you in advance.
I have a scraping script written in Ruby which uses Selenium, Watir and ChromeDriver, all is working just fine with a Chrome browser window, but trying to run in headless mode just hits;
Selenium::WebDriver::Error::UnknownError: unknown error: Element <input id="desired_element" type="checkbox" name="desired_element" checked="checked"> is not clickable at point (660, 594). Other element would receive the click: <html lang="en">...</html>
I'm using Watir 6.8 and latest Chromedriver 2.33.
Any ideas whats n=behind the different behavior of the page when in headless vs non headless, and how I can deal with this?
The error message is telling you what the problem is when it says "Other element would receive the click:"
This means some other element on the screen is covering the checkbox you are trying to interact with. Likely this is caused by whatever the default browser size in headless mode being different than the default size of your browser when it is run non-headless, resulting in a different arrangement of elements
We can verify if this is the case by asking the size of the window in both headless and normal modes and seeing if the resulting values are the same.
size = browser.window.size
puts "The browser window is #{size.width} wide by #{size.height} high"
There are a few potential ways to solve this:
Specify or alter the browser 'window' size. for example
browser.window.resize_to 1024, 768
I prefer this, and normally have a command such as that to set the
browser size right after it is initialized. Set either to the
minimum supported size for your site, or the minimum recommended
size
Use another means to 'click' on the checkbox, such as sending a space at it
#browser.checkbox(name: "desired_element").send_keys " "
I do not prefer this as it doesn't really solve the source of the problem and you may experience other similar issues interacting with other elements on the site as your script progresses.
The reason for this kind of error is that web page doesn't load well enough to locate the element. As you have mentioned that the tests previously passed when you had headless true such issues might be because of .click() , please try replacing .click with .send_keys
.send_keys(selenium.webdriver.common.keys.Keys.SPACE)
When you use .send_keys() you might hit one more issue if it is failing to find elements, for solving this you will have to find the elements
elements = driver.find_element_by_tag_name("html")
elements.send_keys(Keys.SPACE)
Hope this helps you.
I have a big SVG document here, containing a map of all the quests in a certain online game. Each quest node is inside a SVG <a> element, linking to a distinct named anchor in a big HTML document that loads in another tab, containing further details about that particular quest. This works exactly as desired in desktop Safari, and I'd expect it to work just as well in any browser that supports SVG at all since I'm using only the most basic form of linking, but it fails badly on Mobile Safari (iOS 6) - which is my single most important browser target, considering that the game in question is for the iPad. It only scrolls to the correct anchor on the initial load of the HTML page; clicking a different quest in the SVG tab will cause a switch to the HTML tab, and the hash (fragment ID) in the address bar changes, but the page doesn't auto-scroll.
This appears to be a known limitation in Mobile Safari - hash-only changes in the URL apparently used to force a page reload, and that got over-fixed such that nothing gets triggered at all now. The fixes I've found online all seem to be applicable only in cases where the URL change is being generated programatically, from within the same document, rather than static links from a different document.
Further details:
I've tried doing the named anchors in both the old <a name="..."> form, and the newer <h1 id="..."> form. No difference.
I've tried adding an onhashchange handler, to force the scrolling to take place, but the handler isn't being called at all (verified by putting an alert() in it).
I could presumably fix the problem by having each quest's details in a separate HTML file, but that would severely affect usability - with all the details in a single file, you can use your browser's Find feature to search through them all at once. (Also, deploying 1006 files to my web hosting after each update would be a bit of a pain...)
Anybody have an idea for a work-around?
I have been working on this site for some time and just launched it for a client.
People have actually had trouble beleiving I had done it on WordPress, though I don't see why...
Anyway, I suddenly see that the form fields of one of the forms on the site (Newsletter Registration) disappear while on IE, you get to see them for a second and puff, they're gone. I did check this previously on IE and it worked, I especially used CSS3 PIE to get the rounded effect for the fields on IE...
Link to website: http://www.doritsivan.com (hope this isn't considered promotion, not my intention)
site is based on WordPress and jQuery.
resolved the issue, thank you all. it was a bad case of relative vs. absolute positioning and the fields decided to go away (literaly)
A bunch of debugging with firebug-lite (btw was real to get it to work on my IE, kept on crashing or refusing to load altogether combined with IE popup and security issues) and I understoid that this was the issue, then some pixel fiddling and all was good. rechecked in Chrome, saw that result was exactly the same. job done
I'm building in Expression Engine 2.3 a user profile system using Solspace's User and Friends modules. They work fine, but I'm having an incredibly difficult time with passing embedded variables around.
I've got a .profile_head template that's called from each template. The profile page, the friends page, the private messaging page, etc. It builds a user navigation, displays the avatar, all the common user stuff. All of this is based off of the user ID passed through {segment_3}. This allows me to display a different user's info by changing this segment.
The problem is doing this makes my URLs far too precise. I can't have users going to /users, they have to go to /users/profile/UID or the best possible scenario is an error page or redirect to the home page.
I tried to solve this problem through variables in my template:
{embed="/users/.profile_head" uid="{segment_3}"}
or......
{embed="/users/.profile_head" uid="{logged_in_member_id}"}
In the .profile_head template file, I can print out {embed:uid} just fine, but when I try to assign it to anything (i.e. a loop or another template), it breaks:
<!-- /users/.profile_head -->
{exp:friends:members member_id="{embed:uid}" dynamic="off" limit="1"}
or.....
{embed="users/.profile_column" uid="{embed:uid}"}
For instance, if {embed:uid} is set as {logged_in_member_id}, I get the following error:
Parse error: syntax error, unexpected T_LNUMBER in /var/www/system/expressionengine/libraries/Functions.php(656) : eval()'d code on line 9
This is line 9:
{if logged_in_member_id == "{embed:uid}"} <span class="this_is_you">This is you!</span>{/if}
I really am at my wits end. I need to be able to use this profile header in templates without requiring a user id in the URL for things like the user messaging and settings pages. But nothing I try seems to be working in the least.
I believe that {logged_in_member_id} is a late-parsed variable, which means it may not be available in some of your tags at the point they're processed - hence it's passed as literally {logged_in_member_id}.
Try using the CURRENT_USER constant instead.