I am working on tabbing through the whole web page using the keyboard(tab key, shift+tab key) and everything is working fine and smooth. Also when i keep pressing the tab key, the focus cycles through all the elements(address bar, elements, back to address bar and so on).
Now in some cases, i have an modal and an transparent overlay on top of my content. Now when this happens, when i use tab key, i move from the left menu to the overlay and from the last focusible element on the overlay, i have to force the focus to the body element(or the address bar). So Basically when there is an overlay, i want to ignore the element below the overlay from tabbing. Is there any way i can achieve it cleanly?
I was thinking of setting tabindex=-1 for all elements under the overlay but any other better approach would be the most welcome
Thanks
This is an oldish question, but I just ran into this issue today, so I thought I'd share my solution.
As long as you know the tab order of items in your overlay, you can just add a blur event listener on the final item and use it to move the focus back to the first item in your overlay:
lastElementInOverlay.addEventListener('blur', function()
{ firstElementInOverlay.focus(); });
It strikes me that this would be easier than changing the tabIndex of all the elements under the overlay (and then having to change them back when the overlay is gone.
The 'modern/future' solution to this problem seems to be the inert attribute...
So taking the example above, it would look like this with overlay opened
<div id="menu" inert>
<a>
<a>
<a>
</div>
[...other code with tabindex]
<div id="overlay">
<a>
<a>
<a>
</div>
Now since inert is still a work in progress; you'll need to use the following polyfill (for now): https://github.com/WICG/inert
I was thinking of setting tabindex=-1 for all elements under the overlay but any other better approach would be the most welcome
This is what i usually do when fixing the tabbing of elements.
There is one other solution i can think of:
Setting the overlay tab-element lower then that of the rest.
Eg:
<div menu>
<a tabindex="10">
<a tabindex="11">
<a tabindex="12">
</div>
[...other code with tabindex > 10]
<div overlay>
<a tabindex="1">
<a tabindex="2">
<a tabindex="3">
</div>
The downside of this will be that after you have tabbed trough the overlay you will go to the menu again.
You could assign an id like "lastFocusableOverlayElement" to the last focusable HTML-element of your overlay and assign the focus to your trigger element (for example "menu-button") when leaving the last element's focus:
$('#lastFocusableOverlayElement').on('blur', function(){
if ($("body").hasClass("overlay-is-open")){
$('#toggleOverlay').focus();
}
});
In my case the last focusable element is always visible, regardless of whether the overlay is open. For this reason i needed an if query. It can be omitted if not necessary.
Related
I have a div inside an ng-include template that won't highlight when you mouse over. The cursor does change to a pointer on hovering over the text, but when you actually click and drag to highlight the text, nothing highlights.
This is important because I can't tab through the elements inside the ng-included template, which is a requirement for screen readability. Any ideas what's going on?
Parent template:
<div ng-controller="EntryController">
<!-- Stuff that works -->
<div ng-include="'entry_review.html'"></div>
</div>
entry_review.html:
<div>hello</div>
Result - not able to click and drag a highlight over "hello". Also can't tab through it (which is the real problem).
It probably has 'user-select: none;' somewhere in the CSS?
Angular shouldn't have any affect on this.
Say I have the following situation:
<div draggable="true" ondragstart="behavior">
Text Link
</div>
And I want the whole div to behave the same when dragged and dropped, how would I do this? The anchor tag seems to have it's own default behaviour that overrides the dragging on in the div. If I suppress that, by adding ondragstart="return false" I can't drag the div at all by dragging the link.
I suppose I could manually add the dragging behavior to the anchor tag so that it overrides the default behavior and matches the div behavior, but that seems kludgey.
I could also make a new tag to replace the anchor tag, but that also seems lame.
Is there a more elegant way to solve this?
Seems like this is the answer you are looking for: HTML5 - Drag N Drop with divs and inner-images
In short - add draggable="false" attribute to the link.
I have an IMG tag which has an associated OnClick event.
I see that TAB-key navigation skips this image field, but I need to have it stop there and treat the element as a regular tabbable control field.
Is there a way to do this? I can't just wrap a simple A-tag around it, since that affects various stylesheets and breaks the design.
In general, the best approach is to use a button instead, and bind the click event to that.
<button type="button"><img src="..." alt="..."></button>
You can also stick tabindex="0" onto the image so that it will appear in the tab order (without specifying a specific place so the ordering is natural), but this doesn't give as good results with AT.
I know there probably is, but here's the situation:
I have a mega menu with links in the tab. I'd like for the tab to show on focus when a link on the inside of the tab has the focus.
Most mega menus only work on hover. I've got the <li> to work on focus (because it's right before the that shows), using li:focus. But once you tab to the inside right after the <li> and the link inside of that, the <div> disappears.
I'm sure there's a way it can be done through jQuery, but I'm trying to avoid that.
Thanks!
You can't use css to select parent element, the only way is to use jQuery parent() method.
There is currently no way to select the parent of an element in CSS. This will probably be available in CSS4.
This question already has answers here:
Make a div into a link
(30 answers)
Closed 9 years ago.
How do I make an entire DIV a clickable hyperlink. Meaning, I essentially want to do:
<div class="myclass" href="example.com">
<div>...</div>
<table><tr>..</tr></table>
....
</div>
And whenever someone mouse hovers of the myclass DIV, I want the entire DIV it to be a clickable hyperlink.
You can add the onclick for JavaScript into the div.
<div onclick="location.href='newurl.html';"> </div>
EDIT: for new window
<div onclick="window.open('newurl.html','mywindow');" style="cursor: pointer;"> </div>
You can put an <a> element inside the <div> and set it to display: block and height: 100%.
You just need to specify the cursor as a pointer, not a hand, as pointer is now the standard, so, here's the example page code:
<div onclick="location.href='portable-display-stands.html';" id="smallbox">The content of the div here</div>
and the example CSS:
#smallbox {
cursor: pointer;
}
So the div is now a clickable element using 'onclick' and you've faked the hand cursor with the CSS...job done, works for me!
This is a late answer, but this question appears highly on search results so it's worth answering properly.
Basically, you shouldn't be trying to make a div clickable, but rather make an anchor div-like by giving the <a> tag a display: block CSS attribute.
That way, your HTML remains semantically valid and you can inherit the typical browser behaviours for hyperlinks. It also works even if javascript is disabled / js resources don't load.
Add an onclick to your DIV tag.
http://webdevjunk.com/coding/javascript/3/use-onclick-to-make-entire-div-or-other-html-object-into-a-link/
Why don't you just do this
<div>...</div>
That should work fine and will prompt the "clickable item" cursor change, which the aforementioned solution will not do.
alternative would be javascript and forwarding via the onclick event
<div onclick="window.location.href='somewhere...';">...</div>