feat(ui-checkbox): add data-checked attribute to reflect checked state

INSTUI-4902

Author: ToMESSKa

packages/ui-checkbox/src/Checkbox/__tests__/Checkbox.test.tsx

@@ -240,6 +240,25 @@ describe('<Checkbox />', () => {
     })
   })
 
+  it('reflects checked state changes via data-checked attribute', async () => {
+    renderCheckbox({ defaultChecked: false })
+    const input = screen.getByRole('checkbox')
+
+    expect(input).toHaveAttribute('data-checked', 'false')
+
+    userEvent.click(input)
+    await waitFor(() => {
+      expect(input).toHaveAttribute('data-checked', 'true')
+    })
+  })
+
+  it('sets data-checked to mixed when indeterminate', () => {
+    renderCheckbox({ indeterminate: true })
+    const input = screen.getByRole('checkbox')
+
+    expect(input).toHaveAttribute('data-checked', 'mixed')
+  })
+
   describe('for a11y', () => {
     it('`simple` variant should meet standards', async () => {
       const { container } = renderCheckbox({ variant: 'simple' })

packages/ui-checkbox/src/Checkbox/v2/README.md

@@ -162,6 +162,10 @@ type: example
 />
 ```
 
+### Querying checked state from the DOM
+
+The underlying `<input>` has a `data-checked` attribute (`"true"`, `"false"`, or `"mixed"` when indeterminate) that can be queried from the DOM to read the current state.
+
 ### Guidelines
 
 ```js

packages/ui-checkbox/src/Checkbox/v2/index.tsx

@@ -328,6 +328,7 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
       >
         <div css={styles?.container}>
           <input
+            data-checked={indeterminate ? 'mixed' : this.checked}
             {...props}
             id={this.id}
             value={value}

packages/ui-checkbox/src/CheckboxGroup/v2/README.md

@@ -80,6 +80,10 @@ type: example
 </CheckboxGroup>
 ```
 
+### Querying checked state from the DOM
+
+Each `<Checkbox>` in the group exposes a `data-checked` attribute (`"true"` or `"false"`) on its underlying `<input>` that can be queried from the DOM to read the current state, for example for analytics tracking tools.
+
 ### Guidelines
 
 ```js