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.
Related
I have derived a TFramedScrollBox to implement in my component a class which constructs me on a given dimension (x and y) buttons onto the FramedScrollBox. This works fine. Touchscrolling on this object works fine, if the property Touch.Pan is set to true. Then i even can scroll over the buttons and by "touching" or "tapping" the buttons the click event happens right after the touch. This derived component, my component, is used all over the application, because it need to be.
The Problem(s)
The given app is running in fullscreen mode on win 8 systems which is currently necessary for our business. In the above explained situation is not possible to tap the buttons fast after the others, because some click events don't rises. And the logic behind is not necessary. That is one problem... If I switch the form to none fullscreenmode then a touch on different buttons rises the click event immediatly as wished. Now i have discovered that if the above mentioned property Pan is set to false, then even on fullsceenmode every touch click rises the event but now the scrollbox don't scrolls by touch gesture...
Now comes my question in the title...
Ps. if wished i can send a simple sample...
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)
I'm using Jquery mobile and doing some custom stuff.
The default collapsible object just seems to 'show' the hidden content instantly, which I find a bit user unfriendly. A few problems occur with this in that if the button is at the bottom of the screen, and the hidden content is off screen, then the user might not know that anything has even happened.
In my mind two things should happen.
The content should slideDown().
I should have the option to have the page scroll down so that the button finds itself at the top of the screen, in doing so guaranteeing the the previously hidden content is visible.
Any pointers in how I might go about doing either of these?
If I understood you correctly you are talking about a collapsible content block and when a user taps on the header it should scroll down a bit so that the body part is shown to the user.
You can do it by attaching a click event to the header that triggers a scrolling. In the code below I have done it as an animation. I also have adjusted the scroll position with -40px so that the user still sees some part of the elements that are on top of the header.
$('.ui-collapsible-heading-collapsed').on('click.scrollintoview', function (event) {
$('body').animate({ scrollTop: $(event.target).offset().top - 40}, 500);
});
how can I animate only a part of an element?
I show/hide a div using jquery-ui's show method but I'd like to start/end the animation from/to a given height of the element.
My dev website can be seen here (link removed). When clicking on the 'Contact' button the contact page shows up or hides if it's already open. Since I couldn't find how to starts my animation from a given height I added a fixed button when it's closed, but when the contact button of the contact page overlaps the fixed button when it's closing...
Any help welcome!
looking for something like this??
http://jsfiddle.net/rlemon/F6Efp/8/
You can also add any fade or whatever effects. This is using a single button to animate both open and close. You could also attach a attribute to the button tag to define it's current state.
I'm a newbe for Blackberry and finding it quite difficult, I'm working on the TabControl example. I have changed the tabs to scroll. Now when i scroll through tabs the focus changes and as soon as the focus shifts to the other tab, the data for that tab appears.
I want to make these tabs clickable only, though they shall scroll but should change only on click.
And also when i use UIApplication.getApplication.pushScreen(someScreen) in the tabs, this someScreen appears out of the tabs, whereas i want to show this screen below the tabs only.
please help
You have to override onFocus(int) to not do anything when focus is moved. (You may or may not have to override touchEvent to handle an actual CLICK event).
You can push a screen into tabs that is not part of the tabs already. If you want something new to appear, try switching managers within the screen instead.