Merge branch 'ccjk_font' of github.com:adobe/react-spectrum into ccjk_font

Author: ktabors

packages/@adobe/spectrum-css-temp/components/accordion/skin.css

@@ -22,21 +22,13 @@ governing permissions and limitations under the License.
   }
 }
 
-.spectrum-Accordion-itemIndicator {
-  color: var(--spectrum-alias-text-color);
-}
-
 .spectrum-Accordion-itemHeader {
   color: var(--spectrum-alias-text-color);
 
   &:hover {
     color: var(--spectrum-alias-text-color-hover);
 
     background-color: var(--spectrum-accordion-background-color-hover);
-
-    + .spectrum-Accordion-itemIndicator {
-      color: var(--spectrum-alias-text-color-hover);
-    }
   }
 
   &:focus-ring {

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

@@ -140,6 +140,7 @@ export function useDatePicker<T extends DateValue>(props: AriaDatePickerProps<T>
       'aria-label': stringFormatter.format('calendar'),
       'aria-labelledby': `${labelledBy} ${buttonId}`,
       'aria-describedby': ariaDescribedBy,
+      'aria-expanded': state.isOpen || undefined,
       onPress: () => state.setOpen(true)
     },
     dialogProps: {

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

@@ -151,6 +151,7 @@ export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePick
       'aria-label': stringFormatter.format('calendar'),
       'aria-labelledby': `${labelledBy} ${buttonId}`,
       'aria-describedby': ariaDescribedBy,
+      'aria-expanded': state.isOpen || undefined,
       onPress: () => state.setOpen(true)
     },
     dialogProps: {

packages/@react-aria/dnd/src/useDroppableCollection.ts

@@ -297,6 +297,13 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
       // is some indication that items were added.
       if (state.selectionManager.focusedKey === droppingState.current.focusedKey) {
         let first = newKeys.keys().next().value;
+        let item = state.collection.getItem(first);
+
+        // If this is a cell, focus the parent row.
+        if (item?.type === 'cell') {
+          first = item.parentKey;
+        }
+
         state.selectionManager.setFocusedKey(first);
 
         if (state.selectionManager.selectionMode === 'none') {

packages/@react-aria/live-announcer/src/LiveAnnouncer.tsx

@@ -71,7 +71,7 @@ class LiveAnnouncer {
       clip: 'rect(0 0 0 0)',
       clipPath: 'inset(50%)',
       height: '1px',
-      margin: '0 -1px -1px 0',
+      margin: '-1px',
       overflow: 'hidden',
       padding: 0,
       position: 'absolute',

packages/@react-aria/tag/intl/en-US.json

@@ -1,3 +1,4 @@
 {  
-  "remove": "Press Space or Delete to remove tag."
+  "removeDescription": "Press Delete to remove tag.",
+  "removeButtonLabel": "Remove"
 }

packages/@react-aria/tag/src/useTag.ts

@@ -11,14 +11,15 @@
  */
 
 import {AriaButtonProps} from '@react-types/button';
-import {chain, filterDOMProps, mergeProps, useId} from '@react-aria/utils';
+import {chain, filterDOMProps, mergeProps, useDescription, useId} from '@react-aria/utils';
 import {DOMAttributes, FocusableElement} from '@react-types/shared';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {KeyboardEvent, RefObject} from 'react';
 import type {TagGroupState} from '@react-stately/tag';
 import {TagProps} from '@react-types/tag';
 import {useGridListItem} from '@react-aria/gridlist';
+import {useInteractionModality} from '@react-aria/interactions';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 
 
@@ -46,7 +47,6 @@ export function useTag<T>(props: TagProps<T>, state: TagGroupState<T>, ref: RefO
     item
   } = props;
   let stringFormatter = useLocalizedStringFormatter(intlMessages);
-  let removeString = stringFormatter.format('remove');
   let labelId = useId();
   let buttonId = useId();
 
@@ -66,11 +66,18 @@ export function useTag<T>(props: TagProps<T>, state: TagGroupState<T>, ref: RefO
     }
   };
 
+  let modality: string = useInteractionModality();
+  if (modality === 'virtual' &&  (typeof window !== 'undefined' && 'ontouchstart' in window)) {
+    modality = 'touch';
+  }
+  let description = allowsRemoving && (modality === 'keyboard' || modality === 'virtual') ? stringFormatter.format('removeDescription') : '';
+  let descProps = useDescription(description);
+
   isFocused = isFocused || state.selectionManager.focusedKey === item.key;
   let domProps = filterDOMProps(props);
   return {
     clearButtonProps: {
-      'aria-label': removeString,
+      'aria-label': stringFormatter.format('removeButtonLabel', {label: item.textValue}),
       'aria-labelledby': `${buttonId} ${labelId}`,
       id: buttonId,
       onPress: () => allowsRemoving && onRemove ? onRemove(item.key) : null,
@@ -82,7 +89,8 @@ export function useTag<T>(props: TagProps<T>, state: TagGroupState<T>, ref: RefO
     rowProps: {
       ...rowProps,
       tabIndex: (isFocused || state.selectionManager.focusedKey == null) ? 0 : -1,
-      onKeyDown: allowsRemoving ? onKeyDown : null
+      onKeyDown: allowsRemoving ? onKeyDown : null,
+      'aria-describedby': descProps['aria-describedby']
     },
     gridCellProps: mergeProps(domProps, gridCellProps, {
       'aria-errormessage': props['aria-errormessage'],

packages/@react-aria/visually-hidden/src/VisuallyHidden.tsx

@@ -33,12 +33,12 @@ const styles: CSSProperties = {
   border: 0,
   clip: 'rect(0 0 0 0)',
   clipPath: 'inset(50%)',
-  height: 1,
-  margin: '0 -1px -1px 0',
+  height: '1px',
+  margin: '-1px',
   overflow: 'hidden',
   padding: 0,
   position: 'absolute',
-  width: 1,
+  width: '1px',
   whiteSpace: 'nowrap'
 };
 

packages/@react-spectrum/autocomplete/src/MobileSearchAutocomplete.tsx

@@ -208,6 +208,10 @@ const SearchAutocompleteButton = React.forwardRef(function SearchAutocompleteBut
       classNames(
         styles,
         'spectrum-InputGroup-input-validationIcon'
+      ),
+      classNames(
+        searchStyles,
+        'spectrum-Search-validationIcon'
       )
     )
   });
@@ -264,6 +268,7 @@ const SearchAutocompleteButton = React.forwardRef(function SearchAutocompleteBut
             classNames(
               searchStyles,
               'spectrum-Search',
+              'spectrum-Search--loadable',
               {
                 'is-disabled': isDisabled,
                 'is-quiet': isQuiet,

packages/@react-spectrum/dialog/chromatic/Dialog.chromatic.tsx

@@ -156,6 +156,13 @@ storiesOf('Dialog', module)
       chromaticProvider: {colorSchemes: ['light'], locales: ['en-US'], scales: ['large'], disableAnimations: true}
     }
   )
+  .add(
+    'popover: containerPadding',
+    () => renderTriggerProps({type: 'popover', containerPadding: 30, shouldFlip: false, placement: 'top'}), {
+      chromatic: {viewports: [1200]},
+      chromaticProvider: {colorSchemes: ['light'], locales: ['en-US'], scales: ['large'], disableAnimations: true}
+    }
+  )
   .add(
     'mobileType fullscreenTakeover, modal',
     () => renderTriggerProps({type: 'modal', mobileType: 'fullscreenTakeover'}), {