Fix light theme a11y bug in focused data grid cells #345
Conversation
…in data grid cells
|
Thank you! |
daviddossett
left a comment
daviddossett
left a comment
There was a problem hiding this comment.
Perfect, thank you 🙏
| :host(:${focusVisible}) ::slotted(*), | ||
| :host(:focus) ::slotted(*), | ||
| :host(:active) ::slotted(*) { | ||
| color: ${listActiveSelectionForeground} !important; |
There was a problem hiding this comment.
All of the pseudos!
Out of curiosity, why was !important needed here?
There was a problem hiding this comment.
The !important is needed because I discovered that (for whatever reason) a lot of base HTML tags (i.e. a, code, etc.) are styled within a style tag that lives directly within the webview HTML document.
As a result, without the !important the styles within the style tag will have higher specificity than styles defined in the code above and get overridden.
I think this is also the reason that I had such a ridiculously challenging time trying to fix these bugs back in November because I didn't catch that these base tags were being styled directly in the HTML document and needed an !important tag to be overridden.
There was a problem hiding this comment.
For the purposes of posterity, here are some reference screenshots to what I'm talking about in case we ever run into this again.
Note how the selector for a, a code has higher specificity than the styles defined by the data-grid-cell. It's only by applying !important that we can override these higher priority styles.
By clicking the <style> link in the top-right corner of the styling block in the above image, the DevTools inspector will take us to the spot where these styles are applied and here we can see that it is an inline style tag that lives in the head of the webview iframe.
You're welcome @atanasster! Sorry it took so long 😅 |
3 participants
Link to relevant issue
This pull request resolves #277 and #278
Description of changes
Add the
listActiveSelectionForegroundcolor token to all slotted content in data grid cells. This resolves a bug in VS Code light themes where the color of slotted elements in data grid cells did not have high enough contrast with the background when focused/active.Before
After