# Supports - Browser compatibility

The supports infrastructure is a set of tests determining browser behavior and compatibility at runtime. This piece of the infrastructure does for focus management what Modernizr does for the rest of the web platform.

The tests change focus to detect compatibility and thereby cause focus change announcements in screen readers, as well as force the browser to perform layout / reflow operations, commonly known as layout thrashing. To limit these effects, tests are performed in an iframe and cached in localStorage, so only the first impression of a document on a given domain will have to live with the overhead.

For the tests to run properly, the document needs to have focus during execution. If it does not, e.g. because the browser's DevTools have focus, the cache is invalidated.

# Available compatibility tests

Test Name	Return Type	Description
css-shadow-piercing-deep-combinator	string (`">>>"`, `"/deep/"` `""`)	the browser's support for selecting through ShadowDOM, empty string if not supported
focus-area-img-tabindex	boolean	true if `<area>` is focusable for `<img tabindex="-1" usemap="…">`
focus-area-tabindex	boolean	true if `<area href="…" tabindex="-1">` is focusable
focus-area-without-href	boolean	true if `<area tabindex="-1">` is focusable
focus-audio-without-controls	boolean	true if `<audio>` is focusable (while only `<audio controls>` should be)
focus-broken-image-map	boolean	true if `<area>` is focusable although the `<img>` using the `<map>` is not properly loaded
focus-children-of-focusable-flexbox	boolean	true if `<span>` in `<a href="…" style="display:flex;"><span>` is focusable
focus-fieldset-disabled	boolean	true if `<fieldset tabindex="0" disabled>` is focusable
focus-fieldset	boolean	true if `<fieldset>` is focusable
focus-flexbox-container	boolean	true if `<span style="display: flex">` is focusable
focus-form-disabled	boolean	true if `<fieldset tabindex="0" disabled>` is focusable
focus-img-ismap	boolean	true if `<img>` in `<a href="–"><img ismap src="…">` is focusable
focus-img-usemap-tabindex	boolean	true if `<img usemap="#…">` is focusable
focus-in-hidden-iframe	boolean	true if content within `<iframe style="visibility: hidden">` is focusable
focus-in-zero-dimension-object	boolean	true if content within `<object height="0">` is focusable
focus-invalid-tabindex	boolean	true if `<div tabindex="invalid-value">` is focusable
focus-label-tabindex	boolean	true if `<label tabindex="-1">` is focusable
focus-object-svg	boolean	true if `<object type="image/svg+xml" data="…">` is focusable
focus-object-svg-hidden	boolean	true if `<object type="image/svg+xml" data="…" style="visibility: hidden">` is focusable
focus-object-swf	boolean	true if `<object type="application/x-shockwave-flash" data="…">` is focusable
focus-redirect-legend	string (`"focusable"`, `"tabbable"`, `""`)	the browser's query method for identifying the target for passing focus from `<legend>`
focus-redirect-img-usemap	boolean	true if `img.focus()` passes focus to the first `<area>` of the associated element
focus-scroll-body	boolean	true if the child element of a scrollable area is focusable
focus-scroll-container-without-overflow	boolean	true if a scrollable element is focusable (without being made scrollable using the CSS property `overflow` )
focus-scroll-container	boolean	true if a scrollable element is focusable
focus-summary	boolean	true if the browser implements `<details>` and `<summary>` is focusable
focus-svg	boolean	true if `<svg>` is focusable
focus-svg-in-iframe	boolean	true if `<svg>` is focusable if it's the root of a browsing context
focus-svg-focusable-attribute	boolean	true if `<text focusable="true">` is focusable
focus-svg-tabindex-attribute	boolean	true if `<text tabindex="0">` is focusable
focus-svg-negative-tabindex-attribute	boolean	true if `<text tabindex="-1">` is focusable
focus-svg-use-tabindex	boolean	true if `<use … tabindex="-1">` is focusable
focus-svg-foreignobject-tabindex	boolean	true if `<foreignObject … tabindex="-1">` is focusable
focus-tabindex-trailing-characters	boolean	true if `<div tabindex="3x">` is focusable
focus-table	boolean	true if `<table>`, `<tr>` and `<td>` are focusable
focus-video-without-controls	boolean	true if `<video>` is focusable (while only `<video controls>` should be)
tabsequence-area-at-img-position	boolean	true if `<area>` are tabbed at the DOM position of `<img usemap="…">`

# Changes

As of v1.3.0 all tests are run at once and within an iframe to limit layout thrashing.
In v1.4.0 the test focus-svg-negative-tabindex-attribute was introduced.
Since v1.4.0 the SVG tests attempt to focus elements using HTMLElement.prototye.focus and the "focusable foreignObject hack".
In v1.4.0 the test focus-svg-use-tabindex was introduced.
In v1.4.0 the test focus-svg-foreignobject-tabindex was introduced.

# Contributing

Tests go in src/supports and results are used through the src/supports/supports.js module.