[FormGroup]: Skipped Heading Levels Between Section and FormGroup Titles #11371
Assignees
Labels
Comments
|
Hi @bomasap 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 Hi Colleagues, this issue is requesting a way to customize the heading level of the |
ilhan007
added a commit
that referenced
this issue
May 7, 2025
- headerLevel API (similar to Panel and others) for customizing the aria-levels of Form and FormGroup headings according to the use-case with default values of 2 for the Form and 3 for the FormGroup. - accessibleName API to allow defining a unique accessible name of the Form, especially when used without a header or when multiple forms are used (as the aria-label should be unique and even if we set built-in one, the tools would complain that the role+accessible name combination isn't unique). - updates font-size of the FormGroup heading (from H5 to H6) to to match the latest design Fixes: #11371
github-project-automation
bot
moved this from New
to Completed
in Maintenance - Topic Core
|
This issue has been closed. To reopen, just leave a comment! |
|
🎉 This issue has been resolved in version v2.10.0 🎉 The release is available on v2.10.0 Your semantic-release bot 📦🚀 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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
h3toh6). 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: