Crowd directories: Inappropriate heading structure

Issue Summary

On "Crowd directories"page, the heading structure is inappropriate.

Steps to Reproduce

1. Using screen reader, pull up the list of Headings
2. Observe that the mentioned text has incorrect heading mark-up as per visual hierarchy

Screenshot

Actual Results

Heading structure is found to be inappropriate on the page. Text such as "View directory - Test ID" is coded as <h2> instead <h1> and text such as "Last synchronization" is coded as <h3> instead <h2> which does not matches the visual hierarchy on the page. As a result, screen reader users found it difficult to understand the page's content structure.

Expected Results

The heading levels should be announced as per the visual hierarchy by screen reader to understand the page structure for their users.

Use heading levels as per specification such as <h1> should be followed by <h2>, <h3> and so on.
Even though this is required at WCAG 2.1 at Level AAA, it is recommended that the discussed issue be addressed as screen reader users rely on headings heavily to understand the page structure.

Code snippet

<h1> View directory - Test Id </h1>
<h2> Last synchronization </h2>

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.1.
Chrome - Version 118.0.5993.70 (Official Build) (arm64)
Firefox- Version 92.0 (64-bit)
Safari- Version 17.0 (19616.1.27.211.1)
JAWS- Version 2023
NVDA- Version 2021.2
Voiceover - Version Latest