| OLD | NEW |
| 1 /* | 1 /** |
| 2 `iron-a11y-keys` provides a cross-browser interface for processing | 2 `iron-a11y-keys` provides a cross-browser interface for processing |
| 3 keyboard commands. The interface adheres to [WAI-ARIA best | 3 keyboard commands. The interface adheres to [WAI-ARIA best |
| 4 practices](http://www.w3.org/TR/wai-aria-practices/#kbd_general_binding). | 4 practices](http://www.w3.org/TR/wai-aria-practices/#kbd_general_binding). |
| 5 It uses an expressive syntax to filter key presses. | 5 It uses an expressive syntax to filter key presses. |
| 6 | 6 |
| 7 ## Basic usage | 7 ## Basic usage |
| 8 | 8 |
| 9 The sample code below is a portion of a custom element. The goal is to call | 9 The sample code below is a portion of a custom element. The goal is to call |
| 10 the `onEnter` method whenever the `paper-input` element is in focus and | 10 the `onEnter` method whenever the `paper-input` element is in focus and |
| 11 the `Enter` key is pressed. | 11 the `Enter` key is pressed. |
| 12 | 12 |
| 13 <iron-a11y-keys id="a11y" target="[[target]]" keys="enter" | 13 <iron-a11y-keys id="a11y" target="[[target]]" keys="enter" |
| 14 on-keys-pressed="onEnter"></iron-a11y-keys> | 14 on-keys-pressed="onEnter"></iron-a11y-keys> |
| 15 <paper-input id="input" | 15 <paper-input id="input" |
| 16 placeholder="Type something. Press enter. Check console." | 16 placeholder="Type something. Press enter. Check console." |
| 17 value="{{userInput::input}}"></paper-input> | 17 value="{{userInput::input}}"></paper-input> |
| 18 | 18 |
| 19 The custom element declares an `iron-a11y-keys` element that is bound to a | 19 The custom element declares an `iron-a11y-keys` element that is bound to a |
| 20 property called `target`. The `target` property | 20 property called `target`. The `target` property |
| 21 needs to evaluate to the `paper-input` node. `iron-a11y-keys` registers | 21 needs to evaluate to the `paper-input` node. `iron-a11y-keys` registers |
| 22 an event handler for the target node using Polymer's [annotated event handler | 22 an event handler for the target node using Polymer's [annotated event handler |
| 23 syntax](https://www.polymer-project.org/1.0/docs/devguide/events.html#annotated-
listeners). `{{userInput::input}}` sets the `userInput` property to the | 23 syntax](https://www.polymer-project.org/1.0/docs/devguide/events.html#annotated-
listeners). `{{userInput::input}}` sets the `userInput` property to the |
| 24 user's input on each keystroke. | 24 user's input on each keystroke. |
| 25 | 25 |
| 26 The last step is to link the two elements within the custom element's | 26 The last step is to link the two elements within the custom element's |
| 27 registration. | 27 registration. |
| 28 | 28 |
| 29 ... | 29 ... |
| 30 properties: { | 30 properties: { |
| 31 userInput: { | 31 userInput: { |
| 32 type: String, | 32 type: String, |
| 33 notify: true, | 33 notify: true, |
| 34 }, | 34 }, |
| 35 target: { | 35 target: { |
| 36 type: Object, | 36 type: Object, |
| 37 value: function() { | 37 value: function() { |
| 38 return this.$.input; | 38 return this.$.input; |
| 39 } | 39 } |
| 40 }, | 40 }, |
| 41 }, | 41 }, |
| 42 onEnter: function() { | 42 onEnter: function() { |
| 43 console.log(this.userInput); | 43 console.log(this.userInput); |
| 44 } | 44 } |
| 45 ... | 45 ... |
| 46 | 46 |
| 47 ## The `keys` attribute | 47 ## The `keys` attribute |
| 48 | 48 |
| 49 The `keys` attribute expresses what combination of keys triggers the event. | 49 The `keys` attribute expresses what combination of keys triggers the event. |
| 50 | 50 |
| 51 The attribute accepts a space-separated, plus-sign-concatenated | 51 The attribute accepts a space-separated, plus-sign-concatenated |
| 52 set of modifier keys and some common keyboard keys. | 52 set of modifier keys and some common keyboard keys. |
| 53 | 53 |
| 54 The common keys are: `a-z`, `0-9` (top row and number pad), `*` (shift 8 and | 54 The common keys are: `a-z`, `0-9` (top row and number pad), `*` (shift 8 and |
| 55 number pad), `F1-F12`, `Page Up`, `Page Down`, `Left Arrow`, `Right Arrow`, | 55 number pad), `F1-F12`, `Page Up`, `Page Down`, `Left Arrow`, `Right Arrow`, |
| 56 `Down Arrow`, `Up Arrow`, `Home`, `End`, `Escape`, `Space`, `Tab`, `Enter`. | 56 `Down Arrow`, `Up Arrow`, `Home`, `End`, `Escape`, `Space`, `Tab`, `Enter`. |
| 57 | 57 |
| 58 The modifier keys are: `Shift`, `Control`, `Alt`. | 58 The modifier keys are: `Shift`, `Control`, `Alt`, `Meta`. |
| 59 | 59 |
| 60 All keys are expected to be lowercase and shortened. E.g. | 60 All keys are expected to be lowercase and shortened. E.g. |
| 61 `Left Arrow` is `left`, `Page Down` is `pagedown`, `Control` is `ctrl`, | 61 `Left Arrow` is `left`, `Page Down` is `pagedown`, `Control` is `ctrl`, |
| 62 `F1` is `f1`, `Escape` is `esc`, etc. | 62 `F1` is `f1`, `Escape` is `esc`, etc. |
| 63 | 63 |
| 64 ### Grammar | 64 ### Grammar |
| 65 | 65 |
| 66 Below is the [EBNF](http://en.wikipedia.org/wiki/Extended_Backus%E2%80%93Naur_Fo
rm) | 66 Below is the [EBNF](http://en.wikipedia.org/wiki/Extended_Backus%E2%80%93Naur_Fo
rm) |
| 67 Grammar of the `keys` attribute. | 67 Grammar of the `keys` attribute. |
| 68 | 68 |
| 69 modifier = "shift" | "ctrl" | "alt"; | 69 modifier = "shift" | "ctrl" | "alt" | "meta"; |
| 70 ascii = ? /[a-z0-9]/ ? ; | 70 ascii = ? /[a-z0-9]/ ? ; |
| 71 fnkey = ? f1 through f12 ? ; | 71 fnkey = ? f1 through f12 ? ; |
| 72 arrow = "up" | "down" | "left" | "right" ; | 72 arrow = "up" | "down" | "left" | "right" ; |
| 73 key = "tab" | "esc" | "space" | "*" | "pageup" | "pagedown" | | 73 key = "tab" | "esc" | "space" | "*" | "pageup" | "pagedown" | |
| 74 "home" | "end" | arrow | ascii | fnkey; | 74 "home" | "end" | arrow | ascii | fnkey; |
| 75 keycombo = { modifier, "+" }, key ; | 75 keycombo = { modifier, "+" }, key ; |
| 76 keys = keycombo, { " ", keycombo } ; | 76 keys = keycombo, { " ", keycombo } ; |
| 77 | 77 |
| 78 ### Example | 78 ### Example |
| 79 | 79 |
| 80 Given the following value for `keys`: | 80 Given the following value for `keys`: |
| 81 | 81 |
| 82 `ctrl+shift+f7 up pagedown esc space alt+m` | 82 `ctrl+shift+f7 up pagedown esc space alt+m` |
| 83 | 83 |
| 84 The event is fired if any of the following key combinations are fired: | 84 The event is fired if any of the following key combinations are fired: |
| 85 `Control` and `Shift` and `F7` keys, `Up Arrow` key, `Page Down` key, | 85 `Control` and `Shift` and `F7` keys, `Up Arrow` key, `Page Down` key, |
| 86 `Escape` key, `Space` key, `Alt` and `M` keys. | 86 `Escape` key, `Space` key, `Alt` and `M` keys. |
| 87 | 87 |
| 88 ### WAI-ARIA Slider Example | 88 ### WAI-ARIA Slider Example |
| 89 | 89 |
| 90 The following is an example of the set of keys that fulfills WAI-ARIA's | 90 The following is an example of the set of keys that fulfills WAI-ARIA's |
| 91 "slider" role [best | 91 "slider" role [best |
| 92 practices](http://www.w3.org/TR/wai-aria-practices/#slider): | 92 practices](http://www.w3.org/TR/wai-aria-practices/#slider): |
| 93 | 93 |
| 94 <iron-a11y-keys target="[[target]]" keys="left pagedown down" | 94 <iron-a11y-keys target="[[target]]" keys="left pagedown down" |
| 95 on-keys-pressed="decrement"></iron-a11y-keys> | 95 on-keys-pressed="decrement"></iron-a11y-keys> |
| 96 <iron-a11y-keys target=""[[target]] keys="right pageup up" | 96 <iron-a11y-keys target="[[target]]" keys="right pageup up" |
| 97 on-keys-pressed="increment"></iron-a11y-keys> | 97 on-keys-pressed="increment"></iron-a11y-keys> |
| 98 <iron-a11y-keys target="[[target]]" keys="home" | 98 <iron-a11y-keys target="[[target]]" keys="home" |
| 99 on-keys-pressed="setMin"></iron-a11y-keys> | 99 on-keys-pressed="setMin"></iron-a11y-keys> |
| 100 <iron-a11y-keys target=""[[target]] keys="end" | 100 <iron-a11y-keys target=""[[target]] keys="end" |
| 101 on-keys-pressed="setMax"></iron-a11y-keys> | 101 on-keys-pressed="setMax"></iron-a11y-keys> |
| 102 | 102 |
| 103 The `target` properties must evaluate to a node. See the basic usage | 103 The `target` properties must evaluate to a node. See the basic usage |
| 104 example above. | 104 example above. |
| 105 | 105 |
| 106 Each of the values for the `on-keys-pressed` attributes must evalute | 106 Each of the values for the `on-keys-pressed` attributes must evalute |
| 107 to methods. The `increment` method should move the slider a set amount | 107 to methods. The `increment` method should move the slider a set amount |
| 108 toward the maximum value. `decrement` should move the slider a set amount | 108 toward the maximum value. `decrement` should move the slider a set amount |
| 109 toward the minimum value. `setMin` should move the slider to the minimum | 109 toward the minimum value. `setMin` should move the slider to the minimum |
| 110 value. `setMax` should move the slider to the maximum value. | 110 value. `setMax` should move the slider to the maximum value. |
| 111 | 111 |
| 112 @demo demo/index.html | 112 @demo demo/index.html |
| 113 */ | 113 */ |
| 114 | 114 |
| 115 | 115 |
| 116 |
| 116 Polymer({ | 117 Polymer({ |
| 117 is: 'iron-a11y-keys', | 118 is: 'iron-a11y-keys', |
| 118 | 119 |
| 119 behaviors: [ | 120 behaviors: [ |
| 120 Polymer.IronA11yKeysBehavior | 121 Polymer.IronA11yKeysBehavior |
| 121 ], | 122 ], |
| 122 | 123 |
| 123 properties: { | 124 properties: { |
| 124 /** @type {?Node} */ | 125 /** @type {?Node} */ |
| 125 target: { | 126 target: { |
| (...skipping 20 matching lines...) Expand all Loading... |
| 146 | 147 |
| 147 _keysChanged: function() { | 148 _keysChanged: function() { |
| 148 this.removeOwnKeyBindings(); | 149 this.removeOwnKeyBindings(); |
| 149 this.addOwnKeyBinding(this.keys, '_fireKeysPressed'); | 150 this.addOwnKeyBinding(this.keys, '_fireKeysPressed'); |
| 150 }, | 151 }, |
| 151 | 152 |
| 152 _fireKeysPressed: function(event) { | 153 _fireKeysPressed: function(event) { |
| 153 this.fire('keys-pressed', event.detail, {}); | 154 this.fire('keys-pressed', event.detail, {}); |
| 154 } | 155 } |
| 155 }); | 156 }); |
| OLD | NEW |