Whcm fixes#2620
Conversation
jnurthen
requested review from
dannify,
devongovett and
snowystinger
as code owners
| @media (forced-colors: active) { | ||
| .spectrum-Accordion-itemHeader { | ||
| &:focus-ring { | ||
| outline: 3px solid CanvasText; |
There was a problem hiding this comment.
How is the focus style drawn for .spectrum-Accordion-itemHeader without WHCM? Should this be?:
@media (forced-colors: active) {
.spectrum-Accordion-itemHeader {
&:focus-ring {
&:after {
background-color: CanvasText;
}
}
}
}There was a problem hiding this comment.
without WHCM it is a border at the left hand side. Really too subtle for WHCM. IMO it is not enough which is why I added the outline.
|
Are tooltip example images reversed? |
They were. Fixed the screenshots. |
LFDanLu
left a comment
LFDanLu
left a comment
There was a problem hiding this comment.
For the most part looks good to me, just one change really required for the Tag active styling. @snowystinger perhaps we should do the same to the breadcrumbs and tabs css that we did for the other PR? IMO we can do that in a follow up since the css files for breadcrumbs and tabs isn't as complex
| @media (forced-colors: active) { | ||
| .spectrum-Accordion-itemHeader { | ||
| &:focus-ring { | ||
| outline: 3px solid CanvasText; |
There was a problem hiding this comment.
Stylistically looks fine to me, perhaps should be a box shadow? cc @snowystinger
There was a problem hiding this comment.
that is typically our preference, i do not remember why at this time though
but if you mix outline and box shadow you can get some odd results
| } | ||
|
|
||
| @media (forced-colors: active) { | ||
| .spectrum-Tags-item { |
There was a problem hiding this comment.
Looks like the Tags are missing a distinguishable active style in WHCM. Clicking on the Tag in the "icon, removable" story in non-WHCM displays a style change but not in WHCM
|
@LFDanLu followup for it is fine with me now that we have an example to go off of |
5 participants
partial resolution for #2529
✅ Pull Request Checklist:
📝 Test Instructions:
Test the following stories in WHCM
🧢 Your Project: