Fix keyboard help screen in forced-colors and scrollability #4619
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Changelog Entry
Fixed
Description
In light-themed high contrast mode such as "Desert" theme, the close button and images in the keyboard help screen are not very visible because they are white-on-yellow.
Also, when Web Chat is in reduced size:
Note: support of dark theme in Web Chat is currently limited to the keyboard help screen.
Design
We need to add a few containers to make sure the dialog is properly styled:
overflow: hidden
and allow it to be "squeezed" by flex box__border
container for showing the shadowy border which is based onbox-shadow
overflow: hidden
rule would hides shadows as they are outside of the box__box
container foroverflow: hidden
and hiding scrollbar behind round border radius__scrollable
would render over round border radius__scrollable
container for scrollableWe also used
mix-blend-mode: difference
to turn SVG images into black so they are displayed properly for light-themed high contrast mode.Specific Changes
<KeyboardHelp>
KeyboardHelp.ts
CHANGELOG.md
Review Checklist
Browser and platform compatibilities reviewedz-index
)Documents reviewed (docs, samples, live demo)Internationalization reviewed (strings, unit formatting)package.json
andpackage-lock.json
reviewedSecurity reviewed (no data URIs, check for nonce leak)