Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

💻 feat(a11y): added ariaLabel for all the sliders #3436

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
+59 −125
Open

💻 feat(a11y): added ariaLabel for all the sliders #3436

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7029b89
feat: added `ariaLabel` for all the sliders
berry-13 Jul 23, 2024
a94754c
remove unrelated change
berry-13 Jul 23, 2024
207aa12
refactor: update `cn` import path and used `props.aria-label`
berry-13 Aug 20, 2024
67c7ad3
Merge branch 'main' into ariaLabel-sliders
berry-13 Aug 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions client/src/components/Endpoints/Settings/Advanced.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,6 +143,7 @@ export default function Settings({
/>
</div>
<Slider
aria-label="Temperature Slider"
disabled={readonly}
value={[(temperatureValue as number) ?? 1]}
onValueChange={(value) => setTemperature(value[0])}
Expand Down Expand Up @@ -181,6 +182,7 @@ export default function Settings({
/>
</div>
<Slider
aria-label="Top P Slider"
disabled={readonly}
value={[(topPValue as number) ?? 1]}
onValueChange={(value) => setTopP(value[0])}
Expand Down Expand Up @@ -220,6 +222,7 @@ export default function Settings({
/>
</div>
<Slider
aria-label="Frequency Penalty Slider"
disabled={readonly}
value={[(freqPValue as number) ?? 0]}
onValueChange={(value) => setFreqP(value[0])}
Expand Down Expand Up @@ -259,6 +262,7 @@ export default function Settings({
/>
</div>
<Slider
aria-label="Presence Penalty Slider"
disabled={readonly}
value={[(presPValue as number) ?? 0]}
onValueChange={(value) => setPresP(value[0])}
Expand Down Expand Up @@ -313,6 +317,7 @@ export default function Settings({
<HoverCard openDelay={500}>
<HoverCardTrigger className="flex w-[52%] md:w-[125px]">
<Slider
aria-label="Image Detail Slider"
id="image-detail-slider"
disabled={readonly}
value={[
Expand Down
114 changes: 1 addition & 113 deletions client/src/components/Endpoints/Settings/AgentSettings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
/>
</div>
<Slider
aria-label="Temperature Slider"
disabled={readonly}
value={[temperature ?? 0]}
onValueChange={(value: number[]) => setTemperature(value[0])}
Expand Down Expand Up @@ -124,119 +125,6 @@ export default function Settings({ conversation, setOption, models, readonly }:
<OptionHover endpoint={conversation.endpoint ?? ''} type="skip" side={ESide.Bottom} />
</HoverCard>
</div>
{/* <HoverCard openDelay={300}>
<HoverCardTrigger className="grid w-full items-center gap-2">
<div className="flex justify-between">
<Label htmlFor="top-p-int" className="text-left text-sm font-medium">
Top P <small className="opacity-40">(default: 1)</small>
</Label>
<InputNumber
id="top-p-int"
disabled={readonly}
value={topP}
onChange={(value) => setTopP(value)}
max={1}
min={0}
step={0.01}
controls={false}
className={cn(
defaultTextProps,
cn(
optionText,
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200'
)
)}
/>
</div>
<Slider
disabled={readonly}
value={[topP]}
onValueChange={(value) => setTopP(value[0])}
doubleClickHandler={() => setTopP(1)}
max={1}
min={0}
step={0.01}
className="flex h-4 w-full"
/>
</HoverCardTrigger>
<OptionHover type="topp" side="left" />
</HoverCard>

<HoverCard openDelay={300}>
<HoverCardTrigger className="grid w-full items-center gap-2">
<div className="flex justify-between">
<Label htmlFor="freq-penalty-int" className="text-left text-sm font-medium">
Frequency Penalty <small className="opacity-40">(default: 0)</small>
</Label>
<InputNumber
id="freq-penalty-int"
disabled={readonly}
value={freqP}
onChange={(value) => setFreqP(value)}
max={2}
min={-2}
step={0.01}
controls={false}
className={cn(
defaultTextProps,
cn(
optionText,
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200'
)
)}
/>
</div>
<Slider
disabled={readonly}
value={[freqP]}
onValueChange={(value) => setFreqP(value[0])}
doubleClickHandler={() => setFreqP(0)}
max={2}
min={-2}
step={0.01}
className="flex h-4 w-full"
/>
</HoverCardTrigger>
<OptionHover type="freq" side="left" />
</HoverCard>

<HoverCard openDelay={300}>
<HoverCardTrigger className="grid w-full items-center gap-2">
<div className="flex justify-between">
<Label htmlFor="pres-penalty-int" className="text-left text-sm font-medium">
Presence Penalty <small className="opacity-40">(default: 0)</small>
</Label>
<InputNumber
id="pres-penalty-int"
disabled={readonly}
value={presP}
onChange={(value) => setPresP(value)}
max={2}
min={-2}
step={0.01}
controls={false}
className={cn(
defaultTextProps,
cn(
optionText,
'reset-rc-number-input reset-rc-number-input-text-right h-auto w-12 border-0 group-hover/temp:border-gray-200'
)
)}
/>
</div>
<Slider
disabled={readonly}
value={[presP]}
onValueChange={(value) => setPresP(value[0])}
doubleClickHandler={() => setPresP(0)}
max={2}
min={-2}
step={0.01}
className="flex h-4 w-full"
/>
</HoverCardTrigger>
<OptionHover type="pres" side="left" />
</HoverCard> */}
</div>
</div>
);
Expand Down
4 changes: 4 additions & 0 deletions client/src/components/Endpoints/Settings/Anthropic.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -178,6 +178,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
/>
</div>
<Slider
aria-label="Temperature Slider"
disabled={readonly}
value={[temperature ?? anthropicSettings.temperature.default]}
onValueChange={(value) => setTemperature(value[0])}
Expand Down Expand Up @@ -218,6 +219,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
/>
</div>
<Slider
aria-label="Top P Slider"
disabled={readonly}
value={[topP ?? 0.7]}
onValueChange={(value) => setTopP(value[0])}
Expand Down Expand Up @@ -259,6 +261,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
/>
</div>
<Slider
aria-label="Top K Slider"
disabled={readonly}
value={[topK ?? 5]}
onValueChange={(value) => setTopK(value[0])}
Expand Down Expand Up @@ -297,6 +300,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
/>
</div>
<Slider
aria-label="Max Tokens Slider"
disabled={readonly}
value={[maxOutputTokens ?? anthropicSettings.maxOutputTokens.default]}
onValueChange={(value) => setMaxOutputTokens(value[0])}
Expand Down
4 changes: 4 additions & 0 deletions client/src/components/Endpoints/Settings/Google.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -162,6 +162,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
/>
</div>
<Slider
aria-label="Temperature Slider"
disabled={readonly}
value={[temperature ?? google.temperature.default]}
onValueChange={(value) => setTemperature(value[0])}
Expand Down Expand Up @@ -202,6 +203,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
/>
</div>
<Slider
aria-label="Top P Slider"
disabled={readonly}
value={[topP ?? google.topP.default]}
onValueChange={(value) => setTopP(value[0])}
Expand Down Expand Up @@ -243,6 +245,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
/>
</div>
<Slider
aria-label="Top K Slider"
disabled={readonly}
value={[topK ?? google.topK.default]}
onValueChange={(value) => setTopK(value[0])}
Expand Down Expand Up @@ -283,6 +286,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
/>
</div>
<Slider
aria-label="Max Output Tokens Slider"
disabled={readonly}
value={[maxOutputTokens ?? google.maxOutputTokens.default]}
onValueChange={(value) => setMaxOutputTokens(value[0])}
Expand Down
6 changes: 5 additions & 1 deletion client/src/components/Endpoints/Settings/OpenAI.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -268,6 +268,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
/>
</div>
<Slider
aria-label="Temperature Slider"
disabled={readonly}
value={[temperatureValue ?? openAISettings.temperature.default]}
onValueChange={(value) => setTemperature(value[0])}
Expand Down Expand Up @@ -308,6 +309,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
/>
</div>
<Slider
aria-label="Top P Slider"
disabled={readonly}
value={[topPValue ?? openAISettings.top_p.default]}
onValueChange={(value) => setTopP(value[0])}
Expand Down Expand Up @@ -354,6 +356,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
/>
</div>
<Slider
aria-label="Frequency Penalty Slider"
disabled={readonly}
value={[freqPValue ?? openAISettings.frequency_penalty.default]}
onValueChange={(value) => setFreqP(value[0])}
Expand Down Expand Up @@ -400,6 +403,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
/>
</div>
<Slider
aria-label="Presence Penalty Slider"
disabled={readonly}
value={[presPValue ?? openAISettings.presence_penalty.default]}
onValueChange={(value) => setPresP(value[0])}
Expand Down Expand Up @@ -454,7 +458,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
<HoverCard openDelay={500}>
<HoverCardTrigger className="flex w-[52%] md:w-[125px]">
<Slider
id="image-detail-slider"
aria-label="Image Detail Slider"
disabled={readonly}
value={[
imageDetailNumeric[imageDetail ?? ''] ??
Expand Down
4 changes: 4 additions & 0 deletions client/src/components/Endpoints/Settings/Plugins.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -248,6 +248,7 @@ export default function Settings({
/>
</div>
<Slider
aria-label="Temperature Slider"
disabled={readonly}
value={[temperatureValue ?? 0.8]}
onValueChange={(value) => setTemperature(value[0])}
Expand Down Expand Up @@ -288,6 +289,7 @@ export default function Settings({
/>
</div>
<Slider
aria-label="Top P Slider"
disabled={readonly}
value={[topPValue ?? 1]}
onValueChange={(value) => setTopP(value[0])}
Expand Down Expand Up @@ -329,6 +331,7 @@ export default function Settings({
/>
</div>
<Slider
aria-label="Frequency Penalty Slider"
disabled={readonly}
value={[freqPValue ?? 0]}
onValueChange={(value) => setFreqP(value[0])}
Expand Down Expand Up @@ -370,6 +373,7 @@ export default function Settings({
/>
</div>
<Slider
aria-label="Presence Penalty Slider"
disabled={readonly}
value={[presPValue ?? 0]}
onValueChange={(value) => setPresP(value[0])}
Expand Down
1 change: 1 addition & 0 deletions client/src/components/Nav/SettingsTabs/Account/Avatar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,6 +149,7 @@ function Avatar() {
<div className="flex w-full items-center justify-center space-x-4">
<span className="text-sm">Zoom:</span>
<Slider
aria-label="Zoom Slider"
value={[scale]}
min={1}
max={5}
Expand Down
1 change: 1 addition & 0 deletions client/src/components/Nav/SettingsTabs/Speech/STT/AutoSendTextSelector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ export default function AutoSendTextSelector() {
</div>
<div className="flex items-center justify-between">
<Slider
aria-label="Auto send text Slider"
value={[autoSendText ?? -1]}
onValueChange={(value) => setAutoSendText(value[0])}
doubleClickHandler={() => setAutoSendText(-1)}
Expand Down
1 change: 1 addition & 0 deletions client/src/components/Nav/SettingsTabs/Speech/STT/DecibelSelector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ export default function DecibelSelector() {
</div>
<div className="flex items-center justify-between">
<Slider
aria-label="Decibel Slider"
value={[decibelValue ?? -45]}
onValueChange={(value) => setDecibelValue(value[0])}
doubleClickHandler={() => setDecibelValue(-45)}
Expand Down
1 change: 1 addition & 0 deletions client/src/components/Nav/SettingsTabs/Speech/TTS/PlaybackRate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ export default function DecibelSelector() {
</div>
<div className="flex items-center justify-between">
<Slider
aria-label="Playback Rate Slider"
value={[playbackRate ?? 1]}
onValueChange={(value) => setPlaybackRate(value[0])}
doubleClickHandler={() => setPlaybackRate(null)}
Expand Down
1 change: 1 addition & 0 deletions client/src/components/SidePanel/Parameters/DynamicSlider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,6 +147,7 @@ function DynamicSlider({
)}
</div>
<Slider
ariaLabel={`${label ?? settingKey} Slider`}
id={`${settingKey}-dynamic-setting-slider`}
disabled={readonly}
value={[
Expand Down
2 changes: 1 addition & 1 deletion client/src/components/ui/AlertDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import * as React from 'react';
import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';

import { cn } from '../../utils';
import { cn } from '~/utils';

const AlertDialog = AlertDialogPrimitive.Root;

Expand Down
2 changes: 1 addition & 1 deletion client/src/components/ui/Checkbox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import * as React from 'react';
import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
import { Check } from 'lucide-react';
import { cn } from '../../utils';
import { cn } from '~/utils';

const Checkbox = React.forwardRef<
React.ElementRef<typeof CheckboxPrimitive.Root>,
Expand Down
2 changes: 1 addition & 1 deletion client/src/components/ui/HoverCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import * as React from 'react';
import * as HoverCardPrimitive from '@radix-ui/react-hover-card';

import { cn } from '../../utils';
import { cn } from '~/utils';

const HoverCard = HoverCardPrimitive.Root;

Expand Down
2 changes: 1 addition & 1 deletion client/src/components/ui/Label.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import * as React from 'react';
import * as LabelPrimitive from '@radix-ui/react-label';

import { cn } from '../../utils';
import { cn } from '~/utils';

const Label = React.forwardRef<
React.ElementRef<typeof LabelPrimitive.Root>,
Expand Down
Loading