[Slider] Update other tests

Author: CodySchaaf

packages/material-ui-unstyled/src/SliderUnstyled/SliderUnstyled.js

@@ -10,9 +10,9 @@ import {
   unstable_useForkRef as useForkRef,
   unstable_useControlled as useControlled,
 } from '@material-ui/utils';
+import { visuallyHidden } from '@material-ui/system';
 import isHostComponent from '../utils/isHostComponent';
 import sliderUnstyledClasses from './sliderUnstyledClasses';
-import { visuallyHidden } from '@material-ui/system';
 import SliderValueLabelUnstyled from './SliderValueLabelUnstyled';
 
 function asc(a, b) {
@@ -308,19 +308,13 @@ const SliderUnstyled = React.forwardRef(function SliderUnstyled(props, ref) {
     const marksValues = marks.map((mark) => mark.value);
     const marksIndex = marksValues.indexOf(value);
 
-    // TODO this might need to use roundValueToStep instead or something
-    // but since the native input respects the step it doesn't look like we need it
     let newValue = event.target.valueAsNumber;
-    // TODO add test to make sure when value/step is -4e-8 it still works
 
     if (marks && step == null) {
-      newValue =
-        newValue < value
-          ? marksValues[marksIndex - 1]
-          : marksValues[marksIndex + 1];
+      newValue = newValue < value ? marksValues[marksIndex - 1] : marksValues[marksIndex + 1];
     }
 
-    newValue = clamp(newValue, min, max); // todo might not be needed since input won't allow it to go outside
+    newValue = clamp(newValue, min, max);
 
     if (range) {
       const previousValue = newValue;
@@ -613,8 +607,6 @@ const SliderUnstyled = React.forwardRef(function SliderUnstyled(props, ref) {
         className={clsx(utilityClasses.track, trackProps.className)}
         style={{ ...trackStyle, ...trackProps.style }}
       />
-      {/* TODO possibly remove? Need to figure out how to handle name on real hidden range field, and what this is usually used for */}
-      <input value={values.join(',')} name={name} type="hidden" />
       {marks.map((mark, index) => {
         const percent = valueToPercent(mark.value, min, max);
         const style = axisProps[axis].offset(percent);
@@ -678,7 +670,7 @@ const SliderUnstyled = React.forwardRef(function SliderUnstyled(props, ref) {
           <React.Fragment key={index}>
             <input
               data-index={index}
-              aria-label={getAriaLabel ? getAriaLabel(index) : ariaLabel} // TODO figure out how to message in multi thumb mode
+              aria-label={getAriaLabel ? getAriaLabel(index) : ariaLabel}
               aria-labelledby={ariaLabelledby}
               aria-orientation={orientation}
               aria-valuemax={scale(max)}
@@ -689,7 +681,7 @@ const SliderUnstyled = React.forwardRef(function SliderUnstyled(props, ref) {
               }
               onFocus={handleFocus}
               onBlur={handleBlur}
-              name={name} // TODO this will have to be dynamic for multi thumb version?
+              name={name}
               type="range"
               min={props.min}
               max={props.max}
@@ -717,21 +709,21 @@ const SliderUnstyled = React.forwardRef(function SliderUnstyled(props, ref) {
                 theme,
               })}
             >
-    <Thumb
-      data-index={index}
-      onMouseOver={handleMouseOver}
-      onMouseLeave={handleMouseLeave}
-      {...thumbProps}
-      className={clsx(utilityClasses.thumb, thumbProps.className, {
-        [sliderUnstyledClasses['active']]: active === index,
-        [sliderUnstyledClasses['disabled']]: disabled,
-        [sliderUnstyledClasses['focusVisible']]: focusVisible === index,
-      })}
-      {...(!isHostComponent(Thumb) && {
-        styleProps: { ...stateAndProps, ...thumbProps.styleProps },
-        theme,
-      })}
-      style={{ ...style, ...thumbProps.style }}
+              <Thumb
+                data-index={index}
+                onMouseOver={handleMouseOver}
+                onMouseLeave={handleMouseLeave}
+                {...thumbProps}
+                className={clsx(utilityClasses.thumb, thumbProps.className, {
+                  [sliderUnstyledClasses['active']]: active === index,
+                  [sliderUnstyledClasses['disabled']]: disabled,
+                  [sliderUnstyledClasses['focusVisible']]: focusVisible === index,
+                })}
+                {...(!isHostComponent(Thumb) && {
+                  styleProps: { ...stateAndProps, ...thumbProps.styleProps },
+                  theme,
+                })}
+                style={{ ...style, ...thumbProps.style }}
               />
             </ValueLabelComponent>
           </React.Fragment>