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