Skip to content
This repository was archived by the owner on Jan 6, 2025. It is now read-only.

Fix light theme a11y bug in focused data grid cells #345

Merged
merged 1 commit into from
Mar 2, 2022
Merged

Fix light theme a11y bug in focused data grid cells #345

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions src/data-grid/data-grid-cell.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,4 +50,9 @@ export const dataGridCellStyles = (
color: ${listActiveSelectionForeground};
outline: none;
}
:host(:${focusVisible}) ::slotted(*),
:host(:focus) ::slotted(*),
:host(:active) ::slotted(*) {
color: ${listActiveSelectionForeground} !important;
Copy link
Collaborator

@daviddossett daviddossett Mar 2, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All of the pseudos!

Out of curiosity, why was !important needed here?

Copy link
Member Author

@hawkticehurst hawkticehurst Mar 2, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Member Author

@hawkticehurst hawkticehurst Mar 2, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Screen Shot 2022-03-02 at 2 34 43 PM

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.

Screen Shot 2022-03-02 at 2 41 05 PM

}
`;