Let's say I have an onFocus event for a text box. That event triggers when the user tabs into that box, as expected. But it also seems like the event triggers when the box is selected, and then the window is covered and then uncovered, by switching tabs, opening then closing another application, etc. Is there a way to make it so that the event triggers only by tabbing (or mouse-clicking) the text box, and NOT by covering then uncovering the window?
You can use an onClick event. This will only trigger the event on the click though, not tabbing.
You could also use onKeyDown which would trigger on any key press, but would also trigger when the user tabbed away from the textbox.
http://jsfiddle.net/kBzAu/2/
when one goes away from page, you may use window.document.onblur=function(){disable all onFocus};
and re activate them with window.document.onfocus=function(){enable all onFocus};
Related
I want to create a popup next to some data that contains a few input fields. Let's pretend that the we have the following document structure
<input name="before-the-data" type="text />
<div id="the-data"><!-- presents some data --></div>
<input name="after-the-data" type="text />
When you tab forward from before-the-data the popover should open and focus should go to the first input in this popover. This popover is appended to the body kinda of like Modal from material-ui so that it lies above the rest of the content. Similarly the popover should open when you tab backwards from after-the-data.
The popover should behave as if it were inside #the-data for navigation purposes but the actual position would be at the end of <body> for presentation purposes.
To achieve this effect, I set tabindex="0" on #the-data and trigger opening the modal and shift focus into it. This works fine so far.
Now for the question: How do I best create the following effect?
You should be able to navigate back out of the modal. My idea was this: When focus shifts from it or the user clicks outside the modal, we close it and restore focus to the element that had focus before it opened up. This can be done with a simple onblur handler and a onclick on a backplane. To support tabbing, the resulting modal looks like this:
<div id="backplane" onclick="closeAndRestoreFocus()"
onfocusout="checkCloseAndRestoreFocus()">
<div id="beforecanary" onfocus="shiftFocusBefore()" tabindex="0"/>
<!-- popover content -->
<div id="aftercanary" onfocus="shiftFocusAfter()" tabindex="0"/>
</div>
You can see that I added two divs that you can tab to beforecanary and aftercanary. When they get focused they shift focus to before-the-data and after-the-data respectively, to simulate as if the popover was actually inside #the-data.
At this point, you hopefully have understood what I am trying to create. Thus, the question: How good is this approach in general with respect to accessibility and how can I make sure I follow best practices of WAI-ARIA?
we close it and restore focus to the element that had focus before it opened up
That might be considered a tab trap, 2.1.2 No Keyboard Trap. Isn't the element that had focus before the popup the #the-data? So if I tab from before-the-data to #the-data, the popup will open. If I press esc to close the popup (you didn't mention that esc would close the popup but it should), the focus goes back to #the-data, which will automatically open the popup again, won't it? (Because onfocus() ran again.)
If I just tab through the entire process, I think it would work. It's just the dismissing of the popup that causes the problem. Tabbing straight through everything would move focus from before-the-data to #the-data to the elements in the popup to after-the-data then to the rest of the page, right?
When tabbing backwards, from after-the-data to #the-data, is the focus moved into the last element in the popup? Since I'm tabbing backwards, it needs to be on the last item so that I can continue tabbing backwards through the popup and then to before-the-data.
The popover should behave as if it were inside #the-data for navigation purposes but the actual position would be at the end of <body> for presentation purposes.
If the popup is in the DOM at the end, that would not allow a natural tab order. You can certainly put it there but then you have to manage the tab order. It would be much simpler if the popup was truly part of #the-data. Then the browser handles the tab order naturally.
You also have to be careful with automatically opening a popup but it might be a violation of 3.2.1 On Focus. See "Example of a Failure: A help dialog". It sort of describes what you are doing but is a little different. In the failure example, focus is moving to an input field, and the popup opens automatically and the focus moves from the input to the popup. Your case is a little different because you move the focus off the input first (or before-the-data) and then the popup displays, which would not violate 3.2.1. I just wanted to point this out in case you change your interaction model.
So in summary, your current behavior is kind of like a skip link. Skip links are often implemented as "hidden" links that only become visible when you tab to them and allow you to jump to a location on the page. The fact that they become visible upon focus is how your popup works (since it too becomes visible when it receives focus). The difference is that skip links do not dismiss if you press esc. They do dismiss if you click outside of them. I think that's the behavior you're trying to mimic. If you ignore my comment earlier that esc should dismiss your popup, then you'll be ok. I only had that comment because it sounded like your popup was like a modal dialog.
I have a form in Access 2013 that uses a button to jump to another form.
However when the button is clicked certain requirements have to be met in order for the jump process to actually be executed. If the requirements are not met the user is forced to stay on the current form (with the button).
When this happens the button stays in the clicked (i.e. pressed down) state on the form, making it look like it's being constantly pressed.
(Note: If the button is clicked again and the requirements again aren't met it pops back out...)
Is there any way to change the appearance of the button back to the unclicked appearance after every click when the user is forced to stay on the current form?
Many thanks in advance for any kind of help!
A regular button can stay depressed for a short while, while its _Click() event procedure is running.
But once that finishes, it always returns to its normal state.
So the assumption was, that a toggle button was used instead, which turned out to be correct.
I have a Button on my windows phone application. I have the Command Button binds to my RelayCommand in my ViewModel:
<Button Command="{Binding DoSomethingCommand}" CommandParameter="aString"/>
I see DoSomethingCommand get invoked correctly when I press the Button.
But when the keyboard is launched, I need to click the button twice before I see the DoSomethingCommand get invoked. The first click causes the keyboard to close, the second click invokes DoSomethingCommand.
Can you please tell me why there is a change in behaviors when the keyboard is open or not?
I came across the same issue today.
To explain it a bit better: a text box is focused, the keyboard is visible and a button is below the text box. Tapping this button the first time, unfocuses the text box and closes the keyboard. Tapping the button a second time, triggers the tapped event.
To solve this, I set MyTextBox.IsEnabled to false and then back to true in the next line. Setting it to false, unfocuses it. Setting it to true again, makes it usable again. The user won't notice, the keyboard closes and the button is tappable the first time.
Alternatively, one can set the focus to the button after leaving text box focus.
I'm creating a game in Flash CS5.5, basically a version of "Who wants to be a millionaire?".
I have an answerDisplay Class which contains an answer text. Answer texts can become rather long, and since I have limited screen space I check for very long texts and if a text is too big I add a UIScrollbar besides the text field.
Which works nicely, except for one thing - when the user drags the scroll tab, the text scrolls fine. When the user clicks one of the scrollbar arrows the text field also scrolls fine, as long as the button is clicked, but as soon as the mouse button is released the click event of the containing answerDisplay class is fired, which leads to my program wrongly thinking the user had selected the answer while he just tried to scroll.
I tried catching this via e.target and/or e.currenttarget, but it's no use, I never get a reference to the scrollbar, so I'm never sure if the user clicked one of the arrows or if he genuinely clicked the answer to select it.
How can I make certain that the click event of my answerDisplay Class is not fired when the UIScrollbar is used?
Checking e.target and e.currentTarget is a good start.
You might also want to check the event phase:
For more details on event phase, check grapefrukt's answer
A click from the answerDisplay Class dispatched event should have AT_TARGET phase, while the UIScrollbar event should have the BUBBLING_PHASE. This should help you differentiate between the two.
Also, you could add event listener to the UIScrollbar in your answerDisplay Class to capture the event and then suppress it via stopPropagation().
Depending on how UIScrollbar uses event bubbles internally, you can try either stopPropagation(), either stopImmediatePropagation(). The goal is to stop the event bubbling up from answerDisplay, but not breaking the UIScrollbar functionality.
In Microsoft Access 2007 the Textbox can be set to display a cut-down version of HTML as richtext.
However, there does not seem to be an easy way to detect what has been clicked within the box itself.
For instance, you can display a classic HTML <a> tag that appears as a link but clicking it doesn't generate any event.
I'd like to know what has been clicked, somehow.
Any idea?
I don't have A2007 to test this, but if clicking the link sets the cursor position, you could check the rich text control's .SelStart property (while it has the focus), but I don't know what event you'd use to trap this. OnEnter and OnGotFocus seem to be too early, and OnChange won't fire just for clicking a link, but the control's OnClick event might do the trick.
If so, you'd have to parse forward and back from the selection point to figure out if you're in a hyperlink, and I'm not sure exactly how that works in the A2007 richtext control.
Sorry I can't be of more help, .OnClick combined with .SelText might work if the click on a hyperlink sets the cursor position within the clicked hyperlink.