From b5dd668609a114578e806cdb82e9a96821f6cfb0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Sun, 23 Jul 2023 19:22:15 +0200
Subject: [PATCH] Improve focus handlding and focused state styles
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/components/account.tsx                       | 1 +
 app/soapbox/components/ui/tabs/tabs.css                  | 3 ++-
 app/soapbox/components/ui/toggle/toggle.tsx              | 3 ++-
 app/soapbox/features/chats/components/chat-list-item.tsx | 9 ++++++++-
 .../features/edit-profile/components/header-picker.tsx   | 1 +
 .../modals/compose-event-modal/upload-button.tsx         | 2 +-
 app/soapbox/features/ui/components/profile-dropdown.tsx  | 7 ++++++-
 7 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/app/soapbox/components/account.tsx b/app/soapbox/components/account.tsx
index 861b8d475..9536ef6ed 100644
--- a/app/soapbox/components/account.tsx
+++ b/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()}
diff --git a/app/soapbox/components/ui/tabs/tabs.css b/app/soapbox/components/ui/tabs/tabs.css
index 366211c32..e5cb6fe4a 100644
--- a/app/soapbox/components/ui/tabs/tabs.css
+++ b/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] {
diff --git a/app/soapbox/components/ui/toggle/toggle.tsx b/app/soapbox/components/ui/toggle/toggle.tsx
index 0311da8ac..abf7933c5 100644
--- a/app/soapbox/components/ui/toggle/toggle.tsx
+++ b/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>
   );
diff --git a/app/soapbox/features/chats/components/chat-list-item.tsx b/app/soapbox/features/chats/components/chat-list-item.tsx
index 9b54de9ed..82796283d 100644
--- a/app/soapbox/features/chats/components/chat-list-item.tsx
+++ b/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'>
diff --git a/app/soapbox/features/edit-profile/components/header-picker.tsx b/app/soapbox/features/edit-profile/components/header-picker.tsx
index 8339f95ff..036814713 100644
--- a/app/soapbox/features/edit-profile/components/header-picker.tsx
+++ b/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
diff --git a/app/soapbox/features/ui/components/modals/compose-event-modal/upload-button.tsx b/app/soapbox/features/ui/components/modals/compose-event-modal/upload-button.tsx
index 3f3de5a17..eb99634b2 100644
--- a/app/soapbox/features/ui/components/modals/compose-event-modal/upload-button.tsx
+++ b/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
diff --git a/app/soapbox/features/ui/components/profile-dropdown.tsx b/app/soapbox/features/ui/components/profile-dropdown.tsx
index 4b91368cf..c4051314b 100644
--- a/app/soapbox/features/ui/components/profile-dropdown.tsx
+++ b/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>