Skip to content

Instantly share code, notes, and snippets.

@rosemarydotworld

rosemarydotworld/mock-helper.js

Created May 22, 2019 22:31
Show Gist options
  • Save rosemarydotworld/338b1069b21c922e2e989dec571e4894 to your computer and use it in GitHub Desktop.
Save rosemarydotworld/338b1069b21c922e2e989dec571e4894 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
mock-helper.js
const focusVisible = (props, styles) => `
${props.theme.inputModality === 'KEYBOARD' && `
&:focus { ${styles} }
`}
&:focus-visible {
${styles}
}
`
@rosemarydotworld
Copy link
Author

Wow, great questions.

Would it make sense to add a default?

Sure, if there's a focus style we agree is a good choice for a lot of elements. I reckon this problem belongs in the capable hands of y'all designers.

Also, should it cancel out the default :focus styles when inputModality is not KEYBOARD? Or should that be left to the component itself?

Yes, if we're not already canceling out focus styles in our normalization styles.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment