Merge branch 'focus-styles' into 'develop'

Focus styles, keyboard navigation improvements

See merge request soapbox-pub/soapbox!1933

app/soapbox/components/list.tsx

@@ -21,9 +21,15 @@ const ListItem: React.FC<IListItem> = ({ label, hint, children, onClick }) => {
   const id = uuidv4();
   const domId = `list-group-${id}`;
 
+  const onKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      onClick!();
+    }
+  };
+
   const Comp = onClick ? 'a' : 'div';
   const LabelComp = onClick ? 'span' : 'label';
-  const linkProps = onClick ? { onClick } : {};
+  const linkProps = onClick ? { onClick, onKeyDown, tabIndex: 0, role: 'link' } : {};
 
   const renderChildren = React.useCallback(() => {
     return React.Children.map(children, (child) => {

app/soapbox/components/sidebar-menu.tsx

@@ -134,9 +134,11 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
   if (!account) return null;
 
   return (
-    <div className={classNames('sidebar-menu__root', {
+    <div
-      'sidebar-menu__root--visible': sidebarOpen,
+      className={classNames('sidebar-menu__root', {
-    })}
+        'sidebar-menu__root--visible': sidebarOpen,
+      })}
+      aria-expanded={sidebarOpen}
     >
       <div
         className={classNames({

app/soapbox/components/status-reply-mentions.tsx

@@ -66,7 +66,7 @@ const StatusReplyMentions: React.FC<IStatusReplyMentions> = ({ status, hoverable
 
   if (to.size > 2) {
     accounts.push(
-      <span key='more' className='hover:underline cursor-pointer' role='presentation' onClick={handleOpenMentionsModal}>
+      <span key='more' className='hover:underline cursor-pointer' role='button' onClick={handleOpenMentionsModal} tabIndex={0}>
         <FormattedMessage id='reply_mentions.more' defaultMessage='{count} more' values={{ count: to.size - 2 }} />
       </span>,
     );

app/soapbox/features/aliases/components/search.tsx

@@ -53,7 +53,7 @@ const Search: React.FC = () => {
           placeholder={intl.formatMessage(messages.search)}
         />
 
-        <div role='button' tabIndex={0} className='search__icon' onClick={handleClear}>
+        <div role='button' tabIndex={hasValue ? 0 : -1} className='search__icon' onClick={handleClear}>
           <Icon src={require('@tabler/icons/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={classNames('svg-icon--backspace', { active: hasValue })} />
         </div>
       </label>

app/styles/components/react-toggle.scss

@@ -8,6 +8,10 @@
   user-select: none;
   -webkit-tap-highlight-color: rgba($base-overlay-background, 0);
   -webkit-tap-highlight-color: transparent;
+
+  &:focus-within .react-toggle-track {
+    @apply ring-2 ring-offset-2 ring-primary-500;
+  }
 }
 
 .react-toggle-screenreader-only {