` element with role="checkbox" [Verification with screen reader](https://jurokapsiar.github.io/open-a11y/components/checkbox.research) doens't show any differences between these two approaches, everything was working as expected. #### `Accessibility variants`: - two-state checkbox - tri-state checkbox - disabled #### `root`: - should render the native element using the `as` prop, defaulting to `div` - should mix in native props expected for the element type defined in `as`. Input slot: - receives `aria-checked` representing checkbox state - receives `aria-disabled="true"` representing disabled checkbox A visible label referenced by the value of `aria-labelledby` (id of element containing the label) set on the element with role `checkbox`. If there's additional static text representing that is descriptive, `aria-describedby` should be set to id of element containing the description. `aria-label` set on the element with role `checkbox`. ### Accessibility concerns for the user `aria-label`, `aria-labelledby`: Describe what is the purpose of the checkbox, latter points to id of element with former. ### Themability and customization Both Fluent and Teams themes and other custom themes will be made with compose and the design tokens specified below. Screenshots of themed variants will be posted here soon after that work is done like the example code below. The `Checkbox` uses `react-texture` to provide a recomposable implementation that has no runtime performance penalties. The `BaseCheckbox` implementation can be used to provide new `slots` and default `props`: ```tsx const FooCheckbox = BaseCheckbox.compose({ tokens: {}, styles: {}, slots: {} }); render() { This renders as a checkbox } ``` ### Composition TBD ### Component design tokens > Tokens represent the general look and feel of the various visual slots. Tokens feed into the styling at the right times in the right slot. > > Regarding naming conventions, use a camelCased name following this format: > `{slot}{property}{state (or none for default)}`. For example: `labelSizeHovered`. > > Common property names: `size`, `background`, `color`, `borderRadius` > > Common states: `hovered`, `pressed`, `focused`, `checked`, `checkedHovered`, `disabled` | Name | Considerations | | ------------------ | -------------- | | boxBorderColor | | | boxBorderRadius | | | boxBorderWidth | | | boxColor | | | boxColorDisabled | | | boxColorFocused | | | boxColorHovered | | | boxColorPressed | | | boxSize | | | labelColor | | | labelColorDisabled | | | labelColorFocused | | | labelColorHovered | | | labelColorPressed | | | labelSize | | | iconColor | | | iconColorDisabled | | | iconColorFocused | | | iconColorHovered | | | iconColorPressed | | | iconSize | | NOTE! Stardust does not follow this convention. Their Checkbox currently uses these tokens: ``` background: string disabledBackground: string disabledBackgroundChecked: string toggleBackground: string toggleBorderColor: string toggleIndicatorColor: string toggleIndicatorSize: string checkedBackground: string checkedBorderColor: string checkedBackgroundHover: string checkedIndicatorColor: string checkboxCheckedColor: string checkboxToggleCheckedBackground: string disabledToggleBackground: string gap: string borderColor: string borderColorHover: string checkboxColor: string checkboxToggleCheckedBorderColor: string checkedTextColor: string disabledColor: string disabledBorderColor: string disabledToggleBorderColor: string disabledCheckboxColor: string disabledToggleIndicatorColor: string disabledCheckedIndicatorColor: string textColor: string textColorHover: string indicatorColor: string ``` ## Considerations for different screen sizes Won't really look or behave differently in context of different phone/tablet/desktop sizes - as in different sizes would not cause this component to look or behave differently. ## Use cases The `Checkbox` component may be used within a `Form` component by providing the name prop to indicate the name of the input element to be fed into the form action. Example: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox ## Compatibility with other libraries > TODO: If this component represents a selected value, how will that be used in an HTML form? Is there a code example to illustrate? > TODO: Is it possible this component could be rendered in a focus zone? If so, should the focus model change in that case?