[Integrations > Install Elastic agent][SCREEN READER]: Headings must be properly nested for usability

[1Copenut]

Point of contact

@petrklapka

Description

The Install Elastic agent form has a number of headings improperly nested. This makes for a more difficult screen reader experience; a large number of screen reader users primarily navigate by headings. Screenshots attached.

Steps to recreate

1. Create a new Security Serverless project if none exist
2. When the project is ready, open it and go to Integrations, under the Project Settings in the lower left navigation
3. Search for DynamoDB in the Integrations, and click on the card
4. From the DynamoDB detail view, click "Add Amazon DynamoDB"
5. Click "Add Amazon DynamoDB" to load the prompt page
6. Click "Install Elastic agent"
7. When the "Set up AWS integration" view loads, open the HeadingsMap plugin to verify improperly nested headings

Environment

• MacOS Ventura
• Chrome

Screenshots or Trace Logs

Acceptance criteria

• [ ] Headings are properly nested to support their perceived importance level with no visual changes
• [ ] Visual designs remain consistent

WCAG or Vendor Guidance (optional)

• Understanding SC 1.3.1: Info and Relationships (Level A)
• WebAIM screen reader survey #10: Finding Information

[1Copenut]

This issue is for a view that was available on Serverless QA earlier, but appears not to be enabled now. I'll leave the issue open in the Blocked column so we can revisit it later.

[alexwizp]

Tested, issue is still reproducible.