-
Notifications
You must be signed in to change notification settings - Fork 27.4k
feat(ngAria[ngClick]): anchor should treat keypress as click #13996
Changes from 2 commits
0ee5a4a
9a54562
9d2148f
d7b0eb2
368899f
827845b
56d66b5
7fd46db
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -377,6 +377,27 @@ ngAriaModule.directive('ngShow', ['$aria', function($aria) { | |
}); | ||
} | ||
} | ||
|
||
if ($aria.config('bindKeypress') && isNodeOneOf(elem, ['A', 'BUTTON'])) { | ||
elem.on('keypress', function(event) { | ||
var keyCode = event.which || event.keyCode; | ||
|
||
if (elem[0].nodeName === 'A') { | ||
var hasHref = elem.attr('href') != null && elem.attr('href') !== ''; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. You just have to check if BTW, if we need to also support SVG, then we need to check |
||
if ((keyCode === 13 && !hasHref) || keyCode === 32) { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The browser handles ENTER for anchor. We just need to handle SPACE (and I would still check that it has no href). There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The ENTER doesn't seem to be handled for anchors when href is falsy. I think we need to trigger the click when ENTER and no href. The SPACE is not handled regardless of the href. |
||
scope.$apply(callback); | ||
} | ||
} else if (elem[0].nodeName === 'BUTTON') { | ||
if (keyCode === 32) { | ||
scope.$apply(callback); | ||
} | ||
} | ||
|
||
function callback() { | ||
fn(scope, { $event: event }); | ||
} | ||
}); | ||
} | ||
}; | ||
} | ||
}; | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -755,6 +755,35 @@ describe('$aria', function() { | |
element.triggerHandler({ type: 'keypress', keyCode: 13 }); | ||
expect(element.text()).toBe(''); | ||
}); | ||
|
||
it('should bind keypress to anchor elements without href defined', function() { | ||
compileElement('<a ng-click="event = $event">{{event.type}}{{event.keyCode}}</a>'); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Why wouldn't you use a button element for this? I don't understand the use case. |
||
expect(element.text()).toBe(''); | ||
element.triggerHandler({ type: 'keypress', keyCode: 13 }); | ||
expect(element.text()).toBe('keypress13'); | ||
}); | ||
|
||
it('should bind keypress to anchor elements with empty href defined', function() { | ||
compileElement('<a href="" ng-click="event = $event">{{event.type}}{{event.keyCode}}</a>'); | ||
expect(element.text()).toBe(''); | ||
element.triggerHandler({ type: 'keypress', keyCode: 13 }); | ||
expect(element.text()).toBe('keypress13'); | ||
}); | ||
|
||
it('should not bind keypress to anchor elements with href defined', function() { | ||
compileElement('<a href="http://somwehere" ng-click="event = $event">{{event.type}}{{event.keyCode}}</a>'); | ||
expect(element.text()).toBe(''); | ||
element.triggerHandler({ type: 'keypress', keyCode: 13 }); | ||
expect(element.text()).toBe(''); | ||
}); | ||
|
||
it('should bind space keypress to button elements', function() { | ||
compileElement('<button ng-click="event = $event">{{event.type}}{{event.keyCode}}</button>'); | ||
expect(element.text()).toBe(''); | ||
element.triggerHandler({ type: 'keypress', keyCode: 32 }); | ||
expect(element.text()).toBe('keypress32'); | ||
}); | ||
|
||
}); | ||
|
||
describe('actions when bindRoleForClick is set to false', function() { | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actually, we don't want to do anything with
button
s, justa
s. The browser handles pressing both ENTER and SPACE on buttons.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You should also check that
attr.ngKeypress
is falsy.