docs: follow-up on accordion docs from testing (#7232)

* docs: follow-up on accordion docs from testing

* updates svgs for mobile, follow up from reviews

* prevent outline on header on android

* fix examples in useDisclosure on mobile

* update focus visible

* add focusProps to disclosure group example

* use merge props

Author: yihuiliao

packages/@react-aria/disclosure/docs/anatomy.svg

@@ -73,18 +73,24 @@ This example displays a basic disclosure with a button that toggles the visibili
 import {useDisclosureState} from '@react-stately/disclosure';
 import {useDisclosure} from '@react-aria/disclosure';
 import {useButton} from '@react-aria/button';
+import {mergeProps, useFocusRing} from 'react-aria';
 
 function Disclosure(props) {
   let state = useDisclosureState(props);
   let panelRef = React.useRef<HTMLDivElement | null>(null);
   let triggerRef = React.useRef<HTMLButtonElement | null>(null);
   let {buttonProps: triggerProps, panelProps} = useDisclosure(props, state, panelRef);
   let {buttonProps} = useButton(triggerProps, triggerRef);
+  let {isFocusVisible, focusProps} = useFocusRing();
 
   return (
     <div className="disclosure">
       <h3>
-        <button className="trigger" ref={triggerRef} {...buttonProps}>
+        <button 
+          className="trigger" 
+          ref={triggerRef}
+          {...mergeProps(buttonProps, focusProps)}
+          style={{outline: isFocusVisible? '2px solid dodgerblue' : 'none'}}>
           <svg viewBox="0 0 24 24">
             <path d="m8.25 4.5 7.5 7.5-7.5 7.5" />
           </svg>
@@ -109,6 +115,8 @@ function Disclosure(props) {
   <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show CSS</summary>
 
 ```css
+@import "@react-aria/example-theme";
+
 .disclosure {
   .trigger {
     background: none;
@@ -119,6 +127,7 @@ function Disclosure(props) {
     display: flex;
     align-items: center;
     gap: 8px;
+    color: var(--text-color);
 
     svg {
       rotate: 0deg;
@@ -187,7 +196,7 @@ A disclosure can be disabled with the `isDisabled` prop. This will disable the t
 
 A disclosure group (i.e. accordion) is a set of disclosures where only one disclosure can be expanded at a time. The following example shows how to create a `DisclosureGroup` component with the `useDisclosureGroupState` hook. We'll also create a `DisclosureItem` component that uses the `DisclosureGroupState` context for managing its state.
 
-```tsx example export=true
+```tsx example export=true render=false
 import {useDisclosureGroupState} from '@react-stately/disclosure';
 import {useId} from '@react-aria/utils';
 
@@ -231,11 +240,16 @@ function DisclosureItem(props) {
     isDisabled
   }, state, panelRef);
   let {buttonProps} = useButton(triggerProps, triggerRef);
+  let {isFocusVisible, focusProps} = useFocusRing();
 
   return (
     <div className="disclosure">
       <h3>
-        <button className="trigger" ref={triggerRef} {...buttonProps}>
+        <button 
+          className="trigger" 
+          ref={triggerRef}
+          {...mergeProps(buttonProps, focusProps)}
+          style={{outline: isFocusVisible? '2px solid dodgerblue' : 'none'}}>
           <svg viewBox="0 0 24 24">
             <path d="m8.25 4.5 7.5 7.5-7.5 7.5" />
           </svg>

packages/@react-aria/disclosure/docs/useDisclosure.mdx

@@ -13,6 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/accordion';
 import {HeaderInfo, PropTable, TypeLink, PageDescription} from '@react-spectrum/docs';
 import packageData from '@react-spectrum/accordion/package.json';
+import ChevronRight from '@spectrum-icons/workflow/ChevronRight';
 
 ---
 category: Navigation
@@ -90,7 +91,7 @@ function ControlledExpansion() {
 }
 ```
 
-## Expansion
+## Expanded
 
 By default, only one disclosure will be expanded at a time. To expand multiple disclosures, apply the `allowsMultipleExpanded` prop to Accordion.
 
@@ -112,8 +113,18 @@ By default, only one disclosure will be expanded at a time. To expand multiple d
 ```
 ## Props
 
+### Disclosure
+
 <PropTable component={docs.exports.Accordion} links={docs.links} />
 
+### Disclosure Panel
+
+<PropTable component={docs.exports.DisclosurePanel} links={docs.links} />
+
+### Disclosure Header
+
+<PropTable component={docs.exports.DisclosureHeader} links={docs.links} />
+
 ## Visual Options
 
 ### Disabled

packages/@react-spectrum/accordion/docs/Accordion.mdx

@@ -103,10 +103,11 @@ import {Disclosure, Button, DisclosurePanel, Heading} from 'react-aria-component
 
 ## Features
 
-Custom styled disclosures can be difficult to build in an accessible way with the correct ARIA pattern. When implementing, you must manually ensure that the button and panel are semantically connected via ids for accessibility. `Disclosure` helps with this and other accessibility features while allowing for custom styling.
+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. 
 
 * **Flexible** - Structured such that it can be used standalone or combined with other disclosures to form a `DisclosureGroup`
-* **Accessible** - 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.
+* **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.
+* **Accessible** - Uses hidden="until-found" in supported browsers, enabling find-in-page search support and improved search engine visibility for collapsed content
 * **Styleable** - Keyboard focus, disabled and expanded states are provided for easy styling. These states only apply when interacting with an appropriate input device, unlike CSS pseudo classes.
 
 ## Anatomy
@@ -202,6 +203,29 @@ A Disclosure can be disabled using the `isDisabled` prop.
 </MyDisclosure>
 ```
 
+## Interactive elements
+
+In some use cases, you may want to add an interactive element, like a button, adjacent to the disclosure's heading.
+
+```tsx example
+<Disclosure>
+  <div style={{display: 'flex', alignItems: 'center'}}>
+    <Heading>
+      <Button slot="trigger">
+        <svg viewBox="0 0 24 24">
+          <path d="m8.25 4.5 7.5 7.5-7.5 7.5" />
+        </svg>
+        System Requirements
+      </Button>
+    </Heading>
+    <Button>Click me</Button>
+  </div>
+  <DisclosurePanel>
+    <p>Details about system requirements here.</p>
+  </DisclosurePanel>
+</Disclosure>
+```
+
 ## Props
 
 ### Disclosure

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

@@ -82,8 +82,7 @@ import {DisclosureGroup, Disclosure, Button, DisclosurePanel, Heading} from 'rea
 
 ## Features
 
-
-Custom styled disclosure groups can be difficult to implement in an accessible way with the correct ARIA pattern. When implementing, you must manually ensure that the button and panel are semantically connected via ids for accessibility. `DisclosureGroup` helps with this and other accessibility features while allowing for custom styling.
+Accordions 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. `Accordion` 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 
 * **Styleable** - Disclosures include builtin states for styling such as keyboard focus, disabled, and expanded states.
@@ -124,7 +123,7 @@ import {DisclosureGroup, Disclosure, Button, DisclosurePanel, Heading} from 'rea
 
 ### Default expanded
 
-An uncontrolled DisclosureGroup can be expanded by default using the `defaultExpandedKeys` prop.
+An uncontrolled DisclosureGroup can be expanded by default using the `defaultExpandedKeys` prop. The `defaultExpandedKeys` must match the `id` on the disclosure(s) component that you wish to expand.
 
 ```tsx example export=true
 import type {DisclosureProps} from 'react-aria-components';
@@ -165,7 +164,7 @@ function MyDisclosure({title, children, ...props}: MyDisclosureProps) {
 
 ### Controlled expanded
 
-A controlled DisclosureGroup can be expanded and collapsed using `expandedKeys` and `defaultExpandedKeys`
+A controlled DisclosureGroup can be expanded and collapsed using `expandedKeys` and `onExpandedChange`. The `expandedKeys` must match the `id` on the disclosure component(s) that you wish to expand.
 
 ```tsx example
 import {Key} from "@react-types/shared";
@@ -310,6 +309,8 @@ A `Button` can be targeted with the `.react-aria-Button` CSS selector, or by ove
 
 A `DisclosurePanel` can be targeted with the `.react-aria-DisclosurePanel` CSS selector, or by overriding with a custom `className`.
 
+<StateTable properties={docs.exports.DisclosurePanelRenderProps.properties} />
+
 ## Advanced Customization
 
 ### State