feat(ui): improve avatar dropdown keyboard accessibility
- Add keyboard event handler for Enter and Space keys - Support proper dropdown toggle via keyboard navigation - Prevent default behavior for key events - Enhance accessibility for screen reader users
This commit is contained in:
@@ -38,6 +38,12 @@ const AvatarDropdown: React.FC<AvatarDropdownProps> = ({
|
||||
<div className='relative' ref={dropdownRef}>
|
||||
<button
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
onKeyDown={event => {
|
||||
if (event.key === 'Enter' || event.key === ' ') {
|
||||
event.preventDefault();
|
||||
setIsOpen(prev => !prev);
|
||||
}
|
||||
}}
|
||||
className='w-10 h-10 rounded-full bg-slate-200 dark:bg-slate-700 flex items-center justify-center text-lg font-bold text-slate-600 dark:text-slate-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-slate-900'
|
||||
aria-label='User menu'
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user