diff --git a/packages/@react-aria/datepicker/src/useDateField.ts b/packages/@react-aria/datepicker/src/useDateField.ts index 5a04a465421..fe5c062ca13 100644 --- a/packages/@react-aria/datepicker/src/useDateField.ts +++ b/packages/@react-aria/datepicker/src/useDateField.ts @@ -55,8 +55,9 @@ export const hookData: WeakMap = new WeakMap(props: AriaOptionProps, state: ListState, ref: R let optionProps = { role: 'option', 'aria-disabled': isDisabled || undefined, - 'aria-selected': state.selectionManager.selectionMode !== 'none' ? isSelected : undefined + 'aria-selected': state.selectionManager.selectionMode !== 'none' ? isSelected : undefined, + 'aria-label': props['aria-label'], + 'aria-labelledby': labelId, + 'aria-describedby': descriptionId }; - // Safari with VoiceOver on macOS misreads options with aria-labelledby or aria-label as simply "text". - // We should not map slots to the label and description on Safari and instead just have VoiceOver read the textContent. - // https://bugs.webkit.org/show_bug.cgi?id=209279 - if (!(isMac() && isWebKit())) { - optionProps['aria-label'] = props['aria-label']; - optionProps['aria-labelledby'] = labelId; - optionProps['aria-describedby'] = descriptionId; - } - let item = state.collection.getItem(key); if (isVirtualized) { let index = Number(item?.index); diff --git a/packages/@react-stately/form/src/useFormValidationState.ts b/packages/@react-stately/form/src/useFormValidationState.ts index 83acd2f155f..2518f81a313 100644 --- a/packages/@react-stately/form/src/useFormValidationState.ts +++ b/packages/@react-stately/form/src/useFormValidationState.ts @@ -41,7 +41,10 @@ export const DEFAULT_VALIDATION_RESULT: ValidationResult = { export const FormValidationContext: Context = createContext({}); -export const privateValidationStateProp: string = '__formValidationState' + Date.now(); +// Private props that we pass from useFormValidationState to children. +// Ideally we'd use a Symbol for this, but React doesn't support them: https://github.com/facebook/react/issues/7552 +// This needs to be stable across server and client module evaluation for SSR hydration. +export const privateValidationStateProp: string = '__reactAriaFormValidationState'; interface FormValidationProps extends Validation { builtinValidation?: ValidationResult, diff --git a/packages/react-aria-components/stories/ListBox.stories.tsx b/packages/react-aria-components/stories/ListBox.stories.tsx index 0d24ae17d49..8566f284bdd 100644 --- a/packages/react-aria-components/stories/ListBox.stories.tsx +++ b/packages/react-aria-components/stories/ListBox.stories.tsx @@ -34,7 +34,7 @@ export const ListBoxExample: ListBoxStory = (args) => ( Foo Bar - Baz + Baz (Custom aria-label) Google );