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}>
|
<div className='relative' ref={dropdownRef}>
|
||||||
<button
|
<button
|
||||||
onClick={() => setIsOpen(!isOpen)}
|
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'
|
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'
|
aria-label='User menu'
|
||||||
>
|
>
|
||||||
|
|||||||
Reference in New Issue
Block a user