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: a0bbdf0

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]

Template feedback - Example A:
"Active and passive management ..." - should be an sd-leadtext
"We are a fundamentally active asset manager" - should be sd-headline/text-xl (we do not have 2xl. where does it come from?)

Other then these please check spacing between elements.

[MartaPintoTeixeira]

Template feedback - Example B:

For the teasers there is no isent in figma. please remove it.
Other then these please check spacing between elements.

[MartaPintoTeixeira]

Please align with @auroraVasconcelos to see if before this quote:
"Separating semantics from styles allows developers to use appropriate tags (e.g, h1 to h6 or p) for structure, ensuring consistent design, accessibility, and flexibility across use cases. H-tags are applied in the CMS following semantic headline order."

You need to put "Accessibility hint:"

[MartaPintoTeixeira]

In docs:
for the 1st sample (the one after the component description" in figma we have "Lorem ipsum sic semper" please change it.
for the inverted sample in figma we have "Lorem ipsum sic semper" please change it.

[paulovareiro29]

"We are a fundamentally active asset manager" - should be sd-headline/text-xl (we do not have 2xl. where does it come from?)

@MartaPintoTeixeira Using text-xl changes text to black, instead of the brand blue. In figma it is in blue. How should we handle it?
Should I force the blue color? Imo forcing goes against having a design system..

[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.