Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
1 task done
bomasap opened this issue Apr 21, 2025 · 1 comment · May be fixed by #11372
Open
1 task done

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

bomasap opened this issue Apr 21, 2025 · 1 comment · May be fixed by #11372
Assignees
Labels
ACC bug This issue is a bug in the code TOPIC Core

Comments

@bomasap
Copy link

bomasap commented Apr 21, 2025

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.
@Lukas742
Copy link
Collaborator

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 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?

@Lukas742 Lukas742 transferred this issue from SAP/ui5-webcomponents-react Apr 22, 2025
@ilhan007 ilhan007 self-assigned this Apr 22, 2025
@ilhan007 ilhan007 added bug This issue is a bug in the code ACC labels Apr 29, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
ACC bug This issue is a bug in the code TOPIC Core
Projects
Development

Successfully merging a pull request may close this issue.

3 participants