polymerelements / iron-a11y-keys-behavior Goto Github PK
View Code? Open in Web Editor NEWA behavior that enables keybindings for greater a11y
A behavior that enables keybindings for greater a11y
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).
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
Consol error log...
No error
Add support for non-legacy key bindings mixin.
static get keyBindings()
should be used to configure key bindings.
get keyBindings()
is used, results in pollution of the instance namespace. Prevents defining keyBindings at multiple levels of inheritance.
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).
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.
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
No error
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)
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.
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.mixinBehaviors
is 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
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.
No error
Error TypeError: Cannot read property 'map' of undefined
http://jsbin.com/gisakayogu/edit?html,console,output
This just shows that this.behaviors is undefined
There is currently no way to bind to backspace.
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?
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);
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.
To not throw an error
Throws an error
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?)
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;
}
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!
When I press a right key, next
function should run, but nothing happens
<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>
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
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)
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.
without exceptions
Exception
(Uncaught TypeError: Cannot read property 'key' of undefined)
http://sandy.co.in/polymer-demos/dest/
paper-input
element in the page with attribute label="name" & autocomplete="name".Platform: OSx El Capitan
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 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;
}
http://jsbin.com/zeraputiyi/1/edit?html,console,output
'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.
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); },
pressing alt should log alt
, pressing shift should log shift
, etc.
Only pressing ctrl logs control
https://jsbin.com/tuwodezoro/edit?html,output
see demo
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?
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
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+a
is pressed.
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?
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:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.