I'm facing an accessibility issue with Safari browser on tabbing. Anchor tags are not getting focus on tabbing.
I have checked with and without tabindex. Setting tabindex="0", but nothing changed, not sure this is a bug in Safari or not. Tested in other websites including https://www.microsoft.com , the same experience.
Safari Version 10.1.1 (11603.2.5)
Mac : OS X El Capitan
Button element is getting focus, only issue is with anchor tag
<a id="footer-linkedin-link" target="_blank" class="social-footer-icon" aria-label="Follow on LinkedIn" href="https://www.linkedin.com/"></a>
Any valuable inputs will help me. Thanks in advance.
You can't have an empty anchor tag - there's nothing to tab to. That's an HTML validation error so browsers may handle it differently. Without your CSS I'm not sure exactly what you should do, but I'm guessing you really want something like this:
<a target="_blank" href="https://www.linkedin.com/">
<span id="footer-linkedin-link" class="social-footer-icon" role="img" aria-label="Follow on LinkedIn" ></span>
</a>
The icon being inserted with CSS needs to be the content within the anchor, be properly cast as an image using role="img", and that should have the aria-label.
Related
I am running tests for iPhone safari on browser stack. But click command is not working for iPhone safari on browser stack Selector seems to find an element correctly, but click does nothing and no error,no action ,just silently not executing click.
Same test running perfectly with android device. This is issue with dom structure and I wants to click on parent of parent's element.
I have tried below code snippet and worked for me.
const element:WebdriverIO.Element = $('selctor');
let parentEle = element.$('..').$('..');
Should be possible with xpaths using the xpath axes, specially ancestor
<div class="one">
<div class="two">
<input>
</div>
</div>
To find the parent elements of input you could use an xpath like
browser.$('//input//ancestor::div[1]') //finds div with class=two
browser.$('//input//ancestor::div[2]') //finds div with class=one
Sounds like you need
browser.$('//input//ancestor::div[2]') //finds div with class=one
I have developed a Hybrid application for BB10 using IBM Worklight. I am using JQueryMobile. I have a page which has a footer containing links such as Home, About and Contact Us.
The issue is that, the links require multiple taps to hover. Sometimes, the links works in a single tap.
Sample Code
<div id="testFooter" data-position="fixed" data-tap-toggle="false">
<div class="ui-grid">
<a class="ui-block-a" href="#Home" style="padding:10px;display:block">Home</a>
<a class="ui-block-b" href="#About" style="padding:10px;display:block">About</a>
<a class="ui-block-c" href="#Contactus" style="padding:10px;display:block">Contact Us</a>
</div>
</div>
I have tried to increase the touch area for the anchor as follows. But, this does not solve the problem.
<a style="padding:10px;display:block">About</a>
Since the time I remember working on BlackBerry, there has always been this delay. Meaning, you must first 'touch' the screen, and only then further taps are recognized.
Here is a BB dev forum topic that talks about this as well: http://supportforums.blackberry.com/t5/Web-and-WebWorks-Development/Webworks-App-doesn-t-respond-to-key-events-until-screen-touch/td-p/1714221
I think this is called Navigation Mode or something alike.
https://developer.blackberry.com/html5/search/?search=navigation+mode&searchaction=Search
I want to create a radio button in a .cshtml file. This simple code is not rendering a radio button in Safari:
<input type="radio" value="1" name="testme"/>
It works perfectly in IE8, but in Safari 5.1.7, radio buttons are not rendered. This happens only for .cshtml files.
You should have unique ids. Right now all your input fields have the same id which is invalid HTML. I don't if the rendering issue is related to this but it's a problem that needs fixing. Also AFAIK param is an invalid attribute for the <input> element.
I removed the overflow:hidden style for the <td> which was causing the radio button not to be rendered in Safari - overflow:hidden is behaving differently in Safari.
I'm looking for a JavaScript/jQuery plugin which allows to use a fixed header on mobile browser.
iScroll seems to be the most popular solution but I was interested in a plugin that isn't constantly calculating the position of the header while scrolling.
The idea is the same used by jQueryMobile fixed toolbars, while the user is scrolling the header disappears and only reappears after finishing scrolling.
It's more simple than what you think.
I use this code:
<div data-role="header" data-position="fixed">
<h1>Fixed Header!</h1>
</div>
See more info:
http://jquerymobile.com/demos/1.2.0/docs/toolbars/bars-fixed.html
I have the following code in my index.html
<li>
<select name="cmbtype" style="display:none" id="cmbtype" onChange="Changetype()">
<option value="0">
<input type="image" src="images/ocean.png" value="Play" onclick="previewplay(); " />
</option>
</select>
</li>
In firefox, opera and IE 7 I see the ocean.png and am able to click it. When I do, it accordingly plays the mp3 it is supposed to!
When I load this same code in Safari (Windows and Mac), as well as in Chrome the ocean.png is not seen and there is no button to click?
Is there something I can add or do to get this code/design to work in Safari and Chrome?
Thanks
Why do you have the input in your select?
It probably inherits the display: none therefor not getting rendered, which I would assume would be the correct behaviour.
Maybe IE, firefox and opera finds it illegal syntax and rewrite the input outside of the select, but webkit does not.
It is illegal HTML markup and not supposed to work.
<li> stands for list item and must be inside an <ol> (ordered list) or <ul> (unordered list)
<select> can have <optgroup> and <option>
<option> can have characters but no element
In this case Chrome and Safaris way of doing it is the correct way to do it.