Majornista issue 1281 hex color field a11y (#1495)

* fix(#1281): HexColorField accessibility updates

* fix(#1281): Color: remove WCAG compliance utility method

* fix(#1285): remove unused Color APIs

* Remove popover example

Co-authored-by: Michael Jordan <[email protected]>

Author: devongovett

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

@@ -36,7 +36,7 @@ export function useHexColorField(
     isReadOnly,
     isRequired
   } = props;
-  
+
   let {
     colorValue,
     inputValue,
@@ -88,6 +88,11 @@ export function useHexColorField(
   return {
     labelProps,
     inputFieldProps: mergeProps(inputProps, spinButtonProps, {
+      role: 'textbox',
+      'aria-valuemax': null,
+      'aria-valuemin': null,
+      'aria-valuenow': null,
+      'aria-valuetext': null,
       autoCorrect: 'off',
       onBlur: commitInputValue,
       onWheel

packages/@react-aria/color/test/useHexColorField.test.js

@@ -36,11 +36,11 @@ describe('useHexColorField', function () {
     expect(inputFieldProps.autoComplete).toBe('off');
     expect(inputFieldProps.autoCorrect).toBe('off');
     expect(inputFieldProps.id).toBeTruthy();
-    expect(inputFieldProps.role).toBe('spinbutton');
+    expect(inputFieldProps.role).toBe('textbox');
     expect(inputFieldProps['aria-valuenow']).toBeNull();
-    expect(inputFieldProps['aria-valuetext']).toBe('Empty');
-    expect(inputFieldProps['aria-valuemin']).toBe(0x000000);
-    expect(inputFieldProps['aria-valuemax']).toBe(0xFFFFFF);
+    expect(inputFieldProps['aria-valuetext']).toBeNull();
+    expect(inputFieldProps['aria-valuemin']).toBeNull();
+    expect(inputFieldProps['aria-valuemax']).toBeNull();
     expect(inputFieldProps['aria-required']).toBeNull();
     expect(inputFieldProps['aria-disabled']).toBeNull();
     expect(inputFieldProps['aria-readonly']).toBeNull();
@@ -51,9 +51,10 @@ describe('useHexColorField', function () {
 
   it('should return props for colorValue provided', function () {
     let colorValue = parseColor('#ff88a0');
-    let {inputFieldProps} = renderHexColorFieldHook({}, {colorValue});
-    expect(inputFieldProps['aria-valuenow']).toBe(colorValue.toHexInt());
-    expect(inputFieldProps['aria-valuetext']).toBe('#FF88A0');
+    let {inputFieldProps} = renderHexColorFieldHook({}, {colorValue, inputValue: colorValue.toString('hex')});
+    expect(inputFieldProps['aria-valuenow']).toBeNull();
+    expect(inputFieldProps['aria-valuetext']).toBeNull();
+    expect(inputFieldProps['value']).toBe('#FF88A0');
   });
 
   it('should return props for label', function () {

packages/@react-spectrum/color/stories/HexColorField.stories.tsx

@@ -11,14 +11,14 @@
  */
 
 import {action} from '@storybook/addon-actions';
-import {ActionButton} from '@react-spectrum/button';
 import {Color} from '@react-types/color';
-import {Dialog, DialogTrigger} from '@react-spectrum/dialog';
 import {Flex} from '@react-spectrum/layout';
 import {HexColorField} from '../';
 import React, {useState} from 'react';
 import {storiesOf} from '@storybook/react';
+import {useId} from '@react-aria/utils';
 import {View} from '@react-spectrum/view';
+import {VisuallyHidden} from '@react-aria/visually-hidden';
 
 storiesOf('HexColorField', module)
   .add(
@@ -64,50 +64,7 @@ storiesOf('HexColorField', module)
         value="#FF00AA"
         onChange={action('change')} />
     )
-  )
-  .add(
-    'as a popover',
-    () => (
-      <HexColorFieldPopover
-        label="Choose a color"
-        value="#ff0000"
-        step={255}
-        onChange={action('change')} />
-    )
-  )
-  .add(
-    'as a popover, defaults only',
-    () => <HexColorFieldPopover onChange={action('change')} />
-  );
-
-function HexColorFieldPopover(props: any = {}) {
-  let [color, setColor] = useState(props.value || null);
-  let colorString = color ? color.toString('hex') : '';
-  return (
-    <DialogTrigger type="popover">
-      <ActionButton
-        width="size-1600"
-        height="size-1600"
-        UNSAFE_style={{
-          background: colorString
-        }} >{colorString}</ActionButton>
-      <Dialog
-        width="size-3600"
-        height="size-1600" >
-        <View padding="size-300">
-          {render({
-            ...props,
-            value: color,
-            onChange: (newColor: Color) => {
-              setColor(newColor);
-              if (props.onChange) { props.onChange(newColor); }
-            }
-          })}
-        </View>
-      </Dialog>
-    </DialogTrigger>
   );
-}
 
 function ControlledHexColorField(props: any = {}) {
   let [color, setColor] = useState(props.value || null);
@@ -116,13 +73,21 @@ function ControlledHexColorField(props: any = {}) {
     if (props.onChange) { props.onChange(color); }
   };
   let style = color ? {backgroundColor: color.toString('rgb')} : {};
+  let id = useId();
   return (
     <Flex direction="row" gap="size-100" alignItems="end">
       <HexColorField
+        id={id}
         label="Primary Color"
         onChange={onChange}
         value={color} />
-      <View width="size-400" height="size-400" UNSAFE_style={style} />
+      <View width="size-400" height="size-400" UNSAFE_style={style}>
+        <VisuallyHidden>
+          <output htmlFor={id} aria-live="off">
+            {color ? color.toString('hex') : ''}
+          </output>
+        </VisuallyHidden>
+      </View>
     </Flex>
   );
 }

packages/@react-spectrum/color/test/HexColorField.test.js

@@ -40,7 +40,7 @@ describe('HexColorField', function () {
     let hexColorField = getByLabelText('Primary Color');
     let label = getByText('Primary Color');
     expect(hexColorField).toBeInTheDocument();
-    expect(getByRole('spinbutton')).toBe(hexColorField);
+    expect(getByRole('textbox')).toBe(hexColorField);
     expect(hexColorField).toHaveAttribute('type', 'text');
     expect(hexColorField).toHaveAttribute('autocomplete', 'off');
     expect(hexColorField).toHaveAttribute('autocorrect', 'off');
@@ -64,7 +64,7 @@ describe('HexColorField', function () {
 
   it('should allow placeholder', function () {
     let {getByPlaceholderText, getByRole} = renderComponent({placeholder: 'Enter a color'});
-    expect(getByRole('spinbutton')).toBe(getByPlaceholderText('Enter a color'));
+    expect(getByRole('textbox')).toBe(getByPlaceholderText('Enter a color'));
   });
 
   it('should show valid validation state', function () {