fix: Accordion release audit (#7369)

* accordion release audit

* yarn.lock

* lint

* yarn.lock

* docs updates

* update keywords

* update S2 Migration guide

* update deps

* update migration docs

Author: reidbarber

.storybook-s2/docs/Migrating.jsx

@@ -34,6 +34,16 @@ export function Migrating() {
           <li className={style({font: 'body', marginY: 8})}>Update <Link href="https://react-spectrum.adobe.com/react-spectrum/styling.html#style-props">style props</Link> to use the <Link href="?path=/docs/style-macro--docs">style macro</Link> instead. See the 'Style props' section below</li>
         </ul>
 
+        <H3>Accordion</H3>
+        <ul className="sb-unstyled">
+          <li className={style({font: 'body', marginY: 8})}>Update <Code>Item</Code> to be <Code>Disclosure</Code>. <Code>Disclosure</Code> should now consist of two children: <Code>DisclosureTitle</Code> and <Code>DisclosurePanel</Code>. Note that you can now add interactive elements inside the header and adjacent to the title by using the <Code>DisclosureHeader</Code> component with the <Code>DisclosureTitle</Code> and interactive elements inside.</li>
+          <li className={style({font: 'body', marginY: 8})}>Update <Code>Item</Code>'s title prop to be a child of <Code>DisclosureTitle</Code></li>
+          <li className={style({font: 'body', marginY: 8})}>Update children of <Code>Item</Code> to be children of <Code>DisclosurePanel</Code></li>
+          <li className={style({font: 'body', marginY: 8})}>Update <Code>key</Code> to be <Code>id</Code> (and keep <Code>key</Code> if rendered inside <Code>array.map</Code>)</li>
+          <li className={style({font: 'body', marginY: 8})}>Remove <Code>disabledKeys</Code> and add <Code>isDisabled</Code> to individual <Code>Disclosure</Code> components</li>
+          <li className={style({font: 'body', marginY: 8})}>Add <Code>allowsMultipleExpanded</Code> to allow multiple <Code>Disclosure</Code> components to be expanded at once (previously default behavior)</li>
+        </ul>
+
         <H3>ActionButton</H3>
         <P>No updates needed.</P>
 

packages/@react-aria/accordion/src/useAccordion.ts

@@ -18,15 +18,24 @@ import {TreeState} from '@react-stately/tree';
 import {useButton} from '@react-aria/button';
 import {useSelectableItem, useSelectableList} from '@react-aria/selection';
 
+/**
+ * @deprecated Use useDisclosure from `@react-aria/disclosure` instead.
+ */
 export interface AccordionAria {
   /** Props for the accordion container element. */
   accordionProps: DOMAttributes
 }
 
+/**
+ * @deprecated Use useDisclosure from `@react-aria/disclosure` instead.
+ */
 export interface AccordionItemAriaProps<T> {
   item: Node<T>
 }
 
+/**
+ * @deprecated Use useDisclosure from `@react-aria/disclosure` instead.
+ */
 export interface AccordionItemAria {
   /** Props for the accordion item button. */
   buttonProps: ButtonHTMLAttributes<HTMLElement>,

packages/@react-aria/disclosure/package.json

@@ -22,15 +22,10 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@react-aria/button": "^3.10.1",
-    "@react-aria/selection": "^3.20.1",
     "@react-aria/ssr": "^3.9.6",
     "@react-aria/utils": "^3.25.3",
     "@react-stately/disclosure": "3.0.0-alpha.0",
-    "@react-stately/toggle": "^3.7.8",
-    "@react-stately/tree": "^3.8.5",
     "@react-types/button": "^3.10.0",
-    "@react-types/shared": "^3.25.0",
     "@swc/helpers": "^0.5.0"
   },
   "peerDependencies": {

packages/@react-aria/disclosure/src/useDisclosure.ts

@@ -39,14 +39,14 @@ export interface DisclosureAria {
  * Provides the behavior and accessibility implementation for a disclosure component.
  * @param props - Props for the disclosure.
  * @param state - State for the disclosure, as returned by `useDisclosureState`.
- * @param ref - A ref for the disclosure content.
+ * @param ref - A ref for the disclosure panel.
  */
 export function useDisclosure(props: AriaDisclosureProps, state: DisclosureState, ref: RefObject<Element | null>): DisclosureAria {
   let {
     isDisabled
   } = props;
   let triggerId = useId();
-  let contentId = useId();
+  let panelId = useId();
   let isSSR = useIsSSR();
   let supportsBeforeMatch = !isSSR && 'onbeforematch' in document.body;
 
@@ -95,7 +95,7 @@ export function useDisclosure(props: AriaDisclosureProps, state: DisclosureState
     buttonProps: {
       id: triggerId,
       'aria-expanded': state.isExpanded,
-      'aria-controls': contentId,
+      'aria-controls': panelId,
       onPress: (e) => {
         if (!isDisabled && e.pointerType !== 'keyboard') {
           state.toggle();
@@ -109,7 +109,7 @@ export function useDisclosure(props: AriaDisclosureProps, state: DisclosureState
       }
     },
     panelProps: {
-      id: contentId,
+      id: panelId,
       // This can be overridden at the panel element level.
       role: 'group',
       'aria-labelledby': triggerId,

packages/@react-spectrum/accordion/src/Accordion.tsx

@@ -140,7 +140,7 @@ export {_Accordion as Accordion};
 const _Disclosure = forwardRef(Disclosure) as (props: SpectrumDisclosureProps & {ref?: DOMRef<HTMLDivElement>}) => ReturnType<typeof Disclosure>;
 export {_Disclosure as Disclosure};
 
-/** The panel that contains the content of an disclosure. */
+/** The panel that contains the content of the disclosure. */
 const _DisclosurePanel = forwardRef(DisclosurePanel) as (props: SpectrumDisclosurePanelProps & {ref?: DOMRef<HTMLDivElement>}) => ReturnType<typeof DisclosurePanel>;
 export {_DisclosurePanel as DisclosurePanel};
 

packages/dev/docs/pages/react-aria/components.mdx

@@ -405,7 +405,7 @@ order: 5
 <ExampleCard
   url="DisclosureGroup.html"
   title="DisclosureGroup"
-  description="A disclosure group is a grouping of related disclosures, sometimes called an Accordion.">
+  description="A disclosure group is a grouping of related disclosures, sometimes called an accordion.">
   <DisclosureGroup />
 </ExampleCard>
 

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

@@ -21,7 +21,7 @@ import Anatomy from './DisclosureAnatomy.svg';
 
 ---
 category: Navigation
-keywords: [disclosure, collapse, expand, aria]
+keywords: [disclosure, collapse, expand, aria, accordion]
 type: component
 preRelease: alpha
 ---
@@ -103,7 +103,7 @@ import {Disclosure, Button, DisclosurePanel, Heading} from 'react-aria-component
 
 ## Features
 
-Disclosures can be built with the [<details>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) and [<summary>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary) HTML element, but this can be difficult to style especially when adding adjacent interactive elements, like buttons, to the disclosure's heading. `Disclosure` helps achieve accessible disclosures implemented with the correct ARIA pattern while making custom styling easy. 
+Disclosures can be built with the [<details>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) and [<summary>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary) HTML elements, but this can be difficult to style, especially when adding adjacent interactive elements, like buttons, to the disclosure's heading. `Disclosure` helps achieve accessible disclosures implemented with the correct ARIA pattern while making custom styling easy. 
 
 * **Flexible** - Structured such that it can be used standalone or combined with other disclosures to form a `DisclosureGroup`
 * **Keyboard Interaction** - When focused, a disclosure's visibility can be toggled with either the <Keyboard>Enter</Keyboard> or <Keyboard>Space</Keyboard> key, and the appropriate ARIA attributes are automatically applied.
@@ -171,7 +171,7 @@ function MyDisclosure({title, children, ...props}: MyDisclosureProps) {
 An uncontrolled Disclosure can be expanded by default using the `defaultExpanded` prop.
 
 ```tsx example
-<MyDisclosure title="Download, Install, and Set Up" defaultExpanded >
+<MyDisclosure title="Download, Install, and Set Up" defaultExpanded>
   Instructions on how to download, install, and set up
 </MyDisclosure>
 ```
@@ -183,7 +183,7 @@ function ControlledExpanded() {
   let [isExpanded, setIsExpanded] = React.useState(true);
 
   return (
-    <MyDisclosure title="Download, Install, and Set Up" isExpanded={isExpanded} onExpandedChange={setIsExpanded} >
+    <MyDisclosure title="Download, Install, and Set Up" isExpanded={isExpanded} onExpandedChange={setIsExpanded}>
       Instructions on how to download, install, and set up
     </MyDisclosure>
   )
@@ -198,7 +198,7 @@ function ControlledExpanded() {
 A Disclosure can be disabled using the `isDisabled` prop. 
 
 ```tsx example
-<MyDisclosure title="Introduction to Knitting" isDisabled >
+<MyDisclosure title="Introduction to Knitting" isDisabled>
   Details about knitting here
 </MyDisclosure>
 ```

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

@@ -82,7 +82,7 @@ import {DisclosureGroup, Disclosure, Button, DisclosurePanel, Heading} from 'rea
 
 ## Features
 
-Disclosure groups can be built by combing multiple disclosures built in HTML with the [<details>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) and [<summary>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary) HTML element, but this can be difficult to style especially when adding adjacent interactive elements, like buttons, to the disclosure's heading. `DisclosureGroup` helps achieve accessible disclosures implemented with the correct ARIA pattern while making custom styling easy. 
+Disclosure groups can be built by combining multiple disclosures built in HTML with the [<details>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) and [<summary>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary) HTML elements, but this can be difficult to style, especially when adding adjacent interactive elements, like buttons, to the disclosure's heading. `DisclosureGroup` helps achieve accessible disclosures implemented with the correct ARIA pattern while making custom styling easy. 
 
 * **Accessible** - Disclosure group is exposed to assistive technology via ARIA. Uses hidden="until-found" in supported browsers, enabling find-in-page search support and improved search engine visibility for collapsed content.
 * **Styleable** - Disclosures include builtin states for styling such as keyboard focus, disabled, and expanded states.

packages/react-aria-components/package.json

@@ -39,7 +39,6 @@
   "dependencies": {
     "@internationalized/date": "^3.5.6",
     "@internationalized/string": "^3.2.4",
-    "@react-aria/accordion": "3.0.0-alpha.35",
     "@react-aria/collections": "3.0.0-alpha.5",
     "@react-aria/color": "^3.0.1",
     "@react-aria/disclosure": "3.0.0-alpha.1",

packages/react-aria-components/src/Disclosure.tsx

@@ -63,7 +63,7 @@ function DisclosureGroup(props: DisclosureGroupProps, ref: ForwardedRef<HTMLDivE
 }
 
 /**
- * A DisclosureGroup is a grouping of related disclosures, sometimes called an Accordion.
+ * A DisclosureGroup is a grouping of related disclosures, sometimes called an accordion.
  * It supports both single and multiple expanded items.
  */
 const _DisclosureGroup = forwardRef(DisclosureGroup);