ngAria steals ngClick event for dropdown menu items bug

[Exagram]

Note: for support questions, please use one of these channels: https://github.com/angular/angular.js/blob/master/CONTRIBUTING.md#question. This repository's issues are reserved for feature requests and bug reports.

Do you want to request a feature or report a bug?

bug

What is the current behavior?

1. I am using Angular 1.3.20, Angular Aria 1.3.17
2. Without ngAria, HTML dropdown menu items are clickable with ngClick. With ngAria, clicking on the menu items does nothing.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://plnkr.co or similar (template: http://plnkr.co/edit/tpl:yBpEi4).

Live demo where ngClick doesn't get triggered: http://plnkr.co/edit/Shjqy89KGWlvQ0lirYiV?p=preview

What is the expected behavior?

1. I expect ngAria to not conflict with ngClick events.

What is the motivation / use case for changing the behavior?

1. Enterprise application requires both ngAria and ngClick

Which versions of Angular, and which browser / OS are affected by this issue? Did this work in previous versions of Angular? Please also test with the latest stable and snapshot (https://code.angularjs.org/snapshot/) versions.

1. Angular 1.3.20
2. Angular 1.3.17
3. Google Chrome on Windows 7 64bit
4. Yes, without ngAria
5. I am stuck with using Angular 1.3 branch line

Other information (e.g. stacktraces, related issues, suggestions how to fix)

1. I tried to place role=presentation as recommended here, but it failed: ngAria : role="button" added with ng-click directive cannot be disabled and is dangerous #11580.

[gkalpak]

This is working as expected. The reason it breaks is that ngAria is adding the tabindex attribute on ngClick elements (which is by design, so that these elements can be navigated and clicked by keyboard). Your app's CSS is not designed to work correctly with tabindex on a drop-down item (which is bad design imo, but that's unrelated tot he issue); i.e. you can reproduce the problem even without ngAria, byt simply adding tabindex="0" on ngClick elements.

Here is what's going on:

• The interesting part of the app has the folooing structure:

  .button[tabindex]
    .drop-down-menu
      ul
        li
          .button[ng-click]
  

• When you click on .button[tabindex], it gets focused and the following CSS rule gets activated, causing the drop-down menu to show up):

  .account > .button:focus > .drop-down-menu {
    display: block;
  }

• Then you click on .button[ng-click].

  1. Without ngAria, .button[ng-click] can't gain focus (since it is a <div>), so the focus remains on .button[tabindex] and the aforementioned CSS rule remains activated, keeping the drop-down menu visible. The click event gets dispatched correctly and the handler is executed.
  2. With ngAria (or manually adding tabindex), .button[ng-click] does gain focus upon click (because it now has tabindex on it). So the .button[tabindex] above loses focus and the CSS rule (which relied on account > .button having focus) eizes to aplply. This causes the drop-down menu to get hidden, which prevents the click event from dispatching on the clicked .button[ng-click] element.

Closing, since everything works as expected.