Skip to content

[FormGroup]: Skipped Heading Levels Between Section and FormGroup Titles #11371

Closed
@bomasap

Description

@bomasap

Describe the bug

Currently, the section titles are rendered using <h3>, while the titles inside each FormGroup are rendered as <h6>.

According to accessibility best practices, heading levels should follow a consistent, nested structure without skipping levels (e.g., from h3 to h6). Skipping heading levels can cause confusion for screen reader users and negatively impact keyboard navigation and overall accessibility.

Isolated Example

https://stackblitz.com/edit/github-t5j5mn-q6wbnvao?file=src%2FApp.tsx

Reproduction steps

  1. Access: https://stackblitz.com/edit/github-t5j5mn-q6wbnvao?file=src%2FApp.tsx
  2. Obverse Section title heading is H3 and FormGroup heading is H6

Expected Behaviour

The heading levels should reflect the correct structural hierarchy. If a FormGroup is a direct child section under a section with an <h3> heading, its title should use <h4>, not <h6>.

Screenshots or Videos

Image Image

UI5 Web Components for React Version

2.9.1

UI5 Web Components Version

2.9.1

Browser

Chrome, Edge, Firefox, Safari

Operating System

No response

Additional Context

Suggested Fix:

Update the FormGroup title heading level from <h6> to <h4> (or the appropriate level based on its nesting context).

Ensure heading levels increase by only one at a time, unless there is a clear semantic reason.

Relevant log output

Organization

No response

Declaration

  • I’m not disclosing any internal or sensitive information.

Metadata

Metadata

Assignees

Labels

Type

Projects

Status

Completed

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions