Issue Summary

The headings such as "SLAs", "Details", "More fields", and so on are inappropriately marked-up using the <h1> element.

Steps to Reproduce

1. Open the JSM Cloud instance.
2. Navigate to the header section, activate the "Projects" control, and open any project.
3. Navigate to "Queues" in the side navigation, activate it, and open any issue.
4. Using a screen reader, navigate to the mentioned instances in the main content area.
5. Observe that the heading structure is inappropriate.

Screenshot

Screen Recording

Inappropriate Heading Structure.mp4

Actual Results

The heading structure on the "Issue View" page is inappropriate. Headings such as "SLAs", "Details", "More fields", and so on are incorrectly marked up using the <h1> element, which does not align with the visual hierarchy.

As a result, screen reader users may find it difficult to understand the page's content structure.

Expected Results

Ensure that the heading structure is appropriate for screen reader users.

It is recommended to use only one <h1> element per page.

In this case, since the functionality is defined using the <details> and <summary> elements, we are unable to apply a direct <h2> element, as it may not render correctly across all screen readers.

Therefore, we need to restructure the component using the <h2> and <button> elements, along with the aria-expanded attribute.

Apply the following changes:

• Remove the <h1> element from the containers of the mentioned instances.
• Replace the <details> element with the <h2> element.
• Replace the <summary> element with the <button> element.
• Wrap text such as "SLAs", "Details", "More fields", and so on within the <button> element.
• Place the <button> element as a child of each <h2> element.
• Add the aria-expanded attribute to the <button> element.
• Ensure the value of the aria-expanded attribute is set to "false" by default.
• Modify the scripts so the value of the aria-expanded attribute changes to "true" on user interaction.
• Use CSS to maintain the visual presentation of the page.

Code Snippet:

<h2>
  <button aria-expanded="false">
SLAs
  </button>

</h2>

<div>
Content
</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 Sonoma 14.7.5
Operations - Windows11
Chrome - Version 135.0.7049.42 (Official Build) (64-bit)
Safari- Version 18.4
Firefox- Version 135.0 (64-bit)
JAWS- Version 2023
NVDA- Version 2024.4.2
VoiceOver - Version Latest