search

PolymerElements / paper-icon-button

A Material Design icon button
https://www.webcomponents.org/element/PolymerElements/paper-icon-button
42 stars 44 forks source link

[1.0] There is no ripple effect when button is pressed by "Enter" key #21

Open dzhioev opened 9 years ago

dzhioev commented 9 years ago

In contrast to <paper-button>, <paper-icon-button> doesn't have the ripple effect when pressed by "Enter" key.

arthurvr commented 9 years ago

Hmmm... for me there actually seems to be a ripple.

Can you post a reduced testcase? What browser was you using? There are some browser extensions known to be screwing up handlers, so can you try in an incognito window?

dzhioev commented 9 years ago

@arthurvr Are you sure, that you used the Enter keyboard key when pressed a button? Steps to reproduce:

  1. Go to https://elements.polymer-project.org/bower_components/paper-icon-button/demo/index.html
  2. Focus any button using Tab key.
  3. Press Enter or Space key. My browser is Google Chrome 43.0.2357.81 (Official Build) (64-bit).
arthurvr commented 9 years ago
  1. Focus any button using Tab key.

Indeed. Then I'm able to reproduce this. Try to be a little more complete next time when making a bug report :) If you click once and then do it again by pressing enter there actually is a ripple, strange.

dzhioev commented 9 years ago

@notwaldorf Could you please look into this?

tjsavage commented 9 years ago

This is also a material design bug - there is no differentiation in the "icon-toggles" section of the spec between focused and pressed state.

For non-toggle paper-icon-buttons, I think the solution here should be to replay the ripple animation when keyboard focused and then activated with or , but keep the inky ring visible so that it remains focused.

robrez commented 8 years ago

Just to provide some additional info:

paper-icon-button-light has an inverted problem - it does replay the ripple animation when activated, but removes the inky-focus after the animation has finished.