Search Issue Advanced : Checkbox and Link inaccessible by keyboard and no conforming alternative

Issue Summary

The following elements are not accessible by keyboard alone and there is no conforming accessible version of the same functionality reachable from the non-conforming page.

Element 1: Syntax help icon link
Location: Present in the search input field.

Element 2: Check box elements eg: Affects Version/s, Assignee,..., Progress.
Location: On triggering the Columns Combobox (If it is not displayed click the menu icon button on the top right and select List View option).

Steps to Reproduce

1. In the Jira dashboard, Navigate to the "Issues" menu link in the header section.
2.  Navigate to "Search for issues" and activate it.
3. In the Search dashboard, navigate to "Advanced" in the search navigation bar and activate it.
4. Navigate to the search input field present in the main content area.

Actual Results

Element 1 : 

In the Advanced Search Dashboard, the Syntax help tooltip icon appears in the input field in the main section. This tooltip redirects to another link. This icon does not receive keyboard alone and screen reader focus. When clicked with a mouse on the tooltip the page is redirected to another link.

The element is marked using " <span class="aui-icon aui-icon-small aui-iconfont-help">Syntax Help</span> " incorrectly.

This makes it keyboard-only and screen reader users difficult to access the information present on the search page.

Element 2 :

In the Advanced search dashboard, when the "Columns" dropdown list is activated, options such as "Assignee, Created, Development, etc. " appears. These options have checkboxes that help to select the needed options. The following checkboxes do not receive keyboard and screen reader focus, but these checkboxes could be checked and unchecked with a mouse click.

A tabindex="-1"  is provided to the checkboxes which do not allow the focus to navigate on the elements.

This makes it keyboard-only and screen reader users difficult to select the options present on the search page.

Expected Results

Element 1 :

Following are the expected keyboard interactions.

• The tooltip element icon should receive keyboard focus and screen reader.
• The elements should get activated with the Enter key.

Apply the following suggested fixes in the source code.

• Mark the edit element in the native <a> element instead of <span> element.
• Provide a clear & descriptive label to the link element. For Example:
  • aria-label="Syntax help link"

Element 2:

Following are the expected keyboard interactions.

• The checkbox should receive keyboard focus and screen reader.
• The elements should get activated with the Space key, it should check and uncheck the options.
• When the user checks or unchecks the options the focus should be on the checkbox itself.

Apply the following suggested fixes in the source code.

• The value of the tab index should be changed from "-1" to "0" so that the checkbox could receive focus.
• Provide a clear & descriptive label and role to the checkbox element. For Example: 

1. role="Checkbox"
2. aria-checked="false" when the checkbox is unchecked
3. aria-checked="true" when the checkbox is checked. 

Screenshot

Screen Recording

JRASERVER-73383.mov

Workaround

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

Bug Ref: 724102