2

We have the below code for a dropdown menu which we use in Angular.js:

<div class="additional-features">
    <div class="event-update-label">Update Options</div>
    <div class="additional-features-item" ng-click="performOperation(1);">Action 1</div>
    <div class="additional-features-item" ng-click="performOperation(2);">Action 2</div>
    <div class="additional-features-item" ng-click="performOperation(3);">Action 3</div>
    <div class="additional-features-item" ng-click="performOperation(4);">Action 4</div>
</div>

With CSS it shows as a menu that the user can click on. The menu title is Update Options as shown in the first div. The problem is that the menu is not keyboard accessible. It requires a mouse click for all operations. How would I go about adding that accessibility to this menu? In jQuery it's not impossible, however, with angular i'm not sure how the directives would work in this situation. Can I have some guidance on how this would work? I have read the below:

https://github.com/jseppi/angular-dropdowns

https://github.com/angular-ui/bootstrap/issues/1931

Navigate the UI using keyboard

Community
  • 1
  • 1
KVISH
  • 12,923
  • 17
  • 86
  • 162

1 Answers1

1

My solution was to use jQuery and simply do it from there. It's not the ideal solution, however, I was unable to make it work in a direct angular.js way.

KVISH
  • 12,923
  • 17
  • 86
  • 162