Skip to content

Commit

Permalink
[PR feedback] Fix focus outline for webkit browsers
Browse files Browse the repository at this point in the history
- Chrome/Edge's auto style defaults to currentColor which is the empty shade, so its invisible

- Safari's is just godawful
  • Loading branch information
cee-chen committed Aug 19, 2024
1 parent 0795d3e commit 5abd42a
Show file tree
Hide file tree
Showing 2 changed files with 2 additions and 2 deletions.
2 changes: 1 addition & 1 deletion packages/eui/src/components/form/form.styles.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -263,7 +263,7 @@ describe('euiFormCustomControlStyles', () => {
}
&:has(input:focus-visible) {
outline-style: auto;
outline: 2px solid #07C;
outline-offset: 2px;
}
Expand Down
2 changes: 1 addition & 1 deletion packages/eui/src/components/form/form.styles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -393,7 +393,7 @@ export const euiFormCustomControlStyles = (euiThemeContext: UseEuiTheme) => {
}
&:has(input:focus-visible) {
outline-style: auto;
outline: ${euiTheme.focus.width} solid ${controlVars.colors.selected};
outline-offset: ${euiTheme.focus.width};
}
Expand Down

0 comments on commit 5abd42a

Please sign in to comment.