In IE, Firefox, Chrome and most Windows-based interfaces that I've used, the Tab key can be used to navigate from one form field or hyperlink to the next (e.g. "actionable" items) (note: I have not tested on other Operating Systems)
However Safari and Opera skip all hyperlinks in a web page when tabbing. IMHO its a usability bug but I digress.
Is there a workaround/hack to make Safari and/or Opera navigate through these links?
I've noticed that Opera will accept the tabindex attribute if set e.g. tabindex="0" thus maintaining the links "index" within the flow of the DOM on the page... but Safari does not want to accept this.
For those interested, this bit of jQuery will make all the hyperlinks tabbable.
//Make links 'tab-able' in Opera
$(document).ready(function(){
if($.browser.opera){
$('a[href]').attr('tabindex', 0);
}
});
...and although this seems to work for Opera... is there a better workaround?
In Safari, it's not a bug, it's an optional feature. On the Mac, tab selects objects other than links, Option+Tab select all objects. You can swap the behavior of these shortcuts in Preferences->Advanced. Then tab will behave like in other browsers.
On Windows, Option+Tab is not available. By default tab selects objects other than links , but there is an option in Preferences->Advanced that makes tab select all objects. Then tab will behave like in other browsers.
You should probably not try to interfere with this, as you would interfere with the user's preferences.
Actually this is a bug, according to the spec (see below) anchors (<a> elements) are supposed to accept the tabindex property, and a tabindex of 0 should make it focusable in the order the elements appear in the document.
http://www.w3.org/TR/html401/interact/forms.html#adef-tabindex
Opera traditionally thought this was a feature, not a bug (we had and have other key shortcuts for navigating links, when you know those you might find it useful to have distinct navigation for links and form elements - tried shift+arrow spatial navigation yet?). To some people it still is a feature. True anecdote: once upon a time an internal build made links tab'able by accident and this caused so many bug reports and complaints it was promptly reversed. (As far as I remember, also because the tabbing was buggy in other ways).
We know, however, that tabbing to links is something most users expect and that we should implement a pref for this like Safari has. In the meantime, you can add something like your JS fix above to a user javascript to have tab navigation to links on all websites out there.
Related
I have a difficulties with some content of the web-page when I am trying to discover the element
For example some part of the web-page is blocked by the following:
[data-testid=shell-content]
Any idea what could possibly cause following?
In the browser, the page isn't blocked and (all buttons) can be accessed by the keyboard or mouse.
Tried to upgrade to the lates version, still the same problem.
The problem was described against the iframe, it has to be handled in a similar way in order to access the elements
cy.enter('iframe[data-testid="iframe-content"]').then((getBody) => {
getBody().find('[data-test-id="create-user-button"]').click();
please note that name shell-content could be different to what was name in your project.
I just noticed that when I typed in "cnn.com" into the IE11 address bar (Windows 10), that it automatically launched the website in Edge (Chromium) instead, then rendered this bar at the top of the site in Edge.
(it also looked like if this was the only tab in IE, it auto closed IE)
I like this new behaviour to help migrate users over from IE, but sadly I could not detect how this is done code wise by CNN.
I looked in Fiddler, scanned the HTTP Headers, and the meta tags on the site... e.g.
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
and the IE only comment tags:
<!--[if lte IE 9]><meta http-equiv="refresh" content="1;url=/2.250.0/static/unsupp.html" /><![endif]-->
but I don't see anything specific that seems to be triggering this? I'd certainly like to entertain applying similar behaviour to some sites/apps that I work on.
FWIW, it also triggers (if you try it enough times) this message to remain in IE11:
https://support.microsoft.com/en-us/office/the-website-you-were-trying-to-reach-doesn-t-work-with-internet-explorer-8f5fc675-cd47-414c-9535-12821ddfc554?ui=en-us&rs=en-us&ad=us
Edge 87 installs a browser helper object called IEToEdgeBHO that performs this redirection based on a pre-provisioned site list (https://edge.microsoft.com/neededge/v1)
Inside Edge, see edge://settings/?search=Internet%20Explorer for the setting that enables/disables this feature.
I recently uploaded custom html and css for one page on my big commerce store.The page is responsive, and mobile optimized. It works on desktops, but is over ridden by the generic mobile theme that is installed when I view it on my phone. How can I stop this page from being over ridden by the mobile version, without disabling the mobile theme completely?
Thanks,
There are 2 methods off the top of my head.
First method
Any HTML file on BigCommerce, with a mobile/responsive theme, has 2 copies of some part of the HTML page. The mobile HTML/CSS is simply triggered by an HTML class mobile on the HTML copy that is there to be only seen on mobile, which contains one copy of relevant HTML (ie, menus, logo, shopping cart icon and link, etc).
Another HTML block has class desktop and is only triggered for certain screen sizes (similar to mobile), and only shows it's desktop version of the HTMl when the screen size conditions are met.
So if screen is small, in your responsive.css file, .mobile is display:none;, while desktop class has all the proper visible CSS.
On the reverse, on desktop-sized screens, the desktop HTML is properly styled, while the mobile class HTML block is display:none.
So, in this first solution, you would simply place a copy of your custom HTMl and style it properly for display on mobile screens. This way, the mobile-styled version will only show up on mobile devices, while the desktop properly-styled version will only show up on dektop size screens. As far as BC goes, I think this is the optimal method.
Second method
You can make a custom template for the page in question. So if it's product.html and you want it custom for some specific product(s), you would create a product-custom.html and place it in your WebDav "/template/Panels" folder.
Now, on your product(s) which must use the new custom HTML, go to their page and scroll to the bottom and you will see a template file selection box, which should say product.html. Change that to your new product-custom.html.
Now, as for the custom file, simply edit the HTML/CSS rules revolving around .desktop and .mobile class (possibly just removing them all together) so that when a page is loaded on a small screen, the CSS rule to hide the desktop version won't apply. At the same time, you should delete the duplicate .mobile class HTML as it will no longer be needed.
This second method is much more flexible but also takes more work and is generally much more messy and requires much more maintenance.
I strongly recommend method #1.
Let me know if this helps and if you have nay other questions.
On my full screen browser page the header is visible but the footer is not visible on the current window. To see the footer we needs to page down N times as the intermediate contents is populated when we page down (dynamically populate). So my problem is to know how many times i needs to page down to see the footer. Adding to this question, is it possible to know if an web element is below the current visible browser area ?
If you are using QTP for identifying and operating on the objects, you need not scroll down. Make sure that you are using strong locator properties (htmlId, ObjectId etc) for identifying the element and your code will work just fine. QTP works on the HTML source of the web page; so it is immaterial whether or not the element that you want to work on is visible or not. I am assuming there are no AJAX components here. With AJAX, you need to employ a different strategy.
I'd like to bring Safari to the front (switch to) but without using a URL, instead I'd like to see the "pages" view so the user can pick an already loaded page. Is this possible?
We open links in Safari and if the user returns to the app and selects the link again, I'd rather let them pick which Safari page to browse instead of opening a new one. I know that if the same URL is called it will open the correct page but the user may have navigated within the original site so the url no longer matches.
Thanks,
Rick
I don't think that its possible, i would use a UIWebView inside your app in order to get that experience you want, you can find the UIWebView apple docs here (http://developer.apple.com/library/ios/documentation/uikit/reference/UIWebView_Class/Reference/Reference.html) and also the equivalence of c# methods here (http://tirania.org/tmp/rosetta.html) hope this helps
Alex
Your app doesn’t get control of Safari’s UI. You might, however, be able to design your site so that it handles navigation via Javascript—AJAX and whatnot—so that the actual page URL doesn't change, and thus so that the page, re-opened from your app, brings up the existing Safari page. Of course that introduces further problems with your pages no longer being bookmarkable, but you might find that an acceptable tradeoff.