Bootstrap navbar keyboard accessibility problem

[Krish1980]

The sample bootstrap navbar dropdown in the documentation page is perfectly accessible using the keyboard

http://getbootstrap.com/components/#navbar

One can

a) Activate the dropdown using ‘enter’ or ‘down arow’
b) Jump to the next link options (bring the next option in focus) using both the tab key and the ‘down arrow’ key
c) Hide the dropdown using the ‘Esc’ key
d) Hide the dropdown using the ‘Esc’ key even when an option is in focus

However,
in the example page (and the sample code that we copy paste in our editor)

http://getbootstrap.com/examples/navbar/

One can
a)Activate the dropdown using ‘enter’ or ‘down arow’
b) Jump to the next link options (bring the next option in focus) only with the ‘tab’ key
c) Hide the dropdown using the ‘Esc’ key
d) Cannot Hide the dropdown using the ‘Esc’ key ** when an option is in focus**

Any ideas as to what’s happening here and how this can be rectified?

[Krish1980]

The master branch docs on Github do not have these problems!

Edit – this isn’t closed . The master version is actually for the next release of Bootstrap.

[gekk3]

Add role=”menu” to
<ul class=”dropdown-menu”>
The result <ul class=”dropdown-menu” role=”menu”>
This will work.

[Author]

Posts