fix(#1231) fix(#1070) A11y: add minimum/maximum labels, use output for displayValue

packages/@react-aria/slider/intl/ar-AE.json

@@ -0,0 +1,4 @@
+{
+  "maximum": "الحد الأقصى",
+  "minimum": "الحد الأدنى"
+}

packages/@react-aria/slider/intl/bg-BG.json

@@ -0,0 +1,4 @@
+{
+  "maximum": "Максимум",
+  "minimum": "Минимум"
+}

packages/@react-aria/slider/intl/cs-CZ.json

@@ -0,0 +1,4 @@
+{
+  "maximum": "Maximum",
+  "minimum": "Minimální"
+}

packages/@react-aria/slider/intl/da-DK.json

@@ -0,0 +1,4 @@
+{
+  "maximum": "Maksimum",
+  "minimum": "Minimum"
+}

packages/@react-aria/slider/intl/de-DE.json

@@ -0,0 +1,4 @@
+{
+  "maximum": "Maximal",
+  "minimum": "Minimum"
+}

packages/@react-aria/slider/intl/el-GR.json

@@ -0,0 +1,4 @@
+{
+  "maximum": "Το μέγιστο",
+  "minimum": "Ελάχιστο"
+}

packages/@react-aria/slider/intl/en-US.json

@@ -0,0 +1,4 @@
+{
+  "minimum": "Minimum",
+  "maximum": "Maximum"
+}

packages/@react-aria/slider/intl/es-ES.json

@@ -0,0 +1,4 @@
+{
+  "maximum": "Máximo",
+  "minimum": "Mínimo"
+}

packages/@react-aria/slider/intl/et-EE.json

@@ -0,0 +1,4 @@
+{
+  "maximum": "Maksimaalne",
+  "minimum": "Minimaalne"
+}

packages/@react-aria/slider/intl/fi-FI.json

@@ -0,0 +1,4 @@
+{
+  "maximum": "Maksimi",
+  "minimum": "Minimi"
+}

packages/@react-aria/slider/intl/fr-FR.json

@@ -0,0 +1,4 @@
+{
+  "maximum": "Maximum",
+  "minimum": "Minimum"
+}

packages/@react-aria/slider/intl/he-IL.json

@@ -0,0 +1,4 @@
+{
+  "maximum": "מַקסִימוּם",
+  "minimum": "מִינִימוּם"
+}

packages/@react-aria/slider/intl/hu-HU.json

@@ -0,0 +1,4 @@
+{
+  "maximum": "Maximális",
+  "minimum": "Minimális"
+}

packages/@react-aria/slider/intl/it-IT.json

@@ -0,0 +1,4 @@
+{
+  "maximum": "Massimo",
+  "minimum": "Minimo"
+}

packages/@react-aria/slider/intl/ja-JP.json

@@ -0,0 +1,4 @@
+{
+  "maximum": "最大",
+  "minimum": "最小"
+}

packages/@react-aria/slider/intl/ko-KR.json

@@ -0,0 +1,4 @@
+{
+  "maximum": "최대",
+  "minimum": "최소"
+}

packages/@react-aria/slider/intl/lt-LT.json

@@ -0,0 +1,4 @@
+{
+  "maximum": "Maksimalus",
+  "minimum": "Minimumas"
+}

packages/@react-aria/slider/intl/lv-LV.json

@@ -0,0 +1,4 @@
+{
+  "maximum": "Maksimums",
+  "minimum": "Minimālais"
+}

packages/@react-aria/slider/intl/nb-NO.json

@@ -0,0 +1,4 @@
+{
+  "maximum": "Maksimum",
+  "minimum": "Minimum"
+}

packages/@react-aria/slider/intl/nl-NL.json

@@ -0,0 +1,4 @@
+{
+  "maximum": "Maximaal",
+  "minimum": "Minimum"
+}

packages/@react-aria/slider/intl/pl-PL.json

@@ -0,0 +1,4 @@
+{
+  "maximum": "Maksimum",
+  "minimum": "Minimum"
+}

packages/@react-aria/slider/intl/pt-BR.json

@@ -0,0 +1,4 @@
+{
+  "maximum": "Máximo",
+  "minimum": "Mínimo"
+}

packages/@react-aria/slider/intl/ro-RO.json

@@ -0,0 +1,4 @@
+{
+  "maximum": "Maxim",
+  "minimum": "Minim"
+}

packages/@react-aria/slider/intl/ru-RU.json

@@ -0,0 +1,4 @@
+{
+  "maximum": "Максимум",
+  "minimum": "Минимум"
+}

packages/@react-aria/slider/intl/sk-SK.json

@@ -0,0 +1,4 @@
+{
+  "maximum": "Maximum",
+  "minimum": "Minimálne"
+}

packages/@react-aria/slider/intl/sl-SI.json

@@ -0,0 +1,4 @@
+{
+  "maximum": "Največ",
+  "minimum": "Najmanj"
+}

packages/@react-aria/slider/intl/sr-SP.json

@@ -0,0 +1,4 @@
+{
+  "maximum": "Максимум",
+  "minimum": "Минимум"
+}

packages/@react-aria/slider/intl/sv-SE.json

@@ -0,0 +1,4 @@
+{
+  "maximum": "Maximal",
+  "minimum": "Minimum"
+}

packages/@react-aria/slider/intl/tr-TR.json

@@ -0,0 +1,4 @@
+{
+  "maximum": "Maksimum",
+  "minimum": "Minimum"
+}

packages/@react-aria/slider/intl/uk-UA.json

@@ -0,0 +1,4 @@
+{
+  "maximum": "Максимум",
+  "minimum": "Мінімум"
+}

packages/@react-aria/slider/intl/zh-CN.json

@@ -0,0 +1,4 @@
+{
+  "maximum": "最大",
+  "minimum": "最小"
+}

packages/@react-aria/slider/intl/zh-TW.json

@@ -0,0 +1,4 @@
+{
+  "maximum": "最大值",
+  "minimum": "最小值"
+}

packages/@react-aria/slider/src/useSliderThumb.ts

@@ -1,11 +1,13 @@
 import {clamp, focusWithoutScrolling, mergeProps, useGlobalListeners} from '@react-aria/utils';
+// @ts-ignore
+import intlMessages from '../intl/*.json';
 import React, {ChangeEvent, HTMLAttributes, useCallback, useEffect, useRef} from 'react';
 import {sliderIds} from './utils';
 import {SliderState} from '@react-stately/slider';
 import {SliderThumbProps} from '@react-types/slider';
 import {useFocusable} from '@react-aria/focus';
 import {useLabel} from '@react-aria/label';
-import {useLocale} from '@react-aria/i18n';
+import {useLocale, useMessageFormatter} from '@react-aria/i18n';
 import {useMove} from '@react-aria/interactions';
 
 interface SliderThumbAria {
@@ -40,9 +42,20 @@ export function useSliderThumb(
     isDisabled,
     validationState,
     trackRef,
-    inputRef
+    inputRef,
+    'aria-label': ariaLabel
   } = opts;
 
+  // Provide minimum and maximum aria-label when there are more than one slider thumb.
+  let formatMessage = useMessageFormatter(intlMessages);
+  if (state.values.length === 2 && !ariaLabel) {
+    if (index === 0) {
+      ariaLabel = formatMessage('minimum');
+    } else if (index === 1) {
+      ariaLabel = formatMessage('maximum');
+    }
+  }
+
   let isVertical = opts.orientation === 'vertical';
 
   let {direction} = useLocale();
@@ -51,6 +64,7 @@ export function useSliderThumb(
   let labelId = sliderIds.get(state);
   const {labelProps, fieldProps} = useLabel({
     ...opts,
+    'aria-label': ariaLabel,
     'aria-labelledby': `${labelId} ${opts['aria-labelledby'] ?? ''}`.trim()
   });
 

packages/@react-aria/slider/stories/StoryMultiSlider.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import {SliderProps, SliderThumbProps} from '@react-types/slider';
 import {SliderState, useSliderState} from '@react-stately/slider';
 import styles from './story-slider.css';
+import {usePress} from '@react-aria/interactions';
 import {useSlider, useSliderThumb} from '@react-aria/slider';
 import {VisuallyHidden} from '@react-aria/visually-hidden';
 
@@ -25,11 +26,32 @@ export function StoryMultiSlider(props: StoryMultiSliderProps) {
     throw new Error('You must have the same number of StoryThumb as the number of values in `defaultValue` or `value`.');
   }
 
+  // Pressing the displayValue should focus the corresponding input.
+  let {pressProps: outputPressProps} = usePress({
+    onPress: (e) => e.target.ownerDocument && e.target.ownerDocument.getElementById(e.target.getAttribute('for')).focus()
+  });
+
   return (
     <div {...containerProps} className={styles.slider}>
       <div className={styles.sliderLabel}>
-        {props.label && <label {...labelProps} className={styles.label}>{props.label}</label>}
-        <div className={styles.value}>{JSON.stringify(state.values)}</div>
+        {props.label && <label {...labelProps} htmlFor={`${containerProps.id}-thumb-0`} className={styles.label}>{props.label}</label>}
+        <div className={styles.value}>
+          [
+          {
+            state.values.map((value, index) => (
+              <output
+                key={`${containerProps.id}-output-${index}`}
+                {...outputPressProps}
+                aria-live="off"
+                aria-labelledby={`${(props.label ? labelProps.id : containerProps.id)} ${containerProps.id}-thumb-${index}`}
+                htmlFor={`${containerProps.id}-thumb-${index}`}>
+                {value}
+                {index < state.values.length - 1 && ','}
+              </output>
+            ))
+          }
+          ]
+        </div>
       </div>
       {
         // We make rail and all thumbs children of the trackRef.  That means dragging on the thumb
@@ -40,6 +62,7 @@ export function StoryMultiSlider(props: StoryMultiSliderProps) {
         <div className={styles.rail} />
         {React.Children.map(children, ((child, index) =>
           React.cloneElement(child as React.ReactElement, {
+            id: `${containerProps.id}-thumb-${index}`,
             __context: {
               sliderProps: props,
               state,
@@ -68,12 +91,13 @@ export function StoryThumb(props: StoryThumbProps) {
     throw new Error('Cannot use StoryThumb outside of a StoryMultiSlider!');
   }
 
-  const {label, isDisabled} = props;
+  const {label, isDisabled, id} = props;
   const context = (props as any).__context as SliderStateContext;
   const {index, state, sliderProps} = context;
   const inputRef = React.useRef<HTMLInputElement>(null);
   const {inputProps, thumbProps, labelProps} = useSliderThumb({
     index,
+    id,
     ...props,
     isDisabled: sliderProps.isDisabled || props.isDisabled,
     trackRef: context.trackRef,

packages/@react-aria/slider/stories/StoryRangeSlider.tsx

@@ -2,22 +2,21 @@ import {FocusRing} from '@react-aria/focus';
 import React from 'react';
 import {SliderProps} from '@react-types/slider';
 import styles from './story-slider.css';
+import {usePress} from '@react-aria/interactions';
 import {useSlider, useSliderThumb} from '@react-aria/slider';
 import {useSliderState} from '@react-stately/slider';
 import {VisuallyHidden} from '@react-aria/visually-hidden';
 
 
 interface StoryRangeSliderProps extends SliderProps {
-  minLabel?: string,
-  maxLabel?: string,
   showTip?: boolean
 }
 
 export function StoryRangeSlider(props: StoryRangeSliderProps) {
-  const {minLabel, maxLabel} = props;
   const trackRef = React.useRef<HTMLDivElement>(null);
   const minInputRef = React.useRef<HTMLInputElement>(null);
   const maxInputRef = React.useRef<HTMLInputElement>(null);
+  const inputRefs = [minInputRef, maxInputRef];
   const state = useSliderState(props);
 
   if (state.values.length !== 2) {
@@ -30,28 +29,43 @@ export function StoryRangeSlider(props: StoryRangeSliderProps) {
 
   const {thumbProps: minThumbProps, inputProps: minInputProps} = useSliderThumb({
     index: 0,
-    'aria-label': minLabel ?? 'Minimum',
     isDisabled: props.isDisabled,
     trackRef,
     inputRef: minInputRef
   }, state);
 
   const {thumbProps: maxThumbProps, inputProps: maxInputProps} = useSliderThumb({
     index: 1,
-    'aria-label': maxLabel ?? 'Maximum',
     isDisabled: props.isDisabled,
     trackRef,
     inputRef: maxInputRef
   }, state);
 
+  // Pressing the displayValue should focus the corresponding input.
+  let {pressProps: outputPressProps} = usePress({
+    onPress: (e) => inputRefs.find(inputRef => inputRef.current.id === e.target.getAttribute('for')).current.focus()
+  });
+
   return (
     <div {...containerProps} className={styles.slider}>
       <div className={styles.sliderLabel}>
-        {props.label && <label {...labelProps} className={styles.label}>{props.label}</label>}
+        {props.label && <label {...labelProps} htmlFor={minInputProps.id} className={styles.label}>{props.label}</label>}
         <div className={styles.value}>
-          {state.getThumbValueLabel(0)}
+          <output
+            {...outputPressProps}
+            aria-live="off"
+            aria-labelledby={`${props.label ? labelProps.id : containerProps.id} ${minInputProps.id}`}
+            htmlFor={minInputProps.id}>
+            {state.getThumbValueLabel(0)}
+          </output>
           {' to '}
-          {state.getThumbValueLabel(1)}
+          <output
+            {...outputPressProps}
+            aria-live="off"
+            aria-labelledby={`${props.label ? labelProps.id : containerProps.id} ${maxInputProps.id}`}
+            htmlFor={maxInputProps.id}>
+            {state.getThumbValueLabel(1)}
+          </output>
         </div>
       </div>
       <div className={styles.trackContainer}>