Improve aria labelling of NumberField increment and decrement buttons (#1536)

devongovett · web-flow · commit f6d09d1c3b7b · 2021-02-02T10:53:04.000-08:00
diff --git a/packages/@react-aria/numberfield/intl/ar-AE.json b/packages/@react-aria/numberfield/intl/ar-AE.json
@@ -1,5 +1,5 @@
 {
-  "Decrement": "نقصان",
-  "Increment": "زيادة",
+  "decrease": "Decrease {fieldLabel}",
+  "increase": "Increase {fieldLabel}",
   "Number field": "Number field"
 }
diff --git a/packages/@react-aria/numberfield/intl/bg-BG.json b/packages/@react-aria/numberfield/intl/bg-BG.json
@@ -1,5 +1,5 @@
 {
-  "Decrement": "Стъпка на намаление",
-  "Increment": "Стъпка на увеличение",
+  "decrease": "Decrease {fieldLabel}",
+  "increase": "Increase {fieldLabel}",
   "Number field": "Number field"
 }
diff --git a/packages/@react-aria/numberfield/intl/cs-CZ.json b/packages/@react-aria/numberfield/intl/cs-CZ.json
@@ -1,5 +1,5 @@
 {
-  "Decrement": "Snížení",
-  "Increment": "Zvýšení",
+  "decrease": "Decrease {fieldLabel}",
+  "increase": "Increase {fieldLabel}",
   "Number field": "Number field"
 }
diff --git a/packages/@react-aria/numberfield/intl/da-DK.json b/packages/@react-aria/numberfield/intl/da-DK.json
@@ -1,5 +1,5 @@
 {
-  "Decrement": "Reduktion",
-  "Increment": "Forøgelse",
+  "decrease": "Decrease {fieldLabel}",
+  "increase": "Increase {fieldLabel}",
   "Number field": "Number field"
 }
diff --git a/packages/@react-aria/numberfield/intl/de-DE.json b/packages/@react-aria/numberfield/intl/de-DE.json
@@ -1,5 +1,5 @@
 {
-  "Decrement": "Verringern",
-  "Increment": "Erhöhen",
+  "decrease": "Decrease {fieldLabel}",
+  "increase": "Increase {fieldLabel}",
   "Number field": "Number field"
 }
diff --git a/packages/@react-aria/numberfield/intl/el-GR.json b/packages/@react-aria/numberfield/intl/el-GR.json
@@ -1,5 +1,5 @@
 {
-  "Decrement": "Μείωση",
-  "Increment": "Προσαύξηση",
+  "decrease": "Decrease {fieldLabel}",
+  "increase": "Increase {fieldLabel}",
   "Number field": "Number field"
 }
diff --git a/packages/@react-aria/numberfield/intl/en-US.json b/packages/@react-aria/numberfield/intl/en-US.json
@@ -1,5 +1,5 @@
 {
-  "Decrement": "Decrement",
-  "Increment": "Increment",
+  "decrease": "Decrease {fieldLabel}",
+  "increase": "Increase {fieldLabel}",
   "Number field": "Number field"
 }
diff --git a/packages/@react-aria/numberfield/intl/es-ES.json b/packages/@react-aria/numberfield/intl/es-ES.json
@@ -1,5 +1,5 @@
 {
-  "Decrement": "Decrecimiento",
-  "Increment": "Incremento",
+  "decrease": "Decrease {fieldLabel}",
+  "increase": "Increase {fieldLabel}",
   "Number field": "Number field"
 }
diff --git a/packages/@react-aria/numberfield/intl/et-EE.json b/packages/@react-aria/numberfield/intl/et-EE.json
@@ -1,5 +1,5 @@
 {
-  "Decrement": "Vähendamine",
-  "Increment": "Suurendamine",
+  "decrease": "Decrease {fieldLabel}",
+  "increase": "Increase {fieldLabel}",
   "Number field": "Number field"
 }
diff --git a/packages/@react-aria/numberfield/intl/fi-FI.json b/packages/@react-aria/numberfield/intl/fi-FI.json
@@ -1,5 +1,5 @@
 {
-  "Decrement": "Vähennys",
-  "Increment": "Lisäys",
+  "decrease": "Decrease {fieldLabel}",
+  "increase": "Increase {fieldLabel}",
   "Number field": "Number field"
 }
diff --git a/packages/@react-aria/numberfield/intl/fr-FR.json b/packages/@react-aria/numberfield/intl/fr-FR.json
@@ -1,5 +1,5 @@
 {
-  "Decrement": "Décrémenter",
-  "Increment": "Incrémenter",
+  "decrease": "Decrease {fieldLabel}",
+  "increase": "Increase {fieldLabel}",
   "Number field": "Number field"
 }
diff --git a/packages/@react-aria/numberfield/intl/he-IL.json b/packages/@react-aria/numberfield/intl/he-IL.json
@@ -1,5 +1,5 @@
 {
-  "Decrement": "הפחתה",
-  "Increment": "תוספת",
+  "decrease": "Decrease {fieldLabel}",
+  "increase": "Increase {fieldLabel}",
   "Number field": "Number field"
 }
diff --git a/packages/@react-aria/numberfield/intl/hr-HR.json b/packages/@react-aria/numberfield/intl/hr-HR.json
@@ -1,5 +1,5 @@
 {
-  "Decrement": "Smanjenje",
-  "Increment": "Povećanje",
+  "decrease": "Decrease {fieldLabel}",
+  "increase": "Increase {fieldLabel}",
   "Number field": "Number field"
 }
diff --git a/packages/@react-aria/numberfield/intl/hu-HU.json b/packages/@react-aria/numberfield/intl/hu-HU.json
@@ -1,5 +1,5 @@
 {
-  "Decrement": "Csökkentés",
-  "Increment": "Növelés",
+  "decrease": "Decrease {fieldLabel}",
+  "increase": "Increase {fieldLabel}",
   "Number field": "Number field"
 }
diff --git a/packages/@react-aria/numberfield/intl/it-IT.json b/packages/@react-aria/numberfield/intl/it-IT.json
@@ -1,5 +1,5 @@
 {
-  "Decrement": "Decrementa",
-  "Increment": "Incrementa",
+  "decrease": "Decrease {fieldLabel}",
+  "increase": "Increase {fieldLabel}",
   "Number field": "Number field"
 }
diff --git a/packages/@react-aria/numberfield/intl/ja-JP.json b/packages/@react-aria/numberfield/intl/ja-JP.json
@@ -1,5 +1,5 @@
 {
-  "Decrement": "減らす",
-  "Increment": "増やす",
+  "decrease": "Decrease {fieldLabel}",
+  "increase": "Increase {fieldLabel}",
   "Number field": "Number field"
 }
diff --git a/packages/@react-aria/numberfield/intl/ko-KR.json b/packages/@react-aria/numberfield/intl/ko-KR.json
@@ -1,5 +1,5 @@
 {
-  "Decrement": "감소",
-  "Increment": "증가",
+  "decrease": "Decrease {fieldLabel}",
+  "increase": "Increase {fieldLabel}",
   "Number field": "Number field"
 }
diff --git a/packages/@react-aria/numberfield/intl/lt-LT.json b/packages/@react-aria/numberfield/intl/lt-LT.json
@@ -1,5 +1,5 @@
 {
-  "Decrement": "Sumažėjimas",
-  "Increment": "Padidėjimas",
+  "decrease": "Decrease {fieldLabel}",
+  "increase": "Increase {fieldLabel}",
   "Number field": "Number field"
 }
diff --git a/packages/@react-aria/numberfield/intl/lv-LV.json b/packages/@react-aria/numberfield/intl/lv-LV.json
@@ -1,5 +1,5 @@
 {
-  "Decrement": "Samazinājums",
-  "Increment": "Palielinājums",
+  "decrease": "Decrease {fieldLabel}",
+  "increase": "Increase {fieldLabel}",
   "Number field": "Number field"
 }
diff --git a/packages/@react-aria/numberfield/intl/nb-NO.json b/packages/@react-aria/numberfield/intl/nb-NO.json
@@ -1,5 +1,5 @@
 {
-  "Decrement": "Reduser",
-  "Increment": "Øk",
+  "decrease": "Decrease {fieldLabel}",
+  "increase": "Increase {fieldLabel}",
   "Number field": "Number field"
 }
diff --git a/packages/@react-aria/numberfield/intl/nl-NL.json b/packages/@react-aria/numberfield/intl/nl-NL.json
@@ -1,5 +1,5 @@
 {
-  "Decrement": "Afname",
-  "Increment": "Toename",
+  "decrease": "Decrease {fieldLabel}",
+  "increase": "Increase {fieldLabel}",
   "Number field": "Number field"
 }
diff --git a/packages/@react-aria/numberfield/intl/pl-PL.json b/packages/@react-aria/numberfield/intl/pl-PL.json
@@ -1,5 +1,5 @@
 {
-  "Decrement": "Dekrementuj",
-  "Increment": "Inkrementuj",
+  "decrease": "Decrease {fieldLabel}",
+  "increase": "Increase {fieldLabel}",
   "Number field": "Number field"
 }
diff --git a/packages/@react-aria/numberfield/intl/pt-BR.json b/packages/@react-aria/numberfield/intl/pt-BR.json
@@ -1,5 +1,5 @@
 {
-  "Decrement": "Decrementar",
-  "Increment": "Incrementar",
+  "decrease": "Decrease {fieldLabel}",
+  "increase": "Increase {fieldLabel}",
   "Number field": "Number field"
 }
diff --git a/packages/@react-aria/numberfield/intl/ro-RO.json b/packages/@react-aria/numberfield/intl/ro-RO.json
@@ -1,5 +1,5 @@
 {
-  "Decrement": "Amortizare",
-  "Increment": "Creştere",
+  "decrease": "Decrease {fieldLabel}",
+  "increase": "Increase {fieldLabel}",
   "Number field": "Number field"
 }
diff --git a/packages/@react-aria/numberfield/intl/ru-RU.json b/packages/@react-aria/numberfield/intl/ru-RU.json
@@ -1,5 +1,5 @@
 {
-  "Decrement": "Уменьшить",
-  "Increment": "Увеличить",
+  "decrease": "Decrease {fieldLabel}",
+  "increase": "Increase {fieldLabel}",
   "Number field": "Number field"
 }
diff --git a/packages/@react-aria/numberfield/intl/sk-SK.json b/packages/@react-aria/numberfield/intl/sk-SK.json
@@ -1,5 +1,5 @@
 {
-  "Decrement": "Zníženie",
-  "Increment": "Prírastok",
+  "decrease": "Decrease {fieldLabel}",
+  "increase": "Increase {fieldLabel}",
   "Number field": "Number field"
 }
diff --git a/packages/@react-aria/numberfield/intl/sl-SI.json b/packages/@react-aria/numberfield/intl/sl-SI.json
@@ -1,5 +1,5 @@
 {
-  "Decrement": "Zmanjšanje",
-  "Increment": "Povečanje",
+  "decrease": "Decrease {fieldLabel}",
+  "increase": "Increase {fieldLabel}",
   "Number field": "Number field"
 }
diff --git a/packages/@react-aria/numberfield/intl/sr-SP.json b/packages/@react-aria/numberfield/intl/sr-SP.json
@@ -1,5 +1,5 @@
 {
-  "Decrement": "Smanjenje",
-  "Increment": "Povećanje",
+  "decrease": "Decrease {fieldLabel}",
+  "increase": "Increase {fieldLabel}",
   "Number field": "Number field"
 }
diff --git a/packages/@react-aria/numberfield/intl/sv-SE.json b/packages/@react-aria/numberfield/intl/sv-SE.json
@@ -1,5 +1,5 @@
 {
-  "Decrement": "Minska",
-  "Increment": "Öka",
+  "decrease": "Decrease {fieldLabel}",
+  "increase": "Increase {fieldLabel}",
   "Number field": "Number field"
 }
diff --git a/packages/@react-aria/numberfield/intl/tr-TR.json b/packages/@react-aria/numberfield/intl/tr-TR.json
@@ -1,5 +1,5 @@
 {
-  "Decrement": "Azalış",
-  "Increment": "Artış",
+  "decrease": "Decrease {fieldLabel}",
+  "increase": "Increase {fieldLabel}",
   "Number field": "Number field"
 }
diff --git a/packages/@react-aria/numberfield/intl/uk-UA.json b/packages/@react-aria/numberfield/intl/uk-UA.json
@@ -1,5 +1,5 @@
 {
-  "Decrement": "Зменшення",
-  "Increment": "Збільшення",
+  "decrease": "Decrease {fieldLabel}",
+  "increase": "Increase {fieldLabel}",
   "Number field": "Number field"
 }
diff --git a/packages/@react-aria/numberfield/intl/zh-CN.json b/packages/@react-aria/numberfield/intl/zh-CN.json
@@ -1,5 +1,5 @@
 {
-  "Decrement": "递减",
-  "Increment": "递增",
+  "decrease": "Decrease {fieldLabel}",
+  "increase": "Increase {fieldLabel}",
   "Number field": "Number field"
 }
diff --git a/packages/@react-aria/numberfield/intl/zh-TW.json b/packages/@react-aria/numberfield/intl/zh-TW.json
@@ -1,5 +1,5 @@
 {
-  "Decrement": "減值",
-  "Increment": "增值",
+  "decrease": "Decrease {fieldLabel}",
+  "increase": "Increase {fieldLabel}",
   "Number field": "Number field"
 }
diff --git a/packages/@react-aria/numberfield/src/useNumberField.ts b/packages/@react-aria/numberfield/src/useNumberField.ts
@@ -57,6 +57,7 @@ function supportsNativeBeforeInputEvent() {
 
 export function useNumberField(props: AriaNumberFieldProps, state: NumberFieldState, inputRef: RefObject<HTMLInputElement>): NumberFieldAria {
   let {
+    id,
     decrementAriaLabel,
     incrementAriaLabel,
     isDisabled,
@@ -81,7 +82,7 @@ export function useNumberField(props: AriaNumberFieldProps, state: NumberFieldSt
 
   const formatMessage = useMessageFormatter(intlMessages);
 
-  let inputId = useId();
+  let inputId = useId(id);
 
   let {focusProps} = useFocus({
     onBlur: () => {
@@ -110,44 +111,6 @@ export function useNumberField(props: AriaNumberFieldProps, state: NumberFieldSt
     }
   );
 
-  let onButtonPressStart = (e) => {
-    // If focus is already on the input, keep it there so we don't hide the
-    // software keyboard when tapping the increment/decrement buttons.
-    if (document.activeElement === inputRef.current) {
-      return;
-    }
-
-    // Otherwise, when using a mouse, move focus to the input.
-    // On touch, or with a screen reader, focus the button so that the software
-    // keyboard does not appear and the screen reader cursor is not moved off the button.
-    if (e.pointerType === 'mouse') {
-      inputRef.current.focus();
-    } else {
-      e.target.focus();
-    }
-  };
-
-  incrementAriaLabel = incrementAriaLabel || formatMessage('Increment');
-  decrementAriaLabel = decrementAriaLabel || formatMessage('Decrement');
-
-  let incrementButtonProps: AriaButtonProps = mergeProps(incButtonProps, {
-    'aria-label': incrementAriaLabel,
-    'aria-controls': inputId,
-    excludeFromTabOrder: true,
-    preventFocusOnPress: true,
-    isDisabled: !state.canIncrement,
-    onPressStart: onButtonPressStart
-  });
-
-  let decrementButtonProps: AriaButtonProps = mergeProps(decButtonProps, {
-    'aria-label': decrementAriaLabel,
-    'aria-controls': inputId,
-    excludeFromTabOrder: true,
-    preventFocusOnPress: true,
-    isDisabled: !state.canDecrement,
-    onPressStart: onButtonPressStart
-  });
-
   let onWheel = useCallback((e) => {
     // If the input isn't supposed to receive input, do nothing.
     // If the ctrlKey is pressed, this is a zoom event, do nothing.
@@ -345,6 +308,64 @@ export function useNumberField(props: AriaNumberFieldProps, state: NumberFieldSt
     }
   );
 
+  let onButtonPressStart = (e) => {
+    // If focus is already on the input, keep it there so we don't hide the
+    // software keyboard when tapping the increment/decrement buttons.
+    if (document.activeElement === inputRef.current) {
+      return;
+    }
+
+    // Otherwise, when using a mouse, move focus to the input.
+    // On touch, or with a screen reader, focus the button so that the software
+    // keyboard does not appear and the screen reader cursor is not moved off the button.
+    if (e.pointerType === 'mouse') {
+      inputRef.current.focus();
+    } else {
+      e.target.focus();
+    }
+  };
+
+  // Determine the label for the increment and decrement buttons. There are 4 cases:
+  //
+  // 1. With a visible label that is a string: aria-label: `Increase ${props.label}`
+  // 2. With a visible label that is JSX: aria-label: 'Increase', aria-labelledby: '${incrementId} ${labelId}'
+  // 3. With an aria-label: aria-label: `Increase ${props['aria-label']}`
+  // 4. With an aria-labelledby: aria-label: 'Increase', aria-labelledby: `${incrementId} ${props['aria-labelledby']}`
+  //
+  // (1) and (2) could possibly be combined and both use aria-labelledby. However, placing the label in
+  // the aria-label string rather than using aria-labelledby gives more flexibility to translators to change
+  // the order or add additional words around the label if needed.
+  let fieldLabel = props['aria-label'] || (typeof props.label === 'string' ? props.label : '');
+  let ariaLabelledby: string;
+  if (!fieldLabel) {
+    ariaLabelledby = props.label != null ? labelProps.id : props['aria-labelledby'];
+  }
+
+  let incrementId = useId();
+  let decrementId = useId();
+
+  let incrementButtonProps: AriaButtonProps = mergeProps(incButtonProps, {
+    'aria-label': incrementAriaLabel || formatMessage('increase', {fieldLabel}).trim(),
+    id: ariaLabelledby && !incrementAriaLabel ? incrementId : null,
+    'aria-labelledby': ariaLabelledby && !incrementAriaLabel ? `${incrementId} ${ariaLabelledby}` : null,
+    'aria-controls': inputId,
+    excludeFromTabOrder: true,
+    preventFocusOnPress: true,
+    isDisabled: !state.canIncrement,
+    onPressStart: onButtonPressStart
+  });
+
+  let decrementButtonProps: AriaButtonProps = mergeProps(decButtonProps, {
+    'aria-label': decrementAriaLabel || formatMessage('decrease', {fieldLabel}).trim(),
+    id: ariaLabelledby && !decrementAriaLabel ? decrementId : null,
+    'aria-labelledby': ariaLabelledby && !decrementAriaLabel ? `${decrementId} ${ariaLabelledby}` : null,
+    'aria-controls': inputId,
+    excludeFromTabOrder: true,
+    preventFocusOnPress: true,
+    isDisabled: !state.canDecrement,
+    onPressStart: onButtonPressStart
+  });
+
   return {
     groupProps: {
       role: 'group',
diff --git a/packages/@react-spectrum/numberfield/stories/NumberField.stories.tsx b/packages/@react-spectrum/numberfield/stories/NumberField.stories.tsx
diff --git a/packages/@react-spectrum/numberfield/test/NumberField.test.js b/packages/@react-spectrum/numberfield/test/NumberField.test.js

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`{`
`2`		`- "Decrement": "نقصان",`
`3`		`- "Increment": "زيادة",`
	`2`	`+ "decrease": "Decrease {fieldLabel}",`
	`3`	`+ "increase": "Increase {fieldLabel}",`
`4`	`4`	`"Number field": "Number field"`
`5`	`5`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`{`
`2`		`- "Decrement": "Стъпка на намаление",`
`3`		`- "Increment": "Стъпка на увеличение",`
	`2`	`+ "decrease": "Decrease {fieldLabel}",`
	`3`	`+ "increase": "Increase {fieldLabel}",`
`4`	`4`	`"Number field": "Number field"`
`5`	`5`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`{`
`2`		`- "Decrement": "Snížení",`
`3`		`- "Increment": "Zvýšení",`
	`2`	`+ "decrease": "Decrease {fieldLabel}",`
	`3`	`+ "increase": "Increase {fieldLabel}",`
`4`	`4`	`"Number field": "Number field"`
`5`	`5`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`{`
`2`		`- "Decrement": "Reduktion",`
`3`		`- "Increment": "Forøgelse",`
	`2`	`+ "decrease": "Decrease {fieldLabel}",`
	`3`	`+ "increase": "Increase {fieldLabel}",`
`4`	`4`	`"Number field": "Number field"`
`5`	`5`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`{`
`2`		`- "Decrement": "Verringern",`
`3`		`- "Increment": "Erhöhen",`
	`2`	`+ "decrease": "Decrease {fieldLabel}",`
	`3`	`+ "increase": "Increase {fieldLabel}",`
`4`	`4`	`"Number field": "Number field"`
`5`	`5`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`{`
`2`		`- "Decrement": "Μείωση",`
`3`		`- "Increment": "Προσαύξηση",`
	`2`	`+ "decrease": "Decrease {fieldLabel}",`
	`3`	`+ "increase": "Increase {fieldLabel}",`
`4`	`4`	`"Number field": "Number field"`
`5`	`5`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`{`
`2`		`- "Decrement": "Decrement",`
`3`		`- "Increment": "Increment",`
	`2`	`+ "decrease": "Decrease {fieldLabel}",`
	`3`	`+ "increase": "Increase {fieldLabel}",`
`4`	`4`	`"Number field": "Number field"`
`5`	`5`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`{`
`2`		`- "Decrement": "Decrecimiento",`
`3`		`- "Increment": "Incremento",`
	`2`	`+ "decrease": "Decrease {fieldLabel}",`
	`3`	`+ "increase": "Increase {fieldLabel}",`
`4`	`4`	`"Number field": "Number field"`
`5`	`5`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`{`
`2`		`- "Decrement": "Vähendamine",`
`3`		`- "Increment": "Suurendamine",`
	`2`	`+ "decrease": "Decrease {fieldLabel}",`
	`3`	`+ "increase": "Increase {fieldLabel}",`
`4`	`4`	`"Number field": "Number field"`
`5`	`5`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`{`
`2`		`- "Decrement": "Vähennys",`
`3`		`- "Increment": "Lisäys",`
	`2`	`+ "decrease": "Decrease {fieldLabel}",`
	`3`	`+ "increase": "Increase {fieldLabel}",`
`4`	`4`	`"Number field": "Number field"`
`5`	`5`	`}`