Ading popup role and change to seperator role for seperator

[mpnkhan]

Adding aria-haspopout to button so that screen readers can say as "Menu Button" . Tested with Voiceover, Jaws and NVDA.

[blakeembrey]

@mpnkhan The attributes should use double quotes as opposed to single quotes. Also, why is the separated link roles changed to "seperator" (BTW, you spelt separator wrong)? Shouldn't change the actual separator?

[mpnkhan]

@blakeembrey Thanks for pointing out the double quote styling.. This styling is still confusing to me ..
Also the separator typo . Thanks .. 👍
Separator should be the appropriate role for Menu item separator.
" A divider that separates and distinguishes sections of content or groups of menu items."
Reference: http://www.w3.org/TR/wai-aria/roles#separator

[blakeembrey]

@mpnkhan I saw that, but I am unsure why you have added it to a menuitem. Shouldn't you add it to the divider above it?

[mpnkhan]

@blakeembrey The divider won't receive focus on down arrow. Class="divider" should also have a role of presentation. The separator link would receive focus and should convey to AT as Separator. You can test this with free NVDA screen reader (http://www.nvda-project.org)

[fat]

"seperate link" doesn't mean separator in this context. thanks tho!

[mpnkhan]

At-least add aria-haspopup='true' attribute to your anchor links so that Screen Reader users will know that its a Menu or Popup button..

[mpnkhan]

@fat This is the Problem I face..
After pulling the latest 2.2.3 BS, my Screen Reader says it as "Drop Down button". I have no clue after activating the Button.
It would be great if my screen reader could announce "drop down popup button". Also it would be nice if the focus is set to the first item.

Also it would be great ,if you could wait for my reply comments before closing the issue/pull request.