ColorArea: remove aria-roledescription on iOS/Android (#2547)

* ColorArea: remove aria-roledescription on iOS/Android

To better reflect behavior of slider inputs with mobile screen readers on iOS and Android, each input should be labeled by its individual channel name and we should remove aria-roledescription so the input is identified simply as a slider control.

* ColorArea: change aria-valuetext for iOS/Android

On iOS/Android, the aria-valuetext for each slider within the ColorArea control should just be the value for that channel, and need not include the value for the second channel. The value for all three channels is included as the title attribute.

* ColorArea: include channel name in aria-valuetext for iOS/Android

Author: majornista

packages/@react-aria/color/src/useColorArea.ts

@@ -12,7 +12,7 @@
 
 import {AriaColorAreaProps} from '@react-types/color';
 import {ColorAreaState} from '@react-stately/color';
-import {focusWithoutScrolling, mergeProps, useGlobalListeners, useLabels} from '@react-aria/utils';
+import {focusWithoutScrolling, isAndroid, isIOS, mergeProps, useGlobalListeners, useLabels} from '@react-aria/utils';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {MessageDictionary} from '@internationalized/message';
@@ -272,15 +272,16 @@ export function useColorArea(props: AriaColorAreaProps, state: ColorAreaState, i
       })
   }, keyboardProps, movePropsThumb);
 
+  let isMobile = isIOS() || isAndroid();
 
   let xInputLabellingProps = useLabels({
     ...props,
-    'aria-label': `${state.value.getChannelName(xChannel, locale)} / ${state.value.getChannelName(yChannel, locale)}`
+    'aria-label': isMobile  ? state.value.getChannelName(xChannel, locale) : `${state.value.getChannelName(xChannel, locale)} / ${state.value.getChannelName(yChannel, locale)}`
   });
 
   let yInputLabellingProps = useLabels({
     ...props,
-    'aria-label': `${state.value.getChannelName(xChannel, locale)} / ${state.value.getChannelName(yChannel, locale)}`
+    'aria-label': isMobile ? state.value.getChannelName(yChannel, locale) : `${state.value.getChannelName(xChannel, locale)} / ${state.value.getChannelName(yChannel, locale)}`
   });
 
   let colorAriaLabellingProps = useLabels(props);
@@ -291,7 +292,7 @@ export function useColorArea(props: AriaColorAreaProps, state: ColorAreaState, i
     `${state.value.getChannelName('blue', locale)}: ${state.value.formatChannelValue('blue', locale)}`
   ].join(', ');
 
-  let ariaRoleDescription = messages.getStringForLocale('twoDimensionalSlider', locale);
+  let ariaRoleDescription = isMobile ? null : messages.getStringForLocale('twoDimensionalSlider', locale);
 
   let {visuallyHiddenProps} = useVisuallyHidden({style: {
     opacity: '0.0001',
@@ -318,10 +319,10 @@ export function useColorArea(props: AriaColorAreaProps, state: ColorAreaState, i
       max: state.value.getChannelRange(xChannel).maxValue,
       step: xChannelStep,
       'aria-roledescription': ariaRoleDescription,
-      'aria-valuetext': [
+      'aria-valuetext': (isMobile ? `${state.value.getChannelName(xChannel, locale)}: ${state.value.formatChannelValue(xChannel, locale)}` : [
         `${state.value.getChannelName(xChannel, locale)}: ${state.value.formatChannelValue(xChannel, locale)}`,
         `${state.value.getChannelName(yChannel, locale)}: ${state.value.formatChannelValue(yChannel, locale)}`
-      ].join(', '),
+      ].join(', ')),
       title: getValueTitle(),
       disabled: isDisabled,
       value: state.value.getChannelValue(xChannel),
@@ -338,10 +339,10 @@ export function useColorArea(props: AriaColorAreaProps, state: ColorAreaState, i
       max: state.value.getChannelRange(yChannel).maxValue,
       step: yChannelStep,
       'aria-roledescription': ariaRoleDescription,
-      'aria-valuetext': [
+      'aria-valuetext': (isMobile ? `${state.value.getChannelName(yChannel, locale)}: ${state.value.formatChannelValue(yChannel, locale)}` : [
         `${state.value.getChannelName(yChannel, locale)}: ${state.value.formatChannelValue(yChannel, locale)}`,
         `${state.value.getChannelName(xChannel, locale)}: ${state.value.formatChannelValue(xChannel, locale)}`
-      ].join(', '),
+      ].join(', ')),
       'aria-orientation': 'vertical',
       title: getValueTitle(),
       disabled: isDisabled,