fix: improve sd-expandable a11y

[paulovareiro29]

Description:

Closes #1476 and #1778

This PR addresses:

• Adjust sd-expandable spacings according to figma
• Reorder of sd-expandable dom order. (button first so it is targetable by keyboard first)
• Improvement of the sd-expandable template labels
• Added accessibility hints to sd-expandable

Definition of Reviewable:

• Documentation is created/updated
• Migration Guide is created/updated
• E2E tests (features, a11y, bug fixes) are created/updated

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

[changeset-bot]

🦋 Changeset detected

Latest commit: 45922d1

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-expandable-a11y

• View Storybook

[MartaPintoTeixeira]

Accessibility hints added in storybook were now added to figma.

[paulovareiro29]

Hi @MartaPintoTeixeira @coraliefeil ,
I have adjusted the spacings between the content and the button to look like figma. In figma there is a spacing of 16px. Previously, on implementation, there was none.

[paulovareiro29]

FYI: Talked directly with Marta and we agreed on changing the default translations to:
"Show Less" -> "Collapse to show less"
"Show More" -> "Expand to show more"

This would be the default translations and still not recommended to be used on a production environment, but still it is better.

This default translations would only be used on the default component on the docs.

[MartaPintoTeixeira]

As spoken please remove underlines bellow the labels as in the main component.

[mariohamann]

Since we have an accessibility hint saying "Generic summaries like "show more" should be avoided."
Should we consider renaming the "Show more" button that opens the expandable to "Expand to read more content"?

This is in no way less generic, but just more text. The guideline aims more to avoid repeating, non-descriptive links, see e. g. https://www.visionaustralia.org/business-consulting/digital-access/blog/how-to-make-read-more-links-accessible

Expanding this to more text makes this even worse. I'm not sure, if we can do anything about this inside our components.

@MartaPintoTeixeira @paulovareiro29

[coraliefeil]

I’ll ask Damaris. I’m having a sync with her today.

[MartaPintoTeixeira]

Since we have an accessibility hint saying "Generic summaries like "show more" should be avoided."
Should we consider renaming the "Show more" button that opens the expandable to "Expand to read more content"?

This is in no way less generic, but just more text. The guideline aims more to avoid repeating, non-descriptive links, see e. g. https://www.visionaustralia.org/business-consulting/digital-access/blog/how-to-make-read-more-links-accessible

Expanding this to more text makes this even worse. I'm not sure, if we can do anything about this inside our components.

@MartaPintoTeixeira @paulovareiro29

Okay in that case let's reverse this changes @paulovareiro29

[MartaPintoTeixeira]

@mariohamann

While reviewing the sd-expandable I have noticed that in the current version in storybook the label is underlined. But in figma we dont use underline for expandable.
While speaking with Vasconcelos, Aurora (EXT/Partner) (Guest) we checked that the element is an sd-interactive and as so it should not have underline as well.
I would like to check if we should keep the underline or remove it please.

[MartaPintoTeixeira]

Waiting for a question to be answered to approve PR

[MartaPintoTeixeira]

fix: 🤔 sd-expandable label underline to be removed
#1778

bug ticket created

[MartaPintoTeixeira]

Approved from design side.
Bug found: fix: 🤔 sd-expandable label underline to be removed
#1778

[smfonseca]

Everything's good, just the changesets that should be split. Let me know once this is done so that we can merge this PR. Thank you