From 8d4489e42d80bd015b80043e027c7f5cb8d428c0 Mon Sep 17 00:00:00 2001
From: Arthurk12 <arthur_bockmann@hotmail.com>
Date: Wed, 30 Sep 2026 18:11:23 -0300
Subject: [PATCH] fix(BBBToggle)!: expose correct accessible name, description
 and role

The aria-label/aria-labelledby/aria-describedby props are passed to
the MUI Switch root, which forwards them to the ButtonBase span
instead of the <input>. The input is then named by the <label htmlFor>
that wraps both the title and the helper text, so its accessible name
contains both texts and it has no description. MUI's Switch also
renders a plain checkbox, so screen readers announce "checkbox"
instead of "switch".

Pass the aria attributes and role="switch" through slotProps.input so
they land on the <input>, merging any slotProps.input supplied by the
consumer (object or function form). Since aria-labelledby takes
precedence over the native <label> in the accessible name
computation, the name becomes the title only and the helper text
becomes the description. The <label htmlFor> keeps wrapping both
texts, so clicking the helper text still toggles the switch; moving
the helper text out of the label was discarded because it drops that
behavior.

slotProps.input is used instead of inputProps because inputProps is
deprecated in MUI and removed in v7. MUI does not merge the two (a
slotProps.input replaces inputProps entirely), so a consumer's
inputProps would be silently dropped; remove it from ToggleProps
instead, turning that into a compile error. Merging the legacy prop
was discarded because reading it keeps the deprecated API in use.

When only helperText is given, nothing provides aria-labelledby, so
the <label htmlFor> names the input from the helper text; linking it
as aria-describedby too would announce it twice. Link the helper as
the description only when ariaLabel, ariaLabelledBy or label provides
the name.

Switch only forwards slotProps.input to the <input> since MUI 6.4.9
(earlier 6.x releases ignore it, or lack its types and
SwitchOwnerState), so raise the @mui/material and @mui/icons-material
peer floor to 6.4.9.

BREAKING CHANGE: BBBToggle no longer accepts inputProps; use
slotProps.input to set attributes on the underlying <input>. The
@mui/material and @mui/icons-material peer range is raised to
^6.4.9 || ^7.0.0.
---
 README.md                           |  4 ++--
 package-lock.json                   |  4 ++--
 package.json                        |  4 ++--
 src/components/Toggle/README.md     |  2 +-
 src/components/Toggle/component.tsx | 21 ++++++++++++++++++---
 src/components/Toggle/types.ts      |  2 +-
 6 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/README.md b/README.md
index 594178a..808fddb 100644
--- a/README.md
+++ b/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
 ```
diff --git a/package-lock.json b/package-lock.json
index b519358..419758a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -58,8 +58,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",
diff --git a/package.json b/package.json
index f053f60..3ecd134 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/Toggle/README.md b/src/components/Toggle/README.md
index d488011..9cffe0a 100644
--- a/src/components/Toggle/README.md
+++ b/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>`. |
diff --git a/src/components/Toggle/component.tsx b/src/components/Toggle/component.tsx
index b159190..ae7afb7 100644
--- a/src/components/Toggle/component.tsx
+++ b/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,6 +20,7 @@ function Toggle ({
   ariaLabelledBy,
   ariaDescribedBy,
   id: providedId,
+  slotProps,
   ...rest
 }: ToggleProps): JSX.Element {
   const generatedUniqueId = useId();
@@ -26,6 +28,21 @@ function Toggle ({
   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>
diff --git a/src/components/Toggle/types.ts b/src/components/Toggle/types.ts
index 9bb8c44..593d162 100644
--- a/src/components/Toggle/types.ts
+++ b/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;