polymerelements / iron-a11y-keys Goto Github PK

A basic element implementation of iron-a11y-keys-behavior

HTML 48.02% JavaScript 51.98%

iron-a11y-keys's Introduction

<iron-a11y-keys>

iron-a11y-keys provides a cross-browser interface for processing keyboard commands. The interface adheres to WAI-ARIA best practices. It uses an expressive syntax to filter key presses.

See: Documentation, Demo.

Usage

Installation

npm install --save @polymer/iron-a11y-keys

In an html file

<html>
  <head>
    <script type="module">
      import '@polymer/iron-a11y-keys/iron-a11y-keys.js';
    </script>
  </head>
  <body>
    <iron-a11y-keys id="keys" keys="left right down up"></iron-a11y-keys>

    <script>
      // Where to listen for the keys.
      keys.target = document.body;
      keys.addEventListener('keys-pressed', function(event) {
        console.log(event.detail);
      });
    </script>
  </body>
</html>

In a Polymer 3 element

import {PolymerElement, html} from '@polymer/polymer';
import '@polymer/iron-a11y-keys/iron-a11y-keys.js';

class SampleElement extends PolymerElement {
  static get properties() {
    return {
      target: {
        type: Object,
        value: function() {
          return this.$.input;
        }
      },
    }
  }

  static get template() {
    return html`
      <iron-a11y-keys id="a11y"
          target="[[target]]" keys="enter"
          on-keys-pressed="onEnter"></iron-a11y-keys>
      <input id="input" placeholder="Type something. Press enter. Check console.">
    `;
  }

  function onEnter() {
    console.log(this.userInput);
  }
}
customElements.define('sample-element', SampleElement);

Contributing

If you want to send a PR to this element, here are the instructions for running the tests and demo locally:

Installation

git clone https://github.com/PolymerElements/iron-a11y-keys
cd iron-a11y-keys
npm install
npm install -g polymer-cli

Running the demo locally

polymer serve --npm
open http://127.0.0.1:<port>/demo/

Running the tests

polymer test --npm

iron-a11y-keys's People

Contributors

Stargazers

Watchers

Forkers

jklein24 iransari10 jnlopar chosh31 hungyao robrez dumbbillyhardy h3dz phani1kumar flpms uva-components reemardelarosa century-tech lordoftheflies hrlink katapultdevelopment exnadella vidyano

iron-a11y-keys's Issues

Event on-keys-pressed fired twice on Firefox

Description

The on-keys-pressed event handler fired twice on firefox. But worked fine in Chrome. I have this code :

<dom-module id="my-app">
    <template>
        <iron-a11y-keys target="[[target]]" keys="space" on-keys-pressed="spacing"></iron-a11y-keys>
        <input type="text" autofocus="autofocus">
    </template>
</dom-module>
<script>
...
static get properties() {
    target: Object
}
ready() {
    super.ready()
    this.target = this.shadowRoot.querySelector('input')
}
//This is the event handler
spacing(e) {
    alert('You pressed the ' + e.detail.key + ' key')
}
...
</script>

Expected outcome

When pressing the 'space' key on input element, the alert dialog showed up once

Actual outcome

When pressing the 'space' key on input element, the alert dialog showed up twice instead

Live Demo

https://jsbin.com/jelayoq/2/edit?html,output

Steps to reproduce

Use webcomponents-lite.js > v1.0.0-rc.6. (It starting to fired twice on version above the v1.0.0-rc.6)
Import iron-a11y-keys and use it to bind to input.
Attach an event handler with on-keys-pressed to the input.
Try it on firefox.
Or just open the live demo in firefox browser.

Browsers Affected

I'm using firefox 55.02

Pressing `*` in the demo page does nothing. The other listed keys work fine.

on a German keyboard

Chrome: Ctrl + Numpad key triggers unexpectedly.

In my example, iron-a11y-keys is listening for Ctrl + I, but is also somehow triggered by Ctrl + Numpad 9. If I switch it to listen for Ctrl + B, it is also somehow triggered by Ctrl + Numpad 2.

It's best to try this in a window with only one tab open, as Ctrl + # also navigates between tabs. Load the JS Bin, then click the "Hello, world!" text. Then press Ctrl + Numpad 9. Bizarre ... and problematic.

http://jsbin.com/pozevimiqa/edit?html,console,output

Chrome seems to be the only affected browser.

Numpad keys do not work in Chrome v49

I have next configuration:

<iron-a11y-keys keys="1 2 3"></iron-a11y-keys>
<script>
var keys = document.querySelector("iron-a11y-keys")
keys.target = document.body
keys.addEventListener("keys-pressed", function() {
alert("Pressed")
})
</script>

I see alerts when I click numbers at the row and do not see it when I click numbers at the numpad.
In firefox and edge it works.

Working example:
https://jsfiddle.net/TrueEugene/jps1j3dc/

iron-a11y-keys issue with Polymer 2.0-preview

Description

I'm trying to add a iron-a11y-keys to catch for any enter keys on a beautiful element that contains a <paper-dialog>. As per the instructions I have a property that looks like this:

_loginDialog: {
                type: Object,
                value: function(){
                  return this.$.loginDialog;
                }
            }

And then the iron-a11y-keys that look like this:

<iron-a11y-keys target="[[_loginDialog]]" keys="enter" on-keys-pressed="_login"></iron-a11y-keys>

As soon as the element shows on screen I get the following error:

Uncaught TypeError: Cannot read property '_loginDialog_' of undefined(…)

So it looks like by the time Polymer is setting up the properties, the reference to the element in the template is null. Maybe related to the new life cycle of the elements? Please tell me if I'm doing something wrong. I'm still a Polymer newb.

Expected outcome

The iron-a11y-keys should be able to register an element as the element is being constructed.

Actual outcome

After adding a iron-a11y-keys on a project with Polymer 2.0-preview with a class style element I get a:

Uncaught TypeError: Cannot read property 'loginDialog' of undefined(…)

Live Demo

Can't do these from work :(

Steps to reproduce

Put a iron-a11y-keys element in an application using Polymer 2.0-Preview and class style elements.
Make the iron-a11y-keys reference a property that it self references an element on the template.
Run polymer serve and see an error on the console.

Tested in

Demo link is broken

Description

The demo link

https://elements.polymer-project.org/elements/iron-a11y-keys

is broken and gives a security error.

Expected outcome

Page loads, demo is there

Actual outcome

Chrome shows a security message

Your connection is not private
Attackers might be trying to steal your information from elements.polymer-project.org (for example, passwords, messages or credit cards). Learn more
NET::ERR_CERT_COMMON_NAME_INVALID

Live Demo

https://elements.polymer-project.org/elements/iron-a11y-keys

Steps to reproduce

Browsers Affected

Chrome

Only tried Chrome

Missing and erroneous documentation for iron-a11y-keys

I think there are at least two issues with the documentation in https://elements.polymer-project.org/elements/iron-a11y-keys. Consider the following example:

<iron-a11y-keys target="{{}}" keys="up down left right" on-keys-pressed="{{arrowHandler}}"></iron-a11y-keys>

First - it seems that the event syntax - {{arrowHandler}} is taken from Polymer 0.5. Event handlers are now specified without curly braces.

Second - there is no explanation at all about the target attribute. It appears 5 times on the page, all using {{}}, which I presume means the entire document (or custom element?). How can one specify anything else?

Link to API/docs is dead

Description

The link on the README.md page to the documentation on webcomponents.org is dead.

Expected outcome

Link to the relevant webcomponents.org page

Actual outcome

404 not found with a reference to the iron-a11y-keys-behavior

Live Demo

Steps to reproduce

Click the link at the top

Browsers Affected

stopKeyboardEventPropagation doesn't stop propagation

when i have
<iron-a11y-keys id="keys" keys="meta+s" target="[[target]]" on-keys-pressed="_updatePressed" stopKeyboardEventPropagation> </iron-a11y-keys>

and click cmd-s the event handler _updatePressed is called but the event gets to window and the browser save is executed. i can prevent the event from bubbling by calling e.detail.keyboardEvent.preventDefault(); in the event handler

Expected outcome

event is captured and propagation is stopped

Actual outcome

browser save is run

Live Demo

Steps to reproduce

Browsers Affected

Binding to specific events (documentation)

In iron-a11y-keys-behavior there is some documentation demonstrating how to bind to specific key* events..

 keyBindings: {
   'space': '_onKeydown', // same as 'space:keydown'
   'shift+tab': '_onKeydown',
   'enter:keypress': '_onKeypress',
   'esc:keyup': '_onKeyup'
 }

For me, it took a bit of reading the code to determine that the same syntax can be used in the keys attr..

  <iron-a11y-keys
      keys="space shift+tab enter:keypress esc:keyup"
      on-keys-pressed="_myHandler">
  </iron-a11y-keys>

Is there any opposition to adding an example like the above to docs for iron-a11y-keys?

Docs: Add 'meta' as one of the potential modifier keys

Where to get Polymer2 version?

Description

Expected outcome

Actual outcome

Live Demo

Steps to reproduce

Browsers Affected

Improve docs for common use cases

The docs don't describe how to use different keyboard events, which is necessary for overriding Tab/Shift+Tab navigation, probably one of the most common use cases for iron-a11y-keys.

Description

Tab/Shift+Tab navigation in screenreaders is triggered on keydown (as opposed to the default keypress). Capturing the different types of keyboard events is only documented in the grammar specs. Adding an example of how to specify and use this event could be rather helpful to future users.

Moreover, the docs could clarify that keyboard events that have a modifier key will be triggered even if the component only specifies the main key (e.g. tab will fire on shift+tab).

iron-a11y-keys responding to key presses on non-target elements in shady DOM

Description

In shady DOM, iron-a11y-keys responds to key presses that happen on non-target elements.

Expected outcome

When I focus on a <button> element that is a sibling of the iron-a11y-keys target Node and tap the Space or Enter keys, iron-a11y-keys does not respond to the key press.

Actual outcome

When I focus on a <button> element that is a sibling of the iron-a11y-keys target Node and tap the Space or Enter keys, iron-a11y-keys responds to the key press.

Live Demo

https://codepen.io/talimarcus/pen/aqLpmG?editors=1010

Steps to reproduce

Open the CodePen linked above in Firefox
Open the developer console
Move keyboard focus to the <button> element
Press the Enter or Space key -- Two events are fired, and their rootTargets are printed in the Console. The rootTarget of the first is iron-a11y-keys, even though the element with focus (the button) is not the target of iron-a11y-keys.

Other notes

When I add

if (e.detail.keyboardEvent) {
  e.detail.keyboardEvent.preventDefault();
}

to the _handleTapped function (above the console.log()), the second (correct) event is no longer fired when Enter is tapped, but the rootTarget of the event that does fire is still wrong.

Browsers Affected

*The issue also exists in Chrome 64 and Safari 11, but only in shady DOM.

add support for "only" modifier

Currently, the main key matching logic is:

keyEvent === keyCombo.key && (!keyCombo.hasModifiers || ( /* exact match of modifiers */)

But sometimes you specifically want only an unmodified key, e.g. only the key z and not alt-z or shift-z etc. In particular, this is necessary when you want to register separate handlers for the modified and unmodified cases.

I suggest using the modifier only, for example:

key="z+only"

If only is combined with other modifiers it has no special effect because the matching logic tests all possible modifiers as soon as any one modifier is included.

I am about to submit a PR implementing this with the addition of 2 lines.

Mac OSX support - for 'command' key?

Is this missing or am I missing something

ctrl+shift+# short cut key not working

Description

https://codepen.io/tony19/pen/eRdjdv

Expected outcome

ctrl+shift+# should fire an event whereas ctrl+shift+* is working

Actual outcome

ctrl+shift+# is not firing an event whereas ctrl+shift+* is working

Live Demo

https://codepen.io/tony19/pen/eRdjdv

Browsers Affected

Missing some key codes

Took me some time to figure out that I couldn't use "insert" because it wasn't in the list.

I was using http://www.openjs.com/scripts/events/keyboard_shortcuts/ before and this one has a lot more keys predefined.

Or maybe make it possible to use any hex code?

having parent as default target

It would be really useful if this element behaved like paper-tooltip and defaulted the target to its parent. I want to use it inside a (nested) dom-repeat and figuring out how to specify the target is almost at my limits.

Alt modifier keys not working in chrome on mac but works in windows.

Description

The iron-ally-keys element does not work with alt modifier in chrome,firefox,opera on mac. But works with safari and windows. It can be seen in the demo page. https://elements.polymer-project.org/elements/iron-a11y-keys?view=demo:demo/index.html&active=iron-a11y-keys Navigate to demo page in chrome on mac and press alt+a

Expected outcome

It should display alt+a.

Actual outcome

Nothing is displayed

Live Demo

https://elements.polymer-project.org/elements/iron-a11y-keys?view=demo:demo/index.html&active=iron-a11y-keys

Steps to reproduce

Navigate to https://elements.polymer-project.org/elements/iron-a11y-keys?view=demo:demo/index.html&active=iron-a11y-keys in chrome on mac
press alt+a.

polymerelements / iron-a11y-keys Goto Github PK

iron-a11y-keys's Introduction

<iron-a11y-keys>

Usage

Installation

In an html file

In a Polymer 3 element

Contributing

Installation

Running the demo locally

Running the tests

iron-a11y-keys's People

Contributors

Stargazers

Watchers

Forkers

iron-a11y-keys's Issues

Description

Expected outcome

Actual outcome

Live Demo

Steps to reproduce

Browsers Affected

Description

Expected outcome

Actual outcome

Live Demo

Steps to reproduce

Tested in

Description

Expected outcome

Actual outcome

Live Demo

Steps to reproduce

Browsers Affected

Description

Expected outcome

Actual outcome

Live Demo

Steps to reproduce

Browsers Affected

Expected outcome

Actual outcome

Live Demo

Steps to reproduce

Browsers Affected

Description

Expected outcome

Actual outcome

Live Demo

Steps to reproduce

Browsers Affected

Description

Description

Expected outcome

Actual outcome

Live Demo

Steps to reproduce

Other notes

Browsers Affected

Description

Expected outcome

Actual outcome

Live Demo

Browsers Affected

Description

Expected outcome

Actual outcome

Live Demo

Steps to reproduce

Browsers Affected

Recommend Projects

Recommend Topics

Recommend Org