refactor(docs): improve accessibility descriptions across components

- Enhanced accessibility descriptions for various components including Alert Dialog, Aspect Ratio, Card, Carousel, Chart, Collapsible, Combobox, Context Menu, Dialog, Drawer, Field, Hover Card, Input Group, Input, Label, Menubar, Native Select, Navigation Menu, Radio Input, Resizable, Scroll Area, Separator, Sheet, Sidebar, and Slider.
- Focused on clarity and usability by refining keyboard support, screen reader guidance, and semantic structure for better user experience.

Author: Vinishbhaskar

apps/docs/content/components/alert-dialog.mdx

@@ -217,7 +217,9 @@ See [Modal](https://react-aria.adobe.com/Modal) reference for more information.
 
 ## Accessibility
 
-- **Role**: Uses `role="alertdialog"` to ensure screen readers treat it as an interruptive modal.
-- **Focus Management**: Automatically handles focus entrapment and returns focus to the trigger upon closing.
-- **Keyboard Navigation**: Supports `Escape` key to close the dialog and `Enter` to trigger actions.
-- **Aria Labels**: Titles and descriptions are automatically linked to the dialog container for context.
+- **Focus management:** The alert dialog keeps focus within it while open and returns focus to the trigger when it closes.
+- **Keyboard support:** Users can press the `Escape` key to close the dialog and press `Enter` to confirm the primary action.
+- **Trigger behavior:** Users can open the alert dialog using a trigger and interact with actions using the mouse or keyboard.
+- **Screen reader support:** Screen readers announce the dialog as an alert, so users understand that immediate action is required.
+- **ARIA labeling:** Use `AlertDialogTitle` and `AlertDialogDescription` to describe the purpose and impact of the action clearly.
+- **Action clarity:** Provide clear labels for actions like confirm and cancel so users understand the outcome before proceeding.

apps/docs/content/components/aspect-ratio.mdx

@@ -125,7 +125,7 @@ The AspectRatio component works seamlessly with responsive images. Use `object-c
 
 ## Accessibility
 
-- **Semantic HTML**: The component uses a standard `<div>` element that can be enhanced with ARIA attributes as needed.
-- **Image Alt Text**: When using images, always provide descriptive `alt` text for screen readers.
-- **Focus Management**: The component forwards refs, allowing you to manage focus programmatically when needed.
-- **Responsive Design**: Aspect ratios are maintained across all screen sizes, ensuring consistent presentation for all users.
+- **Semantic structure:** The component uses a standard `<div>`. Add semantic elements inside it when needed, such as `<img>`, `<video>`, or `<iframe>`.
+- **Alt text for images:** Always provide a clear `alt` attribute when using images so screen readers can understand the content.
+- **Focus handling:** The component forwards refs, so you can manage focus if the content inside is interactive.
+- **Responsive behavior:** The aspect ratio stays consistent across screen sizes, so content does not shift or break layout.

apps/docs/content/components/card.mdx

@@ -248,6 +248,7 @@ The footer of the card.
 
 ## Accessibility
 
-- **Semantic Structure**: Use `CardTitle` (which renders a div by default, but can be customized) for headings to seek user attention.
-- **Grouping**: Cards naturally group related content. For complex cards, ensure the `CardTitle` properly describes the card's purpose.
-- **Keyboard Navigation**: Ensure any interactive elements within the card (buttons, links in `CardFooter` or `CardContent`) are keyboard accessible.
+- **Semantic structure:** Use `CardTitle` for headings and structure content clearly so users can understand what the card represents.
+- **Content grouping:** The card groups related content and actions together, making it easier to scan and understand.
+- **Keyboard support:** Ensure any interactive elements inside the card (such as buttons or links in `CardFooter` or `CardContent`) are accessible using the keyboard.
+- **Screen reader support:** Provide clear text for titles, descriptions, and actions so screen readers can describe the card content properly.

apps/docs/content/components/carousel.mdx

@@ -187,9 +187,9 @@ See the [Embla Cacrousel Guides](https://www.embla-carousel.com/guides/) for mor
 
 ## Accessibility
 
-- Use the [Embla Carousel Accessibility](https://www.embla-carousel.com/plugins/accessibility/) plugin for best accessibility support.
-- Built with keyboard navigation support (Arrow keys automatically scroll items).
-- Uses `role="region"` with `aria-roledescription="carousel"` for the outer container.
-- Each slide has `role="group"` and `aria-roledescription="slide"`.
-- Buttons include `sr-only` text for screen readers ("Previous slide", "Next slide").
-- Properly handles `disabled` states when the carousel cannot scroll further.
+- **Keyboard support:** Users can navigate between slides using `Arrow` keys.
+- **Screen reader support:** Navigation buttons include hidden text like “Previous slide” and “Next slide” so screen readers can announce them clearly.
+- **ARIA roles:** The carousel uses roles like `region` (carousel) and `group` (slide) to help screen readers understand the structure.
+- **Slide structure:** Each slide is treated as a separate group so users can identify slide boundaries.
+- **Navigation states:** Navigation buttons are `disabled` when there are no more slides to scroll.
+- **Accessibility plugins:** You can use the Embla accessibility plugin to enhance support for screen readers and interactions.

apps/docs/content/components/chart.mdx

@@ -178,11 +178,12 @@ Extends Recharts `DefaultLegendContentProps`.
 | `hideIndicator` | `boolean` | `false` | Whether to hide the color indicator shape next to legend items. |
 | `className`     | `string`  | -       | Additional CSS classes for the legend container.                |
 
-## Accessibility
-
 The Chart components are designed with accessibility in mind, ensuring that data visualizations are perceivable and navigable.
 
-- **Focus Management**: The `ChartContainer` includes keyboard-accessible styles for the underlying Recharts wrapper, providing clear visual indicators when the component receives focus.
-- **Dynamic Indicators**: Customizable indicators (`dot`, `line`, `square`) help differentiate data series, making them easier to identify for users with visual impairments.
-- **ARIA Support**: Leverages Recharts' built-in ARIA support for SVG elements, providing semantic roles and labels to assistive technologies.
-- **Screen Readers**: Descriptive tooltips and legends ensure that data values are correctly announced when interacted with.
+## Accessibility
+
+- **Focus management:** The chart can receive focus and shows clear visual indicators when it is active.
+- **Screen reader support:** Tooltips and legends help screen readers describe data values.
+- **Data clarity:** Use clear labels, legends, and axis titles so users can easily understand the data.
+- **Visual distinction:** Different colors and indicator styles (dot, line, square) help users distinguish between data series.
+- **ARIA support:** The chart uses accessible SVG elements and roles provided by Recharts.

apps/docs/content/components/collapsible.mdx

@@ -218,9 +218,9 @@ The panel is hidden from the accessibility tree when collapsed. React Aria handl
 
 ## Accessibility
 
-- **Semantics** — The trigger is a `<button>` inside a heading element (`h3` by default). This creates the correct heading hierarchy for screen readers.
-- **ARIA attributes** — `aria-expanded` and `aria-controls` are automatically managed by React Aria. No manual wiring required.
-- **Keyboard support** — Press `Space` or `Enter` on the focused trigger to expand or collapse the panel.
-- **Focus management** — Focus styles are visible when navigating by keyboard (`focus-visible`).
-- **Disabled state** — When `isDisabled` is set, the trigger receives `disabled` and is removed from the tab order.
-- **Heading level** — Use the `level` prop on `CollapsibleTrigger` to match the heading hierarchy of the surrounding page content.
+- **Keyboard support:** Users can press `Enter` or `Space` on the trigger to expand or collapse the content.
+- **Focus management:** The trigger can receive focus, and focus styles appear when navigating with the keyboard.
+- **ARIA behavior:** The component automatically manages expanded (`aria-expanded`) and collapsed states so screen readers know when content is visible.
+- **Semantic structure:** The trigger is rendered as a button within a heading, helping screen readers understand the content hierarchy.
+- **Content visibility:** When collapsed, the content is hidden from assistive technologies and becomes available when expanded.
+- **Disabled state:** When `disabled`, the trigger cannot be focused or activated.

apps/docs/content/components/combobox.mdx

@@ -356,7 +356,8 @@ The `Key` type supports `string` and `number`. See [React Aria's Combobox](https
 
 ## Accessibility
 
-- **Keyboard Navigation**: Supports arrow keys to navigate options, Enter/Space to select, and Escape to close.
-- **Filtering**: Type to filter the list of options dynamically.
-- **Screen Readers**: Follows W3C ARIA ComboBox design pattern with proper descriptions and state announcements.
-- **Focus Management**: Maintains focus within the input while navigating the listbox.
+- **Keyboard support:** Users can navigate options using `Arrow` keys, select an option with `Enter`, and close the list with `Escape`.
+- **Search and filtering:** As users type in the input, the list updates to show matching results.
+- **Focus management:** Focus stays on the input while users navigate the list.
+- **Selection behavior:** Supports single and multiple selection depending on configuration.
+- **Label and description:** Provide a label and optional description so users understand the purpose of the input.

apps/docs/content/components/command.mdx

@@ -244,6 +244,8 @@ A visual divider between items or groups.
 
 ## Accessibility
 
-- **Keyboard Navigation**: Use arrow keys to navigate between items.
-- **Filtering**: Items are automatically filtered based on input.
-- **Screen Reader Support**: Properly labeled with ARIA attributes.
+- **Keyboard support:** Users can navigate between items using the `Arrow` keys and select an item using `Enter`.
+- **Search and filtering:** As users type, the list updates to show matching results.
+- **Focus management:** Focus moves from the input to the list and between items, making it usable with the keyboard.
+- **Dialog behavior:** When used with `CommandDialog`, users can open it with shortcuts such as `Ctrl + J` or `Cmd + J`, and close it with `Escape`.
+- **Screen reader support:** Use clear labels and text for items so screen readers can announce commands and groups properly.

apps/docs/content/components/context-menu.mdx

@@ -330,8 +330,9 @@ A decorative element used to display keyboard shortcuts.
 
 ## Accessibility
 
-- Full keyboard navigation support (arrow keys, Enter, Escape).
-- Correct ARIA roles and attributes automatically applied via Base UI.
-- Support for type-ahead selection.
-- Managed focus restoration on menu close.
-- Long-press support on touch devices.
+- **Semantic structure:** The component uses proper menu roles like `menu` and `menuitem`, so screen readers can understand the structure.
+- **Keyboard support:** Users can move between items using `Arrow` keys, open items with `Enter` or `Space`, and close the menu with `Escape`.
+- **Focus management:** Focus moves correctly between menu items and submenus, and returns to the trigger when the menu is closed.
+- **Trigger behavior:** The menu opens on right-click or long-press, and also works with keyboard interaction.
+- **Screen reader support:** Active and selected items are announced clearly, including nested menus and grouped items.
+- **Disabled items:** Disabled items are skipped during keyboard navigation and are announced properly.

apps/docs/content/components/dialog.mdx

@@ -335,9 +335,9 @@ A button with `slot="close"` that automatically closes the nearest dialog when p
 
 ## Accessibility
 
-- **Focus Management**: Focus is automatically trapped inside the dialog when open and restored to the trigger on close.
-- **Keyboard Support**: Press `Escape` to close the dialog (configurable via `isKeyboardDismissDisabled` on `DialogOverlay`).
-- **ARIA Labelling**: `DialogTitle` uses `slot="title"` to automatically set `aria-labelledby` on the dialog.
-- **Screen Readers**: The dialog is announced as a modal overlay, and background content is hidden from assistive technology.
-- **Dismiss on Outside Click**: Clicking the overlay backdrop closes the dialog when `isDismissable` is `true` on `DialogOverlay`.
-- **Semantic HTML**: Uses native `dialog` semantics via react-aria-components for maximum compatibility.
+- **Focus management:** The dialog keeps focus while open and returns focus to the trigger when it closes.
+- **Keyboard support:** Users can press the `Escape` key to close the dialog. You can turn off this behavior if needed.
+- **Trigger behavior:** Users can open and close the dialog using a trigger or a close button with a mouse or keyboard.
+- **Screen reader support:** Screen readers announce the dialog as a modal, and background content stays hidden while it is open.
+- **ARIA labeling:** Use `DialogTitle` and `DialogDescription` to describe the dialog content clearly.
+- **Outside click:** Users can close the dialog by clicking outside when `isDismissable` is enabled.