feat: Add aria attributes to RangeInput

.gitignore

@@ -68,6 +68,7 @@ lib/
 
 # editor config
 .vscode
+.idea
 
 # happo output directory
 .out

src/components/forms/RangeInput/RangeInput.test.tsx

@@ -17,6 +17,9 @@ describe('RangeInput component', () => {
     expect(rangeElement).toBeInTheDocument()
     expect(rangeElement).toHaveAttribute('id', 'range-slider-id')
     expect(rangeElement).toHaveAttribute('name', 'rangeName')
+    expect(rangeElement).toHaveAttribute('aria-valuemin', '0')
+    expect(rangeElement).toHaveAttribute('aria-valuemax', '100')
+    expect(rangeElement).toHaveAttribute('aria-valuenow', '50')
     expect(rangeElement).toHaveClass('usa-range')
     expect(rangeElement).toHaveClass('additional-class')
   })
@@ -26,16 +29,22 @@ describe('RangeInput component', () => {
       <RangeInput
         id="range-slider-id"
         name="rangeName"
-        min={0}
+        min={-15}
         max={60}
         step={15}
         defaultValue={45}
       />
     )
-    expect(queryByTestId('range')).toHaveAttribute('min', '0')
-    expect(queryByTestId('range')).toHaveAttribute('max', '60')
-    expect(queryByTestId('range')).toHaveAttribute('step', '15')
-    expect(queryByTestId('range')).toHaveAttribute('value', '45')
+
+    const rangeElement = queryByTestId('range')
+
+    expect(rangeElement).toHaveAttribute('min', '-15')
+    expect(rangeElement).toHaveAttribute('max', '60')
+    expect(rangeElement).toHaveAttribute('aria-valuemin', '-15')
+    expect(rangeElement).toHaveAttribute('aria-valuemax', '60')
+    expect(rangeElement).toHaveAttribute('aria-valuenow', '45')
+    expect(rangeElement).toHaveAttribute('step', '15')
+    expect(rangeElement).toHaveAttribute('value', '45')
   })
 
   it('renders with step attribute set to value any', () => {

src/components/forms/RangeInput/RangeInput.tsx

@@ -4,6 +4,8 @@ import classnames from 'classnames'
 interface RangeInputProps {
   id: string
   name: string
+  min?: number
+  max?: number
   inputRef?:
     | string
     | ((instance: HTMLInputElement | null) => void)
@@ -17,9 +19,30 @@ export const RangeInput = ({
   inputRef,
   ...inputProps
 }: RangeInputProps & JSX.IntrinsicElements['input']): React.ReactElement => {
-  // Range defaults to min = 0, max = 100, step = 1, and value = (max/2) if not specified.
-
   const classes = classnames('usa-range', className)
+  // input range defaults to min = 0, max = 100, step = 1, and value = (max/2) if not specified.
+  const defaultMin = 0
+  const defaultMax = 100
+  const { min, max, defaultValue } = inputProps
+  const ariaMin = min || defaultMin
+  const ariaMax = max || defaultMax
+  const calculatedDefaultValue =
+    defaultValue ||
+    (ariaMax < ariaMin ? ariaMin : ariaMin + ariaMax - ariaMax / 2)
+  const convertValueType = (
+    value: string | number | readonly string[]
+  ): number | undefined => {
+    if (typeof value === 'number' || typeof value === 'string') {
+      return Number(value)
+    }
+    return undefined
+  }
+  const [ariaValue, setAriaValue] = React.useState<number | undefined>(
+    convertValueType(calculatedDefaultValue)
+  )
+  const onValueChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
+    setAriaValue(e.target.valueAsNumber)
+  }
 
   return (
     <input
@@ -28,6 +51,10 @@ export const RangeInput = ({
       ref={inputRef}
       type="range"
       {...inputProps}
+      aria-valuemin={ariaMin}
+      aria-valuemax={ariaMax}
+      aria-valuenow={ariaValue}
+      onChange={(e) => onValueChange(e)}
     />
   )
 }