Fix hover/focus bg overriding active bg in ConversationList

Co-authored-by: trevor-signal <131492920+trevor-signal@users.noreply.github.com>

stylesheets/_modules.scss

@@ -4380,22 +4380,6 @@ button.module-image__border-overlay:focus {
         &:disabled {
           cursor: inherit;
         }
-
-        &:hover:not(:disabled),
-        &:focus:not(:disabled) {
-          @include light-theme {
-            background-color: $color-gray-05;
-            #{$unread-indicator} {
-              border-color: $color-gray-05;
-            }
-          }
-          @include dark-theme {
-            background-color: $color-gray-75;
-            #{$unread-indicator} {
-              border-color: $color-gray-75;
-            }
-          }
-        }
       }
 
       &--is-checkbox {
@@ -4404,15 +4388,20 @@ button.module-image__border-overlay:focus {
         &--disabled {
           cursor: not-allowed;
         }
+      }
 
-        $disabled-selector: '#{&}--disabled';
-        &:hover:not(#{$disabled-selector}),
-        &:focus:not(#{$disabled-selector}) {
-          @include light-theme {
-            background-color: $color-gray-05;
+      &:hover:not(:disabled, &--disabled, &--is-selected),
+      &:focus:not(:disabled, &--disabled, &--is-selected) {
+        @include light-theme {
+          background-color: $color-gray-05;
+          #{$unread-indicator} {
+            border-color: $color-gray-05;
           }
-          @include dark-theme {
-            background-color: $color-gray-75;
+        }
+        @include dark-theme {
+          background-color: $color-gray-75;
+          #{$unread-indicator} {
+            border-color: $color-gray-75;
           }
         }
       }

stylesheets/components/ListTile.scss

@@ -88,7 +88,9 @@ button.ListTile {
 
   &--clickable {
     cursor: pointer;
-    &:hover:not([aria-disabled='true']) {
+
+    &:hover:not([aria-disabled='true'], [aria-selected='true']),
+    &:focus:not([aria-disabled='true'], [aria-selected='true']) {
       @include light-theme {
         background-color: $color-black-alpha-06;
       }

ts/components/ListTile.tsx

@@ -27,6 +27,7 @@ export type Props = {
   // defaults to div
   rootElement?: 'div' | 'button';
   testId?: string;
+  'aria-selected'?: boolean;
 };
 
 /**
@@ -80,6 +81,7 @@ const ListTileImpl = React.forwardRef<HTMLButtonElement, Props>(
       variant = 'item',
       rootElement = 'div',
       testId,
+      ...ariaProps
     }: Props,
     ref
   ) {
@@ -97,6 +99,7 @@ const ListTileImpl = React.forwardRef<HTMLButtonElement, Props>(
       'aria-disabled': disabled ? true : undefined,
       onContextMenu,
       'data-testid': testId,
+      ...ariaProps,
     };
 
     const contents = (

ts/components/conversationList/BaseConversationListItem.tsx

@@ -257,7 +257,7 @@ export const BaseConversationListItem: FunctionComponent<PropsType> =
           className={classNames(
             commonClassNames,
             `${BASE_CLASS_NAME}--is-checkbox`,
-            { [`${BASE_CLASS_NAME}--is-checkbox--disabled`]: disabled }
+            { [`${BASE_CLASS_NAME}--disabled`]: disabled }
           )}
           data-id={identifier}
           data-testid={testId}

ts/services/groupCredentialFetcher.ts

@@ -12,7 +12,8 @@ import * as durations from '../util/durations';
 import { BackOff } from '../util/BackOff';
 import { sleep } from '../util/sleep';
 import { toDayMillis } from '../util/timestamp';
-import { toAciObject, toPniObject, toTaggedPni } from '../types/ServiceId';
+import { toTaggedPni } from '../types/ServiceId';
+import { toPniObject, toAciObject } from '../util/ServiceId';
 import * as log from '../logging/log';
 
 export const GROUP_CREDENTIALS_KEY = 'groupCredentials';

ts/types/ServiceId.ts

@@ -3,7 +3,7 @@
 
 import { v4 as generateUuid } from 'uuid';
 import { z } from 'zod';
-import { Aci, Pni, ServiceId } from '@signalapp/libsignal-client';
+import type { ServiceId, Aci, Pni } from '@signalapp/libsignal-client';
 
 import { isValidUuid } from '../util/isValidUuid';
 import * as log from '../logging/log';
@@ -166,18 +166,6 @@ export const serviceIdSchema = z
     return x;
   });
 
-export function toServiceIdObject(serviceId: ServiceIdString): ServiceId {
-  return ServiceId.parseFromServiceIdString(serviceId);
-}
-
-export function toAciObject(aci: AciString): Aci {
-  return Aci.parseFromServiceIdString(aci);
-}
-
-export function toPniObject(pni: PniString): Pni {
-  return Pni.parseFromServiceIdString(pni);
-}
-
 // Note: getServiceIdString() returns normalized string so we can cast it
 //   without normalizing.
 export function fromServiceIdObject(obj: ServiceId): ServiceIdString {

ts/util/ServiceId.ts

@@ -0,0 +1,17 @@
+// Copyright 2023 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import { Aci, Pni, ServiceId } from '@signalapp/libsignal-client';
+import type { AciString, PniString, ServiceIdString } from '../types/ServiceId';
+
+export function toServiceIdObject(serviceId: ServiceIdString): ServiceId {
+  return ServiceId.parseFromServiceIdString(serviceId);
+}
+
+export function toAciObject(aci: AciString): Aci {
+  return Aci.parseFromServiceIdString(aci);
+}
+
+export function toPniObject(pni: PniString): Pni {
+  return Pni.parseFromServiceIdString(pni);
+}

ts/util/zkgroup.ts

@@ -21,11 +21,11 @@ import {
 import { Aci, Pni, type ServiceId } from '@signalapp/libsignal-client';
 import type { ServiceIdString, AciString, PniString } from '../types/ServiceId';
 import {
-  toServiceIdObject,
   fromServiceIdObject,
   fromAciObject,
   fromPniObject,
 } from '../types/ServiceId';
+import { toServiceIdObject } from './ServiceId';
 import { strictAssert } from './assert';
 
 export * from '@signalapp/libsignal-client/zkgroup';