Fix semantic structure of 'Create an account' page

[MisRob]

🙂 Looking for an issue? Welcome! This issue is open for contribution. If this is the first time you’re requesting an issue, please:

• Read Contributing guidelines carefully. Pay extra attention to Using generative AI. Pull requests and comments that don’t follow the guidelines won’t be answered.
• Confirm that you’ve read the guidelines in your comment.

Overview

Complexity: Low

Context

The Create an account has incorrect semantic structure of headings where the main title is h2 and sub-titles are h1.

The Change

• The main title Create an account needs to be h1
• Sub-section titles, such as Basic information, How do you plan on using Kolibri Studio, and other need to be h2
• But visually there should be no change

How to Get There

• Navigate to /accounts/#/create URL

Acceptance Criteria

• The semantic structure is correct
• Visual experience is exactly the same as before
• The pull request has before/after screenshots of the whole page

[Rajeev529]

hii mam @MisRob i would like to contribute, assign me

[MisRob]

Thanks @Rajeev529 - assigned.

[Rajeev529]

hello mam @MisRob,
i’ve swapped the usage of h1 and h2 tags, and the updated result is shown in the attached image. In my opinion, the new structure provides a better and clearer UI compared to the previous version.
if you’d prefer to keep the previous visual design exactly the same while only changing the HTML semantics, I can map h2 → h1 and vice-versa using the following CSS. This preserves the original appearance while reflecting only the HTML-level change:
h1 {
font-size: 24px;
margin-top: 0.83em;
margin-bottom: 0.83em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}

[MisRob]

Hi @Rajeev529, thanks!

Yes please use CSS to visually match the previous experience.

I understand your feedback and definitely agree that visual hierarchy could be better. For the sake of consistency though I'd rather us not to change it in the scope of this issue - there are some other places, e.g. sign in page, that give the same visual output. We plan to bring system to how we do typography in the upcoming months so that will be a good opportunity to take care of it.

[Rajeev529]

hello mam @MisRob, I have swapped the h1 and h2 tags to fix the heading hierarchy, but the design remains the same because we are keeping the same CSS classes (subheading, font-weight-bold).The only visible difference is for “Create an account”: Earlier it was inside h2 with font-size 24px
After changing it to h1, we just need to ensure h1 is also styled as 24px
All other section headings were earlier h1 with 16px, and after changing them to h2, they still look the same because the 'subheading' class controls the size.

So finally, only the font size of the main “Create an account” heading needs to be adjusted, which is adjusted in my local env. if is there is no issue i can proceed further

[MisRob]

Hi @Rajeev529, okay that sounds fine, feel free to proceed to open a PR - we will review details there.

[Rajeev529]

hello mam @MisRob , i created pull request please take look #5656.

[MisRob]

Thanks @Rajeev529