chore: Use beta version of web-packages on dev [WPB-21306]

.eslintrc.js

@@ -62,6 +62,8 @@ module.exports = {
       rules: {
         'no-magic-numbers': 'off',
         'id-length': 'off',
+        'react-hooks/rules-of-hooks': 'off',
+        'react-hooks/exhaustive-deps': 'off',
       },
     },
   ],

package.json

@@ -13,25 +13,25 @@
     "@mediapipe/tasks-vision": "0.10.21",
     "@tanstack/react-table": "8.21.3",
     "@tanstack/react-virtual": "3.13.4",
-    "@wireapp/avs": "10.2.17",
+    "@wireapp/avs": "10.2.19",
     "@wireapp/avs-debugger": "0.0.7",
-    "@wireapp/commons": "5.4.9",
-    "@wireapp/core": "46.46.3",
+    "@wireapp/commons": "5.4.10-beta.54.5ce5ca523",
+    "@wireapp/core": "46.46.5-beta.8.5ce5ca523",
     "@wireapp/kalium-backup": "0.0.4",
-    "@wireapp/promise-queue": "2.4.9",
-    "@wireapp/react-ui-kit": "9.69.6",
-    "@wireapp/store-engine-dexie": "2.1.16",
-    "@wireapp/telemetry": "0.3.1",
-    "@wireapp/webapp-events": "0.28.1",
+    "@wireapp/promise-queue": "2.4.10-beta.54.5ce5ca523",
+    "@wireapp/react-ui-kit": "9.69.7-beta.11.d0ceefa60",
+    "@wireapp/store-engine-dexie": "2.1.21-beta.54.5ce5ca523",
+    "@wireapp/telemetry": "0.3.7-beta.51.d0ceefa60",
+    "@wireapp/webapp-events": "0.28.6-beta.51.d0ceefa60",
     "amplify": "https://github.com/wireapp/amplify#head=master",
     "beautiful-react-hooks": "5.0.3",
     "classnames": "2.5.1",
     "copy-webpack-plugin": "13.0.1",
-    "core-js": "3.46.0",
+    "core-js": "3.47.0",
     "date-fns": "4.1.0",
     "dexie-batch": "0.4.3",
     "dexie-encrypted": "2.0.0",
-    "emoji-picker-react": "4.15.1",
+    "emoji-picker-react": "4.15.2",
     "http-status-codes": "2.3.0",
     "immer": "10.2.0",
     "jimp": "0.22.12",
@@ -45,7 +45,7 @@
     "long": "5.3.2",
     "markdown-it": "14.0.0",
     "murmurhash": "2.0.1",
-    "oidc-client-ts": "3.4.0",
+    "oidc-client-ts": "3.4.1",
     "path-to-regexp": "8.3.0",
     "platform": "1.3.6",
     "prism-themes": "^1.9.0",
@@ -115,15 +115,15 @@
     "@types/webpack-bundle-analyzer": "^4",
     "@types/webpack-env": "1.18.8",
     "@types/wicg-file-system-access": "^2023.10.7",
-    "@wireapp/copy-config": "2.3.4",
-    "@wireapp/eslint-config": "3.0.7",
-    "@wireapp/prettier-config": "0.6.9",
-    "@wireapp/store-engine": "5.1.16",
+    "@wireapp/copy-config": "2.3.9-beta.48.a0e2528f5",
+    "@wireapp/eslint-config": "3.1.8-beta.54.5ce5ca523",
+    "@wireapp/prettier-config": "0.6.10-beta.54.5ce5ca523",
+    "@wireapp/store-engine": "5.1.17-beta.54.5ce5ca523",
     "archiver": "7.0.1",
     "autoprefixer": "10.4.22",
     "babel-loader": "10.0.0",
     "babel-plugin-transform-import-meta": "2.3.3",
-    "baseline-browser-mapping": "^2.8.28",
+    "baseline-browser-mapping": "^2.8.31",
     "browserslist": "^4.28.0",
     "cross-env": "7.0.3",
     "css-loader": "7.1.2",
@@ -135,7 +135,7 @@
     "eslint-plugin-prettier": "5.1.3",
     "fake-indexeddb": "6.2.5",
     "generate-changelog": "1.8.0",
-    "html-webpack-plugin": "5.6.4",
+    "html-webpack-plugin": "5.6.5",
     "husky": "9.1.7",
     "i18next-scanner": "4.6.0",
     "intersection-observer": "0.12.2",
@@ -164,19 +164,19 @@
     "simple-git": "3.30.0",
     "sinon": "18.0.0",
     "style-loader": "4.0.0",
-    "stylelint": "16.25.0",
+    "stylelint": "16.26.0",
     "stylelint-config-idiomatic-order": "10.0.0",
     "svg-inline-loader": "0.8.2",
     "text-encoding": "0.7.0",
     "ts-node": "10.9.2",
     "tsc-watch": "6.2.1",
     "typescript": "5.5.2",
-    "webpack": "5.102.1",
+    "webpack": "5.103.0",
     "webpack-bundle-analyzer": "^4.10.2",
     "webpack-cli": "6.0.1",
     "webpack-dev-middleware": "7.4.5",
     "webpack-hot-middleware": "2.26.1",
-    "workbox-webpack-plugin": "7.3.0"
+    "workbox-webpack-plugin": "7.4.0"
   },
   "engines": {
     "yarn": ">= 4.1.1",
@@ -237,7 +237,8 @@
     "xml2js": "0.5.0",
     "@stablelib/utf8": "1.0.2",
     "[email protected]": "patch:dexie-encrypted@npm%3A2.0.0#./.yarn/patches/dexie-encrypted-npm-2.0.0-eb61eb5975.patch",
-    "axios": "^1.9.0"
+    "axios": "^1.9.0",
+    "js-yaml": "^4.1.0"
   },
   "version": "0.27.0",
   "packageManager": "[email protected]"

server/package.json

@@ -33,7 +33,7 @@
     "@types/node": "22.5.5",
     "browserslist": "^4.28.0",
     "jest": "29.7.0",
-    "rimraf": "6.1.0",
+    "rimraf": "6.1.2",
     "typescript": "5.6.3"
   },
   "resolutions": {

server/yarn.lock

@@ -4796,15 +4796,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rimraf@npm:6.1.0":
-  version: 6.1.0
-  resolution: "rimraf@npm:6.1.0"
+"rimraf@npm:6.1.2":
+  version: 6.1.2
+  resolution: "rimraf@npm:6.1.2"
   dependencies:
-    glob: "npm:^11.0.3"
+    glob: "npm:^13.0.0"
     package-json-from-dist: "npm:^1.0.1"
   bin:
     rimraf: dist/esm/bin.mjs
-  checksum: 10/ce376c041ef4212dce2b30690dff3c09fc34253ec21821dffec77731061241888c04c3baf0b052bc5a1698b9f348c08ef83bddbd6e2553e79bf939bedb1a31a9
+  checksum: 10/add8e566fe903f59d7b55c6c2382320c48302778640d1951baf247b3b451af496c2dee7195c204a8c646fd6327feadd1f5b61ce68c1362d4898075a726d83cc6
   languageName: node
   linkType: hard
 
@@ -5555,7 +5555,7 @@ __metadata:
     nocache: "npm:4.0.0"
     opn: "npm:6.0.0"
     pm2: "npm:6.0.13"
-    rimraf: "npm:6.1.0"
+    rimraf: "npm:6.1.2"
     typescript: "npm:5.6.3"
   languageName: unknown
   linkType: soft

src/i18n/en-US.json

@@ -270,6 +270,8 @@
   "authLoginTitle": "Log in",
   "authPlaceholderEmail": "Email",
   "authPlaceholderPassword": "Password",
+  "showTogglePasswordLabel": "Show password",
+  "hideTogglePasswordLabel": "Hide password",
   "authPostedResend": "Resend to {email}",
   "authPostedResendAction": "No email showing up?",
   "authPostedResendDetail": "Check your email inbox and follow the instructions.",
@@ -1969,6 +1971,8 @@
   "verify.headline": "You’ve got mail",
   "verify.resendCode": "Resend code",
   "verify.subhead": "Enter the six-digit verification code we sent to{newline}{email}",
+  "verify.codeLabel": "Six-digit code",
+  "verify.codePlaceholder": "Input field, enter digit",
   "videoCallMenuMoreAddReaction": "Add reaction",
   "videoCallMenuMoreAudioSettings": "Audio Settings",
   "videoCallMenuMoreChangeView": "Change view",

src/script/auth/component/AccountForm.tsx

@@ -248,6 +248,8 @@ const AccountFormComponent = ({
           placeholder={t('accountForm.passwordPlaceholder')}
           pattern={ValidationUtil.getNewPasswordPattern(Config.getConfig().NEW_PASSWORD_MINIMUM_LENGTH)}
           data-uie-name="enter-password"
+          showTogglePasswordLabel={t('showTogglePasswordLabel')}
+          hideTogglePasswordLabel={t('hideTogglePasswordLabel')}
         />
         <Text muted css={styles.passwordInfo(!!validationErrors.length)} data-uie-name="element-password-help">
           {t('accountForm.passwordHelp', {minPasswordLength: String(Config.getConfig().NEW_PASSWORD_MINIMUM_LENGTH)})}
@@ -269,6 +271,8 @@ const AccountFormComponent = ({
           placeholder={t('accountForm.confirmPasswordPlaceholder')}
           pattern={`^${registrationData.password?.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}$`}
           data-uie-name="enter-confirm-password"
+          showTogglePasswordLabel={t('showTogglePasswordLabel')}
+          hideTogglePasswordLabel={t('hideTogglePasswordLabel')}
         />
 
         <Exception errors={[authError, ...validationErrors]} />

src/script/auth/component/BackButton.tsx

@@ -27,12 +27,14 @@ export const BackButton = () => {
   const navigate = useNavigate();
 
   return (
-    <ArrowIcon
+    <button
+      type="button"
       onClick={() => navigate(-1)}
-      direction="left"
-      data-uie-name="go-index"
       aria-label={t('createPersonalAccount.goBack')}
-      color={COLOR.TEXT}
-    />
+      data-uie-name="go-index"
+      css={{background: 'none', border: 'none', cursor: 'pointer'}}
+    >
+      <ArrowIcon direction="left" aria-hidden="true" focusable="false" color={COLOR.TEXT} />
+    </button>
   );
 };

src/script/auth/component/ClientItem.tsx

@@ -311,6 +311,8 @@ const ClientItem = ({selected, onClientRemoval, onClick, client, clientError, re
                     placeholder={t('clientItem.passwordPlaceholder')}
                     required
                     type="password"
+                    showTogglePasswordLabel={t('showTogglePasswordLabel')}
+                    hideTogglePasswordLabel={t('hideTogglePasswordLabel')}
                     value={password}
                   />
                 </FlexBox>

src/script/auth/component/JoinGuestLinkPasswordModal.tsx

@@ -83,6 +83,8 @@ const JoinGuestLinkPasswordModal = ({
             id="guest_link_join_password"
             className="modal__input"
             type="password"
+            showTogglePasswordLabel={t('showTogglePasswordLabel')}
+            hideTogglePasswordLabel={t('hideTogglePasswordLabel')}
             autoComplete="off"
             value={passwordValue}
             onChange={event => setPasswordValue(event.currentTarget.value)}

src/script/auth/component/LoginForm.tsx

@@ -140,6 +140,8 @@ const LoginForm = ({isFetching, onSubmit}: LoginFormProps) => {
         pattern={'.{1,1024}'}
         required
         data-uie-name="enter-password"
+        showTogglePasswordLabel={t('showTogglePasswordLabel')}
+        hideTogglePasswordLabel={t('hideTogglePasswordLabel')}
       />
 
       {isFetching ? (

src/script/auth/component/RouteA11y.tsx

@@ -0,0 +1,25 @@
+/*
+ * Wire
+ * Copyright (C) 2025 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import {useRouteA11y} from '../hooks/useRouteA11y';
+
+export const RouteA11y: React.FC = (): null => {
+  useRouteA11y();
+  return null;
+};

src/script/auth/hooks/useRouteA11y.ts

@@ -0,0 +1,53 @@
+/*
+ * Wire
+ * Copyright (C) 2025 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import {useEffect} from 'react';
+
+import {useLocation} from 'react-router-dom';
+
+export function useRouteA11y(screenKey?: string) {
+  const location = useLocation();
+
+  useEffect(() => {
+    const focusTarget: HTMLElement | null =
+      document.querySelector<HTMLElement>('[data-page-title]') ||
+      document.querySelector<HTMLElement>('main,[role="main"]') ||
+      document.querySelector<HTMLElement>('h1');
+
+    if (!focusTarget) {
+      return;
+    }
+
+    // scroll to top on each route change
+    window.scrollTo({top: 0, left: 0});
+
+    const element = focusTarget;
+    element.setAttribute('tabindex', '-1');
+    element.classList.add('sr-only-focus');
+    element.focus({preventScroll: true});
+
+    // remove tabindex after blur
+    const handleBlur = () => {
+      element.classList.remove('sr-only-focus');
+      element.removeAttribute('tabindex');
+      element.removeEventListener('blur', handleBlur);
+    };
+    element.addEventListener('blur', handleBlur);
+  }, [location.key, screenKey]);
+}

src/script/auth/page/CreatePersonalAccount.tsx

@@ -51,7 +51,9 @@ export const CreatePersonalAccount = () => {
             <div css={styles.backButtonContainer}>
               <BackButton />
             </div>
-            <p css={styles.header}>{t('createPersonalAccount.headLine')}</p>
+            <p css={styles.header} role="heading" aria-level={1} data-page-title tabIndex={-1}>
+              {t('createPersonalAccount.headLine')}
+            </p>
             <AccountForm onSubmit={onSubmit} />
             <p css={styles.footer}>{t('createPersonalAccount.subHeader')}</p>
             <a css={styles.teamCreateButton} href={EXTERNAL_ROUTE.WIRE_TEAMS_SIGNUP} target="_blank" rel="noreferrer">