Does anyone know how the various screen readers interact with a modal window, ie: Thickbox? Do the contents of the modal gain the reader's focus after they click on it?
This depends on the modal solution you're using. Many do not do a decent job of focus management:
putting keyboard focus onto the first element in the modal.
looping focus back to the first element when the end of the modal is reached (rather than letting focus cycle to the browser chrome or the page behind the modal).
returning keyboard focus to the original position (e.g. the opening button or link) when the modal is closed.
If the solution you're using doesn't do some of this, you can do this kind of thing in your own JavaScript. For example, if you know the first focusable element:
var focusMe = document.getElementById("#modal-focus-start");
if (focusMe) {
focusMe.focus();
}
Or if you want to focus the first link in the modal.
var modal = document.getElementById("#modal"),
focusMe;
if (modal) {
focusMe = modal.getElementsByTagName("a")[0];
if (focusMe) {
focusMe.focus();
}
}
If you don't have a convenient focusable element to move focus to, some modern browsers (Firefox seemed buggy last time I checked) allow you to set tabindex to -1 on any HTML element, making that element focusable by JavaScript.
If you wanted to go further, you can use JavaScript to find the first focusable element (uses jQuery) within the modal.
Related
There is a bootstrap modal which appears on button click.
There are also several tabs opened in Edge browser.
I am doing the following:
Click the button - the modal starts to appear
Switch to another tab - the modal is not fully visible yet and some transitions are in progress
Switch back to the original tab with modal which is semitransparent now
Transitions seem to be unfinished and modal becomes semitransparent
If I type the next code in console it gives me:
var m = angular.element('.modal.fade.in');
m.css('opacity') -> 0.2666
m.css('opacity') -> 0.2333
m.css('opacity') -> 0.33
//and so on..
I assume there is some optimization process that suspends not focused pages and resumes only focused pages and maybe for some reason transitions remain unfinished - styles are not fully applied.
How can I handle this situation?
Simply resizing window fixes the problem but that is not acceptable in my case.
As a temporary solution I used the folowing code:
window.onfocus = function() {
//manually check css opacity
//if is is less than 1 - set it 1
}
I'm developing a chrome extension. It is basically a toolbar standing at the upper part of the visible screen, added to the page as an Iframe.
My problem is that I set it a high z-index to make sure the bar appears; and then the elements below it (below the Iframe) gets not clickable (lets say I got a piece of the iFrame that is transparent, what allows the user to see the elements below it). Other Stack Overflow questions doesn't address my problem, since they suppose I have control at both the upper and the lesser elements, and I don't have at the lesser one.
If only certain parts of the iframe should let the clicks pass through then in the iframe's onclick handler send a message to the content script of the page via postMessage with the click point coordinates and in the content script's document.addEventListener for that message use querySelectorAll(':hover') or document.elementFromPoint while temporarily hiding the iframe to find the clicked element and then dispatch a new click event to that element via dispatchEvent (plus the iframe's top-left corner offset in the original document).
You can do this simply by using CSS
pointer-events: none
height: 0px;
overflow: visible;
JSFiddle (The *:focus rule is to illustrate which element is marked as having focus.)
What I'm wondering is why, when I click a menu item, it gets the focus... but clicking a menu item does not give it focus.
What's wrong with the CSS to make it behave this way?
focus is generally only for elements that can receive keyboard or other input, so by this heuristic lis don't qualify. This question has more about it..
In the specs, CSS doesn't explicitly define what elements can be in those states, so it's hard to come up with a set rule for what can and can't be set to focus.
What might work for your purposes is active, which you can view here.
There is a small trick - if you want an item which not have focus anabled by default you should make it tabbable by seting its tabindex="N" - N is a number. As simple as that. if you add tabindex to your clickable items they will get focus when you click. If a tag can be tabbed it have to be able to get focus. Adding tabindex attribute to all nodes of the menu is very simple if you have jQuery loaded:
$(function() {
$('#navbar *').attr('tabindex', '1');
});
end everithing comes in place. You can do it using pure JavaScript of course.
I may be trying to get too fancy on this one.
I have a pair of radio-like buttons in a row with a divider between them with background images. When one of the 'buttons' is clicked, I change its class. The CSS for the divider is keyed to the classes of the buttons on either side to select a background image. I am doing this with CSS 'sibling' selectors.
I have jQuery .click events tied to the 'buttons'. the first thing they do is clear the 'selected' class from the other button and set it on the button that was clicked.
For example, if the LEFT button class='selected' and the RIGHT button is not, the divider between them will get a blue background. Click on the RIGHT button and it gets class='selected' while the LEFT button's class is cleared. The divider turns red.
This works in IE, FF, Safari, etc. But IE is odd (IE7) - it will only reflect the divider background change when I mouse OFF the button I clicked! That is, in the example, the RIGHT button gets class='selected' and changes immediately on the click. But the divider stays blue until I mouse off the button, then it turns red.
The class itself IS changing and the button's appearance changes as a result. It's only the neighboring stuff that doesn't!?
It reminds me of my old VB6 days when you had to periodically call 'DoEvents' to get Windows to make UI changes. Could there be something similar here for IE?
I have no idea why this helps, but adding .hide().show() to a selector that includes the stuff that changed class seems to make it update.
I've read that using setAttribute to change the class will force IE7 to re-render the styles. Try that, and if it still fails, I've solved a similar IE7 problem by rewriting the html, which forced IE7 to re-render (using jquery):
if ($("html").hasClass("ie7")){
var tempHolder = $("#ajaxresults").html();
$("#ajaxresults").html(tempHolder);
}
As for giving the html or body tag the ie7 class, I recommend taking a look at html5boilerplate.com. If for some reason you can't use their solution, the jquery for it is:
if ($.browser.msie){
if ($.browser.version < 8){
$("html").addClass("ie ie7");
}
else {
$("html").addClass("ie");
}
}
How can I accomplish the following using jQuery: Open a popup window that returns a value to the parent window when a link in the child window is clicked, close the child window, and then have the parent automatically submit a form based on the value returned?
I realize that the jQuery Dialog is a popular solution, but I require a popup window because the window's contents need to be navigable, and I want to avoid using an iframe in the jQuery Dialog.
The popup window is going to be used to collect more than one value, ultimately to be returned as a delimited string to the parent, but this data collection needs to occur prior to the submission of the parent window's form. If there were a standard design pattern for an "Entity Picker", this would be it.
This needs to work in IE8, FF3.6, Safari 4, and Chrome 5.
Thanks,
Mark
Here is my solution:
var parent = $(parent.document.body);
$(parent).find('input#valStore').val(theVal);
$(parent).find('form#myForm').submit();
window.close();
In your newly opened browser window you could try something like
$("#mylink").click(function(){
value = /* get some value */
window.opener.$("#myform .somehiddenfield").val(value);
window.opener.$("#myform").submit();
window.close();
});
DISCLAIMER: I haven't tested this in any browser.