Issue Summary

Text such as "Create team" in the modal dialog (that becomes available on activating "Add team" button) is coded as <h4>.

Steps to Reproduce

1. Open the "Accessibility Assessment | Teams" page.
2. Navigate to the main content.
3. Navigate to the "Add team" button and activate it.
4. A modal dialog appears on the page.
5. Using screen reader, pull up the list of Headings.
6. 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 "Create team" is coded as <h4> 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

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

<h2 class="css-1n6zx0p eilovpv1"><span class="css-1ezc8jo eilovpv2">Create team</span></h2>

Workaround

Required, if there is no workaround please state:
Currently there is no known workaround for this behavior. A workaround will be added here when available

Environment

MacBook Pro (16-inch, 2021)
macOs Monterey Version 12.3.1
Chrome - Version 101.0.4606.81 (Official Build) (64-bit)
Firefox- Version 93.0 (32-bit)
Safari- Version 15.3 (17612.4.9.1.5)
JAWS- Version 2022
NVDA- Version 2020.3
Voiceover - Version Latest