fix: improve sd-headline a11y

[paulovareiro29]

Description:

Closes #1504

This PR addresses:

• Default story headline changed to h2.
• Rephrase sd-headline stories description to explain why semantics and styles are disconnected
• Add a template to show real life examples from disconnected headlines

Definition of Reviewable:

• Documentation is created/updated
• Stories (features, a11y) are created/updated
• relevant tickets are linked

[changeset-bot]

🦋 Changeset detected

Latest commit: 895f201

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

🚀 Storybook has been deployed for branch fix_improve-sd-headline-a11y

• View Storybook

[MartaPintoTeixeira]

Hi @paulovareiro29,

In that case I believe we need to create a new ticket to edit sd-headline style in a way that it allows the user to use primary or black. As you can read in figma in the "do's": "The text/primary colour can be used to emphasize the hierarchy between headlines." meaning the user should be able to use primary or black in all sizes. I will speak with @coraliefeil tomorrow about this so we create a ticket to handle the issue.

[mariohamann]

Hi @paulovareiro29,

In that case I believe we need to create a new ticket to edit sd-headline style in a way that it allows the user to use primary or black. As you can read in figma in the "do's": "The text/primary colour can be used to emphasize the hierarchy between headlines." meaning the user should be able to use primary or black in all sizes. I will speak with @coraliefeil tomorrow about this so we create a ticket to handle the issue.

@MartaPintoTeixeira You're right, that it's written there. But to my knowledge, it's not correct. That's why we built the component in this way in Figma and Code. If this would interchangeable, we would need a property for that. Otherwise @paulovareiro29 you're right, it would have to be overridden manually.

[MartaPintoTeixeira]

@paulovareiro29 please force the xl to be blue as in figma.
please double check the template in figma and look for this changes:

• spacing between elements
• new title added: "Empowering Sustainable Growth"

Please mark with an emoji once you finish this requests.
So I can quickly follow up.

[paulovareiro29]

@MartaPintoTeixeira spacings and new headline has been addressed.

There is just one topic to be addressed:
In the second template, in design between sections, there is a spacing of 86px. By default, we do not have 86px to apply as a spacing. What I have done was to apply 32px + 48px = 80px spacing.
Could you apply this difference in design?

For reasons

[mariohamann]

I hand reviewing over to @auroraVasconcelos

[MartaPintoTeixeira]

@MartaPintoTeixeira spacings and new headline has been addressed.

There is just one topic to be addressed: In the second template, in design between sections, there is a spacing of 86px. By default, we do not have 86px to apply as a spacing. What I have done was to apply 32px + 48px = 80px spacing. Could you apply this difference in design?

Works for me @paulovareiro29 i will adjust figma to match storybook.

[auroraVasconcelos]

LGTM, besides the two comments I left, consider it approved on my side.