@react-aria/color 3.0.0-beta.30 → 3.0.0-beta.32

package/src/useColorSlider.ts

@@ -17,6 +17,7 @@ import {InputHTMLAttributes, RefObject} from 'react';
 import {mergeProps} from '@react-aria/utils';
 import {useLocale} from '@react-aria/i18n';
 import {useSlider, useSliderThumb} from '@react-aria/slider';
+import {useVisuallyHidden} from '@react-aria/visually-hidden';
 
 export interface AriaColorSliderOptions extends AriaColorSliderProps {
   /** A ref for the track element. */
@@ -63,8 +64,8 @@ export function useColorSlider(props: AriaColorSliderOptions, state: ColorSlider
     inputRef
   }, state);
 
+  let value = state.getDisplayColor();
   let generateBackground = () => {
-    let value = state.getDisplayColor();
     let to: string;
     if (orientation === 'vertical') {
       to = 'top';
@@ -74,8 +75,10 @@ export function useColorSlider(props: AriaColorSliderOptions, state: ColorSlider
       to = 'left';
     }
     switch (channel) {
-      case 'hue':
-        return `linear-gradient(to ${to}, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)`;
+      case 'hue': {
+        let stops = [0, 60, 120, 180, 240, 300, 360].map(hue => value.withChannelValue('hue', hue).toString('css')).join(', ');
+        return `linear-gradient(to ${to}, ${stops})`;
+      }
       case 'lightness': {
         // We have to add an extra color stop in the middle so that the hue shows up at all.
         // Otherwise it will always just be black to white.
@@ -103,6 +106,21 @@ export function useColorSlider(props: AriaColorSliderOptions, state: ColorSlider
 
   let forcedColorAdjustNoneStyle = {forcedColorAdjust: 'none'};
 
+  if (channel === 'hue') {
+    inputProps['aria-valuetext'] += `, ${value.getHueName(locale)}`;
+  } else if (channel !== 'alpha') {
+    inputProps['aria-valuetext'] += `, ${value.getColorName(locale)}`;
+  }
+
+  let {visuallyHiddenProps} = useVisuallyHidden({
+    style: {
+      opacity: '0.0001',
+      width: '100%',
+      height: '100%',
+      pointerEvents: 'none'
+    }
+  });
+
   return {
     trackProps: {
       ...mergeProps(groupProps, trackProps),
@@ -112,7 +130,13 @@ export function useColorSlider(props: AriaColorSliderOptions, state: ColorSlider
         background: generateBackground()
       }
     },
-    inputProps,
+    inputProps: {
+      ...inputProps,
+      style: {
+        ...inputProps.style,
+        ...visuallyHiddenProps.style
+      }
+    },
     thumbProps: {
       ...thumbProps,
       style: {

package/src/useColorSwatch.ts

@@ -0,0 +1,74 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {AriaLabelingProps, DOMProps} from '@react-types/shared';
+import {Color} from '@react-types/color';
+import {filterDOMProps, useId} from '@react-aria/utils';
+import {HTMLAttributes, useMemo} from 'react';
+// @ts-ignore
+import intlMessages from '../intl/*.json';
+import {parseColor} from '@react-stately/color';
+import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';
+
+export interface AriaColorSwatchProps extends AriaLabelingProps, DOMProps {
+  /** The color value to display in the swatch. */
+  color?: string | Color | null,
+  /** 
+   * A localized accessible name for the color.
+   * By default, a description is generated from the color value,
+   * but this can be overridden if you have a more specific color
+   * name (e.g. Pantone colors).
+   */
+  colorName?: string
+}
+
+export interface ColorSwatchAria {
+  /** Props for the color swatch element. */
+  colorSwatchProps: HTMLAttributes<HTMLElement>,
+  /** The parsed color value of the swatch. */
+  color: Color
+}
+
+/**
+ * Provides the accessibility implementation for a color swatch component.
+ * A color swatch displays a preview of a selected color.
+ */
+export function useColorSwatch(props: AriaColorSwatchProps): ColorSwatchAria {
+  let {color: value, colorName} = props;
+  let nonNullValue = value || '#fff0';
+  let color = useMemo(() => typeof nonNullValue === 'string' ? parseColor(nonNullValue) : nonNullValue, [nonNullValue]);
+  let {locale} = useLocale();
+  let DOMProps = filterDOMProps(props, {labelable: true});
+  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/color');
+  let id = useId(props.id);
+
+  if (!colorName) {
+    colorName = color.getChannelValue('alpha') === 0 ? stringFormatter.format('transparent') : color.getColorName(locale);
+  }
+
+  return {
+    colorSwatchProps: {
+      ...DOMProps,
+      role: 'img',
+      'aria-roledescription': stringFormatter.format('colorSwatch'),
+      'aria-label': [colorName, props['aria-label'] || ''].filter(Boolean).join(', '),
+      'aria-labelledby': props['aria-labelledby'] ? `${id} ${props['aria-labelledby']}` : undefined,
+      id,
+      style: {
+        backgroundColor: color.toString('css'),
+        // @ts-ignore
+        forcedColorAdjust: 'none'
+      }
+    },
+    color: color || null
+  };
+}

package/src/useColorWheel.ts

@@ -17,6 +17,7 @@ import {focusWithoutScrolling, mergeProps, useFormReset, useGlobalListeners, use
 import React, {ChangeEvent, InputHTMLAttributes, RefObject, useCallback, useRef} from 'react';
 import {useKeyboard, useMove} from '@react-aria/interactions';
 import {useLocale} from '@react-aria/i18n';
+import {useVisuallyHidden} from '@react-aria/visually-hidden';
 
 export interface AriaColorWheelOptions extends AriaColorWheelProps {
   /** The outer radius of the color wheel. */
@@ -263,6 +264,15 @@ export function useColorWheel(props: AriaColorWheelOptions, state: ColorWheelSta
     forcedColorAdjust: 'none'
   };
 
+  let {visuallyHiddenProps} = useVisuallyHidden({
+    style: {
+      opacity: '0.0001',
+      width: '100%',
+      height: '100%',
+      pointerEvents: 'none'
+    }
+  });
+
   return {
     trackProps: {
       ...trackInteractions,
@@ -297,9 +307,9 @@ export function useColorWheel(props: AriaColorWheelOptions, state: ColorWheelSta
       ...thumbInteractions,
       style: {
         position: 'absolute',
-        left: '50%',
-        top: '50%',
-        transform: `translate(calc(${x}px - 50%), calc(${y}px - 50%))`,
+        left: outerRadius + x,
+        top: outerRadius + y,
+        transform: 'translate(-50%, -50%)',
         touchAction: 'none',
         ...forcedColorAdjustNoneStyle
       }
@@ -311,13 +321,17 @@ export function useColorWheel(props: AriaColorWheelOptions, state: ColorWheelSta
         min: String(minValue),
         max: String(maxValue),
         step: String(step),
-        'aria-valuetext': state.value.formatChannelValue('hue', locale),
+        'aria-valuetext': `${state.value.formatChannelValue('hue', locale)}, ${state.value.getHueName(locale)}`,
         disabled: isDisabled,
         value: `${state.value.getChannelValue('hue')}`,
         name,
         onChange: (e: ChangeEvent<HTMLInputElement>) => {
           state.setHue(parseFloat(e.target.value));
-        }
+        },
+        style: visuallyHiddenProps.style,
+        'aria-errormessage': props['aria-errormessage'],
+        'aria-describedby': props['aria-describedby'],
+        'aria-details': props['aria-details']
       }
     )
   };