diff --git a/packages/dev/s2-docs/pages/react-aria/blog/ColorEditorExample.tsx b/packages/dev/s2-docs/pages/react-aria/blog/ColorEditorExample.tsx new file mode 100644 index 00000000000..2794f68a93d --- /dev/null +++ b/packages/dev/s2-docs/pages/react-aria/blog/ColorEditorExample.tsx @@ -0,0 +1,93 @@ +/* + * Copyright 2025 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. + */ + +'use client'; +import {ColorPicker} from 'react-aria-components'; +import {ColorArea, ColorSlider, ColorField, ColorSwatch, Picker, PickerItem} from '@react-spectrum/s2'; +import {style} from '@react-spectrum/s2/style' with {type: 'macro'}; +import {getColorChannels} from '@react-stately/color'; +import {useState} from 'react'; +import type {ColorSpace} from 'react-aria-components'; +// @ts-ignore +import intlMessages from './intl/*.json'; +import {useLocalizedStringFormatter} from '@react-aria/i18n'; + +interface ColorEditorProps { + hideAlphaChannel?: boolean; +} + +function ColorEditor({hideAlphaChannel = false}: ColorEditorProps) { + let [format, setFormat] = useState('hex'); + let formatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/color'); + + return ( +
+
+ + + {!hideAlphaChannel && ( + + )} +
+
+ setFormat(key as typeof format)}> + {formatter.format('hex')} + {formatter.format('rgb')} + {formatter.format('hsl')} + {formatter.format('hsb')} + + {format === 'hex' + ? + : getColorChannels(format).map(channel => ( + + ))} + {!hideAlphaChannel && ( + + )} +
+
+ ); +} + +export function ColorEditorExample() { + return ( +
+ + {({color}) => ( +
+ +
+ + {color.getColorName(navigator.language || 'en-US')} +
+
+ )} + +
+ ); +} diff --git a/packages/dev/s2-docs/pages/react-aria/blog/SubmenuAnimation.tsx b/packages/dev/s2-docs/pages/react-aria/blog/SubmenuAnimation.tsx index b4fb3b27dfa..2114063e38d 100644 --- a/packages/dev/s2-docs/pages/react-aria/blog/SubmenuAnimation.tsx +++ b/packages/dev/s2-docs/pages/react-aria/blog/SubmenuAnimation.tsx @@ -114,21 +114,33 @@ export function SubmenuAnimation(): JSX.Element { }, []); return ( -
- +
+
+ +
); } diff --git a/packages/dev/s2-docs/pages/react-aria/blog/accessible-color-descriptions.mdx b/packages/dev/s2-docs/pages/react-aria/blog/accessible-color-descriptions.mdx index 9f959fbb21b..27eceaf3178 100644 --- a/packages/dev/s2-docs/pages/react-aria/blog/accessible-color-descriptions.mdx +++ b/packages/dev/s2-docs/pages/react-aria/blog/accessible-color-descriptions.mdx @@ -17,6 +17,7 @@ export default Layout; import docs from 'docs:@react-spectrum/s2'; import React from 'react'; import {Byline} from '../../../src/BlogList'; +import {ColorEditorExample} from './ColorEditorExample'; export const tags = ['color picker', 'color', 'internationalization', 'localization', 'components', 'accessibility', 'react spectrum', 'react']; export const description = 'Recently, we released a suite of color picker components in React Aria and React Spectrum. Since colors are inherently visual, ensuring these components are accessible to users with visual impairments presented a significant challenge. In this post, we\'ll discuss how we developed an algorithm that generates clear color descriptions for screen readers in multiple languages, while minimizing bundle size.'; @@ -37,7 +38,7 @@ Accessibility is at the core of all of our work on the React Spectrum team, and Our initial implementation followed the typical ARIA patterns such as [slider](https://www.w3.org/WAI/ARIA/apg/patterns/slider/) to implement ColorArea, ColorSlider, and ColorWheel, and [listbox](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/) to implement ColorSwatchPicker. This provided good support for mouse, touch, and keyboard input, but the screen reader experience left something to be desired. Out of the box, screen readers would only announce raw channel values like “Red: 182, Green: 96, Blue: 38”. I don’t know about you, but I can’t imagine what color that is just by hearing those numbers! -
@@ -127,18 +127,18 @@ After fixing the formatting, we also needed to update the keyboard navigation. P 3 . 11 - . + . 2020 , 8 - : + : 45 ``` -Below is an example of a date field in Hebrew with the correct date format but incorrect keyboard navigation. Pressing the left arrow key should navigate you to the segment to the immediate left, while the right arrow key should navigate you to the segment to the immediate right. +Below is an example of a date field in Hebrew with the correct date format but incorrect keyboard navigation. Pressing the left arrow key should navigate you to the segment to the immediate left, while the right arrow key should navigate you to the segment to the immediate right. -