-
Notifications
You must be signed in to change notification settings - Fork 462
Open
Labels
Description
docs/src/frontend/apps/impress/src/components/BoxButton.tsx
Lines 25 to 66 in a4e3168
| const BoxButton = forwardRef<HTMLDivElement, BoxButtonType>( | |
| ({ $css, ...props }, ref) => { | |
| const theme = props.$theme || 'greyscale'; | |
| const variation = props.$variation || '400'; | |
| return ( | |
| <Box | |
| ref={ref} | |
| as="button" | |
| $background="none" | |
| $margin="none" | |
| $padding="none" | |
| $hasTransition | |
| $css={css` | |
| cursor: ${props.disabled ? 'not-allowed' : 'pointer'}; | |
| border: none; | |
| outline: none; | |
| font-family: inherit; | |
| color: ${props.disabled | |
| ? `var(--c--theme--colors--${theme}-400) !important` | |
| : `inherit`}; | |
| &:focus-visible { | |
| transition: none; | |
| outline: 2px solid var(--c--theme--colors--${theme}-${variation}); | |
| border-radius: 1px; | |
| outline-offset: 4px; | |
| } | |
| ${$css || ''} | |
| `} | |
| {...props} | |
| className={`--docs--box-button ${props.className || ''}`} | |
| onClick={(event: React.MouseEvent<HTMLDivElement>) => { | |
| if (props.disabled) { | |
| return; | |
| } | |
| props.onClick?.(event); | |
| }} | |
| /> | |
| ); | |
| }, | |
| ); |
- Problem:
BoxButtonrendersas="button"but still keeps aHTMLDivElementref and never forwardsdisabledortypeattributes. It also only blocks clicks manually, so screen readers and keyboards still treat the control as fully interactive, and it defaults to submitting a form when used inside one. - Impact: Disabled actions remain actionable for assistive technology, resulting in confusing state announcements and accidental form submission.
- Acceptance criteria / fix ideas:
- Forward the ref as
HTMLButtonElementwhenas="button". - Default to
type="button"to avoid unwanted form submissions. - Pass the
disabledprop directly and exposearia-disabledso assistive tech perceives the disabled state accurately.
- Forward the ref as
Metadata
Metadata
Assignees
Labels
Type
Projects
Status
No status