You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
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.
The text was updated successfully, but these errors were encountered:
the behavior was already reported in this issue. In the comment I made there, I asked the author to open a feature request in the ui5-webcomponents repo regarding the FormGroup heading level, so I'm forwarding this issue to the ui5-webcomponents repo.
Hi Colleagues,
this issue is requesting a way to customize the heading level of the FormGroup. Could you please take over?
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
toh6
). 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
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
The text was updated successfully, but these errors were encountered: