<rh-video-embed>: context and play button.

[zeroedin]

In a dark parent context, <rh-video-embed> may be slotted with a 'light' background placeholder image. The dark context set by this parent would cause the <rh-button> in the shadow root of rh-video-embed to adjust its context and display a light play button over top of the light background image.

Because the background image sets another layer over the dark background set by the parent context this could cause color contrast issues with low sighted users identifying the play button on this image.

Example:

<rh-surface color-palette="darkest"> <!-- dark background -->
  <rh-video-embed>
     <img src="#" slot="thumbnail"> <!-- slotted thumbnail can be a light background image -->
    <!-- shadowroot -->
       ...
       <slot name="thumbnail"></slot>
       ...
       <rh-button variant=play></rh-button> <!-- will have dark context from the ancestor surface and display the light variant of the play button which is a possible accessibility issue overlaying the light slotted background image -->
       ...
    <!-- end shadowroot -->
  </rh-video-embed>
</rh-surface>

Possible solutions:

• modify the play button to work across both light and dark contexts.
• set a property that sets the context for the play button so it uses the correct context variant.

[zeroedin]

@coreyvickery @marionnegp let us know your thoughts here.

[bennypowers]

maybe better to make it a provider then

[zeroedin]

Maybe better to make it a provider then

This was my original thought see comment on the merged PR

Doing so has some inherent problems noted in a super quick test of implementation of adding the provider.

As it stands we two overlapping backgrounds.

1. the parent context (could be set by rh-card or rh-surface etc)
2. the background image (the play button overlays)

Here is my best ascii text representation of current state

| parent context 
|    | host (context w/ provider)
|    |   | image background 
|    |   |   |  play button
|    | caption text
|

Currently, the caption exists on the parent context but inside the host. So just adding a provider here then will set the caption text color incorrectly. Definitely will have to refactor the way it renders so we can provide support to this.

Can see this issue currently here: https://deploy-preview-1567--red-hat-design-system.netlify.app/elements/video-embed/demo/color-context/

[bennypowers]

we're in charge of the caption, right?
can't we just set a palette background on the host?

[bennypowers]

because this has to do with images and art direction, we should consider <rh-picture> as a solution and maybe kick this to cubone

[marionnegp]

• If we make the implementor responsible for picking the right context/theme to make the play button more visible, the docs will have to be updated. The play button color change is mentioned on the Style page, but I think we'll need to add more usage info.

[markcaron]

@marionnegp Until we have <rh-picture> let's update the docs to let the implementor know they're responsible for ensuring the color-palette doesn't affect the contrast accessibility.

[marionnegp]

@marionnegp Until we have <rh-picture> let's update the docs to let the implementor know they're responsible for ensuring the color-palette doesn't affect the contrast accessibility.

@markcaron, I have #2125 open with some copy about this. Tagged you as the reviewer.