[pull] main from adobe:main

packages/@react-aria/datepicker/src/useDateField.ts

@@ -55,8 +55,9 @@ export const hookData: WeakMap<DateFieldState, HookData> = new WeakMap<DateField
 
 // Private props that we pass from useDatePicker/useDateRangePicker.
 // Ideally we'd use a Symbol for this, but React doesn't support them: https://github.com/facebook/react/issues/7552
-export const roleSymbol: string = '__role_' + Date.now();
-export const focusManagerSymbol: string = '__focusManager_' + Date.now();
+// These need to be stable across server and client module evaluation for SSR hydration.
+export const roleSymbol: string = '__reactAriaDateFieldRole';
+export const focusManagerSymbol: string = '__reactAriaDateFieldFocusManager';
 
 /**
  * Provides the behavior and accessibility implementation for a date field component.

packages/@react-aria/listbox/src/useOption.ts

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {chain, filterDOMProps, isMac, isWebKit, mergeProps, useLinkProps, useSlotId} from '@react-aria/utils';
+import {chain, filterDOMProps, mergeProps, useLinkProps, useSlotId} from '@react-aria/utils';
 import {DOMAttributes, FocusableElement, Key, RefObject} from '@react-types/shared';
 import {getItemCount} from '@react-stately/collections';
 import {getItemId, listData} from './utils';
@@ -105,18 +105,12 @@ export function useOption<T>(props: AriaOptionProps, state: ListState<T>, 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);

packages/@react-stately/form/src/useFormValidationState.ts

@@ -41,7 +41,10 @@ export const DEFAULT_VALIDATION_RESULT: ValidationResult = {
 
 export const FormValidationContext: Context<ValidationErrors> = createContext<ValidationErrors>({});
 
-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<T> extends Validation<T> {
   builtinValidation?: ValidationResult,

packages/react-aria-components/stories/ListBox.stories.tsx

@@ -34,7 +34,7 @@ export const ListBoxExample: ListBoxStory = (args) => (
   <ListBox className={styles.menu} {...args} aria-label="test listbox">
     <MyListBoxItem>Foo</MyListBoxItem>
     <MyListBoxItem>Bar</MyListBoxItem>
-    <MyListBoxItem>Baz</MyListBoxItem>
+    <MyListBoxItem aria-label="Baz with custom label">Baz (Custom aria-label)</MyListBoxItem>
     <MyListBoxItem href="http://google.com">Google</MyListBoxItem>
   </ListBox>
 );