Prevent browser elements being focused on tab navigation in webpage - javascript

I have a website and while testing I noticed that if I use tab navigation selection goes throughout my inputs and elements and after the last one focus goes to browser address bar and in some cases (browsers) other browser related elements.
Is there a way to avoid focusing browser elements?
I suppose there should be a way to do this, because I am using Visual Studio Team Services and in case of open popup tab navigation, the navigation doesn't go outside the popup.
I also noticed that if I open a popup dialog in my website even the elements outside the popup (the page from which the popup is called and is staying behind) are being focused.
I hope someone could help deal with this

Related

Keep focus on specific tab in Edge

in a last stint to change from EI to Edge, I'm trying to do some focusing that doesn't work like I want it to.
The situation is something like this. Edge is open with several tabs for different pages. One of these pages is an intranet system where the pages contains a link which opens a popup.
In this popup the user has a button where they can create some docx files on a server. To do this, the button calls a new page (subpage1) through javascript (window.open) and the new page again calls another page (subpage2), which finally creates the document.
The later (subpage2) will close (windows.close) it's window on completion.
It all works like it should, with the little annoyance, that the "mother" windows in Edge will switch to the tab to the far right, instead of just staying on the user choosen tab.
Can I control which tab keeps or regains focus when a tab are closed in Edge and if so how?

Right Click Avoids Sandboxing

I am using an application who's features and code I do not control to create a number of reports. One of the things this is able to do is load and display a webpage. The webpage I am loading into this application has a number of links, and when I click on them from the application the links are blocked from opening because: "the request was made in a sandboxed frame whose 'allow-popups' permission is not set."
This makes sense from a security perspective to me, but I have noticed that if I right-click the link and click "Open in a new Tab" from the context menu that the link will be opened.
My initial attempt was to try to convert all left clicks on links to right clicks, but triggering right mouse up/down events followed by the context menu event did not show the default context menu. My second attempt was to use a custom context menu like here, but doing so required the window.open event being fired by my own js which was also sandboxed.
My question is what special sauce is the default right click behavior using and is there a clever way for me to emulate it or to trigger it via a left click?

GWT - how to prevent user from accessing other parts of application when popup is showing

I am rendering a html page that contains a button.
I have bind a method to browser window that opens a gwt popup when the button is invoked.
My problem is, when i scroll the page, the popup stays fixed and the page scrolls. I want the popup to be scrolled along with the html page.
Also, the user should not be allowed to access other parts of app when the popup is open.
Can somebody help me
Assuming you are using the PopupPanel class, it is as easy as calling the right constructor:
PopupPanel(boolean autoHide, boolean modal)
autoHide - true if the popup should be automatically hidden when the user clicks outside of it or the history token changes.
modal - true if keyboard or mouse events that do not target the PopupPanel or its children should be ignored
So if you set the modal parameter, you cannot click outside of the popup, and also the scroll event should not happen at all (that is somewhat right, as scrolling a popup with a fixed positioning doesn't make much sense... Oh well, for a non advertising purpose at least).

Can I remove parent window when opening a new window?

I'm having an issue with a our main application's window activating itself when the mouse is hovered over it.
I'm opening the new window in a javascript function using the line below:
window.open(URL, 'Requests', 'location=no,toolbar=no,status=yes,scrollbars=yes,resizable=yes');
I have noticed that if I open a new IE window through Explorer, hovering over our main application's window does not reactivate itself. Even in this case though, the main window does make itself be "on top" of the pop-up window created by the window.open command above.
The question is this: Is there any way, when opening a "child" window in javascript, to detach the child window from the parent?
Further info: I am using an Infragistics WebDataMenu with ActivateOnHover set to true so users don't need to click on main menu items to see sub-menu choices. Unfortunately, that setting sensitizes the whole menu bar so that sliding the mouse through it activates the menu (and sadly the window when a popup is active). This is the root behavior I'm trying to fix.
The window.open(); method will create a popup window that really only shares a relationship through JavaScript via the return value of the call, and the window.opener property on the popup window.
What you want is the behavior of a modal window that locks out interaction from the 'parent' page while you work on the 'child' popup.
You can try to fight with JavaScript (and your users) by forcing a focus on the popup and blocking any blurring but this will drive users nuts when they want to go read their email etc. (eg not recommended)
You can also use the not so standard showModalDialog(); method but support is far from fully cross browser and there are a whole bunch of new problems if you try to use this (no right click in IE, zoom issues in IE, and no grandchildren popups to name a few) (again not recommended)
What you can do is make an "overlay" popup similar to many online photo viewers where you first overlay a mask (typically semi transparent) that blocks mouse/focus on the entire page content below and then overlay that with your "popup content". Just be sure that you provide a close option that removes the mask when the overlay is closed/done.
Note if you need to support IE6 you'll also need an iframe shim (Google if needed)
Many UI frameworks will provide a "dialog" just like this for you. (Eg jQueryUI)
Ultimately, I gave up on making this work. I found that what I had to do was turn off ActivateOnHover from the WebDataMenu, which didn't answer this question and requires users to click on the menu to make it drop down, but it became a work-around.

Setting focus of a screen reader on a modal alert in ember

I am attempting to make my ember.js app more accessible and am doing my testing via Apple's built-in VoiceOver utility. I'm adding ariaRoles as necessary to my views and tacking on aria-label attributes where the purpose of navigation is unclear. I'm having issues getting the focus on modal alerts, as the reader's focus stays on the page items behind the modal. Does anyone have experience handling focus on modal alerts for screen readers? I'm under the impression that declaring "ariaRole:'alertDialog'" in my view sets the appropriate role for such a dialog, and it is possible that the focus behavior for this role differs between screen readers. Thanks!!!
I don't have first hand experience with modal stuff. Essentially your issue is you are throwing on an ARIA role, and kind of expect it to work. You need to do more than that. You need to keep the following in mind:
Once the link/button is pressed, move focus to the modal window/dialog/popup. Most modal elements are simply a <div>. You can give the<div> an attribute of tabindex="-1".
Trap focus inside the modal window.
Allow the user to press escape to close
When closed, move focus back to link/button
Resources
keyboard accessibility with lightboxes
Similar question at UX StackExchange
Demo modal dialog - I think this is still under dev (I haven't heard from the author for a while).
jQuery Google Group thread
(Hans is the top guy or one of, for this stuff)

Categories

Resources