Merge branch 'a11y' into 'develop'

Improve focus handlding and focused state styles

See merge request soapbox-pub/soapbox!2628

app/soapbox/components/account.tsx

@@ -189,6 +189,7 @@ const Account = ({
             wrapper={(children) => <HoverRefWrapper className='relative' accountId={account.id} inline>{children}</HoverRefWrapper>}
           >
             <LinkEl
+              className='rounded-full'
               to={`/@${account.acct}`}
               title={account.acct}
               onClick={(event: React.MouseEvent) => event.stopPropagation()}

app/soapbox/components/ui/tabs/tabs.css

@@ -13,7 +13,8 @@
 [data-reach-tab] {
   @apply flex-1 flex justify-center items-center
   py-4 px-1 text-center font-medium text-sm text-gray-700
-  dark:text-gray-600 hover:text-gray-800 dark:hover:text-gray-500;
+  dark:text-gray-600 hover:text-gray-800 dark:hover:text-gray-500
+  focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 dark:ring-gray-800 dark:ring-offset-0 dark:focus-visible:ring-primary-500;
 }
 
 [data-reach-tab][data-selected] {

app/soapbox/components/ui/toggle/toggle.tsx

@@ -16,7 +16,7 @@ const Toggle: React.FC<IToggle> = ({ id, size = 'md', name, checked, onChange, r
 
   return (
     <button
-      className={clsx('flex-none rounded-full', {
+      className={clsx('flex-none rounded-full focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:ring-gray-800 dark:ring-offset-0 dark:focus:ring-primary-500', {
         'bg-gray-500': !checked && !disabled,
         'bg-primary-600': checked && !disabled,
         'bg-gray-200': !checked && disabled,
@@ -46,6 +46,7 @@ const Toggle: React.FC<IToggle> = ({ id, size = 'md', name, checked, onChange, r
         onChange={onChange}
         required={required}
         disabled={disabled}
+        tabIndex={-1}
       />
     </button>
   );

app/soapbox/features/chats/components/chat-list-item.tsx

@@ -62,14 +62,21 @@ const ChatListItem: React.FC<IChatListItemInterface> = ({ chat, onClick }) => {
     icon: require('@tabler/icons/logout.svg'),
   }], []);
 
+  const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (event) => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      onClick(chat);
+    }
+  };
+
   return (
-    // eslint-disable-next-line jsx-a11y/interactive-supports-focus
     <div
       role='button'
       key={chat.id}
       onClick={() => onClick(chat)}
+      onKeyDown={handleKeyDown}
       className='group flex w-full flex-col rounded-lg px-2 py-3 hover:bg-gray-100 focus:shadow-inset-ring dark:hover:bg-gray-800'
       data-testid='chat-list-item'
+      tabIndex={0}
     >
       <HStack alignItems='center' justifyContent='between' space={2} className='w-full'>
         <HStack alignItems='center' space={2} className='overflow-hidden'>

app/soapbox/features/edit-profile/components/header-picker.tsx

@@ -29,6 +29,7 @@ const HeaderPicker = React.forwardRef<HTMLInputElement, IMediaInput>(({ src, onC
     <label
       className='dark:sm:shadow-inset relative h-24 w-full cursor-pointer overflow-hidden rounded-lg bg-primary-100 text-primary-500 dark:bg-gray-800 dark:text-accent-blue sm:h-36 sm:shadow'
       title={intl.formatMessage(messages.title)}
+      tabIndex={0}
     >
       {src && <img className='h-full w-full object-cover' src={src} alt='' />}
       <HStack

app/soapbox/features/ui/components/modals/compose-event-modal/upload-button.tsx

@@ -34,7 +34,7 @@ const UploadButton: React.FC<IUploadButton> = ({ disabled, onSelectFile }) => {
         onClick={handleClick}
       />
 
-      <Text size='sm' theme='primary' weight='semibold' transform='uppercase'>
+      <Text size='sm' theme='primary' weight='semibold' transform='uppercase' tabIndex={0}>
         <FormattedMessage id='compose_event.upload_banner' defaultMessage='Upload photo' />
       </Text>
       <input

app/soapbox/features/ui/components/profile-dropdown.tsx

@@ -112,7 +112,12 @@ const ProfileDropdown: React.FC<IProfileDropdown> = ({ account, children }) => {
 
   return (
     <>
-      <button type='button' ref={refs.setReference} onClick={toggleVisible}>
+      <button
+        className='rounded-full focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:ring-gray-800 dark:ring-offset-0 dark:focus:ring-primary-500'
+        type='button'
+        ref={refs.setReference}
+        onClick={toggleVisible}
+      >
         {children}
       </button>