Merge 9b0773c into 5fafbc2

CHANGELOG.md

@@ -47,15 +47,23 @@ The following lists show the changes to the library grouped by domain.
 * fixing [`ally.get.focusTarget`][ally/get/focus-target] to resolve elements redirecting focus to other elements
 * fixing [`ally.is.tabbable`][ally/is/tabbable] to consider `<iframe>` elements not tabbable
 * fixing [`ally.is.onlyTabbable`][ally/is/only-tabbable] to not consider `<object>` elements only tabbable anymore
+* fixing [`ally.is.onlyTabbable`][ally/is/only-tabbable] to not require elements to satisfy [`ally.is.visible`][ally/is/visible]
 * adding [`ally.is.activeElement`][ally/is/active-element] to identify if an element is the activeElement within its context
 * adding option `includeOnlyTabbable` to [`ally.query.firstTabbable`][ally/query/first-tabbable], [`ally.query.focusable`][ally/query/focusable], [`ally.query.tabbable`][ally/query/tabbable], [`ally.query.tabsequence`][ally/query/tabsequence] - [issue #100](https://github.com/medialize/ally.js/issues/100)
+* fixing [`ally.is.visible`][ally/is/visible] to consider the state of the hosting `<iframe>` or `<object>` element
+* fixing [`ally.is.focusable`][ally/is/focusable], [`ally.is.tabbable`][ally/is/tabbable] and [`ally.is.onlyTabbable`][ally/is/only-tabbable] to consider the state of the hosting `<iframe>` or `<object>` element
+* fixing [`ally.is.focusable`][ally/is/focusable] to compensate Chrome being able to focus hidden `<object>` elements - [Blink 586191](https://code.google.com/p/chromium/issues/detail?id=586191)
 
 #### Keyboard support
 
 * changing [`ally.when.key`][ally/when/key] to handle modifier keys and respect `context` and `filter` options - [issue #59](https://github.com/medialize/ally.js/issues/59)
 * changing [`ally.map.keycode`][ally/map/keycode] to provide alphanumeric keys and aliasing
 * adding [`ally.maintain.tabFocus`][ally/maintain/tab-focus] to trap <kbd>TAB</kbd> focus in the tabsequence - [issue #63](https://github.com/medialize/ally.js/issues/63)
 
+#### Utilities
+
+* fixing [`ally.get.parents`][ally/get/parents] to resolve ancestry for `SVGElement` in Internet Explorer
+
 #### Internals
 
 * fixing `ally.is.*` to work with other documents (e.g. iframes) - [issue #78](https://github.com/medialize/ally.js/issues/78)
@@ -70,6 +78,11 @@ The following lists show the changes to the library grouped by domain.
 * refactoring `is/is.util.js` to extract image map related functions into `utils/image-map`
 * refactoring `is/focus-relevant` and `is/tabbable` to allow running the identification with execptions via `is/focus-relevant.rules` and `is/tabbable.rules`, while maintaining module signature
 * refactoring `console.log()` to go through `util/logger`
+* refactoring `selector/focusable` to extract `util/select-in-shadows` 
+* adding `ally/util/get-content-document` to obtain the browsing context of `<object>` and `<iframe>` elements
+* adding `ally/util/get-frame-element` to obtain the host element (`<object>` or `<iframe>`) of browsing context elements
+* adding `supports/focus-in-hidden-iframe` to identify if content within a hidden iframe is focusable
+* adding `supports/focus-object-svg-hidden` to identify if a hidden `<object>` element is focusable
 
 #### Testing
 

build/data-tables/focusable-tables.js

@@ -25,12 +25,15 @@ function rowDataAllyNotes(ident, sourceIdent, referencedNotes) {
   };
 }
 
-function skipIdentsIfMatches(labelGroup, labelName, checksum) {
+function skipIdentsIfMatches(labelGroup, labelName, checksum, inert) {
   return function(ident, sourceIdent, duplicateIdent) {
-    if (ident.slice(0, 14) === 'inert-in-ally{') {
-      return false;
-    } else if (source.inertIdents.has(ident)) {
-      return true;
+    if (inert) {
+      const key = 'inert-in-ally-' + inert + '{';
+      if (ident.slice(0, key.length) === key) {
+        return false;
+      } else if (source.inertIdents[inert].has(ident)) {
+        return true;
+      }
     }
 
     if (duplicateIdent && duplicateIdent.checksum[checksum] === sourceIdent.checksum[checksum]) {
@@ -40,7 +43,8 @@ function skipIdentsIfMatches(labelGroup, labelName, checksum) {
     // skip rows where every browser-cell equals the ally-cell
     return !source.columns.some(function(browser) {
       const data = sourceIdent[browser];
-      return data.browser.label !== data[labelGroup][labelName];
+      const label = data.browser.label === 'inert host' ? 'inert' : data.browser.label;
+      return label !== data[labelGroup][labelName];
     });
   };
 }
@@ -75,13 +79,13 @@ generateTableDocument({
   source,
   browsers,
   targetFile: path.resolve(targetDirectory, 'focusable.quick.html'),
-  title: 'Focusable Elements (Quick) - ally.js Compatibility Table',
+  title: 'Focusable Elements (Query Quick) - ally.js Compatibility Table',
   introduction: `<p>The following tables show the differences between what browsers consider <a href="./focusable.html">focusable</a>
     and what ally.js identifies using <a href="../api/query/focusable.html"><code>strategy: quick</code></a>.</p>
     <p>Note that touch devices (without a physical keyboard) only show elements as tabbable (keyboard focusable),
     that can be navigated to through the on-screen keyboard (or "virtual keyboard").</p>`,
   skipExpected: true,
-  skipIdents: skipIdentsIfMatches('ally', 'labelQuick', 'allyQuick'),
+  skipIdents: skipIdentsIfMatches('ally', 'labelQuick', 'allyQuick', 'query'),
   cellTemplate: 'table-cell.compare.hbs',
   cellData: function(data) {
     return {
@@ -100,13 +104,13 @@ generateTableDocument({
   source,
   browsers,
   targetFile: path.resolve(targetDirectory, 'focusable.strict.html'),
-  title: 'Focusable Elements (Strict) - ally.js Compatibility Table',
+  title: 'Focusable Elements (Query Strict) - ally.js Compatibility Table',
   introduction: `<p>The following tables show the differences between what browsers consider <a href="./focusable.html">focusable</a>
     and what ally.js identifies using <a href="../api/query/focusable.html"><code>strategy: strict</code></a>.</p>
     <p>Note that touch devices (without a physical keyboard) only show elements as tabbable (keyboard focusable),
     that can be navigated to through the on-screen keyboard (or "virtual keyboard").</p>`,
   skipExpected: true,
-  skipIdents: skipIdentsIfMatches('ally', 'labelStrict', 'allyStrict'),
+  skipIdents: skipIdentsIfMatches('ally', 'labelStrict', 'allyStrict', 'query'),
   cellTemplate: 'table-cell.compare.hbs',
   cellData: function(data) {
     return {
@@ -121,6 +125,34 @@ generateTableDocument({
   rowData: rowDataAllyNotes,
 });
 
+generateTableDocument({
+  source,
+  browsers,
+  targetFile: path.resolve(targetDirectory, 'focusable.is.html'),
+  title: 'Focusable Elements - ally.js Compatibility Table',
+  introduction: `<p>The following tables show the differences between what browsers consider <a href="./focusable.html">focusable</a>
+    and what ally.js identifies using <a href="../api/is/focusable.html">ally.is.focusable</a>,
+    <a href="../api/is/tabbable.html">ally.is.tabbable</a>,
+    <a href="../api/is/only-tabbable.html">ally.is.onlyTabbable</a> and
+    <a href="../api/get/focus-redirect-target.html">ally.get.focusRedirectTarget</a>.</p>
+    <p>Note that touch devices (without a physical keyboard) only show elements as tabbable (keyboard focusable),
+    that can be navigated to through the on-screen keyboard (or "virtual keyboard").</p>`,
+  skipExpected: true,
+  skipIdents: skipIdentsIfMatches('ally', 'label', 'ally', 'is'),
+  cellTemplate: 'table-cell.compare.hbs',
+  cellData: function(data) {
+    return {
+      libraryName: 'ally.js',
+      match: data.browser.label === data.ally.label && data.browser.redirecting === data.ally.redirecting,
+      label: data.ally.label,
+      focusable: data.ally.focusable,
+      tabbable: !data.ally.focusable && data.ally.onlyTabbable || data.ally.tabbable,
+      redirecting: data.ally.redirecting,
+    };
+  },
+  rowData: rowDataAllyNotes,
+});
+
 generateTableDocument({
   source,
   browsers,

build/data-tables/utils/aggregated-focusable-data.js

@@ -142,6 +142,7 @@ function generateBrowserStructure(ident, browser, browserData) {
       label: null,
     },
     ally: {
+      label: null,
       focusable: Boolean(ally.focusable),
       focusableStrict: browserData.ally.focusableStrict.has(ident),
       focusableQuick: browserData.ally.focusableQuick.has(ident),
@@ -186,6 +187,13 @@ function addReadableLabels(src) {
     null, // redirecting
     null // focusHost
   );
+  src.ally.label = readableLabel(
+    src.ally.focusable,
+    src.ally.tabbable,
+    src.ally.onlyTabbable,
+    src.ally.redirecting,
+    null // focusHost
+  );
   src.ally.labelQuick = readableLabel(
     src.ally.focusableQuick,
     src.ally.tabbableQuick,
@@ -253,6 +261,9 @@ Array.from(idents).sort().forEach(function(ident) {
     jquery: calculateBrowserChecksum(result, function(data) {
       return [data.browser.label, data.jquery.label];
     }),
+    ally: calculateBrowserChecksum(result, function(data) {
+      return [data.browser.label, data.ally.label];
+    }),
     allyStrict: calculateBrowserChecksum(result, function(data) {
       return [data.browser.label, data.ally.labelStrict];
     }),

build/data-tables/utils/focusable.groups.js

@@ -5,7 +5,8 @@ const file = path.resolve(cwd, 'tests/focusable/data/meta.groups.json');
 const source = require(file);
 
 const idents = new Set();
-const inertIdents = new Set();
+const inertQueryIdents = new Set();
+const inertIsIdents = new Set();
 source.forEach(function(group) {
   // add a key to be used for referencing the group in a data-table
   group.id = group.label.replace(/[^a-z0-9]+/ig, '-').toLowerCase();
@@ -21,8 +22,11 @@ source.forEach(function(group) {
 
   // remember entries that have no detail relevance
   // to the ally comparison tables
-  group['inert-in-ally'] && group['inert-in-ally'].forEach(function(ident) {
-    inertIdents.add(ident);
+  group['inert-in-ally-query'] && group['inert-in-ally-query'].forEach(function(ident) {
+    inertQueryIdents.add(ident);
+  });
+  group['inert-in-ally-is'] && group['inert-in-ally-is'].forEach(function(ident) {
+    inertIsIdents.add(ident);
   });
 
   // create lookup table for redundant entries
@@ -61,5 +65,8 @@ module.exports = {
   idents,
   list: source,
   handleIdentsWithoutGroup: identsToUnknownGroup,
-  inertIdents,
+  inertIdents: {
+    query: inertQueryIdents,
+    is: inertIsIdents,
+  },
 };

docs/api/concepts.md

@@ -53,8 +53,13 @@ Modules dealing with the focus identity of elements (e.g. the `rules()` function
 | shadow | boolean | `false` | Prevent elements from being considered focus-relevant because of being a `ShadowHost`. |
 | disabled | boolean | `false` | Prevent elements from *not* being considered focusable because they're disabled (e.g. `<input disabled>`). |
 | visible | boolean | `false` | Prevent elements from *not* being considered focusable because they're hidden (e.g. `<input style="display: none">`). |
+| onlyFocusableBrowsingContext | boolean `false` | Prevent elements from *not* being considered focusable if their browsing context host element (e.g. `<iframe>`, `<object>`) has `tabindex="-1"` set. |
 | onlyTabbable | boolean | `false` | Prevent elements from *not* being considered focusable because they're only keyboard focusable. |
-
+| notRendered | boolean | `false` | Prevent elements from being considered visible that can't be rendered (e.g. `<area>`). |
+| cssDisplay | boolean | `false` | Prevent elements from being considered invisible because of `display: none`. |
+| cssVisibility | boolean | `false` | Prevent elements from being considered invisible because of `visibility: hidden`. |
+| detailsElement | boolean | `false` | Prevent elements from being considered invisible because of being nested in a closed `<details>` element. |
+| browsingContext | boolean | `false` | Prevent elements from being considered invisible because of being nested in an invisible browsing context (`<iframe>` or `<object>`). |
 
 ## Service
 

docs/api/get/focus-redirect-target.md

@@ -12,7 +12,7 @@ Identifies the element that would get focus passed to when `element.focus()` is
 
 Some elements forward focus to another element instead of taking focus themselves.
 
-Consult the data tables [what browsers consider focusable](../../data-tables/focusable.md) and [what ally.js considers focusable](../../data-tables/focusable.strict.md) to learn how HTML elements behave.
+Consult the data tables [what browsers consider focusable](../../data-tables/focusable.md) and [what ally.js fails to consider focusable](../../data-tables/focusable.is.md) to learn how HTML elements behave.
 
 
 ## Usage
@@ -53,11 +53,11 @@ var element = ally.get.focusRedirectTarget({
 
 ## Related resources
 
-* [`ally.is.focusRelevant`](../isfocus-relevant.md) is used to identify elements that can receive focus
+* [`ally.is.focusRelevant`](../is/focus-relevant.md) is used to identify elements that can receive focus
 * [`ally.is.focusable`](../is/focusable.md) identifies keyboard focusable elements
 
 * [What Browsers Consider Focusable](../../data-tables/focusable.md)
-* [What ally.js Considers Focusable](../../data-tables/focusable.strict.md)
+* [What ally.js fails to consider focusable](../../data-tables/focusable.is.md)
 
 
 ## Contributing

docs/api/get/parents.md

@@ -41,9 +41,15 @@ Array of [`HTMLElement`](https://developer.mozilla.org/en/docs/Web/API/HTMLEleme
 ## Examples
 
 
+## Changes
+
+* Since `v#master` parents can be resolved for `SVGElements` in Internet Explorer.
+
+
 ## Notes
 
 
+
 ## Related resources
 
 * [`ally.get.shadowHostParents`](shadow-host-parents.md) finds the `ShadowHost` ancestry of an element

docs/api/is/focus-relevant.md

@@ -12,7 +12,7 @@ Determines if an element has any relevance to focus management.
 
 This module is a pre-filter for [`ally.is.focusable`](focusable.md), [`ally.is.tabbable`](tabbable.md), [`ally.is.onlyTabbable`](only-tabbable.md) and [`ally.get.focusRedirectTarget`](../get/focus-redirect-target.md). Elements may be considered focus-relevant, even though they do not in fact be focusable, tabbable, only-tabbable or redirect focus given their current conditions. But any element that is focusable, tabbable, only-tabbable or redirects focus *is* focus-relevant.
 
-Consult the data tables [what browsers consider focusable](../../data-tables/focusable.md) and [what ally.js considers focusable](../../data-tables/focusable.strict.md) to learn how HTML elements behave.
+Consult the data tables [what browsers consider focusable](../../data-tables/focusable.md) and [what ally.js fails to consider focusable](../../data-tables/focusable.is.md) to learn how HTML elements behave.
 
 
 ## Usage
@@ -78,7 +78,7 @@ Boolean, `true` if the element is focus relevant.
 * [`ally.query.focusable`](../query/focusable.md) finds focusable elements in the DOM
 
 * [What Browsers Consider Focusable](../../data-tables/focusable.md)
-* [What ally.js Considers Focusable](../../data-tables/focusable.strict.md)
+* [What ally.js fails to consider focusable](../../data-tables/focusable.is.md)
 
 
 ## Contributing

docs/api/is/focusable.md

@@ -12,7 +12,7 @@ Determines if an element is considered focusable.
 
 An element is considered focusable if it is [`ally.is.focusRelevant`](./focus-relevant.md), [`ally.is.visible`](./visible.md) and not [`ally.is.disabled`](./disabled.md).
 
-Consult the data tables [what browsers consider focusable](../../data-tables/focusable.md) and [what ally.js considers focusable](../../data-tables/focusable.strict.md) to learn how HTML elements behave.
+Consult the data tables [what browsers consider focusable](../../data-tables/focusable.md) and [what ally.js fails to consider focusable](../../data-tables/focusable.is.md) to learn how HTML elements behave.
 
 
 ## Usage
@@ -51,6 +51,8 @@ Boolean, `true` if the element is focusable.
 
 * Since `v#master` all `<area>` elements are considered focus-relevant, but only valid `<area>` elements are considered focusable.
 * Since `v#master` exceptions can be passed to `ally.is.focusable.rules(options)`.
+* Since `v#master` the state of the `<iframe>` or `<object>` element in which the currently examined element is hosted in is considered.
+* Since `v#master` hidden `<object>` elements are focusable in Chrome - [Blink 586191](https://code.google.com/p/chromium/issues/detail?id=586191).
 
 
 ## Notes
@@ -66,7 +68,7 @@ See [`ally.is.focusRelevant`](./focus-relevant.md#Notes)
 * [`ally.is.validArea`](valid-area.md) is used to identify if `<area>` elements satisfy the requirements to be considered focusable
 
 * [What Browsers Consider Focusable](../../data-tables/focusable.md)
-* [What ally.js Considers Focusable](../../data-tables/focusable.strict.md)
+* [What ally.js fails to consider focusable](../../data-tables/focusable.is.md)
 
 
 ## Contributing

docs/api/is/only-tabbable.md

@@ -12,7 +12,7 @@ Determines if an element is considered tabbable and not focusable.
 
 An element is considered tabbable and not focusable if the element is part of the document's focus navigation sequence, but cannot be focused by script.
 
-Consult the data tables [what browsers consider focusable](../../data-tables/focusable.md) and [what ally.js considers focusable](../../data-tables/focusable.strict.md) to learn how HTML elements behave.
+Consult the data tables [what browsers consider focusable](../../data-tables/focusable.md) and [what ally.js fails to consider focusable](../../data-tables/focusable.is.md) to learn how HTML elements behave.
 
 
 ## Usage
@@ -51,6 +51,8 @@ Boolean, `true` if the element is only tabbable.
 
 * Since `v#master` all `<object>` elements in Internet Explorer are not considered only tabbable anymore.
 * Since `v#master` exceptions can be passed to `ally.is.onlyTabbable.rules(options)`.
+* Since `v#master` the state of the `<iframe>` or `<object>` element in which the currently examined element is hosted in is considered.
+* Since `v#master` elements must be [visible](./is/visible.md) to be considered only tabbable.
 
 
 ## Notes
@@ -67,7 +69,7 @@ See [`ally.is.focusRelevant`](./focus-relevant.md#Notes)
 * [`ally.is.tabbable`](tabbable.md) identifies keyboard focusable elements
 
 * [What Browsers Consider Focusable](../../data-tables/focusable.md)
-* [What ally.js Considers Focusable](../../data-tables/focusable.strict.md)
+* [What ally.js fails to consider focusable](../../data-tables/focusable.is.md)
 
 
 ## Contributing

docs/api/is/tabbable.md

@@ -12,7 +12,7 @@ Determines if an element is considered keyboard focusable ("tabbable").
 
 The function does *not* verify if an element is focusable. It expects input that is considered focusable, so `isTabbable(element)` does *not always* equal `isFocusable(element) && isTabbable(element)`.
 
-Consult the data tables [what browsers consider focusable](../../data-tables/focusable.md) and [what ally.js considers focusable](../../data-tables/focusable.strict.md) to learn how HTML elements behave.
+Consult the data tables [what browsers consider focusable](../../data-tables/focusable.md) and [what ally.js fails to consider focusable](../../data-tables/focusable.is.md) to learn how HTML elements behave.
 
 
 ## Usage
@@ -52,7 +52,7 @@ Boolean, `true` if the element is tabbable.
 * Since `v#master` matching of `SVGElement`s is done document-independent, to allow elements from other documents (e.g. from an iframe).
 * Since `v#master` all `<iframe>` elements are considered focusable, not tabbable - except for IE9.
 * Since `v#master` exceptions can be passed to `ally.is.tabbable.rules(options)`.
-
+* Since `v#master` the state of the `<iframe>` or `<object>` element in which the currently examined element is hosted in is considered.
 
 ## Notes
 
@@ -69,7 +69,7 @@ See [`ally.is.focusRelevant`](./focus-relevant.md#Notes)
 * [`ally.query.tabbable`](../query/tabbable.md) finds keyboard focusable elements in the DOM
 
 * [What Browsers Consider Focusable](../../data-tables/focusable.md)
-* [What ally.js Considers Focusable](../../data-tables/focusable.strict.md)
+* [What ally.js fails to consider focusable](../../data-tables/focusable.is.md)
 
 
 ## Contributing