will/rxminder
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(accessibility): improve dose and reminder cards

Browse Source
This commit is contained in:
William Valentin
2025-09-23 10:47:48 -07:00
parent 2cb56d5f5f
commit 35dcae07e5
2 changed files with 56 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
components/ui/ReminderCard.tsx
View File

@@ -12,15 +12,23 @@ const ReminderCard: React.FC<ReminderCardProps> = ({ reminder }) => {
minute: '2-digit',
});
const ReminderIcon = getReminderIcon(reminder.icon);
const titleId = `reminder-${reminder.id}-title`;
return (
<li className='shadow-md rounded-lg p-4 flex flex-col justify-between transition-all duration-300 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700'>
<li
tabIndex={0}
aria-labelledby={titleId}
className='shadow-md rounded-lg p-4 flex flex-col justify-between transition-all duration-300 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sky-400 dark:focus:ring-offset-slate-900'
>
<div>
<div className='flex justify-between items-start'>
<div className='flex items-center space-x-3'>
<ReminderIcon className='w-7 h-7 text-sky-500 dark:text-sky-400 flex-shrink-0' />
<div>
<h4 className='font-bold text-lg text-slate-800 dark:text-slate-100'>
<h4
id={titleId}
className='font-bold text-lg text-slate-800 dark:text-slate-100'
>
{reminder.title}
</h4>
</div>