mock-helper.js

const focusVisible = (props, styles) => `
    ${props.theme.inputModality === 'KEYBOARD' && `
        &:focus { ${styles} }
    `}

    &:focus-visible {
        ${styles}
    }
`

This is a quick and dirty example of what a styled-component helper for input modality would look like—if we're in keyboard mode, we apply the focus styles to :focus, but not in other cases. :focus-visible always gets these styles, so when it becomes a usable pseudo-selector, we'll just strip out this helper and use it directly without any noticeable change to users.

Would it make sense to add a default? So using it in a styled component could look like

styled.button`
	${focusVisible}
`

in addition to

styled.button`
	${props => focusVisible(props, `
		outline: red;
	`)}
`

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

For example …

const defaultStyles = `
	outline: 2px blue;
`

const focusVisible = (props, styles = defaultStyles) => `
    ${props.theme.inputModality === 'KEYBOARD' ? `
        &:focus { ${styles} }
    ` : `
        &:focus { outline: none; }
    `}
    &:focus-visible {
        ${styles}
    }
`

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.