mirror of
https://github.com/danny-avila/LibreChat.git
synced 2026-01-09 12:08:50 +01:00
a5189052ec
* 🔧 refactor: Improve accessibility and styling in ChatGroupItem and FilterPrompts components * 🔧 fix: Add button type and keyboard accessibility to dropdown menu trigger in ChatGroupItem * 🔧 fix(757): Enhance accessibility by updating aria-labels and adding localization for prompt groups * 🔧 fix(618): Update version to 0.3.1 and enhance accessibility in InfoHoverCard component * 🔧 fix(618): Update aria-label in InfoHoverCard to use dynamic text prop for improved accessibility * 🔧 fix: Enhance accessibility by updating aria-labels and roles in Conversations components * 🔧 fix(620): Enhance accessibility by adding tabIndex to Tabs.Content components in ArtifactTabs, Settings, and Speech components * refactor: remove RevokeKeysButton component and update related components for accessibility - Deleted RevokeKeysButton component. - Updated SharedLinks and General components to use Label for accessibility. - Enhanced Personalization component with aria-labelledby and aria-describedby attributes. - Refactored ConversationModeSwitch to use ToggleSwitch for better state management. - Improved AutoSendTextSelector with local state management and accessibility attributes. - Replaced Switch components with ToggleSwitch in various Speech and TTS components for consistency. - Added aria-labelledby attributes to Dropdown components for better accessibility. - Updated translation.json to include new localization keys and improved existing ones. - Enhanced Slider component to support aria attributes for better accessibility. * 🔧 fix: Enhance user feedback for API key operations with success and error messages * 🔧 fix: Update aria-labels in Avatar component for improved localization and accessibility * 🔧 fix: Refactor handleFile and handleDrop functions for improved readability and maintainability
57 lines
1.8 KiB
TypeScript
57 lines
1.8 KiB
TypeScript
import * as React from 'react';
|
|
import * as SliderPrimitive from '@radix-ui/react-slider';
|
|
import { cn } from '~/utils';
|
|
|
|
type SliderProps = React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> & {
|
|
className?: string;
|
|
onDoubleClick?: () => void;
|
|
'aria-describedby'?: string;
|
|
} & (
|
|
| { 'aria-label': string; 'aria-labelledby'?: never }
|
|
| { 'aria-labelledby': string; 'aria-label'?: never }
|
|
| { 'aria-label': string; 'aria-labelledby': string }
|
|
);
|
|
|
|
const Slider = React.forwardRef<React.ElementRef<typeof SliderPrimitive.Root>, SliderProps>(
|
|
(
|
|
{
|
|
className,
|
|
onDoubleClick,
|
|
'aria-labelledby': ariaLabelledBy,
|
|
'aria-label': ariaLabel,
|
|
'aria-describedby': ariaDescribedBy,
|
|
...props
|
|
},
|
|
ref,
|
|
) => (
|
|
<SliderPrimitive.Root
|
|
ref={ref}
|
|
{...props}
|
|
{...{
|
|
className: cn(
|
|
'relative flex w-full cursor-pointer touch-none select-none items-center',
|
|
className,
|
|
),
|
|
onDoubleClick,
|
|
}}
|
|
>
|
|
<SliderPrimitive.Track
|
|
{...{ className: 'relative h-2 w-full grow overflow-hidden rounded-full bg-secondary' }}
|
|
>
|
|
<SliderPrimitive.Range {...{ className: 'absolute h-full bg-primary' }} />
|
|
</SliderPrimitive.Track>
|
|
<SliderPrimitive.Thumb
|
|
{...{
|
|
className:
|
|
'block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
|
|
'aria-labelledby': ariaLabelledBy,
|
|
'aria-label': ariaLabel,
|
|
'aria-describedby': ariaDescribedBy,
|
|
}}
|
|
/>
|
|
</SliderPrimitive.Root>
|
|
),
|
|
);
|
|
Slider.displayName = SliderPrimitive.Root.displayName;
|
|
|
|
export { Slider };
|