polymerelements / iron-a11y-keys-behavior Goto Github PK

Description

Just tried upgrading an element to native 2.0 class-based syntax and used Polymer.mixinBehaviors to mix Polymer.PaperInputBehavior this way, which in turn mixes in additional behaviors including Polymer.IronA11yKeysBehavior.

Unfortunately it seems that Polymer.mixinBehaviorsis not setting element's this.behaviors property, which is used by Polymer.IronA11yKeysBehavior, so it fails with an Error TypeError: Cannot read property 'map' of undefined error

https://github.com/PolymerElements/iron-a11y-keys-behavior/blob/2.0-preview/iron-a11y-keys-behavior.html#L374

I am not sure if any other PolymerElements/Behaviors make use of this property and if a change to Polymer.mixinBehaviors is warranted to maintain backward compatibility with hybrid Polymer Elements' behaviors or we shall treat it as a breaking API change.

As it stands right now it appears that this issue will get in the way of moving any element with a dependency on Polymer.IronA11yKeysBehavior to Polymer 2.0 class-based syntax.

Expected outcome

No error

Actual outcome

Error TypeError: Cannot read property 'map' of undefined

https://github.com/PolymerElements/iron-a11y-keys-behavior/blob/2.0-preview/iron-a11y-keys-behavior.html#L374

Live Demo

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

This just shows that this.behaviors is undefined

Steps to reproduce

1. Run.
2. look for 'undefined' logged to console.

Browsers Affected

• Chrome
• Firefox
• Safari 9
• Safari 8
• Safari 7
• Edge
• IE 11
• IE 10

When passed through the normalizedKeyForEvent function, key events for number pad digits are incorrectly transformed because the keyIdentifier property for the event has the same Unicode value as a-i.

The keyIdentifier property is deprecated and non-standard (API), so this check should be removed, or at least placed below the check for the keyCode property.

If the transformKeyIdentifier check is put below the transformKeyCode check, an issue with the transformKeyCode function becomes apparent when testing number keys. The keyCode parameter should have 48 and 96 subtracted from it for top row numeric keys and number pad digits respectively, not the other way around.

I've created a pull request for this issue.

Description

Polymer paper-input and any other field with autocomplete causing exceptions when data filled using autocomplete

Had pull request #43 for this before, and for some unknown reason that bug got vanished in the middle. Now it came back again.

Expected outcome

without exceptions

Actual outcome

Exception
(Uncaught TypeError: Cannot read property 'key' of undefined)

Live Demo

http://sandy.co.in/polymer-demos/dest/

Steps to reproduce

1. Put a paper-input element in the page with attribute label="name" & autocomplete="name".
2. Open the page in a web browser.
3. type something and select any autofill option.
4. check the console

Browsers Affected

• Chrome (Version 53.0.2756.0 dev (64-bit))
• Firefox
• Safari 9
• Safari 8
• Safari 7
• Edge
• IE 11
• IE 10

Platform: OSx El Capitan

In the demo, alt+a no longer works, and adding shift+tab doesn't work anymore either (it works in my old M46 Chrome, but not in my Canary).

Description

'KeyboardEvent.keyIdentifier' is deprecated and will be removed in M53, around September 2016. See https://www.chromestatus.com/features/5316065118650368 for more details.

This warning is caused by line 182:

transformKeyIdentifier(keyEvent.keyIdentifier) ||

Seems that this should be removed.

An update to Chrome's treatment of KeyboardEvent (see intent to ship) has broken iron-a11y-keys-behavior's matching logic for the Escape key. This is preventing, for example, Escape from closing paper-dropdown-menu because iron-menu-behavior treats the key as if it were supposed to be the first character of a menu item.

This is affecting Chrome's new Material Design Downloads page as a beta-blocking issue.

A fix has been proposed (not formatted a patch for this repo though).

Open questions:

1. Do any other keys not work?
2. Is the proposed fix compatible with other browsers?

There is currently no way to bind to backspace.

For an element that uses this behavior, setting keyEventTarget on the element's prototype gets overwritten by the behavior to this (the element).

keyEventTarget: document.body

My workaround was to set this in ready:

ready: function() {
  this.keyEventTarget = document.body;
}

Description

I'm apparently unable to bind to the alt, shift, and meta keys with the following keyBindings property

      keyBindings: {
        'alt': '_handleKeydown',
        'Alt': '_handleKeydown',
        'AltGraph': '_handleKeydown',
        'meta': '_handleKeydown',
        'control': '_handleKeydown', // => control
        'shift': '_handleKeydown',
        'Shift': '_handleKeydown',
        'U+0051': '_handleKeydown',
      },

      _handleKeydown: function(event) { console.log(event.detail.key); },

Expected outcome

pressing alt should log alt, pressing shift should log shift, etc.

Actual outcome

Only pressing ctrl logs control

Live Demo

https://jsbin.com/tuwodezoro/edit?html,output

Steps to reproduce

see demo

Browsers Affected

• Chrome 60 mac.

Description

On this demo: https://elements.polymer-project.org/elements/iron-a11y-keys-behavior?view=demo:demo/index.html&active=Polymer.IronA11yKeysBehavior,

I have a feedback for all the keys except the tilde key.
I'm using my mac french keyboard, so maybe it's not supported for non-american keyboards?

To do a tilde key on my keyboard, I have to press the "alt+n" combination.
But what is strange is that I can do the question mark, which on french keyboard is also a combination ( shift+[comma] ).

I can even do the backslash, which is the alt+shift+[colon] combination.

If this.keyEventTarget is null when attached() is called, then a null target is inserted into _boundKeyHandlers. That will lead to an exception in _unlistenKeyEventListeners when detached() is later called. Specifically, keyEventTarget will be null when used on this line:

keyEventTarget.removeEventListener(eventName, boundKeyHandler);

Browsers Affected

• [ x] Chrome
• Firefox
• Safari 9
• Safari 8
• Safari 7
• Edge
• IE 11
• IE 10

Description

I'm using the IronA11yKeysBehavior in my project, and I have a key binding to 'c'. I expect it to be fired when no modifiers are supplied, and for the browser to handle copy natively when ctrl+c or cmd+c are pressed. Instead, the key binding to 'c' is called any time something that isn't explicitly bound with a different key binding is pressed, regardless of other keys/modifiers. Is this expected behavior?

Description

If I don't add the following lines in the ready() function, the key events are not catched:

    ready() {
      super.ready();
      this._prepKeyBindings();
      this.keyEventTarget = document.body;
    }

Live Demo

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

Browsers Affected

• Chrome

I am using IronA11yKeysBehavior to implement keyboard shortcut handling in my project. I have a polymer element <my-element></my-element> in which I have defined the keyBindings property as follows

keyBindings : {
    'shift+a' : '_onKeyPreseed'
}

The element is working as expected. But I want to dynamically assign keyboard shortcuts (so that a user can change the shortcuts as per her requirements). Say I want to change the shortcut from shift+a to alt+a. How to do this?

I have changed the 'keyBindings' property, but that is not working, still _onKeyPreseed is called when shift+a is pressed, not when alt+ais pressed.

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.

Description

When I try to upgrade from Polymer 3.1 to Polymer 3.2,
When creating a paper-dialog (which depends on iron-a11y-keys-behavior),
An error is thrown

Expected outcome

No error

Actual outcome

Uncaught TypeError: Cannot convert undefined or null to object (node_modules/@polymer/iron-a11y-keys-behavior/iron-a11y-keys-behavior.js:430)
at HTMLElement._attachDom (node_modules/@polymer/polymer/lib/mixins/element-mixin.js:739:24)
at HTMLElement._readyClients (node_modules/@polymer/polymer/lib/mixins/element-mixin.js:703:26)
at HTMLElement._flushClients (node_modules/@polymer/polymer/lib/mixins/property-effects.js:1734:14)
at HTMLElement._propertiesChanged (node_modules/@polymer/polymer/lib/mixins/property-effects.js:1883:12)
at HTMLElement._flushProperties (node_modules/@polymer/polymer/lib/mixins/properties-changed.js:390:14)
at HTMLElement._flushProperties (node_modules/@polymer/polymer/lib/mixins/property-effects.js:1716:13)
at HTMLElement.ready (node_modules/@polymer/polymer/lib/mixins/property-effects.js:1835:12)
at HTMLElement.ready (node_modules/@polymer/polymer/lib/mixins/element-mixin.js:687:13)
at HTMLElement.ready (node_modules/@polymer/polymer/lib/mixins/dir-mixin.js:158:13)

Steps to reproduce

Browsers Affected

• Chrome
• Firefox
• Safari 9
• Safari 8
• Safari 7
• Edge
• IE 11
• IE 10

In core-a11y-keys the keyboard event was passed through keyboardEventToKey function which was very helpful because one didn't have to memorize or look up key codes. event.detail contained exactly the amount of information required. Can we have it back? (can I make a Pull-request or is there a reason this was removed?)

If keyEventTarget = null and the element is attached, we get an error.
null should be a possible value for keyEventTarget, as it could be used to disable listeners.
See PolymerElements/paper-ripple#79 (comment)

Hi,

I am handling up/down arrow keys to change focus on my list items. It keys are being captured properly but the page also scrolls up/down. The event bleeds up to the scrollable container and scrolls it.

I tried event.preventDefault(), event.stopPropagation() & event.stopImmediatePropagation() but the issue is not resolved.

P.S.: I'm using shady-dom.

Kindly help!

See the big list here:

https://chromium.googlesource.com/infra/infra/+/master/appengine/chromium_rietveld/new_static/common/cr-keyboard.html#80

Description

When I press a right key, next function should run, but nothing happens

Here is the code

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/iron-image/iron-image.html">
<link rel="import" href="../bower_components/paper-fab/paper-fab.html">
<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="../bower_components/iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">

<dom-module id="st-carousal">
  <template>
    <style>
       :host {
        display: block;
        background: var(--st-light-primary-color);
        width: 100%;
        padding: 0;
      }

      .cover-image {
        width: 70%;

        @apply --layout-horizontal;
        @apply --layout-justified;
        @apply --layout-center;
      }

      paper-fab {
        background: var(--st-secondary-color);
        color: #000;
      }
    </style>
    <center>
      <div class="cover-image">
        <paper-fab icon="st-icons:navigate-before" on-tap="prev" id="showPrev"></paper-fab>
        <iron-pages id="ironPage" selected="[[ selected ]]">
          <slot></slot>
        </iron-pages>
        <paper-fab icon="st-icons:navigate-next" on-tap="next" id="showNext"></paper-fab>
      </div>
    </center>
  </template>
  <script>
    'use strict'
    class StCarousal extends Polymer.mixinBehaviors([Polymer.IronA11yKeysBehavior], Polymer.Element) {
      static get is() { return 'st-carousal'; }

      static get properties() {
        return {
          selected: {
            type: Number,
            value: 0
          },
          /**
            * Transition data for all the animations
            * @return {Object}
            */
          transitionData: {
            type: Object,
            value: () => {
              // Declare variables
              var fabScaleUp, fabScaleDown, slideRight, SlideLeft;

              // Set the Scale up animation keyframes for FAB
              fabScaleUp = {
                transform: [
                  'scale(0, 0)',
                  'scale(1, 1)'
                ]
              };

              // Set the Scale down animation keyframes for FAB
              fabScaleDown = {
                transform: [
                  'scale(1, 1)',
                  'scale(0, 0)'
                ]
              };

              // Set the slide right animation keyframe for carousal items
              slideRight = {
                transform: [
                  'translateX(0)',
                  'translateX(100%)'
                ]
              };

              // Set the slide left animation keyframe for carousal items
              SlideLeft = {
                transform: [
                  'translateX(0)',
                  'translateX(-100%)'
                ]
              }

              return {
                fsu: fabScaleUp,
                fsd: fabScaleDown
              };
            }
          },
        };
      }

      static get keyBindings() {
        return {
          'right': 'next'
        };
      }

      ready() {
        super.ready();
      }

      next() {
        this.$.ironPage.selectNext();
      }

      prev() {
        this.$.ironPage.selectPrevious();
      }
    }

    customElements.define(StCarousal.is, StCarousal);
  </script>
</dom-module>

Tested on

• Chrome
• Firefox
• Safari 9
• Safari 8
• Safari 7
• Edge
• IE 11
• IE 10

Description

Add support for non-legacy key bindings mixin.

Expected ES6 API

static get keyBindings() should be used to configure key bindings.

Actual ES6 API

get keyBindings() is used, results in pollution of the instance namespace. Prevents defining keyBindings at multiple levels of inheritance.

Pull Request

#70

Sorry I did this backwards. I'm currently using the repo referenced by the pull request. It hasn't been updated in a while so it currently conflicts. I'll get around to updating it but since I'm not having any trouble with keybindings in my app it's not very high priority (unless the PR will get attention).

In IE /Edge, the "+", "-", "/" keys in the numpad are not detected even if you have a keybinding for these symbols. It only detects the "+", "-" and "/" not in the numpad.

This happens because the "key" property in the event is different in Chrome and IE.
In Chrome the key property is "+", "-" and "/", while in IE/Edge it returns "Add", "Subtract" and "Divide", respectively.

This difference in implementation was already handled for the "*", where IE/Edge return "Multiply".

Thanks,
Mauro

I'm refactoring a piece of PolyGerrit code that has a couple different keycode handling functions in it. https://gerrit.googlesource.com/gerrit/+/master/polygerrit-ui/app/elements/change/gr-account-list/gr-account-list.js#198

One of these is a native input, the other is a custom element that I want to give custom behavior on keypresses in this element only. What's the recommended way of accomplishing this?

Hi there! Thanks for all your hard work!
Unfortunately the documentation for the methods in this behavior is not enough to explain how to we should use the behavior. Could you please expand on them?

I tried to add a handler for /, but iron-a11y-keys-behavior identifies the key as U+00BF, which is an inverted question mark (https://en.wikipedia.org/wiki/U+00BF). I believe 191 is actually the JS keycode for /, it's just not getting translated properly.

I can reproduce the problem on Chrome 46 on Linux, but not on OS X. Sample code is here:
https://gerrit-review.googlesource.com/#/c/73010/1/polygerrit-ui/app/elements/gr-search-bar.html@85

I tried adding a test to basic-test.html like the following:

test('trigger the handler when slash is pressed', function() {
  MockInteractions.pressAndReleaseKeyOn(keys, 191);
  expect(keys.keyCount).to.be.equal(1);
});

but the whole test suite is failing for me so I must be doing something wrong.

My chrome://version says:

Google Chrome   46.0.2490.86 (Official Build) (64-bit)
Revision    e8926f681fbb840b4f389e7e692343d4505722ce-refs/branch-heads/2490@{#560}
OS  Linux 
Blink   537.36 (@e8926f681fbb840b4f389e7e692343d4505722ce)
JavaScript  V8 4.6.85.31
Flash   19.0.0.245
User Agent  Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.86 Safari/537.36

Description

When on an ancestor I use Polymer.dom(...).attachChild(), and one of those children has an iron-a11y-keys-behaviour. The method _unlistenKeyEventListener, is called binded to an object without the key _boundKeyHandlers.
The method expects an Array, and calls _boundKeyHandlers.length without checking if the key exists or if is an array, this make the function throws a TypeError.

Expected outcome

To not throw an error

Actual outcome

Throws an error

Stack Trace / Screenshot

Description

on "_listenKeyEventListeners", when used on paper-button version 2.1.3, the property "this._keyBindings" is undefined. With Polymer 2.8.0. All are fine with Polymer 2.6.1

Expected outcome

Consol error log...

Actual outcome

No error

Live Demo

Steps to reproduce

Browsers Affected

• Chrome
• Firefox
• Safari 9
• Safari 8
• Safari 7
• Edge
• IE 11
• IE 10