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

…_font

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'}), {

packages/@react-spectrum/dialog/stories/DialogTrigger.stories.tsx

@@ -31,14 +31,6 @@ import {Tooltip, TooltipTrigger} from '@react-spectrum/tooltip';
 storiesOf('DialogTrigger', module)
   .addParameters({
     providerSwitcher: {status: 'notice'},
-    args: {
-      crossOffset: 0,
-      offset: 0,
-      containerPadding: 0,
-      placement: 'top',
-      shouldFlip: false,
-      isKeyboardDismissDisabled: false
-    },
     argTypes: {
       crossOffset: {
         control: {

packages/@react-spectrum/tag/test/TagGroup.test.js

@@ -105,7 +105,7 @@ describe('TagGroup', function () {
     expect(tags[0]).toHaveAttribute('tabIndex', '0');
   });
 
-  it.each`
+  it.skip.each`
     Name                                                | props                                         | orders
     ${'(left/right arrows, ltr + horizontal) TagGroup'} | ${{locale: 'de-DE'}}                          | ${[{action: () => {userEvent.tab();}, index: 0}, {action: pressArrowRight, index: 1}, {action: pressArrowLeft, index: 0}, {action: pressArrowLeft, index: 2}]}
     ${'(left/right arrows, rtl + horizontal) TagGroup'} | ${{locale: 'ar-AE'}}                          | ${[{action: () => {userEvent.tab();}, index: 0}, {action: pressArrowLeft, index: 1}, {action: pressArrowRight, index: 0}, {action: pressArrowRight, index: 2}]}
@@ -168,7 +168,7 @@ describe('TagGroup', function () {
 
   it('should remember last focused item', function () {
     let {getAllByRole, getByLabelText} = render(
-      <Provider theme={theme} locale="de-DE">
+      <Provider theme={theme} locale="en-US">
         <Button variant="primary" aria-label="ButtonBefore" />
         <TagGroup aria-label="tag group" disabledKeys={['foo', 'bar']}>
           <Item key="1" aria-label="Tag 1">Tag 1</Item>
@@ -198,7 +198,7 @@ describe('TagGroup', function () {
 
   it('should be focusable from Tab', async function () {
     let {getAllByRole, getByLabelText} = render(
-      <Provider theme={theme} locale="de-DE">
+      <Provider theme={theme} locale="en-US">
         <Button variant="primary" aria-label="ButtonBefore" />
         <TagGroup aria-label="tag group" disabledKeys={['foo', 'bar']}>
           <Item key="1" aria-label="Tag 1">Tag 1</Item>
@@ -221,7 +221,7 @@ describe('TagGroup', function () {
 
   it('should be focusable from Shift + Tab', function () {
     let {getAllByRole, getByLabelText} = render(
-      <Provider theme={theme} locale="de-DE">
+      <Provider theme={theme} locale="en-US">
         <Button variant="primary" aria-label="ButtonBefore" />
         <TagGroup aria-label="tag group" disabledKeys={['foo', 'bar']}>
           <Item key="1" aria-label="Tag 1">Tag 1</Item>
@@ -244,7 +244,7 @@ describe('TagGroup', function () {
 
   it('TagGroup should pass className, role and tabIndex', function () {
     let {getByRole} = render(
-      <Provider theme={theme} locale="de-DE">
+      <Provider theme={theme} locale="en-US">
         <TagGroup aria-label="tag group">
           <Item UNSAFE_className="test-class" key="1" aria-label="Tag 1">Tag 1</Item>
         </TagGroup>

packages/react-aria-components/docs/Calendar.mdx

@@ -258,7 +258,7 @@ A `<Button>` accepts its contents as `children`. Other props such as `onPress` a
 
 ### CalendarGrid
 
-A `<CalendarGrid>` renders an individual month within a `<Calendar>`. It accepts a function as its `children`, which is called to render a `<CalendarCell>` for each date.
+A `<CalendarGrid>` renders an individual month within a `<Calendar>`. It accepts a function as its `children`, which is called to render a `<CalendarCell>` for each date. This renders a default `<CalendarGridHeader>`, which displays the weekday names in the column headers. This can be customized by providing a `<CalendarGridHeader>` and `<CalendarGridBody>` as children instead of a function.
 
 <details>
   <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show props</summary>
@@ -267,6 +267,39 @@ A `<CalendarGrid>` renders an individual month within a `<Calendar>`. It accepts
 
 </details>
 
+### CalendarGridHeader
+
+A `<CalendarGridHeader>` renders the header within a `<CalendarGrid>`, displaying a list of weekday names. It accepts a function as its `children`, which is called with a day name abbreviation to render a `<CalendarHeaderCell>` for each column header.
+
+<details>
+  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show props</summary>
+
+<PropTable component={docs.exports.CalendarGridHeader} links={docs.links} />
+
+</details>
+
+### CalendarHeaderCell
+
+A `<CalendarHeaderCell>` renders a column header within a `<CalendarGridHeader>`. It typically displays a weekday name.
+
+<details>
+  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show props</summary>
+
+<PropTable component={docs.exports.CalendarHeaderCell} links={docs.links} />
+
+</details>
+
+### CalendarGridBody
+
+A `<CalendarGridBody>` renders the body within a `<CalendarGrid>`. It accepts a function as its `children`, which is called to render a `<CalendarCell>` for each date.
+
+<details>
+  <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show props</summary>
+
+<PropTable component={docs.exports.CalendarGridBody} links={docs.links} />
+
+</details>
+
 ### CalendarCell
 
 A `<CalendarCell>` renders an individual date within a `<CalendarGrid>`.
@@ -341,7 +374,39 @@ A [Button](Button.html) can be targeted with the `.react-aria-Button` CSS select
 
 ### CalendarGrid
 
-A `CalendarGrid` can be targeted with the `.react-aria-CalendarGrid` CSS selector, or by overriding with a custom `className`.
+A `CalendarGrid` can be targeted with the `.react-aria-CalendarGrid` CSS selector, or by overriding with a custom `className`. When a function is provided as children, a default `<CalendarGridHeader>` and `<CalendarGridBody>` are rendered. If you need to customize the styling of the header cells, you can render them yourself.
+
+```tsx example
+import {CalendarGridHeader, CalendarHeaderCell, CalendarGridBody} from 'react-aria-components';
+
+<Calendar aria-label="Appointment date">
+  <header>
+    <Button slot="previous">◀</Button>
+    <Heading />
+    <Button slot="next">▶</Button>
+  </header>
+  <CalendarGrid>
+    <CalendarGridHeader>
+      {day => <CalendarHeaderCell style={{color: 'var(--blue)'}}>{day}</CalendarHeaderCell>}
+    </CalendarGridHeader>
+    <CalendarGridBody>
+      {date => <CalendarCell date={date} />}
+    </CalendarGridBody>
+  </CalendarGrid>
+</Calendar>
+````
+
+### CalendarGridHeader
+
+A `CalendarGridHeader` can be targeted with the `.react-aria-CalendarGridHeader` CSS selector, or by overriding with a custom `className`.
+
+### CalendarHeaderCell
+
+A `CalendarHeaderCell` can be targeted with the `.react-aria-CalendarHeaderCell` CSS selector, or by overriding with a custom `className`.
+
+### CalendarGridBody
+
+A `CalendarGridBody` can be targeted with the `.react-aria-CalendarGridBody` CSS selector, or by overriding with a custom `className`.
 
 ### CalendarCell