Add default focus style to styled Checkbox #2099
Conversation
src/app/components/Checkbox.tsx
Outdated
| @@ -48,6 +48,11 @@ const Checkbox = ({children, className, ...props}: React.PropsWithChildren<Props | |||
| {children} | |||
| </label>; | |||
|
|
|||
| const defaultFocusOutline = ` | |||
| outline: 0.1rem dotted #212121; | |||
| outline: 0.5rem auto -webkit-focus-ring-color; | |||
There was a problem hiding this comment.
indent the styles by one please
src/app/components/Checkbox.tsx
Outdated
| @@ -48,6 +48,11 @@ const Checkbox = ({children, className, ...props}: React.PropsWithChildren<Props | |||
| {children} | |||
| </label>; | |||
|
|
|||
| const defaultFocusOutline = ` | |||
| outline: 0.1rem dotted #212121; | |||
There was a problem hiding this comment.
the dotted style is the firefox style, chrome has a blue gradient thing, is it possible to use the default focus styles here implicitly or do we have to use a custom style? or is that what you're doing by defining both the dotted and the webkit at the same time like this?
There was a problem hiding this comment.
I depended on this StackOverflow post, which suggests that you have to spec it. initial does not work.
There was a problem hiding this comment.
ah ok... yea i don't see a simpler solution here since we're doing a hidden-checkbox situation. you may want to just throw that stack overflow link in a comment above the defaultFocusOutline style
RoyEJohnson
force-pushed
the
add-highlight-color-to-search-highlight-aria-labels
branch
from
5b86f13 to
c60b61e
Compare
RoyEJohnson
force-pushed
the
add-highlight-color-to-search-highlight-aria-labels
branch
from
c657567 to
d9c839f
Compare
|
@RoyEJohnson The CI check |
RoyEJohnson
force-pushed
the
add-highlight-color-to-search-highlight-aria-labels
branch
from
9083e69 to
ccc4049
Compare
Malar-Natarajan
deleted the
add-highlight-color-to-search-highlight-aria-labels
branch
For: https://github.com/openstax/unified/issues/2713