-
Bug
-
Resolution: Fixed
-
High (View bug fix roadmap)
-
8.22.2
-
8.22
-
1
-
Severity 3 - Minor
-
Issue Summary
On search page, the 'Export' & 'Tools' menu is inaccessible for JAWS & NVDA screen reader users.
Similar issue is observed for filter actions menu for favourite filters.
Steps to Reproduce
- Turn on the screen reader such as "JAWS" or "VoiceOver"
- Navigate to the Jira Dashboard page.
- Navigate to the "Issues" menu inside header section.
- Activate "Search for issues" link from the menu.
- Navigate to the "Exports" or "Tools" button in main content.
- Press "enter" to activate the buttons.
- Try to use up/down arrow keys to navigate through options.
- 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 "Export" , "Tools" or favourite filter menu button & 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.
- With down arrow the menu does not expand.
- after expanding the menu, the focus does not go to the first option explicitly
- The code of the menu item container 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.
- Menuitems are marked inside separate <ul> element incorrectly.
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 "Export","Tools" & filter actions menu options 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.
- Menu should get expanded with enter/space/down arrow keys.
- As soon as the menu is expanded set the focus to the first menu option.
- Place the code of the menu item container right after the code of menu button 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> 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.
- Provide all the menuitems inside a single <ul> element.
Please refer to the following example of the menu button to understand more.
https://www.w3.org/WAI/ARIA/apg/example-index/menu-button/menu-button-links.html
Use below link to read detailed documentation on accessible menu buttons.
https://hello.atlassian.net/wiki/spaces/A11Y/pages/1518212759/Menu+Buttons
Screenshot
Exports menu
Favourite filters menu
Screen recording
Workaround
Currently there is no known workaround for this behaviour. A workaround will be added here when available
- duplicates
-
-
- Closed
-
-
-
- Closed
-
-
-
- Closed
-
-
-
- Closed
-
