ember-inert-polyfill

ember-inert-polyfill

An Ember addon that enables use of the HTML inert attribute by importing the inert polyfill.

The inert attribute is current a draft feature of HTML5, but the Google Chrome team created a small polyfill for it in the meantime which prevents tab-focusing, using the accessKey to access an element, the click event and any other approach to focus.

The official HTML spec provides a good description of its use:

A node (in particular elements and text nodes) can be marked as inert. When a node is inert, then the user agent must act as if the node was absent for the purposes of targeting user interaction events, may ignore the node for the purposes of text search user interfaces (commonly known as "find in page"), and may prevent the user from selecting text in that node.

A primary example of where this might be extremely usefull is a collapsable side-navigation panel. When the panel is off-screen, adding the inert attribute to it can prevent links in the panel from becoming tabbable, thus preventing the jarring user experience of browser focus vanishing into thin air. (Of course, you should then remove the attribute when panel is animated on-screen.)

Usage

ember install ember-inert-polyfill

No setup or special configuration is needed: you can now use the inert attribute on any HTML element.

Contributing

This project will intend to stay up to date with offering the latest version of the polyfill. If you notice a discrepency, please feel free to open up an issue.

Installation

• git clone this repository
• npm install
• bower install

Running

• ember serve
• Visit your app at http://localhost:4200.

Running Tests

• npm test (Runs ember try:testall to test your addon against multiple Ember versions)
• ember test
• ember test --server

Building

• ember build

For more information on using ember-cli, visit http://ember-cli.com/.