Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

fix(ngAria): do not scroll when pressing spacebar on custom buttons #16604

Closed

Conversation

gkalpak
Copy link
Member

@gkalpak gkalpak commented Jun 16, 2018

What kind of change does this PR introduce? (Bug fix, feature, docs update, ...)
Bug fix.

What is the current behavior? (You can also link to an open issue here)
By default, pressing spacebar causes the browser to scroll down. However, when a native button is focused, the button is clicked instead.

ngAria's ngClick directive, sets elements up to behave like buttons. For example, it adds role="button" and forwards ENTER and SPACEBAR keypresses to the click handler (to emulate the behavior of native buttons).

Yet, pressing spacebar on such an element, still invokes the default browser behavior of scrolling down, which is undesirable.

What is the new behavior (if this is a feature change)?
ngAria#ngClick calls preventDefault() on the keyboard event, thus preventing the default scrolling behavior and making custom buttons behave closer to native ones.

Does this PR introduce a breaking change?
No.

Please check if the PR fulfills these requirements

  • The commit message follows our guidelines
  • Fix/Feature: Docs have been added/updated
  • Fix/Feature: Tests have been added; existing tests pass

Other information:
Supercedes and closes #14665, which didn't include tests.

gkalpak added 2 commits June 16, 2018 12:54
By default, pressing spacebar causes the browser to scroll down.
However, when a native button is focused, the button is clicked instead.

`ngAria`'s `ngClick` directive, sets elements up to behave like buttons.
For example, it adds `role="button"` and forwards `ENTER` and `SPACEBAR`
keypresses to the `click` handler (to emulate the behavior of native
buttons).

Yet, pressing spacebar on such an element, still invokes the default
browser behavior of scrolling down.

This commit fixes this, by calling `preventDefault()` on the keyboard
event, thus preventing the default scrolling behavior and making custom
buttons behave closer to native ones.

Closes angular#14665
Copy link
Contributor

@Narretz Narretz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM. Preventing default is not actually needed for Enter, but I think it's okay to include it.

@gkalpak gkalpak closed this in 6c224a2 Jun 18, 2018
gkalpak added a commit that referenced this pull request Jun 18, 2018
By default, pressing spacebar causes the browser to scroll down.
However, when a native button is focused, the button is clicked instead.

`ngAria`'s `ngClick` directive, sets elements up to behave like buttons.
For example, it adds `role="button"` and forwards `ENTER` and `SPACEBAR`
keypresses to the `click` handler (to emulate the behavior of native
buttons).

Yet, pressing spacebar on such an element, still invokes the default
browser behavior of scrolling down.

This commit fixes this, by calling `preventDefault()` on the keyboard
event, thus preventing the default scrolling behavior and making custom
buttons behave closer to native ones.

Closes #14665

Closes #16604
@gkalpak gkalpak deleted the fix-ngAria-no-scroll-on-spacebar branch June 18, 2018 15:50
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants