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

Feature/improve accessibility #1814

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
+736 −718
Open

Feature/improve accessibility #1814

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6e5eeee
feat: enhance accessibility with ARIA attributes in components
SeanTolstoyevski Feb 1, 2025
13e121d
apply prettier
SeanTolstoyevski Feb 1, 2025
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
8 changes: 4 additions & 4 deletions src/renderer/Sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ export default function Sidebar(props: Props) {
<MenuList sx={{ marginBottom: '20px' }}>
<MenuItem onClick={handleCreateNewSession} sx={{ padding: '0.2rem 0.1rem', margin: '0.1rem' }}>
<ListItemIcon>
<IconButton>
<IconButton aria-label={t('new chat') || undefined}>
<AddIcon fontSize="small" />
</IconButton>
</ListItemIcon>
Expand All @@ -103,7 +103,7 @@ export default function Sidebar(props: Props) {

<MenuItem onClick={props.openCopilotWindow} sx={{ padding: '0.2rem 0.1rem', margin: '0.1rem' }}>
<ListItemIcon>
<IconButton>
<IconButton aria-label={t('My Copilots') || undefined}>
<SmartToyIcon fontSize="small" />
</IconButton>
</ListItemIcon>
Expand All @@ -119,7 +119,7 @@ export default function Sidebar(props: Props) {
sx={{ padding: '0.2rem 0.1rem', margin: '0.1rem' }}
>
<ListItemIcon>
<IconButton>
<IconButton aria-label={t('settings') || undefined}>
<SettingsIcon fontSize="small" />
</IconButton>
</ListItemIcon>
Expand All @@ -131,7 +131,7 @@ export default function Sidebar(props: Props) {

<MenuItem onClick={props.openAboutWindow} sx={{ padding: '0.2rem 0.1rem', margin: '0.1rem' }}>
<ListItemIcon>
<IconButton>
<IconButton aria-label={t('About') || undefined}>
<InfoOutlinedIcon fontSize="small" />
</IconButton>
</ListItemIcon>
Expand Down
88 changes: 41 additions & 47 deletions src/renderer/components/AIProviderSelect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@ import { Chip, MenuItem, Typography } from '@mui/material'
import { ModelProvider, ModelSettings } from '../../shared/types'
import { useTranslation } from 'react-i18next'
import { AIModelProviderMenuOptionList } from '../packages/models'
import * as React from 'react';
import Button from '@mui/material/Button';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import StyledMenu from './StyledMenu';
import StarIcon from '@mui/icons-material/Star';
import * as React from 'react'
import Button from '@mui/material/Button'
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
import StyledMenu from './StyledMenu'
import StarIcon from '@mui/icons-material/Star'

interface ModelConfigProps {
settings: ModelSettings
Expand All @@ -19,29 +19,25 @@ export default function AIProviderSelect(props: ModelConfigProps) {
const { settings, setSettings, className, hideCustomProviderManage } = props
const { t } = useTranslation()

const [menuAnchorEl, setMenuAnchorEl] = React.useState<null | HTMLElement>(null);
const menuState = Boolean(menuAnchorEl);
const [menuAnchorEl, setMenuAnchorEl] = React.useState<null | HTMLElement>(null)
const menuState = Boolean(menuAnchorEl)
const openMenu = (event: React.MouseEvent<HTMLElement>) => {
setMenuAnchorEl(event.currentTarget);
};
setMenuAnchorEl(event.currentTarget)
}
const closeMenu = () => {
setMenuAnchorEl(null);
};
setMenuAnchorEl(null)
}

return (
<>
<Typography variant='caption' className='opacity-50'>
<Typography variant="caption" className="opacity-50">
{t('Model Provider')}:
</Typography>
<div className='flex items-end justify-between'>
<Button
variant="contained"
disableElevation
onClick={openMenu}
endIcon={<KeyboardArrowDownIcon />}
>
<Typography className='text-left' maxWidth={200} noWrap>
{ AIModelProviderMenuOptionList.find((provider) => provider.value === settings.aiProvider)?.label || 'Unknown' }
<div className="flex items-end justify-between">
<Button variant="contained" disableElevation onClick={openMenu} endIcon={<KeyboardArrowDownIcon />}>
<Typography className="text-left" maxWidth={200} noWrap>
{AIModelProviderMenuOptionList.find((provider) => provider.value === settings.aiProvider)
?.label || 'Unknown'}
</Typography>
</Button>
<StyledMenu
Expand All @@ -57,34 +53,32 @@ export default function AIProviderSelect(props: ModelConfigProps) {
horizontal: 'left',
}}
>
{
AIModelProviderMenuOptionList.map((provider) => (
<MenuItem disableRipple
onClick={() => {
setSettings({
...settings,
aiProvider: provider.value as ModelProvider,
})
closeMenu()
}}
>
<StarIcon />
{provider.label}
{provider.featured && (
<Chip
label={t('Easy Access')}
size="small"
color="success"
variant="outlined"
sx={{ marginLeft: '10px' }}
/>
)}
</MenuItem>
))
}
{AIModelProviderMenuOptionList.map((provider) => (
<MenuItem
disableRipple
onClick={() => {
setSettings({
...settings,
aiProvider: provider.value as ModelProvider,
})
closeMenu()
}}
>
<StarIcon />
{provider.label}
{provider.featured && (
<Chip
label={t('Easy Access')}
size="small"
color="success"
variant="outlined"
sx={{ marginLeft: '10px' }}
/>
)}
</MenuItem>
))}
</StyledMenu>
</div>
</>
)
}

3 changes: 1 addition & 2 deletions src/renderer/components/Accordion.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,7 @@ export const Accordion = styled((props: AccordionProps) => (
<MuiAccordion disableGutters elevation={0} square {...props} />
))(({ theme }) => ({
border: `1px solid ${theme.palette.divider}`,
'&:not(:last-child)': {
},
'&:not(:last-child)': {},
'&:before': {
display: 'none',
},
Expand Down
11 changes: 4 additions & 7 deletions src/renderer/components/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,20 +6,17 @@ import * as sessionActions from '../stores/sessionActions'
import Toolbar from './Toolbar'
import { cn } from '@/lib/utils'

interface Props { }
interface Props {}

export default function Header(props: Props) {
const theme = useTheme()
const currentSession = useAtomValue(atoms.currentSessionAtom)
const setChatConfigDialogSession = useSetAtom(atoms.chatConfigDialogAtom)

useEffect(() => {
if (
currentSession.name === 'Untitled'
&& currentSession.messages.length >= 2
) {
if (currentSession.name === 'Untitled' && currentSession.messages.length >= 2) {
sessionActions.generateName(currentSession.id)
return
return
}
}, [currentSession.messages.length])

Expand All @@ -36,7 +33,7 @@ export default function Header(props: Props) {
borderBottomColor: theme.palette.divider,
}}
>
<div className={cn('w-full mx-auto flex flex-row')}>
<div className={cn('w-full mx-auto flex flex-row')} role="main" aria-label={currentSession.name}>
<Typography
variant="h6"
color="inherit"
Expand Down
57 changes: 29 additions & 28 deletions src/renderer/components/InputBox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,7 @@ import { useTranslation } from 'react-i18next'
import * as atoms from '../stores/atoms'
import { useSetAtom } from 'jotai'
import * as sessionActions from '../stores/sessionActions'
import {
SendHorizontal,
Settings2,
} from 'lucide-react'
import { SendHorizontal, Settings2 } from 'lucide-react'
import { cn } from '@/lib/utils'
import icon from '../static/icon.png'
import { trackingEvent } from '@/packages/event'
Expand Down Expand Up @@ -50,13 +47,7 @@ export default function InputBox(props: Props) {
}

const onKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
if (
event.keyCode === 13 &&
!event.shiftKey &&
!event.ctrlKey &&
!event.altKey &&
!event.metaKey
) {
if (event.keyCode === 13 && !event.shiftKey && !event.ctrlKey && !event.altKey && !event.metaKey) {
event.preventDefault()
handleSubmit()
return
Expand All @@ -71,38 +62,47 @@ export default function InputBox(props: Props) {
const [easterEgg, setEasterEgg] = useState(false)

return (
<div className='pl-2 pr-4'
<div
className="pl-2 pr-4"
style={{
borderTopWidth: '1px',
borderTopStyle: 'solid',
borderTopColor: theme.palette.divider,
}}
>
<div className={cn('w-full mx-auto flex flex-col')}>
<div className='flex flex-row flex-nowrap justify-between py-1'>
<div className='flex flex-row items-center'>
<MiniButton className='mr-2 hover:bg-transparent' style={{ color: theme.palette.text.primary }}
<div className={cn('w-full mx-auto flex flex-col')} role="region" aria-label={t('Input Area') || undefined}>
<h6 className="sr-only">{t('Input Area')}</h6>
<div className="flex flex-row flex-nowrap justify-between py-1">
<div className="flex flex-row items-center">
<MiniButton
className="mr-2 hover:bg-transparent"
style={{ color: theme.palette.text.primary }}
onClick={() => {
setEasterEgg(true)
setTimeout(() => setEasterEgg(false), 1000)
}}
ariaHidden={true}
>
<img className={cn('w-5 h-5', easterEgg ? 'animate-spin' : '')} src={icon} />
</MiniButton>
<MiniButton className='mr-2' style={{ color: theme.palette.text.primary }}
<MiniButton
className="mr-2"
style={{ color: theme.palette.text.primary }}
onClick={() => setChatConfigDialogSession(sessionActions.getCurrentSession())}
tooltipTitle={
<div className='text-center inline-block'>
<div className="text-center inline-block">
<span>{t('Customize settings for the current conversation')}</span>
</div>
}
tooltipPlacement='top'
ariaLabel={t('Customize settings for the current conversation') || undefined}
tooltipPlacement="top"
>
<Settings2 size='22' strokeWidth={1} />
<Settings2 size="22" strokeWidth={1} />
</MiniButton>
</div>
<div className='flex flex-row items-center'>
<MiniButton className='w-8 ml-2'
<div className="flex flex-row items-center">
<MiniButton
className="w-8 ml-2"
style={{
color: theme.palette.getContrastText(theme.palette.primary.main),
backgroundColor: theme.palette.primary.main,
Expand All @@ -112,21 +112,23 @@ export default function InputBox(props: Props) {
{t('[Enter] send, [Shift+Enter] line break, [Ctrl+Enter] send without generating')}
</Typography>
}
tooltipPlacement='top'
tooltipPlacement="top"
onClick={() => handleSubmit()}
ariaLabel={t('send') || undefined}
>
<SendHorizontal size='22' strokeWidth={1} />
<SendHorizontal size="22" strokeWidth={1} />
</MiniButton>
</div>
</div>
<div className='w-full pl-1 pb-2'>
<div className="w-full pl-1 pb-2">
<textarea
className={cn(
`w-full max-h-[${maxTextareaHeight}px]`,
'overflow-y resize-none border-none outline-none',
'bg-transparent p-1'
)}
value={messageInput} onChange={onMessageInput}
value={messageInput}
onChange={onMessageInput}
onKeyDown={onKeyDown}
ref={inputRef}
style={{
Expand All @@ -138,8 +140,7 @@ export default function InputBox(props: Props) {
}}
placeholder={t('Type your question here...') || ''}
/>
<div className='flex flex-row items-center'>
</div>
<div className="flex flex-row items-center"></div>
</div>
</div>
</div>
Expand Down
Loading