Issue Summary

There is no grouping for the checkboxes.

Steps to Reproduce

1. Open the Jira DC instance.
2. Navigate to the header section, expand the "Issues" control, and activate the "Reported by me" link.
3. Navigate to the "Search" section in the main content area and activate the "More" control to reveal additional filtering options.
4. Using a screen reader, navigate to the mentioned checkboxes.
5. Observe that the instruction is not announced along with the label for the checkboxes.

Screenshot

Screen Recording

Missing Grouping.mp4

Actual Results

When screen reader users activate the "More" control to reveal additional filter options, checkboxes such as "% Limits", "Affects Version", "Comment", and others appear within the "search" section.

However, these checkboxes are not programmatically grouped and associated with the "All Criteria" instruction because the <fieldset> and <legend> elements are missing. Additionally, no ARIA roles like role="group" or appropriate aria-labelledby attributes are used to establish this association.

As a result, screen reader users cannot understand the purpose of these checkboxes.

Expected Results

The screen reader should announce the instruction along with the label for the checkboxes.

To achieve this, use semantic HTML elements such as <fieldset> and <legend>, or apply appropriate ARIA attributes like role="group" and aria-labelledby to programmatically convey the grouping.

Apply the following changes:

Native HTML Approach:

• Include the instruction “All Criteria” within <legend> element.
• Use <fieldset>and <legend> elements to group the instruction and checkboxes.

ARIA Approach:

• Wrap the <ul> element containing the checkboxes within a <div> element.
• Include the instruction “All Criteria” within the <div> element.
• Add role="group" and aria-labelledby="criteria-heading" to the <div> element containing the checkboxes.
• Add id="criteria-heading" to the <div> element containing the instruction.
• Ensure the values of the aria-labelledby and id attributes match.

Refer to the example below to create accessible grouping:

Grouping Controls

Code Snippet 1: Native HTML Approach

<fieldset>
<legend>All Criteria</legend>
<ul>
<li>
<label>
<input type="checkbox" value="workratio"> % Limits
</label>
</li>
<!-- Add more checkboxes-->
</ul>
</fieldset>

Code Snippet 2: ARIA Approach

<div role="group" aria-labelledby="criteria-heading">
  <div id="criteria-heading">All Criteria</div>
  <ul>
    <li>
      <label>
        <input type="checkbox" value="workratio"> % Limits
      </label>
    </li>
    <!-- Add more checkboxes -->
  </ul>
</div>

Workaround

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

Environment

MacBook Pro (16-inch, 2021)
macOS Sequoia 15.4.1
Operations - Windows11
Chrome - Version 137.0.7151.41 (Official Build) (64-bit)
Safari- Version 18.4
Firefox- Version 138.0.1 (64-bit)
JAWS- Version 2023
NVDA- Version 2024.4.2
VoiceOver - Version Latest