fix(BBBCheckbox)!: apply ariaLabel to the input element

src/components/Checkbox/README.md

@@ -29,4 +29,4 @@ import { BBBCheckbox } from 'bbb-ui-components';
 | `round`      | `boolean`              | `false`   | If `true`, the checkbox will be rendered as a round radio-style button.     |
 | `ariaLabel`| `string`               |           | The accessible name for the checkbox.                                       |
 | `dataTest` | `string`               |           | The `data-test` attribute on the underlying `<input>` element.              |
-| `...props` | `any`                  |           | Any other props will be passed down to the underlying Material-UI Checkbox component. |
+| `...props` | `Omit<CheckboxProps, 'inputProps'>` |  | Any other props will be passed down to the underlying Material-UI Checkbox component. Use `slotProps.input` to set attributes on the `<input>`. |

src/components/Checkbox/component.tsx

@@ -1,4 +1,5 @@
 import React, { JSX, useId } from 'react';
+import { CheckboxOwnerState } from '@mui/material';
 import { CheckboxProps } from './types';
 import * as Styled from './styles';
 import { DEFAULT_LAYOUT, LAYOUTS } from './constants';
@@ -19,20 +20,23 @@ function Checkbox({
   ariaLabel,
   id,
   dataTest,
-  inputProps,
+  slotProps,
   ...props
 }: CheckboxProps): JSX.Element {
   const generatedId = useId();
   const checkboxId = id ?? generatedId;
-  const mergedInputProps = { 'data-test': dataTest, ...inputProps };
+  const ownInputProps = { 'aria-label': ariaLabel, 'data-test': dataTest };
+  const { input: consumerInputSlotProps, ...otherSlotProps } = slotProps ?? {};
+  const inputSlotProps = typeof consumerInputSlotProps === 'function'
+    ? (ownerState: CheckboxOwnerState) => ({ ...ownInputProps, ...consumerInputSlotProps(ownerState) })
+    : { ...ownInputProps, ...consumerInputSlotProps };
   const checkbox = (
     <Styled.StyledCheckbox
       {...props}
       id={checkboxId}
-      aria-label={ariaLabel}
       icon={round ? <RadioButtonUnchecked /> : undefined}
       checkedIcon={round ? <RadioButtonChecked /> : undefined}
-      inputProps={mergedInputProps}
+      slotProps={{ ...otherSlotProps, input: inputSlotProps }}
     />
   );
 

src/components/Checkbox/types.ts

@@ -3,7 +3,7 @@ import { LAYOUTS } from './constants';
 
 type Layout = typeof LAYOUTS[keyof typeof LAYOUTS];
 
-export interface CheckboxProps extends MuiCheckboxProps {
+export interface CheckboxProps extends Omit<MuiCheckboxProps, 'inputProps'> {
   /** Text label displayed next to the checkbox. */
   label?: string;