runfix: address changes to preferences acc-79

.betterer.results

@@ -2058,7 +2058,7 @@ exports[`stricter compilation`] = {
       [92, 79, 34, "Argument of type \'boolean | undefined\' is not assignable to parameter of type \'boolean\'.", "212151669"],
       [120, 6, 9, "Argument of type \'undefined\' is not assignable to parameter of type \'string\'.", "2620553983"]
     ],
-    "src/script/page/MainContent/panels/preferences/accountPreferences/AccountSecuritySection.tsx:1051373945": [
+    "src/script/page/MainContent/panels/preferences/accountPreferences/AccountSecuritySection.tsx:281427554": [
       [70, 6, 9, "Argument of type \'undefined\' is not assignable to parameter of type \'string\'.", "2620553983"],
       [107, 40, 43, "Argument of type \'string | undefined\' is not assignable to parameter of type \'string\'.\\n  Type \'undefined\' is not assignable to type \'string\'.", "1072333434"]
     ],
@@ -2081,14 +2081,14 @@ exports[`stricter compilation`] = {
       [65, 16, 4, "Argument of type \'null\' is not assignable to parameter of type \'SetStateAction<MediaStream | undefined>\'.", "2087897566"],
       [109, 84, 11, "Type \'MediaStream | undefined\' is not assignable to type \'MediaStream\'.\\n  Type \'undefined\' is not assignable to type \'MediaStream\'.", "4175552125"]
     ],
-    "src/script/page/MainContent/panels/preferences/devices/DeviceDetailsPreferences.test.tsx:2030460021": [
-      [34, 41, 22, "Cannot invoke an object which is possibly \'undefined\'.", "1980738780"],
+    "src/script/page/MainContent/panels/preferences/devices/DeviceDetailsPreferences.test.tsx:1195297224": [
+      [35, 41, 22, "Cannot invoke an object which is possibly \'undefined\'.", "1980738780"],
       [41, 21, 12, "Argument of type \'string | undefined\' is not assignable to parameter of type \'Matcher\'.\\n  Type \'undefined\' is not assignable to type \'Matcher\'.", "2075561852"]
     ],
-    "src/script/page/MainContent/panels/preferences/devices/DevicesPreferences.tsx:3136549338": [
-      [67, 90, 10, "Type \'undefined\' is not assignable to type \'boolean\'.", "3231345145"],
-      [124, 8, 14, "Type \'(device: ClientEntity) => Promise<string | undefined>\' is not assignable to type \'(device: ClientEntity) => Promise<string>\'.\\n  Type \'Promise<string | undefined>\' is not assignable to type \'Promise<string>\'.\\n    Type \'string | undefined\' is not assignable to type \'string\'.\\n      Type \'undefined\' is not assignable to type \'string\'.", "223037395"],
-      [131, 73, 37, "Argument of type \'Conversation | undefined\' is not assignable to parameter of type \'Conversation\'.\\n  Type \'undefined\' is not assignable to type \'Conversation\'.", "3769528030"]
+    "src/script/page/MainContent/panels/preferences/devices/DevicesPreferences.tsx:1737777952": [
+      [76, 90, 10, "Type \'undefined\' is not assignable to type \'boolean\'.", "3231345145"],
+      [140, 8, 14, "Type \'(device: ClientEntity) => Promise<string | undefined>\' is not assignable to type \'(device: ClientEntity) => Promise<string>\'.\\n  Type \'Promise<string | undefined>\' is not assignable to type \'Promise<string>\'.\\n    Type \'string | undefined\' is not assignable to type \'string\'.\\n      Type \'undefined\' is not assignable to type \'string\'.", "223037395"],
+      [147, 73, 37, "Argument of type \'Conversation | undefined\' is not assignable to parameter of type \'Conversation\'.\\n  Type \'undefined\' is not assignable to type \'Conversation\'.", "3769528030"]
     ],
     "src/script/page/message-list/InputBarControls/InputBarControls.test.tsx:2517377529": [
       [33, 2, 12, "Type \'undefined\' is not assignable to type \'Conversation\'.", "1670678216"]

package.json

@@ -3,7 +3,7 @@
     "@emotion/react": "11.9.0",
     "@wireapp/avs": "8.2.8",
     "@wireapp/core": "29.1.7",
-    "@wireapp/react-ui-kit": "8.13.4",
+    "@wireapp/react-ui-kit": "8.13.5",
     "@wireapp/store-engine-dexie": "1.6.10",
     "@wireapp/store-engine-sqleet": "1.7.14",
     "@wireapp/webapp-events": "0.13.2",

src/i18n/en-US.json

@@ -903,6 +903,8 @@
   "participantDevicesDetailResetSession": "Reset session",
   "participantDevicesDetailShowMyDevice": "Show my device fingerprint",
   "participantDevicesDetailVerify": "Verified",
+  "preferencesDeviceNotVerified": "not verified",
+  "preferencesDevice": "Device",
   "participantDevicesHeader": "Devices",
   "participantDevicesHeadline": "{{brandName}} gives every device a unique fingerprint. Compare them with {{user}} and verify your conversation.",
   "participantDevicesLearnMore": "Learn more",

src/script/components/avatar/UserAvatar.tsx

@@ -89,7 +89,6 @@ const UserAvatar: React.FunctionComponent<UserAvatarProps> = ({
       <AvatarBackground backgroundColor={backgroundColor} />
 
       {initials && <AvatarInitials avatarSize={avatarSize} initials={initials} />}
-
       <AvatarImage
         avatarSize={avatarSize}
         avatarAlt={avatarImgAlt}

src/script/page/AccentColorPicker.tsx

@@ -96,10 +96,17 @@ const AccentColorPicker: React.FunctionComponent<AccentColorPickerProps> = ({use
                       border: '1px solid currentColor',
                     },
                     '&:focus-visible + label': {
-                      outline: '1px solid var(--accent-color-focus)',
+                      backgroundColor: 'var(--gray-20)',
+                      'body.theme-dark &': {
+                        backgroundColor: 'var(--gray-90)',
+                      },
+                      boxShadow: 'inset 0 0 0 1px var(--accent-color-focus)',
                     },
-                    '&:hover + label > span:first-child::after': {
-                      ...CSS_SQUARE(11),
+                    '&:hover + label': {
+                      backgroundColor: 'var(--gray-20)',
+                      'body.theme-dark &': {
+                        backgroundColor: 'var(--gray-90)',
+                      },
                     },
                     opacity: 0,
                     position: 'absolute',

src/script/page/MainContent/panels/preferences/AboutPreferences.tsx

@@ -17,14 +17,14 @@
  *
  */
 
+import {Link, LinkVariant} from '@wireapp/react-ui-kit';
 import React, {useMemo} from 'react';
 import {container} from 'tsyringe';
 import {t} from 'Util/LocalizerUtil';
 import {Config} from '../../../../Config';
 import {getPrivacyPolicyUrl, getTermsOfUsePersonalUrl, getTermsOfUseTeamUrl, URL} from '../../../../externalRoute';
 import {UserState} from '../../../../user/UserState';
 import {useKoSubscribableChildren} from '../../../../util/ComponentUtil';
-import PreferencesLink from './components/PreferencesLink';
 import PreferencesPage from './components/PreferencesPage';
 import PreferencesSection from './components/PreferencesSection';
 
@@ -54,14 +54,24 @@ const AboutPreferences: React.FC<AboutPreferencesProps> = ({userState = containe
         <PreferencesSection title={t('preferencesAboutSupport')}>
           <ul className="preferences-about-list">
             <li className="preferences-about-list-item">
-              <PreferencesLink href={config.URL.SUPPORT.INDEX} uie="go-support">
+              <Link
+                variant={LinkVariant.PRIMARY}
+                targetBlank
+                href={config.URL.SUPPORT.INDEX}
+                data-uie-name="go-support"
+              >
                 {t('preferencesAboutSupportWebsite')}
-              </PreferencesLink>
+              </Link>
             </li>
             <li className="preferences-about-list-item">
-              <PreferencesLink href={config.URL.SUPPORT.CONTACT} uie="go-contact-support">
+              <Link
+                variant={LinkVariant.PRIMARY}
+                targetBlank
+                href={config.URL.SUPPORT.CONTACT}
+                data-uie-name="go-contact-support"
+              >
                 {t('preferencesAboutSupportContact')}
-              </PreferencesLink>
+              </Link>
             </li>
           </ul>
         </PreferencesSection>
@@ -71,23 +81,23 @@ const AboutPreferences: React.FC<AboutPreferencesProps> = ({userState = containe
           <ul className="preferences-about-list">
             {termsOfUseUrl && (
               <li className="preferences-about-list-item">
-                <PreferencesLink href={termsOfUseUrl} uie="go-legal">
+                <Link variant={LinkVariant.PRIMARY} targetBlank href={termsOfUseUrl} data-uie-name="go-legal">
                   {t('preferencesAboutTermsOfUse')}
-                </PreferencesLink>
+                </Link>
               </li>
             )}
             {privacyPolicyUrl && (
               <li className="preferences-about-list-item">
-                <PreferencesLink href={privacyPolicyUrl} uie="go-privacy">
+                <Link variant={LinkVariant.PRIMARY} targetBlank href={privacyPolicyUrl} data-uie-name="go-privacy">
                   {t('preferencesAboutPrivacyPolicy')}
-                </PreferencesLink>
+                </Link>
               </li>
             )}
             {websiteUrl && (
               <li className="preferences-about-list-item">
-                <PreferencesLink href={websiteUrl} uie="go-wire-dot-com">
+                <Link variant={LinkVariant.PRIMARY} targetBlank href={websiteUrl} data-uie-name="go-wire-dot-com">
                   {t('preferencesAboutWebsite', config.BRAND_NAME)}
-                </PreferencesLink>
+                </Link>
               </li>
             )}
           </ul>

src/script/page/MainContent/panels/preferences/accountPreferences/AccountSecuritySection.tsx

@@ -86,7 +86,7 @@ const AccountSecuritySection: React.FC<AccountSecuritySectionProps> = ({
       )}
 
       {createTeamUrl && !isMacOsWrapper && (
-        <Link variant={LinkVariant.PRIMARY} href={createTeamUrl} data-uie-name="do-create-team">
+        <Link variant={LinkVariant.PRIMARY} targetBlank href={createTeamUrl} data-uie-name="do-create-team">
           {t('preferencesAccountCreateTeam')}
         </Link>
       )}

src/script/page/MainContent/panels/preferences/avPreferences/SaveCallLogs.tsx

@@ -30,6 +30,7 @@ import PreferencesSection from '../components/PreferencesSection';
 import type {CallingRepository} from '../../../../../calling/CallingRepository';
 import {ModalsViewModel} from '../../../../../view_model/ModalsViewModel';
 import {UserState} from '../../../../../user/UserState';
+import {Button, ButtonVariant} from '@wireapp/react-ui-kit';
 
 interface SaveCallLogsProps {
   callingRepository: CallingRepository;
@@ -62,15 +63,15 @@ const SaveCallLogs: React.FC<SaveCallLogsProps> = ({callingRepository, userState
   return (
     <PreferencesSection title={t('preferencesOptionsCallLogs')}>
       <div className="preferences-option">
-        <button
-          className="button-text-primary"
+        <Button
+          variant={ButtonVariant.TERTIARY}
           onClick={saveCallLogs}
           data-uie-name="get-call-logs"
           aria-describedby="call-logs-description"
           type="button"
         >
           {t('preferencesOptionsCallLogsGet')}
-        </button>
+        </Button>
       </div>
       <p id="call-logs-description" className="preferences-detail">
         {t('preferencesOptionsCallLogsDetail', brandName)}

src/script/page/MainContent/panels/preferences/devices/DeviceDetailsPreferences.test.tsx

@@ -21,6 +21,7 @@ import {act, render, waitFor} from '@testing-library/react';
 import DeviceDetailsPreferences from './DeviceDetailsPreferences';
 import {ClientEntity} from 'src/script/client/ClientEntity';
 import {createRandomUuid} from 'Util/util';
+import {withTheme} from 'src/script/auth/util/test/TestUtil';
 
 describe('DeviceDetailsPreferences', () => {
   const device = new ClientEntity(true, '', createRandomUuid());
@@ -34,16 +35,15 @@ describe('DeviceDetailsPreferences', () => {
     onResetSession: jest.fn().mockResolvedValue(undefined),
     onVerify: jest.fn((_, isVerified) => device.meta.isVerified(isVerified)),
   };
-
   it('shows device details', async () => {
-    const {getByText, getAllByText} = render(<DeviceDetailsPreferences {...defaultParams} />);
+    const {getByText, getAllByText} = render(withTheme(<DeviceDetailsPreferences {...defaultParams} />));
     await waitFor(() => getAllByText('00'));
 
     expect(getByText(device.model)).toBeDefined();
   });
 
   it('resets session with device', async () => {
-    const {getByText, getAllByText, queryByText} = render(<DeviceDetailsPreferences {...defaultParams} />);
+    const {getByText, getAllByText, queryByText} = render(withTheme(<DeviceDetailsPreferences {...defaultParams} />));
     await waitFor(() => getAllByText('00'));
     jest.useFakeTimers();
     act(() => {
@@ -68,7 +68,7 @@ describe('DeviceDetailsPreferences', () => {
   });
 
   it('toggles verification', async () => {
-    const {getByText, getAllByText} = render(<DeviceDetailsPreferences {...defaultParams} />);
+    const {getByText, getAllByText} = render(withTheme(<DeviceDetailsPreferences {...defaultParams} />));
     await waitFor(() => getAllByText('00'));
 
     act(() => {

src/script/page/MainContent/panels/preferences/devices/DeviceDetailsPreferences.tsx

@@ -24,6 +24,7 @@ import {t} from 'Util/LocalizerUtil';
 import DetailedDevice from './components/DetailedDevice';
 import {MotionDuration} from '../../../../../motion/MotionDuration';
 import {useKoSubscribableChildren} from 'Util/ComponentUtil';
+import {Button, ButtonVariant} from '@wireapp/react-ui-kit';
 
 interface DevicesPreferencesProps {
   device: ClientEntity;
@@ -80,7 +81,6 @@ const DeviceDetailsPreferences: React.FC<DevicesPreferencesProps> = ({
               onClick={onClose}
               data-uie-name="go-back"
             />
-            <span>{t('preferencesDevices')}</span>
           </legend>
           <DetailedDevice device={device} fingerprint={fingerprint} />
 
@@ -113,14 +113,15 @@ const DeviceDetailsPreferences: React.FC<DevicesPreferencesProps> = ({
           <div className="preferences-info">{t('preferencesDevicesSessionDetail')}</div>
           <div className="preferences-devices-session" data-uie-name="preferences-device-details-session">
             {resetState === SessionResetState.RESET && (
-              <button
+              <Button
+                variant={ButtonVariant.TERTIARY}
                 type="button"
-                className="preferences-button button button-small button-fluid"
+                className="preferences-button"
                 onClick={resetSession}
                 data-uie-name="do-session-reset"
               >
                 {t('preferencesDevicesSessionReset')}
-              </button>
+              </Button>
             )}
             {resetState === SessionResetState.ONGOING && (
               <div className="preferences-devices-session-reset">{t('preferencesDevicesSessionOngoing')}</div>
@@ -136,14 +137,15 @@ const DeviceDetailsPreferences: React.FC<DevicesPreferencesProps> = ({
         {!device.isLegalHold() && (
           <section className="preferences-section">
             <div className="preferences-info">{t('preferencesDevicesRemoveDetail')}</div>
-            <button
+            <Button
+              variant={ButtonVariant.TERTIARY}
               type="button"
-              className="preferences-button button button-small button-fluid"
+              className="preferences-button"
               onClick={() => onRemove(device)}
               data-uie-name="go-remove-device"
             >
               {t('preferencesDevicesRemove')}
-            </button>
+            </Button>
           </section>
         )}
       </div>

src/script/page/MainContent/panels/preferences/devices/DevicesPreferences.tsx

@@ -52,23 +52,36 @@ const Device: React.FC<{
   isSSO: boolean;
   onRemove: (device: ClientEntity) => void;
   onSelect: (device: ClientEntity) => void;
-}> = ({device, isSSO, onSelect, onRemove}) => {
+  deviceNumber: number;
+}> = ({device, isSSO, onSelect, onRemove, deviceNumber}) => {
   const {isVerified} = useKoSubscribableChildren(device.meta, ['isVerified']);
-
+  const verifiedLabel = isVerified ? t('preferencesDevicesVerification') : t('preferencesDeviceNotVerified');
+  const deviceAriaLabel = `${t('preferencesDevice')} ${deviceNumber}, ${device.getName()}, ${verifiedLabel}`;
+  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    onRemove(device);
+  };
+  const handleKeyPress = (e: React.KeyboardEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+  };
   return (
     <div
-      role="button"
-      tabIndex={0}
       className="preferences-devices-card"
       onClick={() => onSelect(device)}
       onKeyDown={e => handleKeyDown(e, onSelect.bind(null, device))}
+      tabIndex={0}
+      role="button"
     >
       <div className="preferences-devices-card-data">
         <div className="preferences-devices-card-icon" data-uie-value={device.id} data-uie-name="device-id">
           <VerifiedIcon data-uie-name={`user-device-${isVerified ? '' : 'not-'}verified`} isVerified={isVerified} />
         </div>
         <div className="preferences-devices-card-info">
-          <div className="preferences-devices-model" data-uie-name="preferences-device-active-model">
+          <div
+            className="preferences-devices-model"
+            data-uie-name="preferences-device-active-model"
+            aria-label={deviceAriaLabel}
+          >
             {device.getName()}
           </div>
           <div className="preferences-devices-id">
@@ -85,16 +98,19 @@ const Device: React.FC<{
             aria-label={t('preferencesDevicesRemove')}
             type="button"
             className={`preferences-devices-card-action__delete ${isSSO && 'svg-red'}`}
-            onClick={event => {
-              event.stopPropagation();
-              onRemove(device);
-            }}
+            onClick={handleClick}
+            onKeyDown={handleKeyPress}
             data-uie-name="do-device-remove"
           >
             <Icon.Delete />
           </button>
         )}
-        <div className="icon-forward preferences-devices-card-action__forward" data-uie-name="go-device-details" />
+        <button
+          className="icon-forward preferences-devices-card-action__forward"
+          data-uie-name="go-device-details"
+          aria-label={t('accessibility.headings.preferencesDeviceDetails')}
+          aria-hidden
+        ></button>
       </div>
     </div>
   );
@@ -148,13 +164,14 @@ const DevicesPreferences: React.FC<DevicesPreferencesProps> = ({
         {clients.length > 0 && (
           <fieldset className="preferences-section">
             <legend className="preferences-header">{t('preferencesDevicesActive')}</legend>
-            {clients.map(device => (
+            {clients.map((device, index) => (
               <Device
                 device={device}
                 key={device.id}
                 isSSO={isSSO}
                 onSelect={setSelectedDevice}
                 onRemove={removeDevice}
+                deviceNumber={++index}
               />
             ))}
             <div className="preferences-detail">{t('preferencesDevicesActiveDetail')}</div>

src/style/common/slider.less

@@ -81,4 +81,10 @@
       }
     }
   }
+
+  &:focus-visible + label {
+    .focus-outline;
+    .focus-offset;
+    .focus-border-radius;
+  }
 }

src/style/common/typing.less

@@ -136,3 +136,11 @@
 .focus-border-radius {
   border-radius: 4px;
 }
+
+.focus-default {
+  &:focus-visible {
+    .focus-outline;
+    .focus-offset;
+    .focus-border-radius;
+  }
+}

src/style/content/preferences.less

@@ -47,7 +47,6 @@ body.theme-dark {
   min-width: 560px;
   height: 100%;
   padding: 32px 32px 32px 72px;
-  color: var(--background);
   overflow-x: hidden;
 
   input {
@@ -61,7 +60,6 @@ body.theme-dark {
 
 .preferences-detail {
   margin-top: 10px;
-  color: var(--gray-90);
   font-size: @font-size-small;
   line-height: 14px;