Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
20 changed files
with
785 additions
and
5 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| --- | ||
| layout: doc-api.html | ||
| tags: argument-list, shadow-dom | ||
| --- | ||
|
|
||
| # ally.is.activeElement | ||
|
|
||
| Determines if an element is the activeElement of its host context, i.e. its document, iFrame or ShadowHost. | ||
|
|
||
|
|
||
| ## Description | ||
|
|
||
|
|
||
| ## Usage | ||
|
|
||
| ```js | ||
| var element = document.getElementById('victim'); | ||
| var isActiveElement = ally.is.activeElement(element); | ||
| ``` | ||
|
|
||
| ### Arguments | ||
|
|
||
| | Name | Type | Default | Description | | ||
| | ---- | ---- | ------- | ----------- | | ||
| | element | [`HTMLElement`](https://developer.mozilla.org/en/docs/Web/API/HTMLElement) | *required* | The Element to test. | | ||
|
|
||
| ### Returns | ||
|
|
||
| Boolean, `true` if the element is the activeElement of its host context. | ||
|
|
||
| ### Throws | ||
|
|
||
| [`TypeError`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypeError) if `element` argument is not of type `HTMLElement`. | ||
|
|
||
|
|
||
| ## Examples | ||
|
|
||
|
|
||
| ## Changes | ||
|
|
||
| * Added in `v#master`. | ||
|
|
||
|
|
||
| ## Notes | ||
|
|
||
|
|
||
|
|
||
| ## Related resources | ||
|
|
||
|
|
||
| ## Contributing | ||
|
|
||
| * [module source](https://github.com/medialize/ally.js/blob/master/src/is/active-element.js) | ||
| * [document source](https://github.com/medialize/ally.js/blob/master/docs/api/is/active-element.md) | ||
| * [unit test](https://github.com/medialize/ally.js/blob/master/test/unit/is.active-element.test.js) | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>ally.maintain.hidden Example</title> | ||
| <link rel="jsbin" href=""> | ||
| <style id="example-css"> | ||
| :disabled, | ||
| [data-ally-disabled] { | ||
| outline: 1px solid red; | ||
| opacity: 0.5; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
|
|
||
| <article id="example-introduction"> | ||
| <h1><code>ally.maintain.tabFocus</code> Example</h1> | ||
|
|
||
| <p> | ||
| Use the <code>trap focus</code> button to engage <code>ally.maintain.disabled</code> and <code>ally.maintain.tabFocus</code> so that only the input elements <em>first</em>, <em>second</em> and <em>third</em> can be focused by pressing the <kbd>Tab</kbd> key. | ||
| Press the <kbd>Escape</kbd> key to stop trapping focus. | ||
| Note that the disabled elements are visualized with reduced opacity and a red border only for this demo. | ||
| </p> | ||
| </article> | ||
|
|
||
| <div id="example-html"> | ||
| <main> | ||
| <button id="toggle" type="button">trap focus</button> | ||
|
|
||
| <hr> | ||
|
|
||
| <input type="text" value="before"> | ||
|
|
||
| <div id="container"> | ||
| <input type="text" value="second" tabindex="0"> | ||
| <input type="text" value="not keyboard focusable" tabindex="-1"> | ||
| <input type="text" value="first" tabindex="1" id="start-focus"> | ||
| <input type="text" value="third" tabindex="0"> | ||
| </div> | ||
|
|
||
| <input type="text" value="after"> | ||
|
|
||
| </main> | ||
| </div> | ||
|
|
||
| <script src="https://cdn.jsdelivr.net/ally.js/1.0.1/ally.min.js"></script> | ||
|
|
||
| <script id="example-js"> | ||
| var handle; | ||
|
|
||
| var wrapper = document.getElementById('example-html'); | ||
| var container = document.getElementById('container'); | ||
| var toggle = document.getElementById('toggle'); | ||
|
|
||
| toggle.addEventListener('click', function() { | ||
| handle = ally.maintain.tabFocus({ | ||
| context: container, | ||
| }); | ||
|
|
||
| ally.when.key({ | ||
| escape: function(event, disengage) { | ||
| handle.disengage(); | ||
| handle = null; | ||
| toggle.focus(); | ||
| disengage(); | ||
| }, | ||
| }); | ||
|
|
||
| document.getElementById('start-focus').focus(); | ||
| }); | ||
|
|
||
| </script> | ||
|
|
||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| --- | ||
| layout: doc-api.html | ||
| tags: service, argument-object | ||
| --- | ||
|
|
||
| # ally.maintain.tabFocus | ||
|
|
||
| Traps <kbd>TAB</kbd> focus in the tabsequence to prevent the browser from shifting focus to its UI (e.g. the location bar). | ||
|
|
||
|
|
||
| ## Description | ||
|
|
||
| `ally.maintain.tabFocus` intercepts the keyboard events for <kbd>Tab</kbd> and <kbd>Shift Tab</kbd> in order to make sure the element receiving focus is part of the context element's tabsequence ([Sequential Navigation Focus Order](../../concepts.md#Sequential-navigation-focus-order)). The tabsequence is obtained via [`ally.query.tabsequence`](../query/tabsequence.md) in order to follow the browser's rules of sorting the sequence. | ||
|
|
||
| As focus can be shifted by various means, even other keyboard commands (e.g. via spatial navigation), it is also necessary to engage [`ally.maintain.disabled`](disabled.md), whenever `ally.maintain.tabFocus` is engaged. | ||
|
|
||
|
|
||
| ## Usage | ||
|
|
||
| ```js | ||
| var handle = ally.maintain.tabFocus({ | ||
| context: '.dialog', | ||
| }); | ||
|
|
||
| handle.disengage(); | ||
| ``` | ||
|
|
||
| ### Arguments | ||
|
|
||
| | Name | Type | Default | Description | | ||
| | ---- | ---- | ------- | ----------- | | ||
| | context | [`<selector>`](../concepts.md#Selector) | [`documentElement`](https://developer.mozilla.org/en-US/docs/Web/API/Document/documentElement) | The scope of the DOM in which to consider the tabsequence. The first element of a collection is used. | | ||
|
|
||
| ### Returns | ||
|
|
||
| A [`<service>`](../concepts.md#Service) interface, providing the `handle.disengage()` method to stop the service. | ||
|
|
||
| ### Throws | ||
|
|
||
|
|
||
| ## Examples | ||
|
|
||
| * **EXAMPLE:** [`ally.maintain.tabFocus` Example](./tab-focus.example.html) | ||
|
|
||
|
|
||
| ## Changes | ||
|
|
||
| * Added in `v#master`. | ||
|
|
||
|
|
||
| ## Notes | ||
|
|
||
| * **WARNING:** As SVG elements cannot be focused by script in Internet Explorer and Firefox, these elements will not be part of the tabsequence, thus not reachable when `ally.maintain.tabFocus` is active. | ||
|
|
||
|
|
||
| ## Related resources | ||
|
|
||
| * [`ally.maintain.disabled`](disabled.md) is a [service](../concepts.md#Service) disabling interactive elements in the DOM | ||
|
|
||
|
|
||
| ## Contributing | ||
|
|
||
| * [module source](https://github.com/medialize/ally.js/blob/master/src/maintain/tab-focus.js) | ||
| * [document source](https://github.com/medialize/ally.js/blob/master/docs/api/maintain/tab-focus.md) | ||
| * [unit test](https://github.com/medialize/ally.js/blob/master/test/unit/maintain.tab-focus.test.js) | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
|
|
||
| // Determines if an element is the activeElement within its context, i.e. its document iFrame or ShadowHost | ||
|
|
||
| import getShadowHost from '../get/shadow-host'; | ||
| import getDocument from '../util/get-document'; | ||
|
|
||
| export default function(element) { | ||
| if (element === document) { | ||
| element = document.documentElement; | ||
| } | ||
|
|
||
| if (!element || element.nodeType !== Node.ELEMENT_NODE) { | ||
| throw new TypeError('is/active-element requires an argument of type Element'); | ||
| } | ||
|
|
||
| const _document = getDocument(element); | ||
| if (_document.activeElement === element) { | ||
| return true; | ||
| } | ||
|
|
||
| const shadowHost = getShadowHost({ context: element }); | ||
| if (shadowHost && shadowHost.shadowRoot.activeElement === element) { | ||
| return true; | ||
| } | ||
|
|
||
| return false; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.