Issue view : More options button for attachments is inaccessible for screen reader users.

Issue Summary

On Issue view the more options button for attachments and subtasks are inaccessible for screen reader users.

Steps to Reproduce

1. Turn on the screen reader such as "JAWS" or "VoiceOver".
2. Navigate to the Jira Dashboard page.
3. Navigate to the "Issues" menu inside header section.
4. Activate any issue link from the menu.
5. Navigate to the more options button for attachment button in main content.
6. Press "enter" to activate the buttons.
7. Try to use up/down arrow keys to navigate through options.
8. Observe that the focus moves to next elements in the page.

Actual Results

While navigating with a screen reader such as JAWS, when user actives the more options button for attachments & press up/down arrow keys to navigate through the options, the screen reader focus moves to the next element on the page.

Currently the only way to navigate to the options is to press 'tab' keys until the focus reaches to the options which is very frustrating experience.

Following are some of the Issues which are likely to be causing the above issue.

• The focus does not go to the first option explicitly after expanding the menu.
• The code of the menu item container (<div id="AJS_DROPDOWN__4_drop">) is placed at the end of the page in DOM order incorrectly.
• The ARIA role="menu" is provided to the <div> element incorrectly.
• The <li> elements doesn’t have the role="presentation" attributes.

Note : The focus related issue with up/down arrow keys is not observed with VoiceOver in safari. It is only observed with JAWS & NVDA screen reader.

Expected Results

The "more options" button & menu items should be accessible with all screen readers & keyboard up/down arrow keys.

Following changes in the source code will most likely fix the above mentioned issues.

• As soon as the menu is expanded set the focus to the first menu option such as "Sort by Name".
• Place the code of the menu item container (<div id="AJS_DROPDOWN__4_drop">)right after the code of more options buttons inside the DOM order. This makes sure that the visual order of the element matches with the DOM order.
• Remove the role="menu" attribute from the <div id="AJS_DROPDOWN__4_drop"> element & provide it to the parent <ul> element.
• Provide role="presentation" or role="none" to all the <li> elements inside menu since those don’t need to be rendered as list items to SR users.
• The <a> should have role="menuitemradio" instead of "menuitem" since they are behaving as radio buttons.
• The currently checked radio button element should have aria-checked="true" & other element should have aria-checked="false"

Please refer to the following example of the editor menubar to understand more. 

https://www.w3.org/WAI/ARIA/apg/example-index/menubar/menubar-editor.html 

Screenshot

Screen recording

Attachments more option button.mp4

Workaround

Currently there is no known workaround for this behavior. A workaround will be added here when available