Display chat message bubble border in high contrast mode#2106
Display chat message bubble border in high contrast mode#2106
Conversation
anjulgarg
requested review from
JamesBurnside,
PorterNan,
alkwa-msft,
carocao-msft,
dmceachernmsft,
edwardlee-msft,
mgamis-msft,
prabhjot-msft and
prprabhu-ms
as code owners
Chat bundle size is increased❗.
|
CallWithChat bundle size is increased❗.
|
Calling bundle size is increased❗.
|
|
Failed to pass the UI Test. If this PR is for UI change and the error is snapshot mismatch, please add "ui change" label to the PR for updating the snapshot. |
| zIndex: CHAT_MESSAGE_ZINDEX | ||
| zIndex: CHAT_MESSAGE_ZINDEX, | ||
| '@media (forced-colors: active)': { | ||
| forcedColorAdjust: 'none' |
There was a problem hiding this comment.
does stopping forced colours maintain the required colour ratio for the different modes? @edwardlee-msft I believe its like 3:1 or something for items like this? or was it 5:1? might be worth adding a border or something when forced colours are on as well?
There was a problem hiding this comment.
How can we check that?
Teams app also shows the same colors in high contrast modes.
There was a problem hiding this comment.
I use the accessibility insights tool for windows, you can download it here: https://accessibilityinsights.io/docs/windows/overview/
There was a problem hiding this comment.
Updated the description with screenshots from the tool. LMKWYT
There was a problem hiding this comment.
For me Teams has the same bug where messages have no border:
JamesBurnside
left a comment
JamesBurnside
left a comment
There was a problem hiding this comment.
Wihout seeing any concrete documentation for how to style for high contrast modes, I think we should be leaving the background to be set by the high contrast settings - the background can be set to any color in the system settings:
(so our colors might be broken then if we force them to not use the active colors)
Is it possible to leave the colors as is but provide a border around the message in forced-colors:active?
Otherwise leave as is and let the a11y team decide if the fix is sufficient!
There was a problem hiding this comment.
Wihout seeing any concrete documentation for how to style for high contrast modes, I think we should be leaving the background to be set by the high contrast settings - the background can be set to any color in the system settings:
(so our colors might be broken then if we force them to not use the active colors)
Is it possible to leave the colors as is but provide a border around the message in forced-colors:active?
Otherwise leave as you have it and let the a11y team decide if the fix is sufficient!
|
@JamesBurnside Great recommendations. Added borders during high contrast mode instead of forcing bg colors. This is the best fix IMO |
|
Failed to pass the UI Test. If this PR is for UI change and the error is snapshot mismatch, please add "ui change" label to the PR for updating the snapshot. |
anjulgarg
changed the title
…ub.com/Azure/communication-ui-library into anjulgarg/bugfix-2864691-high-contrast
5 participants
What
Add border around messages in high contrast mode
Why
To resolve the bug https://skype.visualstudio.com/SPOOL/_workitems/edit/2864691
How Tested
Manually on a windows device
Process & policy checklist
Is this a breaking change?