Skip to content
This repository has been archived by the owner on Dec 19, 2024. It is now read-only.

Commit

Permalink
Merge pull request #4 from PolymerElements/docblock
Browse files Browse the repository at this point in the history
Comments should start with /** instead of /*
  • Loading branch information
notwaldorf committed Feb 5, 2016
2 parents d4a0755 + 700247c commit 3078b12
Showing 1 changed file with 28 additions and 27 deletions.
55 changes: 28 additions & 27 deletions iron-a11y-keys.html
Original file line number Diff line number Diff line change
Expand Up @@ -13,16 +13,16 @@

<script>

/*
`iron-a11y-keys` provides a cross-browser interface for processing
keyboard commands. The interface adheres to [WAI-ARIA best
practices](http://www.w3.org/TR/wai-aria-practices/#kbd_general_binding).
/**
`iron-a11y-keys` provides a cross-browser interface for processing
keyboard commands. The interface adheres to [WAI-ARIA best
practices](http://www.w3.org/TR/wai-aria-practices/#kbd_general_binding).
It uses an expressive syntax to filter key presses.
## Basic usage
The sample code below is a portion of a custom element. The goal is to call
the `onEnter` method whenever the `paper-input` element is in focus and
the `onEnter` method whenever the `paper-input` element is in focus and
the `Enter` key is pressed.
<iron-a11y-keys id="a11y" target="[[target]]" keys="enter"
Expand All @@ -31,14 +31,14 @@
placeholder="Type something. Press enter. Check console."
value="{{userInput::input}}"></paper-input>
The custom element declares an `iron-a11y-keys` element that is bound to a
The custom element declares an `iron-a11y-keys` element that is bound to a
property called `target`. The `target` property
needs to evaluate to the `paper-input` node. `iron-a11y-keys` registers
needs to evaluate to the `paper-input` node. `iron-a11y-keys` registers
an event handler for the target node using Polymer's [annotated event handler
syntax](https://www.polymer-project.org/1.0/docs/devguide/events.html#annotated-listeners). `{{userInput::input}}` sets the `userInput` property to the
user's input on each keystroke.
syntax](https://www.polymer-project.org/1.0/docs/devguide/events.html#annotated-listeners). `{{userInput::input}}` sets the `userInput` property to the
user's input on each keystroke.
The last step is to link the two elements within the custom element's
The last step is to link the two elements within the custom element's
registration.
...
Expand All @@ -63,71 +63,72 @@
The `keys` attribute expresses what combination of keys triggers the event.
The attribute accepts a space-separated, plus-sign-concatenated
The attribute accepts a space-separated, plus-sign-concatenated
set of modifier keys and some common keyboard keys.
The common keys are: `a-z`, `0-9` (top row and number pad), `*` (shift 8 and
The common keys are: `a-z`, `0-9` (top row and number pad), `*` (shift 8 and
number pad), `F1-F12`, `Page Up`, `Page Down`, `Left Arrow`, `Right Arrow`,
`Down Arrow`, `Up Arrow`, `Home`, `End`, `Escape`, `Space`, `Tab`, `Enter`.
The modifier keys are: `Shift`, `Control`, `Alt`, `Meta`.
All keys are expected to be lowercase and shortened. E.g.
`Left Arrow` is `left`, `Page Down` is `pagedown`, `Control` is `ctrl`,
`Left Arrow` is `left`, `Page Down` is `pagedown`, `Control` is `ctrl`,
`F1` is `f1`, `Escape` is `esc`, etc.
### Grammar
Below is the [EBNF](http://en.wikipedia.org/wiki/Extended_Backus%E2%80%93Naur_Form)
Below is the [EBNF](http://en.wikipedia.org/wiki/Extended_Backus%E2%80%93Naur_Form)
Grammar of the `keys` attribute.
modifier = "shift" | "ctrl" | "alt" | "meta";
ascii = ? /[a-z0-9]/ ? ;
fnkey = ? f1 through f12 ? ;
arrow = "up" | "down" | "left" | "right" ;
key = "tab" | "esc" | "space" | "*" | "pageup" | "pagedown" |
key = "tab" | "esc" | "space" | "*" | "pageup" | "pagedown" |
"home" | "end" | arrow | ascii | fnkey;
keycombo = { modifier, "+" }, key ;
keys = keycombo, { " ", keycombo } ;
### Example
Given the following value for `keys`:
Given the following value for `keys`:
`ctrl+shift+f7 up pagedown esc space alt+m`
The event is fired if any of the following key combinations are fired:
`Control` and `Shift` and `F7` keys, `Up Arrow` key, `Page Down` key,
The event is fired if any of the following key combinations are fired:
`Control` and `Shift` and `F7` keys, `Up Arrow` key, `Page Down` key,
`Escape` key, `Space` key, `Alt` and `M` keys.
### WAI-ARIA Slider Example
The following is an example of the set of keys that fulfills WAI-ARIA's
The following is an example of the set of keys that fulfills WAI-ARIA's
"slider" role [best
practices](http://www.w3.org/TR/wai-aria-practices/#slider):
<iron-a11y-keys target="[[target]]" keys="left pagedown down"
<iron-a11y-keys target="[[target]]" keys="left pagedown down"
on-keys-pressed="decrement"></iron-a11y-keys>
<iron-a11y-keys target="[[target]]" keys="right pageup up"
<iron-a11y-keys target="[[target]]" keys="right pageup up"
on-keys-pressed="increment"></iron-a11y-keys>
<iron-a11y-keys target="[[target]]" keys="home"
<iron-a11y-keys target="[[target]]" keys="home"
on-keys-pressed="setMin"></iron-a11y-keys>
<iron-a11y-keys target=""[[target]] keys="end"
<iron-a11y-keys target=""[[target]] keys="end"
on-keys-pressed="setMax"></iron-a11y-keys>
The `target` properties must evaluate to a node. See the basic usage
The `target` properties must evaluate to a node. See the basic usage
example above.
Each of the values for the `on-keys-pressed` attributes must evalute
to methods. The `increment` method should move the slider a set amount
toward the maximum value. `decrement` should move the slider a set amount
toward the minimum value. `setMin` should move the slider to the minimum
to methods. The `increment` method should move the slider a set amount
toward the maximum value. `decrement` should move the slider a set amount
toward the minimum value. `setMin` should move the slider to the minimum
value. `setMax` should move the slider to the maximum value.
@demo demo/index.html
*/



Polymer({
is: 'iron-a11y-keys',

Expand Down

0 comments on commit 3078b12

Please sign in to comment.