docs: clear up relative position confusion (#8102)

* docs: clear up relative position cofusion

* Update packages/@react-aria/visually-hidden/docs/VisuallyHidden.mdx

Co-authored-by: Yihui Liao <44729383+yihuiliao@users.noreply.github.com>

---------

Co-authored-by: Yihui Liao <44729383+yihuiliao@users.noreply.github.com>

Author: snowystinger

packages/@react-aria/visually-hidden/docs/VisuallyHidden.mdx

@@ -59,3 +59,17 @@ let {visuallyHiddenProps} = useVisuallyHidden();
 
 <div {...visuallyHiddenProps}>I am hidden</div>
 ```
+
+## Gotchas
+
+VisuallyHidden is positioned absolutely, so it needs a positioned ancestor. Otherwise, it will be positioned relative to the nearest positioned ancestor, which may be the body, causing undesired scroll bars to appear.
+
+```tsx rendered=false
+<label style={{position: 'relative'}}>
+  <VisuallyHidden>
+    <input type="checkbox" />
+  </VisuallyHidden>
+  <span>Subscribe to our newsletter</span>
+</label>
+```
+

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

@@ -66,6 +66,8 @@ import {Checkbox} from 'react-aria-components';
   --checkmark-color: var(--highlight-foreground);
 
   display: flex;
+  /* This is needed so the HiddenInput is positioned correctly */
+  position: relative;
   align-items: center;
   gap: 0.571rem;
   font-size: 1.143rem;

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

@@ -76,6 +76,8 @@ import {RadioGroup, Radio, Label} from 'react-aria-components';
 
 .react-aria-Radio {
   display: flex;
+  /* This is needed so the HiddenInput is positioned correctly */
+  position: relative;
   align-items: center;
   gap: 0.571rem;
   font-size: 1.143rem;

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

@@ -59,6 +59,8 @@ import {Switch} from 'react-aria-components';
 
 .react-aria-Switch {
   display: flex;
+  /* This is needed so the HiddenInput is positioned correctly */
+  position: relative;
   align-items: center;
   gap: 0.571rem;
   font-size: 1.143rem;

packages/react-aria-components/docs/examples/account-menu.mdx

@@ -80,7 +80,7 @@ function MyMenuItem(props: MenuItemProps) {
 
 function MySwitch(props: SwitchProps) {
   return (
-    <Switch className="group flex gap-2 items-center text-gray-800 dark:text-zinc-200 text-base transition">
+    <Switch className="group relative flex gap-2 items-center text-gray-800 dark:text-zinc-200 text-base transition">
       {composeRenderProps(props.children, children => <>
         <div className="flex h-3 w-6 p-[2px] items-center shrink-0 cursor-default rounded-full transition duration-200 ease-in-out shadow-inner border border-transparent bg-gray-400 dark:bg-zinc-400 group-pressed:bg-gray-500 dark:group-pressed:bg-zinc-300 group-selected:bg-gray-700 group-selected:dark:bg-zinc-300 group-selected:forced-colors:bg-[Highlight]! group-selected:group-pressed:bg-gray-800 group-selected:dark:group-pressed:bg-zinc-200 outline outline-0 outline-blue-600 dark:outline-blue-500 forced-colors:outline-[Highlight] outline-offset-2 group-focus-visible:outline-2">
           <div className="h-3 w-3 transform rounded-full bg-white dark:bg-zinc-900 outline outline-1 -outline-offset-1 outline-transparent shadow-sm transition duration-200 ease-in-out translate-x-0 group-selected:translate-x-[100%]" />

packages/react-aria-components/docs/examples/wifi-switch.mdx

@@ -38,7 +38,7 @@ import './tailwind.global.css';
 import {Switch} from 'react-aria-components';
 
 <div className="bg-linear-to-r from-yellow-300 to-orange-300 p-12 rounded-lg flex justify-center">
-  <Switch className="group flex gap-2 items-center text-black font-semibold text-lg">
+  <Switch className="group relative flex gap-2 items-center text-black font-semibold text-lg">
     <div className="flex h-[26px] w-[44px] shrink-0 cursor-default rounded-full shadow-inner bg-clip-padding border border-solid border-white/30 p-[3px] box-border transition duration-200 ease-in-out bg-yellow-600 group-pressed:bg-yellow-700 group-selected:bg-amber-800 group-selected:group-pressed:bg-amber-900 outline-hidden group-focus-visible:ring-2 ring-black">
       <span className="h-[18px] w-[18px] transform rounded-full bg-white shadow-sm transition duration-200 ease-in-out translate-x-0 group-selected:translate-x-[100%]" />
     </div>

starters/tailwind/src/Checkbox.tsx

@@ -24,7 +24,7 @@ export function CheckboxGroup(props: CheckboxGroupProps) {
 }
 
 const checkboxStyles = tv({
-  base: 'flex gap-2 items-center group text-sm transition',
+  base: 'flex gap-2 items-center group text-sm transition relative',
   variants: {
     isDisabled: {
       false: 'text-gray-800 dark:text-zinc-200',

starters/tailwind/src/RadioGroup.tsx

@@ -43,7 +43,7 @@ const styles = tv({
 
 export function Radio(props: RadioProps) {
   return (
-    <RACRadio {...props} className={composeTailwindRenderProps(props.className, 'flex gap-2 items-center group text-gray-800 disabled:text-gray-300 dark:text-zinc-200 dark:disabled:text-zinc-600 forced-colors:disabled:text-[GrayText] text-sm transition')}>
+    <RACRadio {...props} className={composeTailwindRenderProps(props.className, 'flex relative gap-2 items-center group text-gray-800 disabled:text-gray-300 dark:text-zinc-200 dark:disabled:text-zinc-600 forced-colors:disabled:text-[GrayText] text-sm transition')}>
       {renderProps => <>
         <div className={styles(renderProps)} />
         {props.children}

starters/tailwind/src/Switch.tsx

@@ -39,7 +39,7 @@ const handle = tv({
 
 export function Switch({ children, ...props }: SwitchProps) {
   return (
-    <AriaSwitch {...props} className={composeTailwindRenderProps(props.className, 'group flex gap-2 items-center text-gray-800 disabled:text-gray-300 dark:text-zinc-200 dark:disabled:text-zinc-600 forced-colors:disabled:text-[GrayText] text-sm transition')}>
+    <AriaSwitch {...props} className={composeTailwindRenderProps(props.className, 'group relative flex gap-2 items-center text-gray-800 disabled:text-gray-300 dark:text-zinc-200 dark:disabled:text-zinc-600 forced-colors:disabled:text-[GrayText] text-sm transition')}>
       {(renderProps) => (
         <>
           <div className={track(renderProps)}>