fix: slideToggle console errors (#980)

Closes D2IQ-98165

packages/slideToggle/components/SlideToggle.tsx

@@ -36,15 +36,15 @@ export interface SlideToggleProps extends React.HTMLProps<HTMLInputElement> {
  */
  appearance?: InputAppearance;
  /**
- * Whether or not the input is checked
+ * Whether or not the input is checked.
  */
  checked?: boolean;
  /**
- * Unique identifier used for the input element
+ * Unique identifier used for the input element.
  */
  id?: string;
  /**
- * The text or node content that appears next to the input
+ * The text or node content that appears next to the input.
  */
  inputLabel: React.ReactNode | string;
  /**
@@ -56,7 +56,7 @@ export interface SlideToggleProps extends React.HTMLProps<HTMLInputElement> {
  */
  value?: string;
  /**
- * How the text content vertically aligns with the input
+ * How the text content vertically aligns with the input.
  */
  vertAlign?: "center" | "top";
  /**
@@ -87,22 +87,27 @@ const SlideToggle = (props: React.PropsWithRef<SlideToggleProps>) => {
  onFocus,
  ...other
  } = props;
+
  const inputType = "SlideToggle";
+
  const inputDataCy = [
  `${inputType}-input`,
  ...(checked ? [`${inputType}-input.checked`] : []),
  ...(appearance && appearance !== InputAppearance.Standard
  ? [`${inputType}-input.${appearance}`]
  : [])
  ].join(" ");
+
  const parentDataCy = [
  `${inputType}`,
  ...(checked ? [`${inputType}.checked`] : []),
  ...(appearance && appearance !== InputAppearance.Standard
  ? [`${inputType}.${appearance}`]
  : [])
  ].join(" ");
+
  const [hasFocus, setHasFocus] = React.useState<boolean>(false);
+
  const handleFocus = e => {
  setHasFocus(true);
 
@@ -131,14 +136,13 @@ const SlideToggle = (props: React.PropsWithRef<SlideToggleProps>) => {
  <div className={cx(flexItem("shrink"), display("inherit"))}>
  <>
  <div className={cx(toggleContainer)}>
- {/* eslint-disable jsx-a11y/role-has-required-aria-props */}
  <input
  type={inputType}
  id={id}
  className={visuallyHidden}
- checked={checked}
+ defaultChecked={checked}
  disabled={disabled}
- value={value}
+ defaultValue={value}
  aria-invalid={!isValid}
  aria-describedby={describedByIds}
  onFocus={handleFocus}