feat(ngAria[ngClick]): preventDefault on pressing Space so the page doesn't scroll #14665
Conversation
|
Seems straight forward enough for me. I verified it still works when the div has an interactive child element: https://plnkr.co/edit/SPxQ0X2RQvvfvAmDVTNA?p=preview But it highlights another problem, which I will file as an issue: ngAria needs to check for at least one interactive child element before binding |
| @@ -377,6 +377,7 @@ ngAriaModule.directive('ngShow', ['$aria', function($aria) { | |||
| elem.on('keypress', function(event) { | |||
|
I've somehow missed that 😃 LGTM, except for the lack of tests. |
|
Leave a commement |
|
I'm new to testing. How would we go about testing the whether the window scroll position changed? |
|
It would be a little involved, because you would have to make sure there is room to scroll and then check the windows |
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
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
This is a bug fix for the ngAria ngClick directive.
When a user presses space on a "normal"
button, the page should not scroll. However, with a "fake",[role="button"], pressing space doesn'tpreventDefault(), so it scrolls the page.You can see the bad behavior here: https://plnkr.co/edit/SPxQ0X2RQvvfvAmDVTNA?p=preview
This PR adds
event.preventDefault();so that pressing Space doesn't activate the native browser function.