| layout | tags |
|---|---|
doc-page.html |
internal |
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.
| 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="…"> |
- As of
v1.3.0all tests are run at once and within an iframe to limit layout thrashing. - In
v1.4.0the testfocus-svg-negative-tabindex-attributewas introduced. - Since
v1.4.0the SVG tests attempt to focus elements usingHTMLElement.prototye.focusand the "focusable foreignObject hack". - In
v1.4.0the testfocus-svg-use-tabindexwas introduced. - In
v1.4.0the testfocus-svg-foreignobject-tabindexwas introduced.
Tests go in src/supports and results are used through the src/supports/supports.js module.