fix: docs small bugs #9596
fix: docs small bugs #9596
Conversation
|
Build successful! 🎉 |
starters/docs/src/Calendar.css
Outdated
| forced-color-adjust: none; | ||
| transition: scale 200ms; | ||
| -webkit-tap-highlight-color: transparent; | ||
| outline: none; |
There was a problem hiding this comment.
Not seeing a focus ring on Calendar in the docs, but I am on RangeCalendar.
There was a problem hiding this comment.
I think we either remove this (it overrides button-base's outline styles) or we keep this and add a data-focus-visible selector specifically in this css that is more specific similar to RangeCalendar.css
&[data-focus-visible] {
outline: none;
z-index: 2;
span {
outline: 2px solid var(--focus-ring-color);
outline-offset: 2px;
}
There was a problem hiding this comment.
remove it. I don't think Calendar had a problem, only RangeCalendar.
|
Build successful! 🎉 |
|
Build successful! 🎉 |
|
Still seeing the same focus ring issue on Calendar |
| )}} /> | ||
| </head> | ||
| <SettingsContextProvider> | ||
| <SettingsContextProvider elementType="body" style={{margin: '0px'}}> |
There was a problem hiding this comment.
Hmm so now there's a provider for the html element and the body? Why not just one?
There was a problem hiding this comment.
looks like 2nd provider was added for the color theme switcher? @reidbarber I suppose that was so it only affects the home page's example content only and not the entire page itself?
There was a problem hiding this comment.
it's wrapped around the entire page though (this is the body element)
There was a problem hiding this comment.
yeah, things seem to work just fine if I make the top most provider the SettingsProvider instead. @reidbarber lemme know if there were any issues you had ran into when working on the color switcher before
|
@reidbarber hm I don't see the focus ring issue, what repro steps/browser? |
|
@LFDanLu I'm not seeing a focus ring on the calendar cells here: https://d5iwopk28bdhl.cloudfront.net/pr/1e6f73dfbcd33cc6a569cf56aafa8480e7cc0087/Calendar |
|
oh, I see the focus ring is completely gone instead gotcha |
|
Build successful! 🎉 |
|
Build successful! 🎉 |
|
Build successful! 🎉 |
Closes
Fixes the native outline focus that would appear after page load/refresh on RangeCalendar in Vanilla RAC.
Fixes home page, which was problematically rendering a div as a child of the html tag due to a Provider being placed between. The original body element had to be moved up to the provider and the associated styles as well. Problem could be seen by going to any S2 doc page, then clicking the home link in the top left.
Also fixed an AXE error we had for the validation help text in the range calendar example that didn't meet contrast in dark mode
✅ Pull Request Checklist:
📝 Test Instructions:
🧢 Your Project: