fix: improve sd-video a11y

[paulovareiro29]

Description:

Closes #1494, #1529

Note: The placeholder video has been replaced by the solid awards video, as suggested by @coraliefeil.

Definition of Reviewable:

• [x] E2E tests (features, a11y, bug fixes) are created/updated
• [x] Stories (features, a11y) are created/updated
• [x] relevant tickets are linked

[github-actions[bot]]

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

• View Storybook

[MartaPintoTeixeira]

Changes requested: instead of: "Video Element With Poster Slot" change to "Video Element with Poster Slot" instead of: "Video With Description" change to "Video with Description" instead of: "Video With Copyright" change to "Video with Copyright"

[MartaPintoTeixeira]

For the tmplt sample: "Video With Description" the playbutton seems to be broken if you play around with responsive.

[MartaPintoTeixeira]

For our templates. We should change the poster image for the video. Can we re-use the one used in the video provided or should I provide one?

[paulovareiro29]

@MartaPintoTeixeira Regarding the play button not being vertically aligned on video with description, this is because the alignment is being calculated using the video description. I have also noticed the video can be played by clicking the description (figcaption). By fixing one issue, it will fix both. I believe this should be tackled on a separate ticket.

Regarding the poster, can you please provide one? Thanks

[paulovareiro29]

Vertical alignment issue and description click playing the video, will be addressed here #1650

EDIT: Will be fixed here #1631. #1650 is a duplicated issue

[paulovareiro29]

Waiting dependency on https://github.com/solid-design-system/solid/pull/1657

[MartaPintoTeixeira]

Video poster has been provided to match video content

[MartaPintoTeixeira]

for the 1st sample please keep the "media" poster (as in figma)

[MartaPintoTeixeira]

a ticket has been created to remove overlay option from sd-video #1665

[MartaPintoTeixeira]

I will approve this PR leaving a note that are 2 related tickets to be fixed: #1650 + #1665

[paulovareiro29]

@paulovareiro29 the poster is not announced, I'm not sure if it's because the focus in directly set in the play button. Can you please investigate this? Thank you

@smfonseca since the poster is an image, it is only read-out-loud when the voiceover is reading the page content, not when it focus the play button.