Skip to content

ActionMenu: Fix styles for windows high contrast mode #1970

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Mar 17, 2022
Merged

ActionMenu: Fix styles for windows high contrast mode #1970

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
48010d4
add forced-colors styles for Overlay & focused Button
siddharthkp Mar 16, 2022
a769c7c
respect comment style
siddharthkp Mar 16, 2022
bb9dfb5
add changeset
siddharthkp Mar 16, 2022
bbdaf36
Merge branch 'main' into siddharthkp/actionmenu-high-contrast
siddharthkp Mar 17, 2022
63743cd
update snapshots
siddharthkp Mar 17, 2022
56c205f
Revert "update snapshots"
siddharthkp Mar 17, 2022
20f08ac
only update relevant snapshots
siddharthkp Mar 17, 2022
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 .changeset/actionmenu-fix-high-contrast-mode.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@primer/react': patch
---

ActionMenu: Fix styles for windows high contrast mode
3 changes: 1 addition & 2 deletions src/ActionList/Item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -161,8 +161,7 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(

'@media (forced-colors: active)': {
':focus': {
// we set color to be transparent and let the high contrast rules
// decide what color with contrast should that be corrected to
// Support for Windows high contrast https://sarahmhigley.com/writing/whcm-quick-tips
outline: 'solid 1px transparent !important'
}
},
Expand Down
6 changes: 6 additions & 0 deletions src/Button/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -250,6 +250,12 @@ export const getBaseStyles = (theme?: Theme) => ({
},
'&:disabled svg': {
opacity: '0.6'
},
'@media (forced-colors: active)': {
'&:focus': {
// Support for Windows high contrast https://sarahmhigley.com/writing/whcm-quick-tips
outline: 'solid 1px transparent'
}
}
})

Expand Down
6 changes: 6 additions & 0 deletions src/Overlay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,12 @@ const StyledOverlay = styled.div<StyledOverlayProps>`
:focus {
outline: none;
}

@media (forced-colors: active) {
/* Support for Windows high contrast https://sarahmhigley.com/writing/whcm-quick-tips */
outline: solid 1px transparent;
}

${sx};
`
type BaseOverlayProps = {
Expand Down