fix(BBBToggle)!: expose correct accessible name, description and role

README.md

@@ -36,8 +36,8 @@ styled-components >=5.3.0
 react-modal >=3.16.1
 @emotion/react ^11.13.0
 @emotion/styled ^11.13.0
-@mui/material ^6.1.4 || ^7.0.0
-@mui/icons-material ^6.1.4 || ^7.0.0
+@mui/material ^6.4.9 || ^7.0.0
+@mui/icons-material ^6.4.9 || ^7.0.0
 prop-types ^15.8.1
 react-icons ^5.5.0
 ```

package.json

@@ -280,8 +280,8 @@
   "peerDependencies": {
     "@emotion/react": "^11.13.0",
     "@emotion/styled": "^11.13.0",
-    "@mui/icons-material": "^6.1.4 || ^7.0.0",
-    "@mui/material": "^6.1.4 || ^7.0.0",
+    "@mui/icons-material": "^6.4.9 || ^7.0.0",
+    "@mui/material": "^6.4.9 || ^7.0.0",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/components/Toggle/README.md

@@ -46,4 +46,4 @@ import { BBBToggle } from 'bbb-ui-components-react';
 | `ariaLabel`         | `string`                                                            |           | The accessible name for the toggle.                                            |
 | `ariaLabelledBy`    | `string`                                                            |           | The ID of the element that labels the toggle.                                  |
 | `ariaDescribedBy`   | `string`                                                            |           | The ID of the element that describes the toggle.                               |
-| `...props`          | `SwitchProps`                                                       |           | Any other props will be passed down to the underlying Material-UI Switch component. |
+| `...props`          | `Omit<SwitchProps, 'inputProps'>`                                   |           | Any other props will be passed down to the underlying Material-UI Switch component. Use `slotProps.input` to set attributes on the `<input>`. |

src/components/Toggle/component.tsx

@@ -1,4 +1,5 @@
 import React, { JSX, useId } from 'react';
+import { SwitchOwnerState } from '@mui/material';
 import { ToggleProps } from './types';
 import * as Styled from './styles';
 import { DEFAULT_TEXT_POSITION } from './constants';
@@ -19,13 +20,29 @@ function Toggle ({
   ariaLabelledBy,
   ariaDescribedBy,
   id: providedId,
+  slotProps,
   ...rest
 }: ToggleProps): JSX.Element {
   const generatedUniqueId = useId();
   const id = providedId ?? generatedUniqueId;
   const labelId = label ? `${id}-label` : undefined;
   const helperTextId = helperText ? `${id}-helper` : undefined;
 
+  const ariaLabelledByValue = ariaLabel ? undefined : ariaLabelledBy || labelId;
+  // Without a name source, the <label htmlFor> names the input from the helper text,
+  // so it can't also be the description.
+  const hasNameSource = !!ariaLabel || !!ariaLabelledByValue;
+  const a11yInputProps = {
+    role: 'switch',
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledByValue,
+    'aria-describedby': ariaDescribedBy || (hasNameSource ? helperTextId : undefined),
+  };
+  const { input: consumerInputSlotProps, ...otherSlotProps } = slotProps ?? {};
+  const inputSlotProps = typeof consumerInputSlotProps === 'function'
+    ? (ownerState: SwitchOwnerState) => ({ ...a11yInputProps, ...consumerInputSlotProps(ownerState) })
+    : { ...a11yInputProps, ...consumerInputSlotProps };
+
   return (
     <Styled.ToggleWrapper $textPosition={textPosition}>
       {(label || helperText) && (
@@ -44,9 +61,7 @@ function Toggle ({
           {...rest}
           id={id}
           onChange={onChange}
-          aria-label={ariaLabel}
-          aria-labelledby={ariaLabel ? undefined : ariaLabelledBy || labelId}
-          aria-describedby={ariaDescribedBy || helperTextId}
+          slotProps={{ ...otherSlotProps, input: inputSlotProps }}
         />
       </Styled.ToggleSwitchWrapper>
     </Styled.ToggleWrapper>

src/components/Toggle/types.ts

@@ -14,7 +14,7 @@ export interface StyledTextWrapperProps extends StyledToggleWrapperProps{
   $hasHelperText: boolean;
 }
 
-export interface ToggleProps extends SwitchProps {
+export interface ToggleProps extends Omit<SwitchProps, 'inputProps'> {
   /** Main label text displayed next to the toggle. */
   label?: string;