Coder Social home page Coder Social logo

Comments (14)

garykac avatar garykac commented on July 25, 2024 2

BTW, for looking at key events, you may want to try: https://w3c.github.io/uievents/tools/key-event-viewer.html

You can turn on keyIdentifier by selecting Options and enabling the "Old DOM3" fields.

from iron-a11y-keys-behavior.

dborowitz avatar dborowitz commented on July 25, 2024 1

I'm confused as to why this bug was closed. Even if the root cause is due to a platform issue, there is surely a problem with iron-a11y-keys-behavior as well.

The documented behavior is you put a character as a key in the keyBindings object, you get a key binding for the key that generates that character. If this works only for some characters, then you need to document what subset of characters it works for.

And honestly, as an application developer, if I can't count on this library to work for every key I need to handle bindings for, I'm not likely to use it at all. Handling some key events using this behavior and some manually is more conceptual overhead than just handling everything manually.

from iron-a11y-keys-behavior.

dborowitz avatar dborowitz commented on July 25, 2024

/ is not the only key affected. For example [ shows up as U+00DB and ] is U+00DD.

from iron-a11y-keys-behavior.

andybons avatar andybons commented on July 25, 2024

Additionally, on Windows, [ is reported as U+00DD.

from iron-a11y-keys-behavior.

valdrinkoshi avatar valdrinkoshi commented on July 25, 2024

event.keyCode is not reliable for special characters (e.g. on US keyboard you'd press shift and 1 to obtain ! The resulting event.keyCode is 49 which corresponds to 1, that's why we rely on event.key, then event.keyIdentifier and finally event.keyCode)

event.key should be the answer, but so far it is undefined for special characters. So next best is event.keyIdentifier.

Did some tests, on Chrome Linux the event.keyIdentifier is wrong:

# pressed /
key undefined -> 
keyIdentifier U+00BF -> ¿
keyCode 191 -> undefined

# pressed [
key undefined -> 
keyIdentifier U+00DB -> û
keyCode 219 -> undefined

linux-keys

On Chrome Mac instead event.keyIdentifier is correct:

# pressed /
key undefined -> 
keyIdentifier U+002F -> /
keyCode 191 -> undefined

# pressed [
key undefined -> 
keyIdentifier U+005B -> [
keyCode 219 -> undefined

mac-keys

Adding 191 keyCode is not an option, because it would be triggered even if we press Shift + [ (which instead matches to {).

from iron-a11y-keys-behavior.

valdrinkoshi avatar valdrinkoshi commented on July 25, 2024

Closing this issue as it's a platform problem rather than of the behavior.
@cdata FYI

from iron-a11y-keys-behavior.

andybons avatar andybons commented on July 25, 2024

Have you filed a Chrome bug for this? Is the problem also present on Firefox Linux?

from iron-a11y-keys-behavior.

valdrinkoshi avatar valdrinkoshi commented on July 25, 2024

This issue happens only on Chrome on Linux and Windows, Firefox already implements event.key and returns the correct values.
I've reported the issue on chromium

@dborowitz iron-a11y-keys-behavior supports special characters to the extent of how they're supported by the platform :)
Even if you want to handle it without using this element, you'll face the same issues with other keyboard configurations.
In your case you want to listen to /: with a US keyboard you'd check for keyCode = 191 and make sure that event.shiftKey = false && event.altKey = false in order to avoid recognizing characters like ÷ (which is Alt+/) and ? (which is Shift+/).
screen shot 2016-02-16 at 11 02 55 am
With a French keyboard you need to press Shift+: to obtain /, so you see how difficult it becomes to handle everything properly without something like event.keyIdentifier or (even better) event.key
screen shot 2016-02-16 at 11 02 33 am

from iron-a11y-keys-behavior.

valdrinkoshi avatar valdrinkoshi commented on July 25, 2024

Surprise surprise: on keypress event everything works as expected! http://jsbin.com/webogoc/4/edit?html,output

I'll reopen this issue, I'll update the demo page to use keypress for the special characters ;)

from iron-a11y-keys-behavior.

valdrinkoshi avatar valdrinkoshi commented on July 25, 2024

Ok, closing this again. On Linux the keyIdentifier is wrongly set also for keypress, and we cannot bypass it and prefer keyCode for the reasons I exposed before

In this test i pressed / and then [, and we get the final result via normalizedKeyForEvent
screen shot 2016-02-17 at 6 16 17 pm

from iron-a11y-keys-behavior.

andybons avatar andybons commented on July 25, 2024

Please re-open this as keyIdentifier is deprecated in favor of key and the Blink bug was closed as WontFix. https://crbug.com/587150

/cc @garykac

from iron-a11y-keys-behavior.

andybons avatar andybons commented on July 25, 2024

Hm. On Chrome Canary (52.0.2734.0) key is supported.

@valdrinkoshi will this “just work” once key is supported given the key handling code and it’s various fallbacks?

from iron-a11y-keys-behavior.

garykac avatar garykac commented on July 25, 2024

key is supported on Chrome 51+ and we should fix any bugs that relate to key and code. Recent versions of Opera will have this support as well. Firefox already supports both of these attributes. IE/Edge have an older implementation of key that they will be updating at some point (probably when they add support for code).

from iron-a11y-keys-behavior.

valdrinkoshi avatar valdrinkoshi commented on July 25, 2024

Correct, the behavior will first try to use key and then the others if that's not available.

from iron-a11y-keys-behavior.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.