Backlog- Versions filter: Description input field is not accessible for keyboard & screen reader users.

Issue Summary

On backlog page, the description input field & edit description element present inside the version accordion are not accessible with keyboard.

Note: When user hits the "description" text with the mouse, the element turns into a editable input field.

Issue id: 734878

Steps to Reproduce

1. Navigate to Jira dashboard page.
2. Navigate to any project inside Jira.
3. Navigate to the backlog page. 
4. Navigate to the "Versions" button in main content & activate it.
5. Navigate to the "No description" element inside Version 2/ Version 1 accordion.

Actual Results

While navigating with the Keyboard, when user navigate to the description element inside "Version 2" accordion, the element receives the Keyboard focus but doesn’t get activated by keyboard enter/space keys. Also the edit description icon does not receive keyboard focus.

The element is coded inside <span> element & doesn’t have an appropriate role & label.

Screenshot

Expected Results

The edit descriptions element should be accessible with Keyboard & screen reader should announce the label correctly.

• Remove the tabindex="0" from the <span> element with description text since it should be non-interactive element.
• Mark the edit icon element inside a <button> & provide aria-label="Edit version description".
• The edit button should become visible when it receives keyboard focus.

Refer to the following link to understand the accessible inline edit fields implementation of "Summary", "description", etc in Jira cloud.

https://test400.jira-dev.com/jira/software/c/projects/TES/boards/1?modal=detail&selectedIssue=TES-4

Inline edit summary field in Jira cloud

Screenshot 2022-03-01 at 4.05.52 PM.png

Workaround

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