paypal / bootstrap-accessibility-plugin

Accessibility Plugin for Bootstrap 3 and Bootstrap 3 as SubModule
http://paypal.github.io/bootstrap-accessibility-plugin/demo.html
BSD 3-Clause "New" or "Revised" License
790 stars 189 forks source link

Trouble with Dropdown menu down arrow, clicks #63

Closed bradsturtevant closed 9 years ago

bradsturtevant commented 10 years ago

First, I would like to say the Accessibility Plug-In does add enough really nice keyboard navigation features, and that I intend to continue to use it in my app, and continue to work with it in the future!

I am having difficulty getting Bootstrap 3.2 dropdown to behave like (maybe I think) it should. I am expecting that when tabbing to dropdown, then pressing Enter/Spacebar that first item gets selected (and it does) and then, the down-arrow key should highlight next items in menu until end (and then cycle up top) BUT it does NOT. I suppose the ultimate behavior would be: http://www.w3.org/TR/wai-aria-practices/#menu

There are many potential reasons why my app might not work well with your plugin. I am using jQuery 1.11.1 (for IE8), AngularJS 1.2.26 (for IE8), and UI-Router (yikes!) rather then standard Anglar $router for URL management. I have heard that Angular does work very well with jQuery but maybe not perfectly. I am also using Bootstrap 3.2

I have tried both 1.0.3 and 1.0.4 of accessibility plugin, and 1.0.3 (with BS 3.2) will move one item down menu list while 1.0.4 (with BS 3.2) will NOT move via down-arrow at all.

I could very well be that I am misusing the role labels as well. I have a Plunker that shows how I use roles: presentation, menu, menuitem, tablist, tab. Unfortunately, I could not find CDN of your plugin to use with Plunker.

http://plnkr.co/edit/TKq3MQdSaK3aTXJgSirU

I do have a full blown GitHub, Yeoman, Bower, Grunt app that is up to date with everything. To run would git clone, npm install, bower install, grunt serve.

https://github.com/bradsturtevant/swks-gencg-seed.git

I added a feature to GitHub that allows tabs in tablist of navbar to be invoked via spacebar, but have been [edit 11/4/14] Unable to invoke an href change and page reload via spacebar inside the dropdown menu.

bradsturtevant commented 9 years ago

I read somewhere "It's not good to have href attribute missing on an anchor", and adding a href="javascript: void(0);" in a couple of places got up/down arrows in dropdown list working.

Still no joy with spacebar. [EDIT: Found that jQuery gets priority over AngularJS directives I used to create feature]

Are there any plans for adding the ARIA related 'invoke via spacebar' (just like Enter key) feature in the future?

Has anyone noticed that jQuery 1.11.1 works better for keyboard navigation than 2.1.1. Should I expect that 1.11.1 is better supported?

Thanks again for nice plugin