From 3256b4f23643b4066334beda481682056b3ffb7b Mon Sep 17 00:00:00 2001 From: Michael Jordan Date: Thu, 11 Nov 2021 11:15:27 -0500 Subject: [PATCH 1/3] 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. --- packages/@react-aria/color/src/useColorArea.ts | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/@react-aria/color/src/useColorArea.ts b/packages/@react-aria/color/src/useColorArea.ts index 9dcb821ec21..fd5bb272e34 100644 --- a/packages/@react-aria/color/src/useColorArea.ts +++ b/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', From d44087de9c478406a43427141d5b9f75126617cb Mon Sep 17 00:00:00 2001 From: Michael Jordan Date: Thu, 11 Nov 2021 12:12:07 -0500 Subject: [PATCH 2/3] 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. --- packages/@react-aria/color/src/useColorArea.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/@react-aria/color/src/useColorArea.ts b/packages/@react-aria/color/src/useColorArea.ts index fd5bb272e34..ff2276a4b6a 100644 --- a/packages/@react-aria/color/src/useColorArea.ts +++ b/packages/@react-aria/color/src/useColorArea.ts @@ -319,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.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), @@ -339,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.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, From 967edb1559fff010f4ce6873e54ae2b3b5db7150 Mon Sep 17 00:00:00 2001 From: Michael Jordan Date: Thu, 11 Nov 2021 12:37:24 -0500 Subject: [PATCH 3/3] ColorArea: include channel name in aria-valuetext for iOS/Android --- packages/@react-aria/color/src/useColorArea.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/@react-aria/color/src/useColorArea.ts b/packages/@react-aria/color/src/useColorArea.ts index ff2276a4b6a..46933fececb 100644 --- a/packages/@react-aria/color/src/useColorArea.ts +++ b/packages/@react-aria/color/src/useColorArea.ts @@ -319,7 +319,7 @@ export function useColorArea(props: AriaColorAreaProps, state: ColorAreaState, i max: state.value.getChannelRange(xChannel).maxValue, step: xChannelStep, 'aria-roledescription': ariaRoleDescription, - 'aria-valuetext': (isMobile ? state.value.formatChannelValue(xChannel, locale) : [ + '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(', ')), @@ -339,7 +339,7 @@ export function useColorArea(props: AriaColorAreaProps, state: ColorAreaState, i max: state.value.getChannelRange(yChannel).maxValue, step: yChannelStep, 'aria-roledescription': ariaRoleDescription, - 'aria-valuetext': (isMobile ? state.value.formatChannelValue(yChannel, locale) : [ + '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(', ')),