Description
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
- Access: https://stackblitz.com/edit/github-t5j5mn-q6wbnvao?file=src%2FApp.tsx
- 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


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
Type
Projects
Status