angularjs - 提升 anchor ng-click on enter keypress 以获得 Angular 的可访问性

Question

我正在解决项目中的可访问性问题。我正在努力的一种情况是，我们有带有 ng-click 事件的 anchor 标记。当有人使用键盘点击标签并到达页面上的 anchor 标记时，他们正在点击回车键，他们认为它应该做一些事情。但是，不幸的是，输入键和单击事件适用于按钮控件，但不适用于 anchor 。有人对如何解决这个问题有任何建议吗？

提前致谢。

Answer 1

我遇到了类似的问题，并通过创建一个简单的指令来解决它，该指令将拦截链接上的 keydown/keypress 事件，然后调用与该指令关联的函数。

这是指令:

 // Allows for the interception of the enter key, and then calling a passed in function
(function () {
    'use strict';
    angular
        .module('app.directives')
        .directive('convEnter', convEnter);

    function convEnter() {
        var directive = {
            restrict: 'A',
            link: link
        };
        return directive;

        ////////////////////////////////////////////////////////////////////////

        function link(scope, element, attrs) {
            element.bind('keydown keypress', function (event) {
                if (event.which === 13) {
                    scope.$apply(function () {
                        scope.$eval(attrs.convEnter, { 'event': event });
                    });

                    event.preventDefault();
                }
            });
        }
    }
})();

要使用它，您只需将它应用于您的链接，即:

<a conv-enter="vm.click()" ng-click="vm.click()">Click Link</a>

当然这有点重复，因为您指定了两次“vm.click()”；如果需要，您可以通过让指令简单地调用元素本身的“点击”功能来优化它，只要您始终希望点击和回车键调用相同的功能。 (在我的场景中，我有时需要区分两者，因此我允许传入一个单独的函数)