View Issue: editable elements are not accessible with keyboard and screen reader.

Issue Summary

On view issue page, the following editable elements are not accessible with keyboard alone & with screen reader software. There is no way for screen readers to understand that these fields are editable.

• Summary
• Description
• Issue type
• Priority
• Labels
• Assignee
• Reporter
• Due date

Note : The edit element is only visible on mouse hover.

Issue ID: 725675

Steps to Reproduce

1. Navigate to the Jira dashboard page.
2. Navigate to "Issues" menu button inside header section & activate it.
3. Activate any issue link from the menu. For Example : TES-5
4. Navigate to the editable elements such as Summary, Description, etc.

Actual Results

On issue view page, while navigating with keyboard, when user navigate to editable elements such as Summary, Description, Priority, etc the elements don’t receive keyboard focus & not accessible with keyboard alone. The edit element is only visible on mouse hover.

The edit element is marked using <span class="aui-iconfont-edit"> element incorrectly.

This makes keyboard only users difficult to access the editable elements present on the issue page.

Expected Results

Following are the expected keyboard interactions.

• The editable elements such as Summary, Description, Priority, etc should receive keyboard focus.
• The elements should get activated with enter/space keys.
• The focus should be set inside edit input element once activated.
• when user presses 'Save' or 'ESC' buttons the focus should be set back to the element itself.

Apply following fixes in the source code.

• Mark the edit element in the native <button> element instead of <span> element. (change postponed, see the comment below)
• It can be visually hidden, but it should become visible once it receives the keyboard focus.
• The keyboard focus should be clearly visible on the edit button.
• Provide a clear & descriptive label to the edit buttons. For Example
  • Summary : aria-label="<summary> : edit summary"
  • Description: - aria-label="edit description"
  • Issue type: aria-label="<Issue type> : edit issue type"
  • Priority: aria-label="<priority>: edit priority"
  • Labels: aria-label="edit labels"
  • Assignee: aria-label="<assignee>: edit assignee"
  • Reporter: aria-label="<reporter>: edit reporter"
  • Due date: aria-label="<due-date>: edit due date"

Please refer to following Jira issue to review the implementation of editable fields in Jira cloud to have consistent behaviour on Jira DC as well.

https://test400.jira-dev.com/browse/TES-4

Screenshot

Workaround

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