Kanban board: when switching columns headers are not announced due to incorrect list markup

Issue Summary

On kanban board, when switching columns the headers are not announced.

Note: this issue is also reproduced on "Active sprints" page.

Steps to Reproduce

1. Turn on the screen reader. 
2. Navigate to the Kanban board page.
3.  Tab through the issues on the page.

Actual Results

While navigating using screen reader, tabbing on a board will bypass the columns on the board and so it doesn't tell users which column an issue is at on the board.

Following issues are observed

• aria-hidden is provided to the <div id="ghx-column-header-group"> element
• Headings are coded separately & levels are incorrect.
• Single list markup is provided incorrectly for issues on kanban board.

Note: this issue is also reproduced on "Active sprint" page.

Screenshot

Expected Results

When tabbing on a board will bypass the columns on the board and so it should tell users which column an issue is at on the board.

• remove the aria-hidden attribute from the <div> element.
• the text such as "Backlog" & "8" should be marked as single heading element
• Provide heading level <h2> to "backlog", "Selected for Development", etc text.
• Provide separate list markup for issues under respective columns & provide aria-labelledby attributes to Reference the column headers.
• remove the off-screen <h3> elements from code.

For the columns which don’t have any issues at the moment should also be communicated to screen reader user accordingly. For Example: "No issues in ToDo status".

Code snippet:

<h2 id="header-1">Backlog 8</h2>
<ul aria-labelledby="header-1">
 <li>ABC-1</li>
 <li>ABC-2</li>
</ul>

Alternate Recommendations

Since the previously mentioned code changes to DOM are time consuming, we suggest to provide following code changes in order to achieve similar behaviour

• Provide  role=“none” or role="presentation" for <ul class="ghx-columns"> elements
• Provide role=“list” on every <li class="ghx-column"> & provide aria-label="column-title" or aria-labelledby="colum-title-id"
• role=“listitem” on <div class="ghx-issue"> 

Workaround

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