Develop Reference

How to get the <a> element currently selected using the tab key?

I have a webpage which has many links (mostly mailto but I don't think that's relevant), where accessibility is a priority. Due to the formatting, when the tab key is used to move around the page, the currently selected link is often off the bottom of the screen, because only the very top of the containing card is visible: the built-in autoscroll of the browser doesn't scroll far enough. How can I get the currently "selected" (highlighted with the tab key) element so I can control the scrolling manually?

To get the currently focused element of the page you can use
document.activeElement

You can use document.activeElement.id
document.activeElement gives a reference to the current active element. You can use this just like what an element query returns (document.querySelector())

How can I get the currently "selected" (highlighted with the tab key) element so I can control the scrolling manually?
If you may know which element is currently focused with the tab key (using document.activeElement), you also have to take care of the automatic scrolling performed when using a screenreader or any other assistive technologies (eye tracking device, for instance).
The fact that your scrolling relies on javascript detection of standard keyboard/mouse events or standard element activation might be problematic when using assistive technologies.
Relying on the built-in autoscroll, while not your solution, is however the best solution.

Pushing dynamic content using GTM element visibility trigger and data layer

Google Tag Manager's Element Visibility Trigger appears to be a rather excellent way of tracking whether an element has appeared within the viewport, using a class or ID.
The standard reporting appears to pull back data something like this
However what I would like to do is to be able to use the trigger to detect and report items in a dynamically created list. For instance the element would be triggered based on its class which is shared by all the other elements in the list, each element may be populated with specific data to be pulled from a database eg: name, product ID, price etc.
Currently this has been done using the Custom Event Trigger, but this reports all elements on the page whether they are loaded or not.
What I would like to know is whether the element visibility trigger is the right thing for this and if so, how can I manipulate it to do what I need?

Probably yes.
You'd use the CSS Selector and select via the class name for your dynamically created items.
In the "When to fire this trigger" option you would select "Every time an element appears".
Finally you would set the "listen to DOM changes" option. This checks every time the DOM is manipulated (e.g. by inserting your list element) if the other criteria in the trigger are now matched.
Note that GTM warn that there may be a performance penalty for using that option (since this runs on every DOM manipulation). So you probably don't want to do this a lot.

How to send keys to the element in focus?

In my tests I have a number of modals and dropdowns which open and automatically have focus set on their input boxes.
I have seen that it is possible to assert that an element is in focus. But is there any shortcut way to send keys to the element currently in focus? I'd like to be able to skip all the work of finding each element every time.

You can use activeElement() feature of selenium to access the currently focused element source.
E.g.
// select the current page context's active element
browser.switchTo().activeElement().sendKeys('Test')

Alternatively, you may use "browser actions":
browser.actions().sendKeys('Test').perform();

Splitting html elements into associated groups OR how to avoid blur event for specific elements

(This scenario is applicable to touch devices, but for the solution it doesn't really matter)
There is a page with a input element and a dropdown list. Depending on what user types, the dropdown element is populated.
When user touches any of the elements on the page except of a dropdown list, the input element should loose the focus.
To do so there is a global event watcher to blur an active element when user touches some other object on a page.
At the moment I am looking for a generic way to specifying cases when the active element should not be blurred (touching the dropdown list should not blur the input).
My idea was to give some tags/attributes to the elements to identify that they are in the same 'family group' and that clicking on one of the children of the group while another is active should not trigger blur event.
However, as those elements can contain children and user clicks on the children, I need to tag every single element or go through the DOM hierarchy to find a parent, which is a dirty solution.
Any suggestions how this can be handled?
I am using Anguarjs.
Thanks a lot!

Simplest way to tab only through focusable descendants of a particular element?

Let's say I have a document full of focusable elements, either because they are innately focusable (like <input type="text">) or because they have tabindex="0" or the like.
Now let's say there's a section of my document that I want to display as a modal dialog box, and I don't want the user to be distracted by anything outside the dialog box. I would like for the tab key to cycle only through focusable elements inside the container element for the dialog box. What is the simplest way to do this?
If possible, I am looking for a solution that doesn't care what the contents of the dialog or the rest of the page are and doesn't try to modify them. That is, I don't want to make the elements outside of the dialog not focusable, for example. First, this requires making a reversible change and keeping track of state. Second, this requires knowing all the possible ways an element could be made focusable. This feels messy, fragile, and unscalable to me.
My first attempt looks like this, but works only in the forward direction (pressing Tab). It doesn't work in the reverse direction (pressing Shift+Tab).
<div>Focusable stuff outside the dialog.</div>
<div class="dialog" tabindex="0">
<!-- Focus should be trapped inside this dialog while it's open -->
<div class="content">
Form contents and focusable stuff here.
</div>
<div class="last-focus" tabindex="0" onfocus="this.parentNode.focus()"></div>
</div>
<div>More focusable stuff outside the dialog.</div>
I'd rather see pure JavaScript solutions. If there is a means of doing this with a library such as jQuery, I would prefer a link to the library code that does this.

In the interest of completeness, I'm taking the link to jQuery UI dialog that #Domenic provided and filling in the details.
To implement this in the jQuery fashion requires two things:
Listening for Tab or Shift+Tab (on keydown) for the modal element that should trap focus. This is the only means of moving focus via the keyboard. (If you want to prevent mouse interaction with the rest of the document, that is a separate problem solved by covering it with an element to prevent any mouse events from getting through.)
Finding all tabbable elements inside the modal element. These are a subset of all focusable elements, excluding those that have tabindex="-1".
Tab goes forward. Shift+Tab goes backwards. Any time Tab is pressed while the last tabbable element in the modal element is focused, the first should receive focus. Similarly, any time Shift+Tab is pressed while the first tabbable element is focused, the last should receive focus. This will keep focus inside the modal element.
The hard part is knowing which elements are tabbable. Since tabbable elements are all focusable elements that don't have tabindex="-1", then we need to know know which elements are focusable. Since there's no property to determine if an element is focusable, jQuery does it by hard-coding the following cases:
input, select, textarea, button, and object elements that aren't disabled.
a and area elements that have an href or have a numerical value for tabindex set.
any element that has a numerical value for tabindex set.
It's not enough to check for these three cases. jQuery goes on to ensure that the element is visible. This means both of the following must be true:
None of its ancestors are display: none.
The computed value of visibility is visible. This means that the nearest ancestor to have visibility set must have a value of visible. If no ancestor has visibility set, then the computed value is visible.
It should be noted that jQuery's :visible selector does not look correct for this implementation because it says "elements with visibility: hidden…are considered to be visible," but they are not focusable.

The jQuery UI dialog does this by capturing keydown events, checking if they are for TAB or not, then manually focusing the correct element.

The jqModal jQuery plugin does this out of the box by setting the modal option to true. The examples on this page with forms should show it. I remember going through the code to see what was happening and you could do it quite easily with plain JS.