I'm building an iOS app that uses a webview in one place. When the user taps on an textarea and the keyboard appears the textarea get a shadowing highlight effect and then goes back to normal. Please note that I'm not talking about webkit-appearance och outline, but the shadow that covers the whole textarea being tapped.
I'm guessing this is some kind of accessibility feature. Still, it mess up my animation and makes the whole view look like crap.
Does anyone know if it's possible to remove this highlight shadow?
You can disable it by setting the css attribute -webkit-tap-highlight-color to rgba(0,0,0,0);
But as you mentioned it is a usability feature, so you should not turn it off. ;)
See:
http://www.yuiblog.com/blog/2010/10/01/quick-tip-customizing-the-mobile-safari-tap-highlight-color/
Related
The bug is described in detail here https://bugs.webkit.org/show_bug.cgi?id=134596
Relevant part is this:
Without Scrolling you should be able to click any of the radio buttons
Now scroll down the page
Trying to click any of the radio buttons on the left results in an
offset click. One of the radio buttons below your click will receive
the event.
Expected: The radio button I clicked on gets focus
Actual: The click event is offset the amount the iframe was scrolled.
Main difference is im not using an iframe, just a div, but the same problem.
If I remove either overflow:auto (but it wont let me scroll then) or -webkit-overflow-scrolling property the correct clicks happen. It looks like it was fixed in a nightly, but this has to work now and for backwards compatibility. Is there a hack to get this to work? My best idea so far is to just not have that -webkit-overflow-scrolling prop for iOS until it works, but that kinda sucks because momentum scrolling is what makes it feel much more like an app.
I have a custom radio button that has a colorized and larger circle for the button. It's implemented using CSS as found in http://webdesign.tutsplus.com/articles/quick-tip-easy-css3-checkboxes-and-radio-buttons--webdesign-8953
However, when you have display:none in your CSS for the radio button, it confuses VoiceOver and the element is no longer read as a radio button even though the <input> type is 'radio'.
<input type="radio" value="1" id="rad1" name="station"><label for="rad1"><span></span>Helium</label>
<input type="radio" value="2" id="rad2" name="station"><label for="rad2"><span></span>Hydrogen</label>
input[type="radio"]
{
display:none;
}
I tried adding role='radio' to the <input> tag but that didn't help. When VoiceOver doesn't think it's a radio button, then you lose valuable interaction information. VO no longer says "radio button" or "1 of 4" or "checked".
All I can think of is not using display but rather using position and left to force the original radio button circle to be off the display.
input[type="radio"]
{
position: absolute;
left: -1em;
}
This does seem to work but doesn't seem "right". Is there something more elegant? Typically, with screen readers, you don't want to move an element off the visible display because with a screen reader, you can still put your focus on the item through various navigation techniques.
Also, when the circle itself is just pushed off the display, VoiceOver still knows about it and draws its focus rectangle to include the item that's off the display. This causes the rectangle to span all the way to the left edge.
Edit: Using left:-1em doesn't work either because it causes the display to scroll to the item that's off the screen when you swipe with VoiceOver on. My next attempt is to not hide the radio buttons (ie, don't use display:none) but leave the buttons there but cover them up with the background image used for the buttons (as explained in the webdesign url). This seems to work. I have
left:-20px;
position: relative;
for my <span> tag (which is where the image is displayed) and that causes the image to be displayed on top of the radio button circle.
So the end result is that, visually, you don't see the native radio button circle but rather see my image circle, and VoiceOver still thinks everything is a radio and announces "1 of 4" and "checked".
I didn't mark this as my answer to my own question because it still feels like a hack. It sounds like a bug with VoiceOver that it doesn't announce the element as a radio button.
display:none and visibility:hidden will hide content from screen readers. Using an absolute position off the screen is called "Screen reader text", this will hide the content visually but still have it read by a screen reader. This is true for all desktop and mobile screen readers.
So if you use display:none your radio button will be ignored, this is correct behaviour. The usual solution would be to place the radio button off the screen, but you are right that VoiceOver then places the focus on the left edge of the screen. Other (desktop) screen readers won't do that, it's just a weird behaviour of VoiceOver (imho a bug in VoiceOver). I wouldn't worry about this too much as this is just how VoiceOver works, but obviously your own suggested solution (placing the radio button behind the image) is possible in this case and is far better as the visual VoiceOver focus is then in the correct place. I wouldn't call it a "hack" - at least not any more that the very common practice of "screen reader text" is essentially just a hack.
Note there are often situations where you need to add some extra information for screen readers like VoiceOver where you don't have an image to hide the text behind, then placing the text off the screen may be the only option and the visible VoiceOver focus at the edge of the screen is a trade-off you need to accept.
A good summary of different techniques how to hide content can be found here: http://webaim.org/techniques/css/invisiblecontent/
Another option is to use role="radio" on the element you want screen readers to focus as the radio button. You'll want to make sure you add aria-checked, aria-disabled, etc as needed. Lastly, you can use aria-hidden on the real radio button to make screen readers ignore them.
More info. about role="radio": https://www.w3.org/TR/wai-aria-1.1/#radio
I use CSS to hide the actual <input type=radio/> under the <label>-graphic by using z-index: 2; or something else higher then the <input>'s z-index on the <label>.
This is proven to work even on older iOS where pressing the label didn't focus/activate the input.
Another way is to hide the <input type=radio/> by hiding it off-screen like this:
position: absolute;
left: -999em;
(If you minus this could you explain why? This is the most accessible solution for all iOS versions and other User Agents/Assistive Technologies combos)
In the common behavior of UITextVew if the user taps in the middle of a word the cursor gets placed at the beginning of that word, or in other cases it selects the whole word.
I would like to entirely disable this and just let the user tap anywhere in the UITextVew and place the cursor just there.
Also I would appreciate to know if this is possible too for a UIWebView with contentEditable enabled.
Thanks in advance.
To get this behavior you have to build the text view yourself using core text. Or your only support iOS7. There you will have TextKit.
In jQuery-UI dialog box, the first button appears to be the default, therefore having focus set to itself.
But, this causes a frustrating effect, especially in Safari. Even in IE, you will see a rectangular selection mark around the button. Moreover, the hover effect will not be seen.
How can I set NONE of these buttons as default and therefore NOT having focus set on any of them?
Edit:
Examples can be seen at jqueryui demo pages and a snapshot using Safari is below.
I want to get rid of this blue selection.
I think it could be an css-class, that turns the button to "default".
Check with the Firebug Element Inspector what classes are applied to these buttons, and append the standard css class to all buttons of the form.
I have a jQuery UI Dialog, it is Modal and shows with a Bounce effect. I use a Theme where the background is dimmed with a striped image.
The first time the Dialog is opened, the striped background also covers the dialog during the bounce effect. Once the bounce effect has finished, the dialog becomes modal and appears in front of the striped background.
On the next opening, the dialog bounces in front of the background right away.
How can I make the dialog appear in front of the background right away?
Tom's answer pointed me in the right direction, and Firebug was very useful!
The dialog is wrapped in a <div class="ui-effects-wrapper"> which is generated in the createWrapper function in ui\effects.core.js
I added a parameter "z-index=1005" (just to be sure ;) there.
So in jquery-ui-1.7.2.custom.min.js it now looks like this
createWrapper:function(f){if(f.parent().is(".ui-effects-wrapper")){return f.parent()}var g={width:f.outerWidth(true),"z-index":1005,height:f.outerHeight(true),"float":f.css("float")};f.wrap('<div class="ui-effects-wrapper" style="font-size:100%;border:none;margin:0;padding:0;z-index:1002"></div>');
Not sure if it's the best way, but it works.
This sounds like the zIndex of the dialog is not assigned until after the animation. Try this in your CSS:
.ui-dialog {
z-index: 1002;
}
Dialogs usually have this CSS class, and the overlay usually has a zIndex of 1000 (at least in the version I am currently using). If this doesn't work, try to find out (using Firebug) what other classes are assigned only during the animation and assign a zIndex to those.