mirror of
https://github.com/zoriya/v10.git
synced 2026-08-16 02:45:09 +00:00
feat(site): extract api reference from components (#464)
This commit is contained in:
Darius Cepulis
@@ -86,16 +86,7 @@ Single-element components that handle one piece of UI:
|
||||
|
||||
- <DocsLink slug="reference/play-button">**PlayButton**</DocsLink> - Play/pause toggle
|
||||
- <DocsLink slug="reference/mute-button">**MuteButton**</DocsLink> - Audio mute toggle
|
||||
- <DocsLink slug="reference/fullscreen-button">**FullscreenButton**</DocsLink> - Fullscreen toggle
|
||||
- **CurrentTimeDisplay** - Current playback time
|
||||
- **DurationDisplay** - Total media duration
|
||||
- **PreviewTimeDisplay** - Time at hover position
|
||||
|
||||
### Compound components
|
||||
|
||||
Multi-element components for complex interactions:
|
||||
|
||||
- <DocsLink slug="reference/time-slider">**TimeSlider**</DocsLink> - Seekable timeline with progress
|
||||
- <DocsLink slug="reference/volume-slider">**VolumeSlider**</DocsLink> - Volume control slider
|
||||
- **Tooltip** - Hover tooltips with positioning
|
||||
- **Popover** - Click/hover popovers with collision detection
|
||||
Multi-element components for complex interactions
|
||||
|
||||
@@ -1,92 +0,0 @@
|
||||
---
|
||||
title: FullscreenButton
|
||||
frameworkTitle:
|
||||
html: fullscreen-button
|
||||
description: A button component for toggling fullscreen mode
|
||||
---
|
||||
|
||||
import { FullscreenButtonDemo } from '@/examples/react/FullscreenButton/FullscreenButtonDemo';
|
||||
import componentModuleStr from '@/examples/react/FullscreenButton/BasicFullscreenButton.tsx?raw';
|
||||
import cssModuleStr from '@/examples/react/FullscreenButton/FullscreenButton.module.css?raw';
|
||||
import htmlStr from '@/examples/html/fullscreen-button/snippet.html?raw';
|
||||
import htmlCssStr from '@/examples/html/fullscreen-button/fullscreen-button.css?raw';
|
||||
import htmlJsStr from '@/examples/html/fullscreen-button/fullscreen-button.js?raw';
|
||||
import FrameworkCase from '@/components/docs/FrameworkCase.astro';
|
||||
import ServerCode from '@/components/Code/ServerCode.astro';
|
||||
import { TabsRoot, TabsList, TabsPanel, Tab } from '@/components/Tabs';
|
||||
|
||||
## Features
|
||||
|
||||
- Automatically switches icons based on fullscreen state
|
||||
- Works with browser Fullscreen API
|
||||
- Falls back gracefully when fullscreen not supported
|
||||
- Accessible keyboard navigation
|
||||
|
||||
## Example
|
||||
|
||||
<FrameworkCase frameworks={["react"]}>
|
||||
<TabsRoot client:idle>
|
||||
<TabsList client:idle label="React implementation">
|
||||
<Tab client:idle value="component" initial>Component</Tab>
|
||||
<Tab client:idle value="css">CSS Module</Tab>
|
||||
</TabsList>
|
||||
<TabsPanel client:idle value="component" initial>
|
||||
<ServerCode code={componentModuleStr} lang="tsx" />
|
||||
</TabsPanel>
|
||||
<TabsPanel client:idle value="css">
|
||||
<ServerCode code={cssModuleStr} lang="css" />
|
||||
</TabsPanel>
|
||||
<FullscreenButtonDemo client:idle />
|
||||
</TabsRoot>
|
||||
</FrameworkCase>
|
||||
|
||||
<FrameworkCase frameworks={["html"]}>
|
||||
<TabsRoot client:idle>
|
||||
<TabsList client:idle label="HTML implementation">
|
||||
<Tab client:idle value="html" initial>HTML</Tab>
|
||||
<Tab client:idle value="css">CSS</Tab>
|
||||
<Tab client:idle value="javascript">JS</Tab>
|
||||
</TabsList>
|
||||
<TabsPanel client:idle value="html" initial>
|
||||
<ServerCode code={htmlStr} lang="html" />
|
||||
</TabsPanel>
|
||||
<TabsPanel client:idle value="css">
|
||||
<ServerCode code={htmlCssStr} lang="css" />
|
||||
</TabsPanel>
|
||||
<TabsPanel client:idle value="javascript">
|
||||
<ServerCode code={htmlJsStr} lang="js" />
|
||||
</TabsPanel>
|
||||
<FullscreenButtonDemo client:idle />
|
||||
</TabsRoot>
|
||||
</FrameworkCase>
|
||||
|
||||
## Data Attributes
|
||||
|
||||
The FullscreenButton automatically sets data attributes based on fullscreen state:
|
||||
|
||||
- `data-fullscreen` - Present when in fullscreen, absent when not
|
||||
|
||||
Use these attributes for state-based styling in your CSS.
|
||||
|
||||
<FrameworkCase frameworks={["react"]}>
|
||||
|
||||
## Props
|
||||
|
||||
All standard button props are supported, plus:
|
||||
|
||||
| Prop | Type | Description |
|
||||
|------|------|-------------|
|
||||
| `children` | `ReactNode` | Button content (typically icons) |
|
||||
| `className` | `string` | CSS class name |
|
||||
|
||||
</FrameworkCase>
|
||||
|
||||
## Accessibility
|
||||
|
||||
- Automatically includes proper ARIA labels
|
||||
- Keyboard accessible (Space/Enter)
|
||||
- Announces fullscreen state changes to screen readers
|
||||
|
||||
## Browser support
|
||||
|
||||
The FullscreenButton uses the standard Fullscreen API, which is supported in all modern browsers.
|
||||
@@ -2,92 +2,21 @@
|
||||
title: MuteButton
|
||||
frameworkTitle:
|
||||
html: mute-button
|
||||
description: A button component for toggling audio mute state
|
||||
description: A button component for muting and unmuting audio playback
|
||||
---
|
||||
|
||||
import { MuteButtonDemo } from '@/examples/react/MuteButton/MuteButtonDemo';
|
||||
import componentModuleStr from '@/examples/react/MuteButton/BasicMuteButton.tsx?raw';
|
||||
import cssModuleStr from '@/examples/react/MuteButton/MuteButton.module.css?raw';
|
||||
import htmlStr from '@/examples/html/mute-button/snippet.html?raw';
|
||||
import htmlCssStr from '@/examples/html/mute-button/mute-button.css?raw';
|
||||
import htmlJsStr from '@/examples/html/mute-button/mute-button.js?raw';
|
||||
import FrameworkCase from '@/components/docs/FrameworkCase.astro';
|
||||
import ServerCode from '@/components/Code/ServerCode.astro';
|
||||
import { TabsRoot, TabsList, TabsPanel, Tab } from '@/components/Tabs';
|
||||
import ApiRefSection from '@/components/docs/api-reference/ApiRefSection.astro';
|
||||
|
||||
## Features
|
||||
## API Reference
|
||||
|
||||
- Multi-state icon display (high, low, off)
|
||||
- Automatically reflects volume level changes
|
||||
- Toggles mute/unmute on click
|
||||
- Accessible keyboard navigation
|
||||
### Props
|
||||
|
||||
## Example
|
||||
<ApiRefSection component="MuteButton" section="props" />
|
||||
|
||||
<FrameworkCase frameworks={["react"]}>
|
||||
<TabsRoot client:idle>
|
||||
<TabsList client:idle label="React implementation">
|
||||
<Tab client:idle value="component" initial>Component</Tab>
|
||||
<Tab client:idle value="css">CSS Module</Tab>
|
||||
</TabsList>
|
||||
<TabsPanel client:idle value="component" initial>
|
||||
<ServerCode code={componentModuleStr} lang="tsx" />
|
||||
</TabsPanel>
|
||||
<TabsPanel client:idle value="css">
|
||||
<ServerCode code={cssModuleStr} lang="css" />
|
||||
</TabsPanel>
|
||||
<MuteButtonDemo client:idle />
|
||||
</TabsRoot>
|
||||
</FrameworkCase>
|
||||
### State
|
||||
|
||||
<FrameworkCase frameworks={["html"]}>
|
||||
<TabsRoot client:idle>
|
||||
<TabsList client:idle label="HTML implementation">
|
||||
<Tab client:idle value="html" initial>HTML</Tab>
|
||||
<Tab client:idle value="css">CSS</Tab>
|
||||
<Tab client:idle value="javascript">JS</Tab>
|
||||
</TabsList>
|
||||
<TabsPanel client:idle value="html" initial>
|
||||
<ServerCode code={htmlStr} lang="html" />
|
||||
</TabsPanel>
|
||||
<TabsPanel client:idle value="css">
|
||||
<ServerCode code={htmlCssStr} lang="css" />
|
||||
</TabsPanel>
|
||||
<TabsPanel client:idle value="javascript">
|
||||
<ServerCode code={htmlJsStr} lang="js" />
|
||||
</TabsPanel>
|
||||
<MuteButtonDemo client:idle />
|
||||
</TabsRoot>
|
||||
</FrameworkCase>
|
||||
<ApiRefSection component="MuteButton" section="state" />
|
||||
|
||||
### Data Attributes
|
||||
|
||||
|
||||
## Data Attributes
|
||||
|
||||
The MuteButton automatically sets data attributes based on volume level:
|
||||
|
||||
- `data-volume-level="high"` - Volume > 50%
|
||||
- `data-volume-level="medium"` - Volume 25-50%
|
||||
- `data-volume-level="low"` - Volume 1-24%
|
||||
- `data-volume-level="off"` - Volume 0% (muted)
|
||||
|
||||
Use these attributes for state-based styling in your CSS.
|
||||
|
||||
<FrameworkCase frameworks={["react"]}>
|
||||
|
||||
## Props
|
||||
|
||||
All standard button props are supported, plus:
|
||||
|
||||
| Prop | Type | Description |
|
||||
|------|------|-------------|
|
||||
| `children` | `ReactNode` | Button content (typically icons) |
|
||||
| `className` | `string` | CSS class name |
|
||||
|
||||
</FrameworkCase>
|
||||
|
||||
## Accessibility
|
||||
|
||||
- Automatically includes proper ARIA labels
|
||||
- Keyboard accessible (Space/Enter)
|
||||
- Announces volume state changes to screen readers
|
||||
<ApiRefSection component="MuteButton" section="dataAttributes" />
|
||||
|
||||
@@ -5,84 +5,18 @@ frameworkTitle:
|
||||
description: A button component for playing and pausing media playback
|
||||
---
|
||||
|
||||
import { PlayButtonDemo } from '@/examples/react/PlayButton/PlayButtonDemo';
|
||||
import componentModuleStr from '@/examples/react/PlayButton/BasicPlayButton.tsx?raw';
|
||||
import cssModuleStr from '@/examples/react/PlayButton/PlayButton.module.css?raw';
|
||||
import htmlStr from '@/examples/html/play-button/snippet.html?raw';
|
||||
import htmlCssStr from '@/examples/html/play-button/play-button.css?raw';
|
||||
import htmlJsStr from '@/examples/html/play-button/play-button.js?raw';
|
||||
import FrameworkCase from '@/components/docs/FrameworkCase.astro';
|
||||
import ServerCode from '@/components/Code/ServerCode.astro';
|
||||
import { TabsRoot, TabsList, TabsPanel, Tab } from '@/components/Tabs';
|
||||
import ApiRefSection from '@/components/docs/api-reference/ApiRefSection.astro';
|
||||
|
||||
## Features
|
||||
## API Reference
|
||||
|
||||
- Automatically switches icons based on playback state
|
||||
- Uses data attributes for state-based styling
|
||||
- Accessible keyboard navigation
|
||||
- Works with any media element
|
||||
### Props
|
||||
|
||||
## Example
|
||||
<ApiRefSection component="PlayButton" section="props" />
|
||||
|
||||
<FrameworkCase frameworks={["react"]}>
|
||||
<TabsRoot client:idle>
|
||||
<TabsList client:idle label="React implementation">
|
||||
<Tab client:idle value="component" initial>Component</Tab>
|
||||
<Tab client:idle value="css">CSS Module</Tab>
|
||||
</TabsList>
|
||||
<TabsPanel client:idle value="component" initial>
|
||||
<ServerCode code={componentModuleStr} lang="tsx" />
|
||||
</TabsPanel>
|
||||
<TabsPanel client:idle value="css">
|
||||
<ServerCode code={cssModuleStr} lang="css" />
|
||||
</TabsPanel>
|
||||
<PlayButtonDemo client:idle />
|
||||
</TabsRoot>
|
||||
</FrameworkCase>
|
||||
### State
|
||||
|
||||
<FrameworkCase frameworks={["html"]}>
|
||||
<TabsRoot client:idle>
|
||||
<TabsList client:idle label="HTML implementation">
|
||||
<Tab client:idle value="html" initial>HTML</Tab>
|
||||
<Tab client:idle value="css">CSS</Tab>
|
||||
<Tab client:idle value="javascript">JS</Tab>
|
||||
</TabsList>
|
||||
<TabsPanel client:idle value="html" initial>
|
||||
<ServerCode code={htmlStr} lang="html" />
|
||||
</TabsPanel>
|
||||
<TabsPanel client:idle value="css">
|
||||
<ServerCode code={htmlCssStr} lang="css" />
|
||||
</TabsPanel>
|
||||
<TabsPanel client:idle value="javascript">
|
||||
<ServerCode code={htmlJsStr} lang="js" />
|
||||
</TabsPanel>
|
||||
<PlayButtonDemo client:idle />
|
||||
</TabsRoot>
|
||||
</FrameworkCase>
|
||||
<ApiRefSection component="PlayButton" section="state" />
|
||||
|
||||
## Data Attributes
|
||||
### Data Attributes
|
||||
|
||||
The PlayButton automatically sets data attributes based on media state:
|
||||
|
||||
- `data-paused` - Present when media is paused, absent when playing
|
||||
|
||||
Use these attributes for state-based styling in your CSS.
|
||||
|
||||
<FrameworkCase frameworks={["react"]}>
|
||||
|
||||
## Props
|
||||
|
||||
All standard button props are supported, plus:
|
||||
|
||||
| Prop | Type | Description |
|
||||
|------|------|-------------|
|
||||
| `children` | `ReactNode` | Button content (typically icons) |
|
||||
| `className` | `string` | CSS class name |
|
||||
|
||||
</FrameworkCase>
|
||||
|
||||
## Accessibility
|
||||
|
||||
- Automatically includes proper ARIA labels
|
||||
- Keyboard accessible (Space/Enter)
|
||||
- Announces state changes to screen readers
|
||||
<ApiRefSection component="PlayButton" section="dataAttributes" />
|
||||
|
||||
@@ -1,113 +0,0 @@
|
||||
---
|
||||
title: TimeSlider
|
||||
frameworkTitle:
|
||||
html: time-slider
|
||||
description: A slider component for seeking through media content
|
||||
---
|
||||
|
||||
import { TimeSliderDemo } from '@/examples/react/TimeSlider/TimeSliderDemo';
|
||||
import componentModuleStr from '@/examples/react/TimeSlider/BasicTimeSlider.tsx?raw';
|
||||
import cssModuleStr from '@/examples/react/TimeSlider/TimeSlider.module.css?raw';
|
||||
import htmlHorizontalStr from '@/examples/html/time-slider/snippet-horizontal.html?raw';
|
||||
import htmlVerticalStr from '@/examples/html/time-slider/snippet-vertical.html?raw';
|
||||
import htmlCssStr from '@/examples/html/time-slider/time-slider.css?raw';
|
||||
import FrameworkCase from '@/components/docs/FrameworkCase.astro';
|
||||
import ServerCode from '@/components/Code/ServerCode.astro';
|
||||
import { TabsRoot, TabsList, TabsPanel, Tab } from '@/components/Tabs';
|
||||
|
||||
## Features
|
||||
|
||||
- Supports both horizontal and vertical orientations
|
||||
- Displays current playback position
|
||||
- Shows preview position on hover
|
||||
- Keyboard accessible (Arrow keys for seeking)
|
||||
- Touch-friendly drag interaction
|
||||
|
||||
## Example
|
||||
|
||||
<FrameworkCase frameworks={["react"]}>
|
||||
<TabsRoot client:idle>
|
||||
<TabsList client:idle label="React implementation">
|
||||
<Tab client:idle value="component" initial>Component</Tab>
|
||||
<Tab client:idle value="css">CSS Module</Tab>
|
||||
</TabsList>
|
||||
<TabsPanel client:idle value="component" initial>
|
||||
<ServerCode code={componentModuleStr} lang="tsx" />
|
||||
</TabsPanel>
|
||||
<TabsPanel client:idle value="css">
|
||||
<ServerCode code={cssModuleStr} lang="css" />
|
||||
</TabsPanel>
|
||||
<TimeSliderDemo client:idle />
|
||||
</TabsRoot>
|
||||
</FrameworkCase>
|
||||
|
||||
<FrameworkCase frameworks={["html"]}>
|
||||
<TabsRoot client:idle>
|
||||
<TabsList client:idle label="HTML implementation">
|
||||
<Tab client:idle value="html-horizontal" initial>HTML (Horizontal)</Tab>
|
||||
<Tab client:idle value="html-vertical">HTML (Vertical)</Tab>
|
||||
<Tab client:idle value="css">CSS</Tab>
|
||||
</TabsList>
|
||||
<TabsPanel client:idle value="html-horizontal" initial>
|
||||
<ServerCode code={htmlHorizontalStr} lang="html" />
|
||||
</TabsPanel>
|
||||
<TabsPanel client:idle value="html-vertical">
|
||||
<ServerCode code={htmlVerticalStr} lang="html" />
|
||||
</TabsPanel>
|
||||
<TabsPanel client:idle value="css">
|
||||
<ServerCode code={htmlCssStr} lang="css" />
|
||||
</TabsPanel>
|
||||
<TimeSliderDemo client:idle />
|
||||
</TabsRoot>
|
||||
</FrameworkCase>
|
||||
|
||||
<FrameworkCase frameworks={["react"]}>
|
||||
|
||||
## Compound Components
|
||||
|
||||
TimeSlider is composed of multiple sub-components:
|
||||
|
||||
### TimeSlider.Root
|
||||
The container component that manages state and interactions.
|
||||
|
||||
**Props:**
|
||||
- `orientation?: 'horizontal' | 'vertical'` - Slider orientation (default: 'horizontal')
|
||||
- All standard div props
|
||||
|
||||
### TimeSlider.Track
|
||||
The background track element that contains progress and pointer indicators.
|
||||
|
||||
### TimeSlider.Progress
|
||||
Visual indicator showing how much of the media has been played.
|
||||
|
||||
### TimeSlider.Pointer
|
||||
Shows the hover/preview position when user moves cursor over the slider.
|
||||
|
||||
### TimeSlider.Thumb
|
||||
The draggable handle that indicates and controls the current playback position.
|
||||
|
||||
</FrameworkCase>
|
||||
|
||||
## Data Attributes
|
||||
|
||||
The TimeSlider automatically sets data attributes:
|
||||
|
||||
- `data-orientation` - Current orientation ('horizontal' or 'vertical')
|
||||
- `data-current-time` - Current playback time in seconds
|
||||
- `data-duration` - Total media duration in seconds
|
||||
|
||||
Use these attributes for state-based styling in your CSS.
|
||||
|
||||
## CSS Variables
|
||||
|
||||
The component exposes CSS variables for positioning:
|
||||
|
||||
- `--slider-fill` - Percentage of progress (0-100%)
|
||||
- `--slider-pointer` - Percentage of pointer position (0-100%)
|
||||
|
||||
## Accessibility
|
||||
|
||||
- Includes proper ARIA role (`slider`)
|
||||
- Keyboard accessible (Arrow keys, Home, End)
|
||||
- Screen reader announcements for time values
|
||||
- Proper aria-valuemin, aria-valuemax, aria-valuenow attributes
|
||||
@@ -1,110 +0,0 @@
|
||||
---
|
||||
title: VolumeSlider
|
||||
frameworkTitle:
|
||||
html: volume-slider
|
||||
description: A slider component for controlling media volume
|
||||
---
|
||||
|
||||
import { VolumeSliderDemo } from '@/examples/react/VolumeSlider/VolumeSliderDemo';
|
||||
import componentModuleStr from '@/examples/react/VolumeSlider/BasicVolumeSlider.tsx?raw';
|
||||
import cssModuleStr from '@/examples/react/VolumeSlider/VolumeSlider.module.css?raw';
|
||||
import htmlHorizontalStr from '@/examples/html/volume-slider/snippet-horizontal.html?raw';
|
||||
import htmlVerticalStr from '@/examples/html/volume-slider/snippet-vertical.html?raw';
|
||||
import htmlCssStr from '@/examples/html/volume-slider/volume-slider.css?raw';
|
||||
import FrameworkCase from '@/components/docs/FrameworkCase.astro';
|
||||
import ServerCode from '@/components/Code/ServerCode.astro';
|
||||
import { TabsRoot, TabsList, TabsPanel, Tab } from '@/components/Tabs';
|
||||
|
||||
## Features
|
||||
|
||||
- Supports both horizontal and vertical orientations
|
||||
- Displays current volume level
|
||||
- Reflects muted state
|
||||
- Keyboard accessible (Arrow keys for volume adjustment)
|
||||
- Touch-friendly drag interaction
|
||||
|
||||
## Example
|
||||
|
||||
<FrameworkCase frameworks={["react"]}>
|
||||
<TabsRoot client:idle>
|
||||
<TabsList client:idle label="React implementation">
|
||||
<Tab client:idle value="component" initial>Component</Tab>
|
||||
<Tab client:idle value="css">CSS Module</Tab>
|
||||
</TabsList>
|
||||
<TabsPanel client:idle value="component" initial>
|
||||
<ServerCode code={componentModuleStr} lang="tsx" />
|
||||
</TabsPanel>
|
||||
<TabsPanel client:idle value="css">
|
||||
<ServerCode code={cssModuleStr} lang="css" />
|
||||
</TabsPanel>
|
||||
<VolumeSliderDemo client:idle />
|
||||
</TabsRoot>
|
||||
</FrameworkCase>
|
||||
|
||||
<FrameworkCase frameworks={["html"]}>
|
||||
<TabsRoot client:idle>
|
||||
<TabsList client:idle label="HTML implementation">
|
||||
<Tab client:idle value="html-horizontal" initial>HTML (Horizontal)</Tab>
|
||||
<Tab client:idle value="html-vertical">HTML (Vertical)</Tab>
|
||||
<Tab client:idle value="css">CSS</Tab>
|
||||
</TabsList>
|
||||
<TabsPanel client:idle value="html-horizontal" initial>
|
||||
<ServerCode code={htmlHorizontalStr} lang="html" />
|
||||
</TabsPanel>
|
||||
<TabsPanel client:idle value="html-vertical">
|
||||
<ServerCode code={htmlVerticalStr} lang="html" />
|
||||
</TabsPanel>
|
||||
<TabsPanel client:idle value="css">
|
||||
<ServerCode code={htmlCssStr} lang="css" />
|
||||
</TabsPanel>
|
||||
<VolumeSliderDemo client:idle />
|
||||
</TabsRoot>
|
||||
</FrameworkCase>
|
||||
|
||||
<FrameworkCase frameworks={["react"]}>
|
||||
|
||||
## Compound Components
|
||||
|
||||
VolumeSlider is composed of multiple sub-components:
|
||||
|
||||
### VolumeSlider.Root
|
||||
The container component that manages state and interactions.
|
||||
|
||||
**Props:**
|
||||
- `orientation?: 'horizontal' | 'vertical'` - Slider orientation (default: 'horizontal')
|
||||
- All standard div props
|
||||
|
||||
### VolumeSlider.Track
|
||||
The background track element that contains the progress indicator.
|
||||
|
||||
### VolumeSlider.Progress
|
||||
Visual indicator showing the current volume level.
|
||||
|
||||
### VolumeSlider.Thumb
|
||||
The draggable handle that indicates and controls the current volume level.
|
||||
|
||||
</FrameworkCase>
|
||||
|
||||
## Data Attributes
|
||||
|
||||
The VolumeSlider automatically sets data attributes:
|
||||
|
||||
- `data-orientation` - Current orientation ('horizontal' or 'vertical')
|
||||
- `data-muted` - Present when volume is muted
|
||||
- `data-volume-level` - Volume level category: 'high' (>50%), 'medium' (25-50%), 'low' (1-24%), or 'off' (0%)
|
||||
|
||||
Use these attributes for state-based styling in your CSS.
|
||||
|
||||
## CSS Variables
|
||||
|
||||
The component exposes CSS variables for positioning:
|
||||
|
||||
- `--slider-fill` - Percentage of volume level (0-100%)
|
||||
- `--slider-pointer` - Percentage of pointer position (0-100%)
|
||||
|
||||
## Accessibility
|
||||
|
||||
- Includes proper ARIA role (`slider`)
|
||||
- Keyboard accessible (Arrow keys, Home, End)
|
||||
- Screen reader announcements for volume values
|
||||
- Proper aria-valuemin, aria-valuemax, aria-valuenow attributes
|
||||
Reference in New Issue
Block a user