My implementation have the following components on a modal screen.
A form that will be used for searching.
A table where the user will see the results
The user will be able to search and then scroll through the result list using the keyboard (using upward arrow or downward arrow).
When the user hits enter to search, I blur the focused field...
When I blur the focused field the user loses the ability to scroll the browser window using upward arrow or downward arrow...
In order to re-enable this default browser behavior the user should hit tab once on his keyboard...
My Question is:
How can I programmatically re-able browser navigation?
PS.: The default browser navigation that I'm mentioning here is the behavior that happens when you hit upward or downward arrows on your keyboard.
Any help is really appreciated.
Thank you in advance
Edited:
The following snippet of code describes my scenario
http://plnkr.co/edit/YCvfQt?p=preview
$scope.onSubmit = function() {
$scope.dataSource.push({ name: $scope.personName });
$('#personNameField').blur();
};
Scenario(You should use only your keyboard to replicate):
In the Live Preview click on 'Open' Using the keyboard you should
write something and hit enter (don't click on screen)
After clicking on enter try scrolling through the list
You will notice that it is not possible (You are able to scroll
again if you hit tab once)
What I want to do here is enabling scrolling again after the user hits enter...
Please let me know if you need more context.
Thank you
It turns out that we only need to give focus on the main element on screen... In this case the modal....
For my example that would be:
$('#myModal').focus();
Thanks for the comments
Related
In the 1001st implementation of carousel I would like to "properly" handle the focus.
A few quick questions related to UI/UX of this component:
the arrows and the page navigation can accept focus if the TAB key is used. Should I keep the focus on the arrow button after a click event? Is it possible to do it wo calling element.focus() method - like pure HTML/CSS solution?
the page navigation area is suppose to handle the arrow keys inputs - the same question for it: Should I keep the focus once a page navigation button is pressed? Is it doable wo element.focus()? What should be ARIA role for this component?
the design requires 4px height navigation buttons - really hard to click on mobile. In order to make them useable, a div is added as a child of a navigation button so the height of click zone is extended to +20px. Is there better way to extend the "hot zone"?
how can I exclude the additional divs so as not to contribute to area of focus rectangle
Regarding focus, you ask if the focus can be kept on the buttons without using focus(). Absolutely. In fact, when you click on a button, the focus will not move unless you specifically move it or if the element you clicked on gets hidden. So if your desire is to leave the focus on the button, then you don't have to do anything.
That's the preferred behavior - leave the focus on the button. If I'm exploring the carousel slides and I'm a keyboard user, I will navigate/tab to the "next" button and press enter. I'll review the slide and if it's not what I want, I'll press enter again (assuming my focus remained on the "next" button) to see the next slide. If you force the focus to move away from the button and to the carousel content, then I have to navigate back to the "next" button before I can view the next slide. It can be annoying to have to keep navigating back to the element I just selected.
I don't understand your third or fourth questions.
Have you looked at the two W3.org references regarding carousels?
https://www.w3.org/TR/wai-aria-practices/#carousel
https://www.w3.org/WAI/tutorials/carousels/
Steps to reproduce:
Set-up a select2 dropdown in Tags mode.
Start typing a tag.
With the focus still in the drop down, using the mouse wheel, scroll to a different part of the page.
Now click somewhere.
Observed results:
You are scrolled back so the tagging drop down is in the viewport.
You can see this behavior in action on the projects demo page.
Expected results:
Clicking away from the tags dropdown should not affect scroll position.
This is particularly annoying in an app I'm working on because the Save button of a form is off screen. If the user enters a tag, then scrolls with the mouse wheel to the Save button (which IMHO a very intuitive flow when adding a new tag to an otherwise filled out form) and clicks the Save button, the click won't register on the button. Instead the user is auto-scrolled back to the dropdown with focus no longer in the drop down. Now, they could scroll again and click the actual button.
Anybody know how to fix this issue? I have no qualms with updating the source (already had to do so to fix other select2 quirks).
(FWIW, as of now I haven't logged a bug in the Select2 repo, since it seems questionable to me how actively it's being maintained)
My Issue
I am currently in the process of writing an application for iOS using Cordova. I have a page with a form on it like so:
When the user taps on a field, the keyboard appears as expected on iOS. However, to prevent my app from moving off the screen, I have enabled the following setting:
// Prevent the keyboard from pushing up the webview
cordova.plugins.Keyboard.disableScroll(true);
Unfortunately, this prevents a few things that are causing me issues:
When a field is focused, the screen does not scroll to that field so sometimes, the field appears behind the keyboard.
Even if I did have a solution to the above, for the elements that are at the bottom of the screen, I will not be able to scroll down far enough to bring them into view above the keyboard.
My Question(s)
Solution 1
Is there any way, in Cordova, to auto scroll to the focused field without moving the whole app off the screen?
If it is possible, then how can I handle fields that are close to the bottom and cannot be scrolled up any further into view?
Obviously, the first point can be achieved using JavaScript/jQuery and some clever logic with the keyboard_height, position() and scrollTop(). But, this then creates the issue with the second point about the input fields behind the keyboard...
Solution 2
If I apply the following code, it will fix the issue highlighted above, but it will create another issue (explained below):
// Enable the auto scroll when the keyboard is shown
cordova.plugins.Keyboard.disableScroll(false);
Is there anyway to fix my header (the 'Edit Profile' bit), to the top of the screen to ensure that part is always visible?
Use https://www.npmjs.com/package/cordova-plugin-keyboard#keyboardshrinkview and its Keyboard.shrinkView method.
I want to understand how to capture user intent i.e. when a user decides to leave the page and moves his/her mouse (as of now), show them an alternate version (without refresh).
An example
When you open this page, it will show you a couple of listings. Now, if you move your mouse to the address bar again. It hides the content and shows a separate part of the layout, basically a modal window with some messaging.
Is it handled via javascript - detect the cursor position and change the layout.
Any help would be welcome.
Using document mouseleave and mouseenter you can achieve this.
$(document).on('mouseleave',function(){
$('#test').removeClass('disnone');
}).on('mouseenter',function(){
$('#test').addClass('disnone');
});
FIDDLE DEMO
This is a bit of an odd question, but basically, I'm trying to display different pop-up menus to a user depending on how they click my browser action button (the icon to the right of the Omnibar). One way that I thought of doing this is by detecting whether the user is clicking it normally or holding shift as they click it. Is this possible?
If there is no way of doing this, I would appreciate any suggestions as to how to display different menus to the user with a single browser action button. I would rather not make the user select from two options in the actual pop-up window - a single button press would be preferable.
Thanks
Edit: I'm thinking the best way to do this may be to check for the Shift key being pressed using Javascript as soon as the pop-up window is displayed, then display a menu according to that. I'm going to try that and report back.
I've tried for 2 hours, but didn't find a solution, too.
I think it's not possible to capture the click event, which opened the popup.